✨ Request new data on date change

src/components/date-selector.vue

@@ -1,5 +1,10 @@
 <script setup>
-import { selectedDate, selectedDay } from "../store";
+import {
+  selectedDate,
+  selectedDay,
+  fetchSubstitutions,
+  fetchHistory,
+} from "../store";
 import { dayNames } from "../definitions";
 import dayjs from "dayjs";
 import ArrowIcon from "./icons/arrow-icon.vue";
@@ -8,23 +13,25 @@ function nextDay() {
   var newDate = dayjs(selectedDate.value).add(1, "day");
   // Skip weekend
   if (newDate.day() == 6) newDate = newDate.add(2, "day");
-  selectedDate.value = newDate.toDate();
+  changeDate(newDate);
 }
 function previousDay() {
   var newDate = dayjs(selectedDate.value).subtract(1, "day");
   // Skip weekend
   if (newDate.day() == 0) newDate = newDate.subtract(2, "day");
-  selectedDate.value = newDate.toDate();
+  changeDate(newDate);
+}
+async function changeDate(newDate) {
+  selectedDate.value = new Date(newDate.toDate().setUTCHours(0, 0, 0, 0));
+  await fetchSubstitutions();
+  await fetchHistory();
 }
 </script>
 
 <template>
   <div class="selector">
     <ArrowIcon @click="previousDay" />
-    <span
-      class="day"
-      @click="selectedDate = new Date(new Date().setUTCHours(0, 0, 0, 0))"
-    >
+    <span class="day" @click="changeDate(dayjs())">
       {{ dayNames[selectedDay + 1] }},
       {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
     </span>