✨ Add basic handling for local timetables

src/store.js

@@ -14,6 +14,9 @@ export const timetableId = ref(localStorage.getItem("timetableId") || "none");
 export const timetableGroups = ref(
   JSON.parse(localStorage.getItem("timetableGroups") || "[]")
 );
+export const localTimetables = ref(
+  JSON.parse(localStorage.getItem("timetables")) || []
+);
 
 export const theme = ref(localStorage.getItem("theme") || "auto");
 
@@ -31,6 +34,9 @@ watch(
   },
   { deep: true }
 );
+watch(localTimetables, (newValue) => {
+  localStorage.setItem("timetables", JSON.stringify(newValue));
+});
 watch(theme, (newValue) => {
   localStorage.setItem("theme", newValue);
 });
@@ -52,10 +58,15 @@ export const changeDate = ref(new Date());
 
 /* Data store */
 export const timetable = computed(() => {
-  const selectedTimetable = timetables.value.find(
+  const localTimetable = localTimetables.value.find(
     (e) => e.id == timetableId.value
   );
-  return selectedTimetable || { trusted: true, source: "", data: [] };
+  const remoteTimetable = timetables.value.find(
+    (e) => e.id == timetableId.value
+  );
+  return (
+    localTimetable || remoteTimetable || { trusted: true, source: "", data: [] }
+  );
 });
 export const timetables = ref([]);
 export const times = ref([]);

src/strings.js

@@ -19,6 +19,7 @@ export const strings = {
       heading: {
         filtering: "Filtering",
         timetableGroups: "Timetable Groups",
+        localTimetables: "Local Timetables",
         remoteTimetables: "Remote Timetables",
         language: "Language",
         about: "About",
@@ -128,6 +129,7 @@ export const strings = {
     settings: {
       heading: {
         filtering: "Filter",
+        localTimetables: "Lokale Stundenpläne",
         remoteTimetables: "Online Stundenpläne",
         timetableGroups: "Stundenplan-Gruppen",
         language: "Sprache",

src/views/settings/TimetableSettings.vue

@@ -1,9 +1,20 @@
 <script setup>
 import TimetableCard from "@/components/settings/timetable-card.vue";
-import { timetables, timetableId } from "@/store";
+import { timetables, localTimetables, timetableId } from "@/store";
 </script>
 
 <template>
+  <h2>{{ $t("settings.heading.localTimetables") }}</h2>
+  <div class="list">
+    <TimetableCard
+      v-for="timetable in localTimetables"
+      :key="timetable.id"
+      :timetable="timetable"
+      :selected="timetableId == timetable.id"
+      :editable="true"
+      @click="timetableId = timetable.id"
+    />
+  </div>
   <h2>{{ $t("settings.heading.remoteTimetables") }}</h2>
   <div class="list">
     <TimetableCard
@@ -11,7 +22,7 @@ import { timetables, timetableId } from "@/store";
       :key="timetable.id"
       :timetable="timetable"
       :selected="timetableId == timetable.id"
-      :editable="true"
+      :editable="false"
       @click="timetableId = timetable.id"
     />
   </div>