moment -> luxon

ui/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "core-js": "^3.8.3",
-    "moment": "^2.29.4",
+    "luxon": "^3.0.3",
     "register-service-worker": "^1.7.2",
     "vue": "^2.6.14",
     "vue-class-component": "^7.2.3",
@@ -17,6 +17,7 @@
     "vuetify": "^2.6.0"
   },
   "devDependencies": {
+    "@types/luxon": "^3.0.1",
     "@typescript-eslint/eslint-plugin": "^5.4.0",
     "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-babel": "~5.0.0",

ui/src/App.vue

@@ -32,9 +32,9 @@
         <v-icon>mdi-open-in-new</v-icon>
       </v-btn>
     </v-app-bar> -->
-    <TitleBar />
 
     <v-main>
+      <TitleBar />
       <HelloWorld />
     </v-main>
   </v-app>

ui/src/components/ClockDisplay.vue

@@ -4,21 +4,27 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import moment from "moment";
+import { DateTime } from "luxon";
 
 @Component
 export default class ClockDisplay extends Vue {
   private clock = "";
+  private interval?: number;
 
   @Prop()
   format!: string;
 
-  private update(): void {
+  private created(): void {
-    this.clock = moment().format(this.format);
+    this.interval = setInterval((): void => {
+      this.clock = DateTime.now()
+        .setLocale(navigator.language)
+        .toFormat(this.format);
+    }, 1000);
   }
 
-  private created(): void {
+  private beforeDestroy(): void {
-    setInterval(this.update, 1000);
+    // prevent memory leak
+    clearInterval(this.interval);
   }
 }
 </script>

ui/src/components/TitleBar.vue

@@ -1,12 +1,12 @@
 <template>
-  <v-app-bar app color="primary" dark>
+  <v-toolbar color="primary" prominent dark>
     <v-spacer />
 
     <v-col>
-      <ClockDisplay format="LL" />
+      <ClockDisplay format="DDD" />
-      <ClockDisplay format="H:mm" />
+      <ClockDisplay format="T" />
     </v-col>
-  </v-app-bar>
+  </v-toolbar>
 </template>
 
 <script>

ui/yarn.lock

@@ -1273,6 +1273,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
+"@types/luxon@^3.0.1":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.0.1.tgz#2b1657096473e24b049bdedf3710f99645f3a17f"
+  integrity sha512-/LAvk1cMOJt0ghzMFrZEvByUhsiEfeeT2IF53Le+Ki3A538yEL9pRZ7a6MuCxdrYK+YNqNIDmrKU/r2nnw04zQ==
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@@ -4483,6 +4488,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.0.3.tgz#573e65531efd3d92265feb640f02ba7a192e2388"
+  integrity sha512-+EfHWnF+UT7GgTnq5zXg3ldnTKL2zdv7QJgsU5bjjpbH17E3qi/puMhQyJVYuCq+FRkogvB5WB6iVvUr+E4a7w==
+
 magic-string@^0.25.0, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -4626,11 +4636,6 @@ 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"