CountDown revamp with luxon

ui/package.json

@@ -20,6 +20,7 @@
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
     "@fortawesome/vue-fontawesome": "^3.0.2",
     "@types/chai": "^4.3.5",
+    "@types/luxon": "^3.3.2",
     "@types/mocha": "^10.0.1",
     "@typescript-eslint/eslint-plugin": "^6.5.0",
     "@typescript-eslint/parser": "^6.5.0",
@@ -36,6 +37,7 @@
     "chai": "^4.2.0",
     "eslint": "^8.48.0",
     "eslint-plugin-vue": "^9.17.0",
+    "luxon": "^3.4.3",
     "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "typescript": "~5.2.2"

ui/src/components/CountDown.vue

@@ -3,6 +3,7 @@
 </template>
 
 <script lang="ts">
+import { Duration } from "luxon";
 import { Options, Vue } from "vue-class-component";
 
 @Options({
@@ -21,28 +22,28 @@ export default class extends Vue {
   private interval_id: number | null = null;
   public string_repr = "";
 
-  private get target_time(): number {
+  private get target_date_ms(): number {
-    const now_time = new Date().getTime();
+    return new Date(Date.now() + this.millis).getTime();
-    return new Date(now_time + this.millis).getTime();
   }
 
   private tick(): void {
-    const now = new Date().getTime();
+    const distance_ms = this.target_date_ms - Date.now();
-    const distance = new Date(this.target_time - now).getTime();
 
-    if (distance <= 0) {
+    if (distance_ms <= 0) {
       this.string_repr = "Jetzt!";
       return;
     }
 
-    const days = Math.floor(distance / (1000 * 60 * 60 * 24));
+    const distance = Duration.fromMillis(distance_ms);
-    const hours = Math.floor(
+    const d_days = distance.shiftTo("day").mapUnits(Math.floor);
-      (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+    const d_hms = distance.minus(d_days).shiftTo("hour", "minute", "second");
-    );
-    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
-    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
 
-    this.string_repr = `${days} Tage, ${hours}:${minutes}:${seconds}`;
+    if (d_days.days > 0) {
+      this.string_repr = d_days.toHuman() + " ";
+    } else {
+      this.string_repr = "";
+    }
+    this.string_repr += d_hms.toFormat("hh:mm:ss");
   }
 
   public mounted(): void {

ui/yarn.lock

@@ -1331,6 +1331,11 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"
   integrity sha512-Hr5Jfhc9eYOQNPYO5WLDq/n4jqijdHNlDXjuAQkkt+mWdQR+XJToOHrsD4cPaMXpn6KO7y2+wM8AZEs8VpBLVA==
 
+"@types/luxon@^3.3.2":
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-3.3.2.tgz#f6e3524c2486b949a4db445e85d93c8e9886dfe2"
+  integrity sha512-l5cpE57br4BIjK+9BSkFBOsWtwv6J9bJpC7gdXIzZyI0vuKvNTk0wZZrkQxMGsUAuGW9+WMNWF2IJMD7br2yeQ==
+
 "@types/mime@*":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
@@ -4892,6 +4897,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+luxon@^3.4.3:
+  version "3.4.3"
+  resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.4.3.tgz#8ddf0358a9492267ffec6a13675fbaab5551315d"
+  integrity sha512-tFWBiv3h7z+T/tDaoxA8rqTxy1CHV6gHS//QdaH4pulbq/JuBSGgQspQQqcgnwdAx6pNI7cmvz5Sv/addzHmUg==
+
 magic-string@^0.30.0:
   version "0.30.3"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.3.tgz#403755dfd9d6b398dfa40635d52e96c5ac095b85"