🏗️ Merge substitution filter and timetable filter

src/store.js

@@ -5,25 +5,13 @@ import router from "./router";
 export const lastRoute = ref();
 export const loading = ref(false);
 
-export const substitutionFilter = ref(
-  localStorage.getItem("substitutionFilter") || "all"
-);
-export const timetableClass = ref(
-  localStorage.getItem("timetableClass") || "none"
-);
+export const classFilter = ref(localStorage.getItem("classFilter") || "none");
 export const timetableGroups = ref(
   JSON.parse(localStorage.getItem("timetableGroups") || "[]")
 );
 
-watch(substitutionFilter, (newValue) => {
-  if (newValue == "other") {
-    newValue = prompt("Please enter a class to filter (e.g. 9C)");
-  }
-  localStorage.setItem("substitutionFilter", newValue);
-  fetchData();
-});
-watch(timetableClass, (newValue) => {
-  localStorage.setItem("timetableClass", newValue);
+watch(classFilter, (newValue) => {
+  localStorage.setItem("classFilter", newValue);
   fetchData();
 });
 watch(timetableGroups, (newValue) => {
@@ -126,7 +114,7 @@ export async function fetchClassList() {
 
 export async function fetchTimetable() {
   const timetableResponse = await fetch(
-    `${baseUrl}/timetable?class=${timetableClass.value}`
+    `${baseUrl}/timetable?class=${classFilter.value}`
   );
   const timetableData = await timetableResponse.json();
   if (timetableData.error) {
@@ -138,9 +126,9 @@ export async function fetchTimetable() {
 export async function fetchSubstitutions() {
   const requestDate = `?date=${selectedDate.value.getTime()}`;
   const substitutionResponse = await fetch(
-    substitutionFilter.value == "all"
+    classFilter.value == "none"
       ? `${baseUrl}/substitutions${requestDate}`
-      : `${baseUrl}/substitutions${requestDate}&class=${substitutionFilter.value}`
+      : `${baseUrl}/substitutions${requestDate}&class=${classFilter.value}`
   );
   const substitutionData = await substitutionResponse.json();
   substitutions.value = substitutionData;
@@ -149,9 +137,9 @@ export async function fetchSubstitutions() {
 export async function fetchHistory() {
   const requestDate = `?date=${selectedDate.value.getTime()}`;
   const historyResponse = await fetch(
-    substitutionFilter.value == "all"
+    classFilter.value == "all"
       ? `${baseUrl}/history${requestDate}`
-      : `${baseUrl}/history${requestDate}&class=${substitutionFilter.value}`
+      : `${baseUrl}/history${requestDate}&class=${classFilter.value}`
   );
   const historyData = await historyResponse.json();
   if (historyData.error) console.warn("API Error: " + historyData.error);

src/views/SettingsView.vue

@@ -1,9 +1,8 @@
 <script setup>
 import {
   classList,
+  classFilter,
   possibleTimetableGroups,
-  substitutionFilter,
-  timetableClass,
   timetableGroups,
 } from "../store";
 
@@ -13,38 +12,24 @@ const gitHash = GITVERSION;
 
 <template>
   <div class="settings">
-    <h2>Substitution Plan</h2>
+    <h2>Filtering</h2>
     <p>
-      If a class is selected, only entries that are relevant for this class are
-      shown in the substitution plan.
+      Select a class here so the correct timetable is used and only relevant
+      substitutions are shown.
     </p>
-    <select v-model="substitutionFilter">
-      <option value="all">All (No filter)</option>
+    <select v-model="classFilter">
+      <option value="none">Select a class</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 class="spacer"></div>
     <h2>Timetable Groups</h2>
     <p>
-      The a timetable group defines, which lesson should be displayed, and for
-      which substitution should be shown if there are multiple possibilities for
-      a single lesson within one class.
+      A timetable group defines, which lesson should be displayed, and which
+      substitution should be shown if there are multiple possibilities for a
+      single lesson within one class.
     </p>
     <select v-model="timetableGroups" multiple>
       <option value="none">None</option>