🚸 ♻️ Refactor store and improve UX

- Move view related functions out of the store
- Restructure the store.js file
- Improve error handling of `/check`
- Show red loading spinner if data fetch failed
- Prefetch current, next and previous day instead of only current
- Refactor some other frontend file

src/components/history-list.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { historyOfDate } from "../store";
+import { history } from "../store";
 import { getSubstitutionText } from "../util";
 import { computed } from "vue";
 import dayjs from "dayjs";
@@ -10,39 +10,27 @@ const props = defineProps({
   },
 });
 
-const history = computed(() => {
-  return historyOfDate.value[props.date.setUTCHours(0, 0, 0, 0)];
+const historyOfDate = computed(() => {
+  return history.value[props.date.getTime()];
 });
 
-function getChar(type) {
-  switch (type) {
-    case "change":
-      return "~";
-    case "addition":
-      return "+";
-    case "deletion":
-      return "-";
-  }
-}
-
-function getColor(type) {
-  switch (type) {
-    case "change":
-      return "background-color: var(--substitution-background-change)";
-    case "addition":
-      return "background-color: var(--substitution-background-addition);";
-    case "deletion":
-      return "background-color: var(--substitution-background-deletion);";
-  }
-}
+const chars = {
+  change: "~",
+  addition: "+",
+  deletion: "-",
+};
 </script>
 
 <template>
   <div class="history">
-    <template v-for="event in history" :key="event">
-      <div class="change" :style="getColor(event.type)">
-        <span class="hour">{{ event.lesson }}{{ getChar(event.type) }}</span>
+    <template v-for="event in historyOfDate" :key="event">
+      <div
+        class="change"
+        :style="`background-color: var(--substitution-background-${event.type}`"
+      >
+        <span class="hour">{{ event.lesson }}{{ chars[event.type] }}</span>
         <div class="infos">
+          <!-- If the entry is a change show which values changed -->
           <span class="text" v-if="event.type == 'change'">
             <template v-for="(change, key) in event.change" :key="key">
               <p>
@@ -52,6 +40,7 @@ function getColor(type) {
               </p>
             </template>
           </span>
+          <!-- If the entry is an addition or deletion generate a text -->
           <span class="text" v-else
             >{{
               $t(getSubstitutionText(event.change), {

src/components/substitution-list.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { substitutionsForDate } from "../store";
+import { substitutions } from "../store";
 import { getSubstitutionText, getSubstitutionColor } from "../util";
 import { computed } from "vue";
 
@@ -9,13 +9,13 @@ const props = defineProps({
   },
 });
 
-const substitutions = computed(() => {
-  return substitutionsForDate.value[props.date.setUTCHours(0, 0, 0, 0)];
+const substitutionsForDate = computed(() => {
+  return substitutions.value[props.date.getTime()];
 });
 </script>
 
 <template>
-  <template v-for="substitution in substitutions" :key="substitution">
+  <template v-for="substitution in substitutionsForDate" :key="substitution">
     <div class="substitution" :style="getSubstitutionColor(substitution)">
       <span class="hour">{{ substitution.lesson }}</span>
       <div class="infos">

src/components/timetable-list.vue

@@ -17,14 +17,17 @@ const linkedTimetable = computed(() => {
   const newDay = currentDay.map((e, index) => {
     const newElement = { ...e };
     // Find a substitution mathing this lesson
-    newElement.substitution = substitutions.value.find((entry) => {
-      const entryDay = new Date(entry.date).getTime();
-      return (
-        entry.lesson == index + 1 &&
-        entryDay == props.date.getTime() &&
-        (entry.teacher == e.teacher || !entry.teacher || !e.teacher)
+    if (substitutions.value[props.date.getTime()])
+      newElement.substitution = substitutions.value[props.date.getTime()].find(
+        (entry) => {
+          const entryDay = new Date(entry.date).getTime();
+          return (
+            entry.lesson == index + 1 &&
+            entryDay == props.date.getTime() &&
+            (entry.teacher == e.teacher || !entry.teacher || !e.teacher)
+          );
+        }
       );
-    });
     return newElement;
   });
   return newDay;