✨ Add support for multiple remote timetables

- Add timetable "title" column to db
- Make API return array of timetables
- Add settings page for selecting a timetable
- Add InfoCard if no timetable is selected

src/components/settings/timetable-card.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {
+  CircleIcon,
+  CheckCircleIcon,
+  Edit2Icon,
+  TrashIcon,
+  CopyIcon,
+} from "lucide-vue-next";
+
+defineProps(["timetable", "editable", "selected"]);
+defineEmits(["click", "edit", "delete", "copy"]);
+</script>
+
+<template>
+  <div class="card">
+    <div class="button" @click="$emit('click')">
+      <CheckCircleIcon v-if="selected" />
+      <CircleIcon v-else />
+
+      <div class="info">
+        <span class="name">{{ timetable.title }}</span>
+        <span class="detail"
+          >{{ $t("settings.source") }}: {{ timetable.source }}</span
+        >
+      </div>
+    </div>
+
+    <div class="buttons">
+      <Edit2Icon v-if="editable" @click="$emit('edit')" />
+      <TrashIcon v-if="editable" @click="$emit('delete')" />
+      <CopyIcon v-if="!editable" @click="$emit('copy')" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 15px;
+  background-color: var(--element-color);
+  border-radius: 7px;
+  padding: 10px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.button {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 15px;
+  align-items: center;
+}
+
+.info {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+}
+
+.name {
+  font-weight: bold;
+}
+
+.detail {
+  opacity: 0.6;
+}
+
+.buttons {
+  display: flex;
+  gap: 7px;
+  opacity: 0.7;
+}
+</style>

src/components/timetable-list.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { timetable, parsedTimetable, substitutions } from "@/store";
+import { timetable, times, parsedTimetable, substitutions } from "@/store";
 import { getSubstitutionColor } from "@/util";
 import { computed } from "vue";
 
@@ -52,18 +52,17 @@ function isCancelled(substitution) {
 }
 
 function getTime(index) {
-  const times = {
-    ...(timetable.value.times.find((e) => e.lesson == index + 1) || {}),
+  const lessonTimes = {
+    ...(times.value.find((e) => e.lesson == index + 1) || {}),
   };
-  console.log(times);
-  Object.keys(times).forEach((e) => {
+  Object.keys(lessonTimes).forEach((e) => {
     if (e == "lesson") return;
-    const date = new Date(times[e]);
+    const date = new Date(lessonTimes[e]);
     const hours = date.getHours().toString().padStart(2, "0");
     const minutes = date.getMinutes().toString().padStart(2, "0");
-    times[e] = `${hours}:${minutes}`;
+    lessonTimes[e] = `${hours}:${minutes}`;
   });
-  return times;
+  return lessonTimes;
 }
 </script>
 <template>