✨ Show substitutions on the timetable

src/util.js

@@ -24,3 +24,13 @@ export function getSubstitutionText(substitution) {
   }
   return text;
 }
+
+export function getSubstitutionColor(substitution) {
+  if (!substitution) return;
+  switch (substitution.type) {
+    case "change":
+      return "background-color: #14587e;";
+    case "cancellation":
+      return "background-color: #7d2b2d;";
+  }
+}

src/views/TimetableView.vue

@@ -1,9 +1,37 @@
 <script setup>
-import { parsedTimetable } from "../store";
+import { parsedTimetable, substitutions } from "../store";
 import { dayNames } from "../definitions";
-import { ref } from "vue";
+import { getSubstitutionColor } from "../util";
+import { computed, ref } from "vue";
 
 const timetableDay = ref(0);
+
+const timetable = computed(() => {
+  const currentDay = parsedTimetable.value[timetableDay.value];
+  if (!currentDay) return [];
+  const newDay = currentDay.map((e, index) => {
+    const newElement = JSON.parse(JSON.stringify(e));
+    newElement.substitution = substitutions.value.find((entry) => {
+      const entryDay = new Date(entry.date).getDay() - 1;
+      return entry.lesson == index + 1 && entryDay == timetableDay.value;
+    });
+    return newElement;
+  });
+  return newDay;
+});
+
+function isChanged(substitution, key) {
+  if (!substitution) return false;
+  if (!substitution.change) return false;
+  const changedKeys = Object.keys(substitution.change);
+  if (changedKeys.includes(key)) return true;
+  else return false;
+}
+
+function isCancelled(substitution) {
+  if (!substitution) return false;
+  return substitution.type == "cancellation";
+}
 </script>
 <template>
   <div class="timetable">
@@ -11,15 +39,37 @@ const timetableDay = ref(0);
       <span class="day">{{ dayNames[timetableDay] }}</span>
     </div>
 
-    <template
-      v-for="(lesson, index) in parsedTimetable[timetableDay]"
-      :key="index"
-    >
-      <div class="lesson">
+    <template v-for="(lesson, index) in timetable" :key="index">
+      <div class="lesson" :style="getSubstitutionColor(lesson.substitution)">
         <span class="hour">{{ index + 1 }}</span>
         <div class="infos">
-          <span class="subject">{{ lesson.subject }}</span>
-          <span class="info">{{ lesson.teacher }}, {{ lesson.room }}</span>
+          <!-- Subject changed -->
+          <span
+            class="subject"
+            v-if="isChanged(lesson.substitution, 'subject')"
+          >
+            <s>{{ lesson.subject }}</s> {{ lesson.substitution.change.subject }}
+          </span>
+          <!-- Cancellation -->
+          <span class="subject" v-if="isCancelled(lesson.substitution)">
+            <s>{{ lesson.subject }}</s>
+          </span>
+          <span class="subject" v-else>
+            {{ lesson.subject }}
+          </span>
+          <div class="info">
+            <!-- Teacher changed -->
+            <span class="info" v-if="isChanged(lesson.substitution, 'teacher')">
+              <s>{{ lesson.teacher }}</s>
+              {{ lesson.substitution.change.teacher }},
+            </span>
+            <span class="info" v-else> {{ lesson.teacher }}, </span>
+            <!-- Room changed -->
+            <span class="info" v-if="isChanged(lesson.substitution, 'room')">
+              <s>{{ lesson.room }}</s> {{ lesson.substitution.change.room }}
+            </span>
+            <span class="info" v-else>{{ lesson.room }}</span>
+          </div>
         </div>
       </div>
     </template>