✨ Implement day navigation gestures with Swiper.js

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>