From d5171ee5313b716eefaea95d6a1c0368cfe7076c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Fri, 9 Sep 2022 22:41:50 +0000
Subject: [PATCH] TitleBar with Clock component

---
 ui/package.json                    |  1 +
 ui/src/App.vue                     | 19 ++++++++---------
 ui/src/components/ClockDisplay.vue | 33 ++++++++++++++++++++++++++++++
 ui/src/components/TitleBar.vue     | 26 +++++++++++++++++++++++
 ui/yarn.lock                       |  5 +++++
 5 files changed, 74 insertions(+), 10 deletions(-)
 create mode 100644 ui/src/components/ClockDisplay.vue
 create mode 100644 ui/src/components/TitleBar.vue

diff --git a/ui/package.json b/ui/package.json
index 105324d..b70b85e 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
+    "moment": "^2.29.4",
     "register-service-worker": "^1.7.2",
     "vue": "^2.6.14",
     "vue-class-component": "^7.2.3",
diff --git a/ui/src/App.vue b/ui/src/App.vue
index 3c85f6f..c26e043 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,10 +1,6 @@
 <template>
   <v-app>
-    <v-app-bar
-      app
-      color="primary"
-      dark
-    >
+    <!-- <v-app-bar app color="primary" dark>
       <div class="d-flex align-center">
         <v-img
           alt="Vuetify Logo"
@@ -35,23 +31,26 @@
         <span class="mr-2">Latest Release</span>
         <v-icon>mdi-open-in-new</v-icon>
       </v-btn>
-    </v-app-bar>
+    </v-app-bar> -->
+    <TitleBar />
 
     <v-main>
-      <HelloWorld/>
+      <HelloWorld />
     </v-main>
   </v-app>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-import HelloWorld from './components/HelloWorld.vue';
+import Vue from "vue";
+import HelloWorld from "./components/HelloWorld.vue";
+import TitleBar from "./components/TitleBar.vue";
 
 export default Vue.extend({
-  name: 'App',
+  name: "App",
 
   components: {
     HelloWorld,
+    TitleBar,
   },
 
   data: () => ({
diff --git a/ui/src/components/ClockDisplay.vue b/ui/src/components/ClockDisplay.vue
new file mode 100644
index 0000000..9c97880
--- /dev/null
+++ b/ui/src/components/ClockDisplay.vue
@@ -0,0 +1,33 @@
+<template>
+  <div>{{ clock }}</div>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import moment from "moment";
+
+export default Vue.extend({
+  name: "ClockDisplay",
+
+  data: () => ({
+    clock: "",
+  }),
+
+  props: {
+    format: String,
+  },
+
+  methods: {
+    update(): void {
+      this.clock = moment().format(this.format);
+    },
+  },
+
+  created(): void {
+    setInterval(this.update, 1000);
+  },
+});
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
new file mode 100644
index 0000000..13edf8a
--- /dev/null
+++ b/ui/src/components/TitleBar.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-app-bar app color="primary" dark>
+    <v-spacer />
+
+    <v-col>
+      <ClockDisplay format="LL" />
+      <ClockDisplay format="H:mm" />
+    </v-col>
+  </v-app-bar>
+</template>
+
+<script>
+import Vue from "vue";
+import ClockDisplay from "./ClockDisplay.vue";
+
+export default Vue.extend({
+  name: "TitleBar",
+
+  components: {
+    ClockDisplay,
+  },
+});
+</script>
+
+<style>
+</style>
\ No newline at end of file
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 9e1bc84..3b36885 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -4626,6 +4626,11 @@ module-alias@^2.2.2:
   resolved "https://registry.yarnpkg.com/module-alias/-/module-alias-2.2.2.tgz#151cdcecc24e25739ff0aa6e51e1c5716974c0e0"
   integrity sha512-A/78XjoX2EmNvppVWEhM2oGk3x4lLxnkEA4jTbaK97QKSDjkIoOsKQlfylt/d3kKKi596Qy3NP5XrXJ6fZIC9Q==
 
+moment@^2.29.4:
+  version "2.29.4"
+  resolved "https://registry.yarnpkg.com/moment/-/moment-2.29.4.tgz#3dbe052889fe7c1b2ed966fcb3a77328964ef108"
+  integrity sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==
+
 mrmime@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"