From cd2cf8ca088db7789d82b6ce3ce4ee91ebf97043 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?=
 <40151420+ldericher@users.noreply.github.com>
Date: Sat, 10 Sep 2022 02:11:36 +0000
Subject: [PATCH] moment -> luxon

---
 ui/package.json                    |  3 ++-
 ui/src/App.vue                     |  2 +-
 ui/src/components/ClockDisplay.vue | 16 +++++++++++-----
 ui/src/components/TitleBar.vue     |  8 ++++----
 ui/yarn.lock                       | 15 ++++++++++-----
 5 files changed, 28 insertions(+), 16 deletions(-)

diff --git a/ui/package.json b/ui/package.json
index b70b85e..20807c5 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/src/App.vue b/ui/src/App.vue
index c26e043..5c8b497 100644
--- a/ui/src/App.vue
+++ b/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>
diff --git a/ui/src/components/ClockDisplay.vue b/ui/src/components/ClockDisplay.vue
index afa956e..e9a0e7b 100644
--- a/ui/src/components/ClockDisplay.vue
+++ b/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 {
-    this.clock = moment().format(this.format);
+  private created(): void {
+    this.interval = setInterval((): void => {
+      this.clock = DateTime.now()
+        .setLocale(navigator.language)
+        .toFormat(this.format);
+    }, 1000);
   }
 
-  private created(): void {
-    setInterval(this.update, 1000);
+  private beforeDestroy(): void {
+    // prevent memory leak
+    clearInterval(this.interval);
   }
 }
 </script>
diff --git a/ui/src/components/TitleBar.vue b/ui/src/components/TitleBar.vue
index ce1a6ab..a7ffb05 100644
--- a/ui/src/components/TitleBar.vue
+++ b/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="H:mm" />
+      <ClockDisplay format="DDD" />
+      <ClockDisplay format="T" />
     </v-col>
-  </v-app-bar>
+  </v-toolbar>
 </template>
 
 <script>
diff --git a/ui/yarn.lock b/ui/yarn.lock
index 3b36885..8bf352e 100644
--- a/ui/yarn.lock
+++ b/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"