✨ Add settings page

src/store.js

@@ -1,5 +1,19 @@
 import { computed } from "@vue/reactivity";
-import { ref } from "vue";
+import { ref, watch } from "vue";
+
+export const substitutionFilter = ref(
+  localStorage.getItem("substitutionFilter") || "all"
+);
+export const timetableClass = ref(
+  localStorage.getItem("timetableClass") || "none"
+);
+
+watch(substitutionFilter, (newValue) => {
+  localStorage.setItem("substitutionFilter", newValue);
+});
+watch(timetableClass, (newValue) => {
+  localStorage.setItem("timetableClass", newValue);
+});
 
 export const history = ref([]);
 

src/views/SettingsView.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { classList } from "../store";
+import { substitutionFilter, timetableClass } from "../store";
+</script>
+
+<template>
+  <div class="settings">
+    <h2>Substitution Plan</h2>
+    <p>
+      If a class is selected, only entries that are relevant for this class are
+      shown in the substitution plan.
+    </p>
+    <select v-model="substitutionFilter">
+      <option value="all">All (No filter)</option>
+      <option v-for="option in classList" :value="option" :key="option">
+        {{ option }}
+      </option>
+      <option value="other">Other</option>
+    </select>
+    <div class="spacer"></div>
+    <h2>Timetable</h2>
+    <p>
+      The timetable of the selected class is displayed on the timetable tab and
+      available substitutions are merged into it. If no class is selected or no
+      timetable data is available for the selected class, this functionality
+      will be disabled.
+    </p>
+    <select v-model="timetableClass">
+      <option value="none">None</option>
+      <option v-for="option in classList" :value="option" :key="option">
+        {{ option }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<style scoped>
+.settings {
+  padding: 65px 10px 80px 10px;
+}
+
+h2 {
+  margin: 0px;
+}
+
+p {
+  margin: 5px 0px;
+}
+
+select {
+  padding: 5px 0px;
+  margin: 5px 0px;
+  outline: none;
+  border: 2px solid #34631f;
+  border-radius: 5px;
+}
+
+.spacer {
+  display: block;
+  margin: 15px 0;
+}
+</style>