Stop being lazy and use proper "next day" timer logic

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>

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>

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

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>