✨ Switch to global date selector

src/views/TimetableView.vue

@@ -1,21 +1,23 @@
 <script setup>
-import { parsedTimetable, substitutions } from "../store";
-import { dayNames } from "../definitions";
+import {
+  parsedTimetable,
+  substitutions,
+  selectedDate,
+  selectedDay,
+} from "../store";
 import { getSubstitutionColor } from "../util";
-import { computed, ref } from "vue";
-import dayjs from "dayjs";
-
-const timetableDate = ref(new Date());
-const timetableDay = computed(() => timetableDate.value.getDay() - 1);
+import { computed } from "vue";
 
 const timetable = computed(() => {
-  const currentDay = parsedTimetable.value[timetableDay.value];
+  const currentDay = parsedTimetable.value[selectedDay.value];
   if (!currentDay) return [];
   const newDay = currentDay.map((e, index) => {
     const newElement = { ...e };
     newElement.substitution = substitutions.value.find((entry) => {
-      const entryDay = new Date(entry.date).getDay() - 1;
-      return entry.lesson == index + 1 && entryDay == timetableDay.value;
+      const entryDay = new Date(entry.date).getTime();
+      return (
+        entry.lesson == index + 1 && entryDay == selectedDate.value.getTime()
+      );
     });
     return newElement;
   });
@@ -37,13 +39,6 @@ function isCancelled(substitution) {
 </script>
 <template>
   <div class="timetable">
-    <div class="title">
-      <span class="day">
-        {{ dayNames[timetableDay] }},
-        {{ dayjs(timetableDate).format("DD.MM.YYYY") }}
-      </span>
-    </div>
-
     <template v-for="(lesson, index) in timetable" :key="index">
       <div class="lesson" :style="getSubstitutionColor(lesson.substitution)">
         <span class="hour">{{ index + 1 }}</span>
@@ -83,7 +78,7 @@ function isCancelled(substitution) {
 
 <style scoped>
 .timetable {
-  padding: 65px 10px 80px 10px;
+  padding: 0px 10px 80px 10px;
 }
 
 .title {