From d069167f59b9489e238861bd427fb8ac0b15b92f Mon Sep 17 00:00:00 2001
From: Chris Kaczor <chris@kaczorzoo.net>
Date: Fri, 20 Dec 2024 19:13:15 +0000
Subject: [PATCH] Stop being lazy and use proper "next day" timer logic

---
 WebDisplay/src/components/CalendarAgenda.vue |  5 ++++-
 WebDisplay/src/components/NationalDays.vue   | 13 +++----------
 WebDisplay/src/nextDayTimer.ts               | 12 ++++++++++++
 WebDisplay/src/pages/kiosk.vue               |  2 +-
 4 files changed, 20 insertions(+), 12 deletions(-)
 create mode 100644 WebDisplay/src/nextDayTimer.ts

diff --git a/WebDisplay/src/components/CalendarAgenda.vue b/WebDisplay/src/components/CalendarAgenda.vue
index e62a9ae..210e1b0 100644
--- a/WebDisplay/src/components/CalendarAgenda.vue
+++ b/WebDisplay/src/components/CalendarAgenda.vue
@@ -2,6 +2,7 @@
     import { ref } from 'vue';
     import { useCalendarStore } from '@/stores/calendarStore';
     import { format, startOfDay, endOfDay } from 'date-fns';
+    import { setNextDayTimer } from '@/nextDayTimer';
     import CalendarDay from '@/models/calendar/calendar-day';
 
     const props = defineProps(['days', 'refreshInterval']);
@@ -46,12 +47,14 @@
             calendarDays.value = newCalendarDays;
 
             calendarReady.value = true;
+
+            setNextDayTimer(loadCalendar, 10000);
         });
     }
 
     loadCalendar();
 
-    setInterval(() => loadCalendar(), props.refreshInterval);
+    setInterval(loadCalendar, props.refreshInterval);
 </script>
 
 <template>
diff --git a/WebDisplay/src/components/NationalDays.vue b/WebDisplay/src/components/NationalDays.vue
index caac44c..b84386e 100644
--- a/WebDisplay/src/components/NationalDays.vue
+++ b/WebDisplay/src/components/NationalDays.vue
@@ -1,32 +1,25 @@
 <script lang="ts" setup>
     import { ref } from 'vue';
     import { useCalendarStore } from '@/stores/calendarStore';
-    import { startOfDay, isEqual } from 'date-fns';
+    import { setNextDayTimer } from '@/nextDayTimer';
     import NationalDayEntry from '@/models/calendar/national-day';
 
     const calendarStore = useCalendarStore();
 
     const nationalDays = ref([] as NationalDayEntry[]);
     const nationalDaysReady = ref(false);
-    const loadedNationalDay = ref(null as Date | null);
 
     function loadNationalDays() {
         calendarStore.getNationalDays().then((data) => {
             nationalDays.value = data.sort((a, b) => a.name.localeCompare(b.name));
 
-            loadedNationalDay.value = startOfDay(new Date());
-
             nationalDaysReady.value = true;
+
+            setNextDayTimer(loadNationalDays, 10000);
         });
     }
 
     loadNationalDays();
-
-    setInterval(() => {
-        if (loadedNationalDay.value && !isEqual(loadedNationalDay.value, startOfDay(new Date()))) {
-            loadNationalDays();
-        }
-    }, 10 * 1000);
 </script>
 
 <template>
diff --git a/WebDisplay/src/nextDayTimer.ts b/WebDisplay/src/nextDayTimer.ts
new file mode 100644
index 0000000..9c6c59b
--- /dev/null
+++ b/WebDisplay/src/nextDayTimer.ts
@@ -0,0 +1,12 @@
+import { addDays, startOfDay } from 'date-fns';
+
+type CallbackFunction = () => void;
+
+export function setNextDayTimer(callback: CallbackFunction, offset: number): void {
+    const now = new Date();
+    const startOfNextDay = startOfDay(addDays(now, 1));
+
+    const millisecondsUntilNextDay = startOfNextDay.getTime() - now.getTime() + offset;
+
+    setTimeout(callback, millisecondsUntilNextDay);
+}
diff --git a/WebDisplay/src/pages/kiosk.vue b/WebDisplay/src/pages/kiosk.vue
index de581d3..f042cf5 100644
--- a/WebDisplay/src/pages/kiosk.vue
+++ b/WebDisplay/src/pages/kiosk.vue
@@ -151,7 +151,7 @@
             <CalendarAgenda
                 class="kiosk-calendar"
                 days="7"
-                :refresh-interval="30 * 60 * 1000" />
+                :refresh-interval="5 * 60 * 1000" />
             <NationalDays class="kiosk-national-days" />
         </div>
     </v-container>