✨ Implement day navigation gestures with Swiper.js

src/components/bottom-navbar.vue

@@ -43,6 +43,7 @@ import { RouterLink } from "vue-router";
   grid-auto-flow: column;
   padding: 0px 20px;
   max-width: 800px;
+  z-index: 100;
 }
 
 .entry {

src/components/date-selector.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { selectedDate, selectedDay } from "../store";
+import { selectedDate, selectedDay, changeDay, changeDate } from "../store";
 import ArrowIcon from "./icons/arrow-icon.vue";
 import dayjs from "dayjs";
-import { changeDate, previousDay, nextDay } from "../util";
 
 const dayNames = [
   "days.sunday",
@@ -17,12 +16,15 @@ const dayNames = [
 
 <template>
   <div class="selector">
-    <ArrowIcon @click="previousDay" />
-    <span class="day" @click="changeDate(dayjs())">
+    <ArrowIcon @click="() => (changeDay -= 1)" />
+    <span class="day" @click="changeDate = dayjs().toDate()">
       {{ $t(dayNames[selectedDay + 1]) }},
       {{ dayjs(selectedDate).format("DD.MM.YYYY") }}
     </span>
-    <ArrowIcon style="transform: rotate(180deg)" @click="nextDay" />
+    <ArrowIcon
+      style="transform: rotate(180deg)"
+      @click="() => (changeDay += 1)"
+    />
   </div>
 </template>
 

src/components/day-carousel.vue

@@ -0,0 +1,112 @@
+<script setup>
+import { selectedDate, changeDate, changeDay } from "../store";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import { Virtual } from "swiper";
+import { ref, watch } from "vue";
+
+defineProps({
+  element: {
+    required: true,
+  },
+});
+
+// Get swiper element
+const swiperModules = ref([Virtual]);
+const swiperElement = ref();
+function setSwiper(swiper) {
+  swiperElement.value = swiper;
+}
+
+// Load current, previous and next day
+const loadedDates = ref([
+  new Date(selectedDate.value.getTime() - 86400000),
+  new Date(selectedDate.value.getTime()),
+  new Date(selectedDate.value.getTime() + 86400000),
+]);
+
+// Load left or right date on slide change
+function slideChange(swiper) {
+  selectedDate.value = loadedDates.value[swiper.activeIndex];
+  const activeSlide = swiper.activeIndex;
+  if (activeSlide == loadedDates.value.length - 1) {
+    const lastDate = loadedDates.value[loadedDates.value.length - 1];
+    loadedDates.value.push(calculateDate(lastDate, 1));
+  }
+}
+function slideChangeEnd(swiper) {
+  const activeSlide = swiper.activeIndex;
+  if (activeSlide == 0) {
+    const lastDate = loadedDates.value[0];
+    loadedDates.value = [calculateDate(lastDate, -1), ...loadedDates.value];
+    swiper.slideTo(activeSlide + 1, 0);
+  }
+}
+
+// Helper functions
+function calculateDate(date, offset) {
+  return new Date(date.getTime() + 86400000 * offset);
+}
+function calculateSlide(date) {
+  return loadedDates.value.findIndex((e) => e.getTime() == date.getTime());
+}
+function slideToDate(date) {
+  const slide = calculateSlide(date);
+  if (slide != -1) swiperElement.value.slideTo(slide);
+  else {
+    loadedDates.value = [calculateDate(date, -1), date, calculateDate(date, 1)];
+    swiperElement.value.slideTo(1, 0);
+  }
+  selectedDate.value = date;
+}
+
+// Watch for slide change instructions
+watch(changeDay, (change) => {
+  if (change == 0) return;
+  slideToDate(calculateDate(selectedDate.value, change));
+  changeDay.value = 0;
+});
+watch(changeDate, (date) => {
+  slideToDate(new Date(date.setUTCHours(0, 0, 0, 0)));
+});
+</script>
+
+<template>
+  <swiper
+    :modules="swiperModules"
+    :slides-per-view="1"
+    :space-between="50"
+    :initial-slide="1"
+    :virtual="true"
+    @slide-change-transition-end="slideChangeEnd"
+    @slide-change="slideChange"
+    @swiper="setSwiper"
+  >
+    <swiper-slide
+      v-for="(date, index) in loadedDates"
+      :key="index"
+      :virtualIndex="index"
+    >
+      <div class="content">
+        <component :is="element" :date="date" />
+      </div>
+    </swiper-slide>
+  </swiper>
+</template>
+
+<style>
+@import "swiper/css";
+</style>
+
+<style scoped>
+.swiper {
+  padding: 10px;
+  z-index: 0;
+  height: 100%;
+}
+
+.content {
+  height: calc(100% - 100px);
+  overflow-y: auto;
+  padding-bottom: 100px;
+}
+</style>

src/components/history-list.vue

@@ -0,0 +1,117 @@
+<script setup>
+import { historyOfDate } from "../store";
+import { getSubstitutionText } from "../util";
+import { computed } from "vue";
+import dayjs from "dayjs";
+
+const props = defineProps({
+  date: {
+    required: true,
+  },
+});
+
+const history = computed(() => {
+  return historyOfDate.value[props.date.setUTCHours(0, 0, 0, 0)];
+});
+
+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);";
+  }
+}
+</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>
+        <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
+            >{{
+              $t(getSubstitutionText(event.change), {
+                subject: event.change.subject,
+                class: event.change.class.join(", "),
+                teacher: event.change.change.teacher || event.change.teacher,
+                room: event.change.change.room,
+              })
+            }}<span class="notes" v-if="event.change.notes">
+              {{ $t("timetable.notes") }} {{ event.change.notes }}
+            </span>
+          </span>
+          <span class="notes">
+            {{ dayjs(event.updatedAt).format("DD.MM.YYYY, HH:mm") }}
+          </span>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.change {
+  display: grid;
+  min-height: 35px;
+  border-radius: 11px;
+  margin-bottom: 10px;
+  padding: 10px 10px;
+  grid-template-columns: min-content auto;
+  gap: 5px;
+}
+
+.hour {
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+  letter-spacing: 5px;
+}
+
+.infos {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.text {
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  word-wrap: break-word;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+p {
+  margin: 0px;
+}
+
+.notes {
+  font-size: 13px;
+  font-weight: 100;
+}
+</style>

src/components/initial-setup.vue

@@ -41,6 +41,7 @@ defineProps({
   width: max-content;
   height: max-content;
   max-width: 100%;
+  z-index: 10;
 }
 
 .content {

src/components/substitution-list.vue

@@ -0,0 +1,73 @@
+<script setup>
+import { substitutionsForDate } from "../store";
+import { getSubstitutionText, getSubstitutionColor } from "../util";
+import { computed } from "vue";
+
+const props = defineProps({
+  date: {
+    required: true,
+  },
+});
+
+const substitutions = computed(() => {
+  return substitutionsForDate.value[props.date.setUTCHours(0, 0, 0, 0)];
+});
+</script>
+
+<template>
+  <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">{{
+          $t(getSubstitutionText(substitution), {
+            subject: substitution.change.subject,
+            class: substitution.class.join(", "),
+            teacher: substitution.change.teacher || substitution.teacher,
+            room: substitution.change.room,
+          })
+        }}</span>
+        <span class="notes" v-if="substitution.notes">
+          {{ $t("timetable.notes") }} {{ substitution.notes }}
+        </span>
+      </div>
+    </div>
+  </template>
+</template>
+
+<style scoped>
+.substitution {
+  display: grid;
+  background-color: var(--substitution-background-unchanged);
+  min-height: 50px;
+  border-radius: 11px;
+  margin-bottom: 10px;
+  padding: 10px 15px;
+  grid-template-columns: max-content auto;
+  gap: 15px;
+}
+
+.hour {
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.infos {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.text {
+  font-size: 18px;
+  display: flex;
+  align-items: center;
+  word-wrap: break-word;
+}
+
+.notes {
+  font-size: 13px;
+  font-weight: 100;
+}
+</style>

src/components/timetable-list.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { timetable, parsedTimetable, substitutions } from "../store";
+import { getSubstitutionColor } from "../util";
+import { computed } from "vue";
+
+const props = defineProps({
+  date: {
+    required: true,
+  },
+});
+
+// Link the timetable with the substitutions
+const linkedTimetable = computed(() => {
+  const currentDay = parsedTimetable.value[props.date.getDay() - 1];
+  if (!currentDay) return [];
+
+  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)
+      );
+    });
+    return newElement;
+  });
+  return newDay;
+});
+
+function isChanged(lesson, key) {
+  const substitution = lesson.substitution;
+  if (!(substitution && substitution.change)) return false;
+  const changedKeys = Object.keys(substitution.change);
+  if (!changedKeys.includes(key)) return false;
+  return lesson[key] != substitution.change[key];
+}
+
+function getNotes(substitution) {
+  if (!(substitution && substitution.notes)) return;
+  return substitution.notes;
+}
+
+function isCancelled(substitution) {
+  if (!substitution) return false;
+  return substitution.type == "cancellation";
+}
+</script>
+<template>
+  <div class="container">
+    <div class="trust-warning" v-if="!timetable.trusted">
+      <b>{{ $t("timetable.warning") }}</b>
+      {{ $t("timetable.trustWarning", { source: timetable.source }) }}
+    </div>
+  </div>
+  <div class="listContainer">
+    <template v-for="(lesson, index) in linkedTimetable" :key="index">
+      <div class="lesson" :style="getSubstitutionColor(lesson.substitution)">
+        <span class="hour">{{ index + 1 }}</span>
+        <div class="infos">
+          <!-- Subject changed -->
+          <span class="subject" v-if="isChanged(lesson, 'subject')">
+            <s>{{ lesson.subject }}</s> {{ lesson.substitution.change.subject }}
+          </span>
+          <!-- Cancellation -->
+          <span class="subject" v-else-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, '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, 'room')"
+              >, <s>{{ lesson.room }}</s> {{ lesson.substitution.change.room }}
+            </span>
+            <span class="info" v-else-if="lesson.room"
+              >, {{ lesson.room }}</span
+            >
+            <!-- Show notes if available -->
+            <span class="info" v-if="getNotes(lesson.substitution)"
+              >, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.container {
+  display: flex;
+  padding: 0px 10px;
+  justify-content: center;
+}
+
+.trust-warning {
+  border: 1px solid var(--timetable-trust-warning-border);
+  background-color: var(--timetable-trust-warning-background);
+  border-radius: 4px;
+  padding: 3px 10px;
+  margin-bottom: 15px;
+  width: max-content;
+}
+
+.listContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+.lesson {
+  display: grid;
+  background-color: var(--substitution-background-unchanged);
+  min-height: 50px;
+  border-radius: 11px;
+  padding: 15px;
+  grid-template-columns: max-content auto;
+  gap: 15px;
+}
+
+.hour {
+  font-size: 30px;
+  display: flex;
+  align-items: center;
+}
+
+.infos {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+
+.infos .subject {
+  font-weight: bold;
+  font-size: 18px;
+}
+
+.infos .info {
+  font-weight: 200;
+  font-size: 14px;
+}
+</style>