✨ Switch to global date selector

src/App.vue

@@ -2,10 +2,12 @@
 import TitleBar from "./components/titlebar-element.vue";
 import BottomNavbar from "./components/bottom-navbar.vue";
 import { RouterView } from "vue-router";
+import DateSelector from "./components/date-selector.vue";
 </script>
 
 <template>
   <TitleBar />
+  <DateSelector v-show="$route.name != 'Settings'" />
   <RouterView />
   <BottomNavbar />
 </template>

src/components/date-selector.vue

@@ -0,0 +1,40 @@
+<script setup>
+import { selectedDate, selectedDay } from "../store";
+import { dayNames } from "../definitions";
+import dayjs from "dayjs";
+import ArrowIcon from "./icons/arrow-icon.vue";
+</script>
+
+<template>
+  <div class="selector">
+    <ArrowIcon
+      @click="selectedDate = dayjs(selectedDate).subtract(1, 'day').toDate()"
+    />
+    <span
+      class="day"
+      @click="selectedDate = new Date(new Date().setUTCHours(0, 0, 0, 0))"
+    >
+      {{ dayNames[selectedDay + 1] }},
+      {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
+    </span>
+    <ArrowIcon
+      style="transform: rotate(180deg)"
+      @click="selectedDate = dayjs(selectedDate).add(1, 'day').toDate()"
+    />
+  </div>
+</template>
+
+<style scoped>
+.selector {
+  padding: 65px 10px 0px 10px;
+  display: grid;
+  grid-template-columns: 35px 1fr 35px;
+  align-items: center;
+  justify-items: center;
+}
+
+svg,
+span {
+  cursor: pointer;
+}
+</style>

src/components/icons/arrow-icon.vue

@@ -0,0 +1,19 @@
+<!-- From https://github.com/feathericons/feather -->
+
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="feather feather-arrow-left"
+  >
+    <line x1="19" y1="12" x2="5" y2="12"></line>
+    <polyline points="12 19 5 12 12 5"></polyline>
+  </svg>
+</template>

src/definitions.js

@@ -1,4 +1,12 @@
-export const dayNames = ["Monday", "Tuesday", "Wednesday", "Thursay", "Friday"];
+export const dayNames = [
+  "Sunday",
+  "Monday",
+  "Tuesday",
+  "Wednesday",
+  "Thursay",
+  "Friday",
+  "Saturday",
+];
 export const substitutionTexts = {
   subjectChange: "Unterrichtsänderung im Fach",
   teacherChange: "Vertretung mit",

src/store.js

@@ -20,6 +20,9 @@ watch(timetableClass, (newValue) => {
   fetchData();
 });
 
+export const selectedDate = ref(new Date(new Date().setUTCHours(0, 0, 0, 0)));
+export const selectedDay = computed(() => selectedDate.value.getDay() - 1);
+
 export const timetable = ref([]);
 export const substitutions = ref([]);
 export const history = ref([]);

src/views/HistoryView.vue

@@ -1,9 +1,14 @@
 <script setup>
-import { historyOfDate } from "../store";
+import { historyOfDate, selectedDate } from "../store";
-import { dayNames, uiTexts } from "../definitions";
+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">
+    <template v-for="event in history" :key="event">
-      <div class="title">
+      <div class="change" :style="getColor(event.type)">
-        <span class="day">
+        <span class="hour">{{ event.lesson }}{{ getChar(event.type) }}</span>
-          {{ dayNames[new Date(parseInt(date)).getDay() - 1] }},
+        <div class="infos">
-          {{ dayjs(parseInt(date)).format("DD.MM.YYYY") }}
+          <span class="text" v-if="event.type == 'change'">
-        </span>
+            <template v-for="(change, key) in event.change" :key="key">
-      </div>
+              <p>
-
+                {{ key }}:&nbsp;
-      <template v-for="(event, index) in events" :key="index">
+                <s>{{ change.before }}</s>
-        <div class="change" :style="getColor(event.type)">
+                &nbsp;{{ change.after }}
-          <span class="hour">{{ event.lesson }}{{ getChar(event.type) }}</span>
+              </p>
-          <div class="infos">
+            </template>
-            <span class="text" v-if="event.type == 'change'">
+          </span>
-              <template v-for="(change, key) in event.change" :key="key">
+          <span class="text" v-else>
-                <p>
+            {{ getSubstitutionText(event.change) }}
-                  {{ 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>
             <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 { substitutionsForDate, selectedDate } from "../store";
-import dayjs from "dayjs";
+import { uiTexts } from "../definitions";
-import { dayNames, 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">
+    <template v-for="substitution in substitutions" :key="substitution">
-      <div class="title">
+      <div class="substitution" :style="getSubstitutionColor(substitution)">
-        <span class="day">
+        <span class="hour">{{ substitution.lesson }}</span>
-          {{ dayNames[new Date(parseInt(date)).getDay() - 1] }},
+        <div class="infos">
-          {{ dayjs(parseInt(date)).format("DD.MM.YYYY") }}
+          <span class="text">{{ getSubstitutionText(substitution) }}</span>
-        </span>
+          <span class="notes">
-      </div>
+            {{ substitution.notes ? uiTexts.substitutionNotes + ": " : "" }}
-
+            {{ substitution.notes }}
-      <template v-for="(substitution, index) in substitutions" :key="index">
+          </span>
-        <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>
         </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 {
-import { dayNames } from "../definitions";
+  parsedTimetable,
+  substitutions,
+  selectedDate,
+  selectedDay,
+} from "../store";
 import { getSubstitutionColor } from "../util";
-import { computed, ref } from "vue";
+import { computed } from "vue";
-import dayjs from "dayjs";
-
-const timetableDate = ref(new Date());
-const timetableDay = computed(() => timetableDate.value.getDay() - 1);
 
 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;
+      const entryDay = new Date(entry.date).getTime();
-      return entry.lesson == index + 1 && entryDay == timetableDay.value;
+      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 {