✨ 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/views/SettingsView.vue

@@ -3,6 +3,7 @@ import ScrollableContainer from "@/components/scrollable-container.vue";
 import PageCard from "@/components/settings/page-card.vue";
 import {
   FilterIcon,
+  CalendarIcon,
   CopyCheckIcon,
   PaletteIcon,
   InfoIcon,
@@ -19,6 +20,11 @@ import {
           :icon="FilterIcon"
           route="settings/filtering"
         />
+        <PageCard
+          :name="$t('title.settings.timetable')"
+          :icon="CalendarIcon"
+          route="settings/timetable"
+        />
         <PageCard
           :name="$t('title.settings.groups')"
           :icon="CopyCheckIcon"

src/views/TimetableView.vue

@@ -1,11 +1,16 @@
 <script setup>
 import TimetableSetup from "@/components/timetable-setup.vue";
-import { classList, classFilter, timetable, loadingFailed } from "@/store";
+import {
+  classList,
+  classFilter,
+  timetable,
+  loadingFailed,
+  loading,
+} from "@/store";
 import DayCarousel from "@/components/day-carousel.vue";
 import TimetableList from "@/components/timetable-list.vue";
 import InfoCard from "@/components/info-card.vue";
-import { ClockIcon } from "lucide-vue-next";
-import { CloudOffIcon } from "lucide-vue-next";
+import { ClockIcon, CloudOffIcon, CalendarOffIcon } from "lucide-vue-next";
 </script>
 
 <template>
@@ -20,11 +25,18 @@ import { CloudOffIcon } from "lucide-vue-next";
   >
     <InfoCard
       class="card"
-      v-if="!loadingFailed"
+      v-if="!loadingFailed && loading"
       :icon="ClockIcon"
       :title="$t('infoCard.titles.loading')"
       :text="$t('infoCard.texts.loadingTimetable')"
     />
+    <InfoCard
+      class="card"
+      v-else-if="!loadingFailed && !loading"
+      :icon="CalendarOffIcon"
+      :title="$t('infoCard.titles.noTimetable')"
+      :text="$t('infoCard.texts.noTimetable')"
+    />
     <InfoCard
       class="card"
       v-else

src/views/settings/TimetableSettings.vue

@@ -0,0 +1,33 @@
+<script setup>
+import TimetableCard from "@/components/settings/timetable-card.vue";
+import { timetables, timetableId } from "@/store";
+</script>
+
+<template>
+  <h2>{{ $t("settings.heading.remoteTimetables") }}</h2>
+  <div class="list">
+    <TimetableCard
+      v-for="timetable in timetables"
+      :key="timetable.id"
+      :timetable="timetable"
+      :selected="timetableId == timetable.id"
+      :editable="true"
+      @click="timetableId = timetable.id"
+    />
+  </div>
+</template>
+
+<style scoped>
+h2 {
+  margin: 5px 0px;
+}
+
+p {
+  margin: 5px 0px;
+}
+
+.list {
+  display: grid;
+  gap: 8px;
+}
+</style>