✨ Fetch data from backend

src/store.js

@@ -13,12 +13,17 @@ watch(substitutionFilter, (newValue) => {
     newValue = prompt("Please enter a class to filter (e.g. 9C)");
   }
   localStorage.setItem("substitutionFilter", newValue);
+  fetchData();
 });
 watch(timetableClass, (newValue) => {
   localStorage.setItem("timetableClass", newValue);
+  fetchData();
 });
 
+export const timetable = ref([]);
+export const substitutions = ref([]);
 export const history = ref([]);
+export const classList = ref([]);
 
 export const historyOfDate = computed(() => {
   const dates = {};
@@ -37,7 +42,7 @@ export const substitutionsForDate = computed(() => {
     if (!dates[date]) dates[date] = [];
     dates[substitution.date].push(substitution);
   }
-  return dates;
+  return sortObject(dates);
 });
 
 export const parsedTimetable = computed(() => {
@@ -51,3 +56,47 @@ export const parsedTimetable = computed(() => {
     return newDay;
   });
 });
+
+export async function fetchData() {
+  const baseUrl = "http://localhost:3000/api";
+  const timetableResponse = await fetch(
+    `${baseUrl}/timetable?class=${timetableClass.value}`
+  );
+  const timetableData = await timetableResponse.json();
+  if (timetableData.error) {
+    console.warn("API Error: " + timetableData.error);
+    timetable.value = [];
+  } else timetable.value = timetableData;
+
+  const substitutionResponse = await fetch(
+    substitutionFilter.value == "all"
+      ? `${baseUrl}/substitutions`
+      : `${baseUrl}/substitutions?class=${substitutionFilter.value}`
+  );
+  const substitutionData = await substitutionResponse.json();
+  substitutions.value = substitutionData;
+
+  const historyResponse = await fetch(
+    substitutionFilter.value == "all"
+      ? `${baseUrl}/history`
+      : `${baseUrl}/history?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();
+
+function sortObject(obj) {
+  return Object.keys(obj)
+    .sort()
+    .reduce(function (result, key) {
+      result[key] = obj[key];
+      return result;
+    }, {});
+}

src/views/HistoryView.vue

@@ -51,14 +51,14 @@ function getColor(type) {
               </template>
             </span>
             <span class="text" v-else>
-              {{ getSubstitutionText(event.data) }}
+              {{ getSubstitutionText(event.change) }}
               <span class="notes">
-                {{ event.data.notes ? uiTexts.substitutionNotes + ": " : "" }}
+                {{ event.change.notes ? uiTexts.substitutionNotes + ": " : "" }}
-                {{ event.data.notes }}
+                {{ event.change.notes }}
               </span>
             </span>
             <span class="notes">
-              {{ dayjs(event.changedAt).format("DD.MM.YYYY, HH:mm") }}
+              {{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
             </span>
           </div>
         </div>

src/views/TimetableView.vue

@@ -3,8 +3,10 @@ import { parsedTimetable, substitutions } from "../store";
 import { dayNames } from "../definitions";
 import { getSubstitutionColor } from "../util";
 import { computed, ref } from "vue";
+import dayjs from "dayjs";
 
-const timetableDay = ref(0);
+const timetableDate = ref(new Date());
+const timetableDay = computed(() => timetableDate.value.getDay() - 1);
 
 const timetable = computed(() => {
   const currentDay = parsedTimetable.value[timetableDay.value];
@@ -36,7 +38,10 @@ function isCancelled(substitution) {
 <template>
   <div class="timetable">
     <div class="title">
-      <span class="day">{{ dayNames[timetableDay] }}</span>
+      <span class="day">
+        {{ dayNames[timetableDay] }},
+        {{ dayjs(timetableDate).format("DD.MM.YYYY") }}
+      </span>
     </div>
 
     <template v-for="(lesson, index) in timetable" :key="index">