Add excerpt display for national days

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
+    <span>
-        class="national-days"
+        <div
-        v-if="nationalDaysReady">
+            class="national-days"
-        <ul>
+            v-if="nationalDaysReady">
-            <li
+            <ul>
-                class="national-day"
+                <li
-                v-for="nationalDay in nationalDays">
+                    class="national-day"
-                {{ nationalDay.name }}
+                    v-for="nationalDay in nationalDays"
-            </li>
+                    @click="onNationalDayClick(nationalDay)">
-        </ul>
+                    <span>{{ nationalDay.name }}</span>
-    </div>
+                    <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) {
+    .national-day {
-        padding-bottom: 2px;
+        list-style-type: none;
+        line-height: 1.75rem;
+    }
+
+    .national-day-arrow {
+        float: right;
     }
 </style>

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;
 }

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;
     }