From 495771b0e8ac6aea607188599e4425586ee03615 Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Sun, 1 May 2022 14:26:07 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20settings=20page?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store.js               | 16 +++++++++-
 src/views/SettingsView.vue | 62 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 1 deletion(-)

diff --git a/src/store.js b/src/store.js
index 04d8487..c4f7a84 100644
--- a/src/store.js
+++ b/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([]);
 
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index e69de29..f9a817c 100644
--- a/src/views/SettingsView.vue
+++ b/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>