From 24e9c93eef3b02c93e3bf99801b75e21bb6010eb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B6rn-Michael=20Miehe?= <jmm@yavook.de>
Date: Thu, 21 Sep 2023 00:19:44 +0000
Subject: [PATCH] CalendarAssistant.day_data

---
 ui/src/components/admin/CalendarAssistant.vue | 58 +++++++++++++------
 1 file changed, 39 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/admin/CalendarAssistant.vue b/ui/src/components/admin/CalendarAssistant.vue
index 950b6e5..b053bb9 100644
--- a/ui/src/components/admin/CalendarAssistant.vue
+++ b/ui/src/components/admin/CalendarAssistant.vue
@@ -4,14 +4,16 @@
   <BulmaDrawer header="Kalender-Assistent" @open="on_open" refreshable>
     <div class="card-content">
       <div class="content">
+        <p>Hervorgehobenen Tagen wurde kein Buchstabe zugewiesen.</p>
+
         <h4>Zuordnung Buchstaben</h4>
         <div class="tags are-medium">
-          <template
-            v-for="(day_part, index) in day_parts"
-            :key="`part-${index}`"
-          >
-            <span v-if="day_part.value !== ''" class="tag is-info">
-              {{ day_part.day }}: {{ day_part.value.split("").join(", ") }}
+          <template v-for="(data, day) in day_data" :key="`part-${day}`">
+            <span v-if="data.part === ''" class="tag is-warning">
+              {{ day }}
+            </span>
+            <span v-else class="tag is-info">
+              {{ day }}: {{ data.part.split("").join(", ") }}
             </span>
           </template>
         </div>
@@ -19,23 +21,23 @@
         <h4>Zuordnung Bilder</h4>
         <div class="tags are-medium">
           <span
-            v-for="(day_part, index) in day_image_names"
-            :key="`part-${index}`"
-            class="tag is-primary"
+            v-for="(data, day) in day_data"
+            :key="`image-${day}`"
+            :class="'tag is-' + (data.part === '' ? 'warning' : 'primary')"
           >
-            {{ day_part.day }}: {{ day_part.value }}
+            {{ day }}: {{ data.image_name }}
           </span>
         </div>
 
         <h4>Alle Türchen</h4>
         <div class="tags are-medium">
           <BulmaButton
-            v-for="(day_part, index) in day_parts"
-            :key="`btn-${index}`"
-            class="tag is-info"
+            v-for="(data, day) in day_data"
+            :key="`btn-${day}`"
+            :class="'tag is-' + (data.part === '' ? 'warning' : 'info')"
             icon="fa-solid fa-door-open"
-            :text="`${day_part.day}`"
-            @click.left="door_click(day_part.day)"
+            :text="day"
+            @click.left="door_click(day)"
           />
         </div>
       </div>
@@ -59,8 +61,13 @@ import BulmaDrawer from "../bulma/Drawer.vue";
   },
 })
 export default class extends Vue {
-  public day_parts: DayStrModel[] = [];
-  public day_image_names: DayStrModel[] = [];
+  public day_data: {
+    [day: number]: {
+      part: string;
+      image_name: string;
+    };
+  } = {};
+
   private multi_modal?: MultiModal;
 
   public modal_handle(modal: MultiModal) {
@@ -73,8 +80,21 @@ export default class extends Vue {
       this.$advent22.api_get<DayStrModel[]>("admin/day_image_names"),
     ])
       .then(([day_parts, day_image_names]) => {
-        this.day_parts = day_parts;
-        this.day_image_names = day_image_names;
+        const _ensure_day = (day: number) => {
+          if (!(day in this.day_data)) {
+            this.day_data[day] = { part: "", image_name: "" };
+          }
+        };
+
+        for (const day_part of day_parts) {
+          _ensure_day(day_part.day);
+          this.day_data[day_part.day].part = day_part.value;
+        }
+
+        for (const day_part of day_image_names) {
+          _ensure_day(day_part.day);
+          this.day_data[day_part.day].image_name = day_part.value;
+        }
 
         ready();
       })