TitleBar with Clock component

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",

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: () => ({

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>

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>

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"