✨ Implement day navigation gestures with Swiper.js

src/App.vue

@@ -5,7 +5,6 @@ import BottomNavbar from "./components/bottom-navbar.vue";
 import DateSelector from "./components/date-selector.vue";
 import LoadingElement from "./components/loading-element.vue";
 import { loading } from "./store";
-import { previousDay, nextDay } from "./util";
 import { computed } from "vue";
 
 const route = useRoute();
@@ -15,19 +14,13 @@ const isDataView = computed(() => {
     routeName.value != "title.settings" && routeName.value != "title.login"
   );
 });
-
-function swipeHandler(direction) {
-  if (!isDataView.value) return;
-  if (direction == "left") nextDay();
-  else if (direction == "right") previousDay();
-}
 </script>
 
 <template>
   <div class="app">
     <TitleBar />
     <DateSelector v-show="isDataView" />
-    <div class="center" v-touch:swipe="swipeHandler">
+    <div class="center">
       <main>
         <LoadingElement :active="loading" v-show="isDataView" />
         <RouterView />
@@ -57,18 +50,17 @@ body {
 .app {
   display: grid;
   grid-template-rows: auto auto 1fr;
-  height: 100vh;
 }
 
 .center {
   display: flex;
   justify-content: center;
-  overflow-y: auto;
   overflow: overlay;
 }
 
 main {
   width: 100%;
   max-width: 900px;
+  overflow: hidden;
 }
 </style>

src/assets/base.css

@@ -48,6 +48,11 @@ body {
   overflow: hidden;
 }
 
+#app,
+.app {
+  height: 100%;
+}
+
 ::-webkit-scrollbar {
   width: 4px;
 }

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>

src/main.js

@@ -5,7 +5,6 @@ import { registerSW } from "virtual:pwa-register";
 import { createI18n } from "vue-i18n";
 import { strings } from "./strings";
 import { language } from "./store";
-import Vue3TouchEvents from "vue3-touch-events";
 
 const i18n = createI18n({
   locale: language.value,
@@ -17,7 +16,6 @@ const app = createApp(App);
 
 app.use(router);
 app.use(i18n);
-app.use(Vue3TouchEvents);
 
 app.mount("#app");
 

src/store.js

@@ -24,6 +24,12 @@ watch(language, (newValue) => {
   location.reload();
 });
 
+// Set this to a positive or negative integer
+// to change selectedDate by this number
+export const changeDay = ref(0);
+// Set this to jump to a specific date
+export const changeDate = ref(new Date());
+
 export const selectedDate = ref(new Date(new Date().setUTCHours(0, 0, 0, 0)));
 export const selectedDay = computed(() => selectedDate.value.getDay() - 1);
 // Jump to next Monday if it is weekend
@@ -32,6 +38,14 @@ if (selectedDay.value == 5)
 if (selectedDay.value == -1)
   selectedDate.value = new Date(selectedDate.value.getTime() + 86400000);
 
+// Load new data if date changes
+watch(selectedDate, async () => {
+  loading.value = true;
+  await fetchSubstitutions();
+  await fetchHistory();
+  loading.value = false;
+});
+
 export const timetable = ref({ trusted: true });
 export const substitutions = ref([]);
 export const history = ref([]);

src/util.js

@@ -29,23 +29,3 @@ export function getSubstitutionColor(substitution) {
       return "background-color: var(--substitution-background-cancellation);";
   }
 }
-
-export function nextDay() {
-  var newDate = dayjs(selectedDate.value).add(1, "day");
-  // Skip weekend
-  if (newDate.day() == 6) newDate = newDate.add(2, "day");
-  changeDate(newDate);
-}
-export function previousDay() {
-  var newDate = dayjs(selectedDate.value).subtract(1, "day");
-  // Skip weekend
-  if (newDate.day() == 0) newDate = newDate.subtract(2, "day");
-  changeDate(newDate);
-}
-export async function changeDate(newDate) {
-  selectedDate.value = new Date(newDate.toDate().setUTCHours(0, 0, 0, 0));
-  loading.value = true;
-  await fetchSubstitutions();
-  await fetchHistory();
-  loading.value = false;
-}

src/views/HistoryView.vue

@@ -1,115 +1,16 @@
 <script setup>
-import { historyOfDate, selectedDate } from "../store";
-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":
-      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);";
-  }
-}
+import DayCarousel from "../components/day-carousel.vue";
+import HistoryList from "../components/history-list.vue";
 </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>
+    <DayCarousel :element="HistoryList" />
   </div>
 </template>
 
 <style scoped>
 .history {
-  padding: 0px 10px 80px 10px;
-}
-
-.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;
+  height: 100%;
 }
 </style>

src/views/SettingsView.vue

@@ -65,6 +65,9 @@ const gitHash = GITVERSION;
 <style scoped>
 .settings {
   padding: 15px 10px 80px 10px;
+  height: calc(100% - 100px);
+  overflow-y: auto;
+  padding-bottom: 90px;
 }
 
 h2 {

src/views/SubstitutionView.vue

@@ -1,73 +1,16 @@
 <script setup>
-import { substitutionsForDate, selectedDate } from "../store";
-import { getSubstitutionText, getSubstitutionColor } from "../util";
-import { computed } from "vue";
-
-const substitutions = computed(() => {
-  return substitutionsForDate.value[selectedDate.value.setUTCHours(0, 0, 0, 0)];
-});
+import DayCarousel from "../components/day-carousel.vue";
+import SubstitutionList from "../components/substitution-list.vue";
 </script>
 
 <template>
   <div class="substitutions">
-    <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>
+    <DayCarousel :element="SubstitutionList" />
   </div>
 </template>
 
 <style scoped>
 .substitutions {
-  padding: 0px 10px 80px 10px;
-}
-
-.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;
+  height: 100%;
 }
 </style>

src/views/TimetableView.vue

@@ -1,56 +1,10 @@
 <script setup>
-import {
-  timetable,
-  parsedTimetable,
-  classFilter,
-  classList,
-  substitutions,
-  selectedDate,
-  selectedDay,
-} from "../store";
-import { getSubstitutionColor } from "../util";
-import { computed } from "vue";
 import TimetableSetup from "../components/initial-setup.vue";
-
-// Link the timetable with the substitutions
-const linkedTimetable = computed(() => {
-  const currentDay = parsedTimetable.value[selectedDay.value];
-  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 == selectedDate.value.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";
-}
+import { classList, classFilter } from "../store";
+import DayCarousel from "../components/day-carousel.vue";
+import TimetableList from "../components/timetable-list.vue";
 </script>
+
 <template>
   <TimetableSetup
     v-show="classFilter == 'none'"
@@ -58,100 +12,12 @@ function isCancelled(substitution) {
     v-model="classFilter"
   />
   <div class="timetable">
-    <div class="container">
-      <div class="trust-warning" v-if="!timetable.trusted">
-        <b>{{ $t("timetable.warning") }}</b>
-        {{ $t("timetable.trustWarning", { source: timetable.source }) }}
-      </div>
-    </div>
-    <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>
+    <DayCarousel :element="TimetableList" />
   </div>
 </template>
 
 <style scoped>
 .timetable {
-  padding: 0px 10px 80px 10px;
-}
-
-.container {
-  display: flex;
-  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: 5px 0px;
-  width: max-content;
-}
-
-.lesson {
-  display: grid;
-  background-color: var(--substitution-background-unchanged);
-  min-height: 50px;
-  border-radius: 11px;
-  margin: 10px 0px;
-  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;
+  height: 100%;
 }
 </style>