✨ Switch to global date selector

src/views/HistoryView.vue

@@ -1,9 +1,14 @@
 <script setup>
-import { historyOfDate } from "../store";
-import { dayNames, uiTexts } from "../definitions";
+import { historyOfDate, selectedDate } from "../store";
+import { uiTexts } from "../definitions";
 import { getSubstitutionText } from "../util";
+import { computed } from "vue";
 import dayjs from "dayjs";
 
+const history = computed(() => {
+  return historyOfDate.value[selectedDate.value.setUTCHours(0, 0, 0, 0)];
+});
+
 function getChar(type) {
   switch (type) {
     case "change":
@@ -29,47 +34,38 @@ function getColor(type) {
 
 <template>
   <div class="history">
-    <template v-for="(events, date) of historyOfDate" :key="date">
-      <div class="title">
-        <span class="day">
-          {{ dayNames[new Date(parseInt(date)).getDay() - 1] }},
-          {{ dayjs(parseInt(date)).format("DD.MM.YYYY") }}
-        </span>
-      </div>
-
-      <template v-for="(event, index) in events" :key="index">
-        <div class="change" :style="getColor(event.type)">
-          <span class="hour">{{ event.lesson }}{{ getChar(event.type) }}</span>
-          <div class="infos">
-            <span class="text" v-if="event.type == 'change'">
-              <template v-for="(change, key) in event.change" :key="key">
-                <p>
-                  {{ key }}:&nbsp;
-                  <s>{{ change.before }}</s>
-                  &nbsp;{{ change.after }}
-                </p>
-              </template>
-            </span>
-            <span class="text" v-else>
-              {{ getSubstitutionText(event.change) }}
-              <span class="notes">
-                {{ event.change.notes ? uiTexts.substitutionNotes + ": " : "" }}
-                {{ event.change.notes }}
-              </span>
-            </span>
+    <template v-for="event in history" :key="event">
+      <div class="change" :style="getColor(event.type)">
+        <span class="hour">{{ event.lesson }}{{ getChar(event.type) }}</span>
+        <div class="infos">
+          <span class="text" v-if="event.type == 'change'">
+            <template v-for="(change, key) in event.change" :key="key">
+              <p>
+                {{ key }}:&nbsp;
+                <s>{{ change.before }}</s>
+                &nbsp;{{ change.after }}
+              </p>
+            </template>
+          </span>
+          <span class="text" v-else>
+            {{ getSubstitutionText(event.change) }}
             <span class="notes">
-              {{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
+              {{ event.change.notes ? uiTexts.substitutionNotes + ": " : "" }}
+              {{ event.change.notes }}
             </span>
-          </div>
+          </span>
+          <span class="notes">
+            {{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
+          </span>
         </div>
-      </template>
+      </div>
     </template>
   </div>
 </template>
 
 <style scoped>
 .history {
-  padding: 65px 10px 80px 10px;
+  padding: 0px 10px 80px 10px;
 }
 
 .title {

src/views/SubstitutionView.vue

@@ -1,39 +1,34 @@
 <script setup>
-import { substitutionsForDate } from "../store";
-import dayjs from "dayjs";
-import { dayNames, uiTexts } from "../definitions";
+import { substitutionsForDate, selectedDate } from "../store";
+import { uiTexts } from "../definitions";
 import { getSubstitutionText, getSubstitutionColor } from "../util";
+import { computed } from "vue";
+
+const substitutions = computed(() => {
+  return substitutionsForDate.value[selectedDate.value.setUTCHours(0, 0, 0, 0)];
+});
 </script>
 
 <template>
   <div class="substitutions">
-    <template v-for="(substitutions, date) of substitutionsForDate" :key="date">
-      <div class="title">
-        <span class="day">
-          {{ dayNames[new Date(parseInt(date)).getDay() - 1] }},
-          {{ dayjs(parseInt(date)).format("DD.MM.YYYY") }}
-        </span>
-      </div>
-
-      <template v-for="(substitution, index) in substitutions" :key="index">
-        <div class="substitution" :style="getSubstitutionColor(substitution)">
-          <span class="hour">{{ substitution.lesson }}</span>
-          <div class="infos">
-            <span class="text">{{ getSubstitutionText(substitution) }}</span>
-            <span class="notes">
-              {{ substitution.notes ? uiTexts.substitutionNotes + ": " : "" }}
-              {{ substitution.notes }}
-            </span>
-          </div>
+    <template v-for="substitution in substitutions" :key="substitution">
+      <div class="substitution" :style="getSubstitutionColor(substitution)">
+        <span class="hour">{{ substitution.lesson }}</span>
+        <div class="infos">
+          <span class="text">{{ getSubstitutionText(substitution) }}</span>
+          <span class="notes">
+            {{ substitution.notes ? uiTexts.substitutionNotes + ": " : "" }}
+            {{ substitution.notes }}
+          </span>
         </div>
-      </template>
+      </div>
     </template>
   </div>
 </template>
 
 <style scoped>
 .substitutions {
-  padding: 65px 10px 80px 10px;
+  padding: 0px 10px 80px 10px;
 }
 
 .title {

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 {