From 64f794b1b0b5093118da257c0a40246b6606d963 Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Sat, 21 Dec 2024 23:26:28 +0000
Subject: [PATCH] Add excerpt display for national days

---
 WebDisplay/src/components/NationalDays.vue    | 65 +++++++++++++++----
 .../src/models/calendar/national-day.ts       |  2 +-
 WebDisplay/src/pages/kiosk.vue                | 11 ++--
 3 files changed, 58 insertions(+), 20 deletions(-)

diff --git a/WebDisplay/src/components/NationalDays.vue b/WebDisplay/src/components/NationalDays.vue
index b84386e..41fe2a5 100644
--- a/WebDisplay/src/components/NationalDays.vue
+++ b/WebDisplay/src/components/NationalDays.vue
@@ -4,6 +4,9 @@
     import { setNextDayTimer } from '@/nextDayTimer';
     import NationalDayEntry from '@/models/calendar/national-day';
 
+    const dialog = ref(false);
+    const selectedNationalDay = ref({} as NationalDayEntry);
+
     const calendarStore = useCalendarStore();
 
     const nationalDays = ref([] as NationalDayEntry[]);
@@ -11,7 +14,7 @@
 
     function loadNationalDays() {
         calendarStore.getNationalDays().then((data) => {
-            nationalDays.value = data.sort((a, b) => a.name.localeCompare(b.name));
+            nationalDays.value = data;
 
             nationalDaysReady.value = true;
 
@@ -19,21 +22,50 @@
         });
     }
 
+    function onNationalDayClick(nationalDay: NationalDayEntry) {
+        selectedNationalDay.value = nationalDay;
+        dialog.value = true;
+    }
+
     loadNationalDays();
 </script>
 
 <template>
-    <div
-        class="national-days"
-        v-if="nationalDaysReady">
-        <ul>
-            <li
-                class="national-day"
-                v-for="nationalDay in nationalDays">
-                {{ nationalDay.name }}
-            </li>
-        </ul>
-    </div>
+    <span>
+        <div
+            class="national-days"
+            v-if="nationalDaysReady">
+            <ul>
+                <li
+                    class="national-day"
+                    v-for="nationalDay in nationalDays"
+                    @click="onNationalDayClick(nationalDay)">
+                    <span>{{ nationalDay.name }}</span>
+                    <v-icon
+                        class="national-day-arrow"
+                        icon="mdi-menu-right" />
+                </li>
+            </ul>
+        </div>
+
+        <v-dialog
+            v-model="dialog"
+            width="50%"
+            theme="dark"
+            opacity="0.85"
+            scrim="black">
+            <v-card
+                :text="selectedNationalDay.excerpt"
+                :title="selectedNationalDay.name + ' - Excerpt'">
+                <template v-slot:actions>
+                    <v-btn
+                        class="ms-auto"
+                        text="Close"
+                        @click="dialog = false"></v-btn>
+                </template>
+            </v-card>
+        </v-dialog>
+    </span>
 </template>
 
 <style>
@@ -43,7 +75,12 @@
         padding: 10px;
     }
 
-    .national-day:not(:last-child) {
-        padding-bottom: 2px;
+    .national-day {
+        list-style-type: none;
+        line-height: 1.75rem;
+    }
+
+    .national-day-arrow {
+        float: right;
     }
 </style>
diff --git a/WebDisplay/src/models/calendar/national-day.ts b/WebDisplay/src/models/calendar/national-day.ts
index 5d5947b..585ed30 100644
--- a/WebDisplay/src/models/calendar/national-day.ts
+++ b/WebDisplay/src/models/calendar/national-day.ts
@@ -1,6 +1,6 @@
 export default interface NationalDayEntry {
     name: string;
     url: string;
-    except: string;
+    excerpt: string;
     type: string;
 }
diff --git a/WebDisplay/src/pages/kiosk.vue b/WebDisplay/src/pages/kiosk.vue
index f042cf5..0466ea3 100644
--- a/WebDisplay/src/pages/kiosk.vue
+++ b/WebDisplay/src/pages/kiosk.vue
@@ -58,7 +58,7 @@
             <div
                 class="kiosk-temperature text-center pb-3"
                 v-if="weatherStore.current">
-                {{ weatherStore.current?.Temperature?.toFixed(0) + '°F' }}
+                {{ weatherStore.current?.Temperature?.toFixed(0) + '°' }}
             </div>
             <div
                 class="kiosk-humidity text-center pb-3"
@@ -201,16 +201,17 @@
 
     .kiosk-content {
         height: 100%;
-        max-height: 100vh;
+        max-height: calc(100vh - 30px);
         padding: 10px;
         gap: 10px;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: repeat(3, auto);
+        grid-template-rows: repeat(4, 25%);
         grid-auto-flow: row;
         grid-template-areas:
             'kiosk-calendar kiosk-national-days kiosk-national-days'
             'kiosk-calendar . .'
+            'kiosk-calendar . .'
             'kiosk-calendar . .';
     }
 
@@ -225,12 +226,12 @@
     }
 
     .kiosk-temperature {
-        font-size: 2.8rem;
+        font-size: 2.9rem;
         grid-area: kiosk-temperature;
     }
 
     .kiosk-humidity {
-        font-size: 2.8rem;
+        font-size: 2.9rem;
         grid-area: kiosk-humidity;
     }