From 532ee37169ff854a5f4fc72689cfdf489054814b Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Thu, 19 Dec 2024 15:06:41 +0000
Subject: [PATCH] Color holidays

---
 .../src/models/calendar/calendar-entry.ts     |  1 +
 WebDisplay/src/pages/kiosk.vue                | 34 ++++++++++++++-----
 2 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/WebDisplay/src/models/calendar/calendar-entry.ts b/WebDisplay/src/models/calendar/calendar-entry.ts
index 4648f80..3d16ef7 100644
--- a/WebDisplay/src/models/calendar/calendar-entry.ts
+++ b/WebDisplay/src/models/calendar/calendar-entry.ts
@@ -3,4 +3,5 @@ export default interface CalendarEntry {
     isAllDay: boolean;
     start: Date;
     end: Date;
+    isHoliday: boolean;
 }
diff --git a/WebDisplay/src/pages/kiosk.vue b/WebDisplay/src/pages/kiosk.vue
index 83669be..cccd3aa 100644
--- a/WebDisplay/src/pages/kiosk.vue
+++ b/WebDisplay/src/pages/kiosk.vue
@@ -77,7 +77,7 @@
 
     loadCalendar();
 
-    setInterval(() => currentTime.value = new Date(), 1000);
+    setInterval(() => (currentTime.value = new Date()), 1000);
     setInterval(() => loadCalendar(), 30 * 60 * 1000);
 </script>
 
@@ -182,15 +182,18 @@
                         class="kiosk-calendar-day-item"
                         v-for="calendarDay in calendarDays">
                         <div>
-                            <span class="kiosk-calendar-day-item-number">
-                                {{ format(calendarDay.date, 'dd') }}
-                            </span>
-                            <span class="kiosk-calendar-day-item-name">
-                                {{ format(calendarDay.date, 'EEEE') }}
-                            </span>
+                            <div class="kiosk-calendar-day-item-header">
+                                <span class="kiosk-calendar-day-item-number">
+                                    {{ format(calendarDay.date, 'dd') }}
+                                </span>
+                                <span class="kiosk-calendar-day-item-name">
+                                    {{ format(calendarDay.date, 'EEEE') }}
+                                </span>
+                            </div>
                             <ul
                                 class="kiosk-calendar-entry"
-                                v-for="calendarEntry in calendarDay.entries">
+                                v-for="calendarEntry in calendarDay.entries"
+                                :class="calendarEntry.isHoliday ? 'holiday' : ''">
                                 <span>
                                     {{ calendarEntry.summary }}
                                 </span>
@@ -250,7 +253,7 @@
         padding: 0;
         display: grid;
         grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: repeat(2, 1fr);
+        grid-template-rows: repeat(2, 50%);
         grid-auto-flow: row;
         grid-template-areas:
             'kiosk-calendar . .'
@@ -326,11 +329,20 @@
         text-align: center;
     }
 
+    .kiosk-calendar-day-item-header {
+        display: flex;
+        align-items: center;
+    }
+
     .kiosk-calendar-day-item-number {
         font-size: 1.25em;
         padding-right: 0.5em;
     }
 
+    .kiosk-calendar-day-item-name {
+        font-size: 1em;
+    }
+
     .kiosk-calendar-day-list {
         margin-left: 10px;
         overflow: auto;
@@ -362,4 +374,8 @@
     .normal {
         color: #208b20;
     }
+
+    .holiday {
+        color: #5e83c7;
+    }
 </style>