✨ 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>

src/store.js

@@ -63,12 +63,25 @@ export const parsedTimetable = computed(() => {
   });
 });
 
-export async function fetchData() {
-  const baseUrl = import.meta.env.VITE_API_ENDPOINT || "/api";
+const baseUrl = import.meta.env.VITE_API_ENDPOINT || "/api";
 
+export async function fetchData() {
   const checkResponse = await fetch(`${baseUrl}/check`);
   if (checkResponse.status != 200) router.push("/login");
 
+  fetchClassList();
+  fetchTimetable();
+  fetchSubstitutions();
+  fetchHistory();
+}
+
+export async function fetchClassList() {
+  const classListResponse = await fetch(`${baseUrl}/classes`);
+  const classListData = await classListResponse.json();
+  classList.value = classListData;
+}
+
+export async function fetchTimetable() {
   const timetableResponse = await fetch(
     `${baseUrl}/timetable?class=${timetableClass.value}`
   );
@@ -77,27 +90,29 @@ export async function fetchData() {
     console.warn("API Error: " + timetableData.error);
     timetable.value = [];
   } else timetable.value = timetableData;
+}
 
+export async function fetchSubstitutions() {
+  const requestDate = `?date=${selectedDate.value.getTime()}`;
   const substitutionResponse = await fetch(
     substitutionFilter.value == "all"
-      ? `${baseUrl}/substitutions`
-      : `${baseUrl}/substitutions?class=${substitutionFilter.value}`
+      ? `${baseUrl}/substitutions${requestDate}`
+      : `${baseUrl}/substitutions${requestDate}&class=${substitutionFilter.value}`
   );
   const substitutionData = await substitutionResponse.json();
   substitutions.value = substitutionData;
+}
 
+export async function fetchHistory() {
+  const requestDate = `?date=${selectedDate.value.getTime()}`;
   const historyResponse = await fetch(
     substitutionFilter.value == "all"
-      ? `${baseUrl}/history`
-      : `${baseUrl}/history?class=${substitutionFilter.value}`
+      ? `${baseUrl}/history${requestDate}`
+      : `${baseUrl}/history${requestDate}&class=${substitutionFilter.value}`
   );
   const historyData = await historyResponse.json();
   if (historyData.error) console.warn("API Error: " + historyData.error);
   else history.value = historyData;
-
-  const classListResponse = await fetch(`${baseUrl}/classes`);
-  const classListData = await classListResponse.json();
-  classList.value = classListData;
 }
 
 fetchData();