✨ Implement day navigation gestures with Swiper.js

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>