From 77cb0c1da20e8f5a724b8841fc6cf421ade1fab1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Sat, 16 Sep 2023 00:17:13 +0000
Subject: [PATCH] ConfigView luxon date formatting

---
 ui/src/components/admin/ConfigView.vue | 40 +++++++++++++++-----------
 1 file changed, 24 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/admin/ConfigView.vue b/ui/src/components/admin/ConfigView.vue
index 25380a8..6550ea8 100644
--- a/ui/src/components/admin/ConfigView.vue
+++ b/ui/src/components/admin/ConfigView.vue
@@ -21,16 +21,16 @@
               <dd v-else><CountDown :millis="next_door" /></dd>
 
               <dt>Erstes Türchen</dt>
-              <dd>{{ config_model.puzzle.first }}</dd>
+              <dd>{{ fmt_puzzle_date("first") }}</dd>
 
               <dt>Nächstes Türchen</dt>
-              <dd>{{ config_model.puzzle.next }}</dd>
+              <dd>{{ fmt_puzzle_date("next") }}</dd>
 
               <dt>Letztes Türchen</dt>
-              <dd>{{ config_model.puzzle.last }}</dd>
+              <dd>{{ fmt_puzzle_date("last") }}</dd>
 
               <dt>Rätsel schließt nach</dt>
-              <dd>{{ config_model.puzzle.end }}</dd>
+              <dd>{{ fmt_puzzle_date("end") }}</dd>
 
               <dt>Zufalls-Seed</dt>
               <dd class="is-family-monospace">
@@ -125,6 +125,7 @@
 
 <script lang="ts">
 import { ConfigModel, DayStrModel, DoorsSaved } from "@/lib/api";
+import { DateTime } from "luxon";
 import { Options, Vue } from "vue-class-component";
 
 import BulmaDrawer from "../bulma/Drawer.vue";
@@ -146,26 +147,26 @@ interface Credentials {
 export default class extends Vue {
   public config_model: ConfigModel = {
     puzzle: {
-      solution: "ABCDEFGHIJKLMNOPQRSTUVWX",
-      first: "01.12.2023",
-      next: "01.12.2023",
-      last: "24.12.2023",
-      end: "01.04.2024",
+      solution: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
+      first: "2023-12-01",
+      next: "2023-12-01",
+      last: "2023-12-24",
+      end: "2024-04-01",
       seed: "",
     },
     calendar: {
-      config_file: "default.toml",
-      background: "adventskalender.jpg",
+      config_file: "lorem ipsum",
+      background: "dolor sit amet",
     },
     image: {
       size: 500,
-      border: 30,
-      fonts: [{ file: "files/Lena.ttf", size: 50 }],
+      border: 0,
+      fonts: [{ file: "consetetur", size: 0 }],
     },
     webdav: {
-      url: "https://example.com/remote.php/webdav/advent22",
-      cache_ttl: 30,
-      config_file: "config.toml",
+      url: "sadipscing elitr",
+      cache_ttl: 0,
+      config_file: "sed diam nonumy",
     },
   };
   public day_parts: DayStrModel[] = [];
@@ -174,6 +175,13 @@ export default class extends Vue {
   public dav_credentials: Credentials = { username: "", password: "" };
   public ui_credentials: Credentials = { username: "", password: "" };
 
+  public fmt_puzzle_date(name: keyof ConfigModel["puzzle"]): string {
+    const iso_date = this.config_model.puzzle[name];
+    if (iso_date === null) return "-";
+
+    return DateTime.fromISO(iso_date).toLocaleString(DateTime.DATE_SHORT);
+  }
+
   public on_open(ready: () => void, fail: () => void): void {
     Promise.all([
       this.$advent22.api_get<ConfigModel>("admin/config_model"),