✨ Add timetable group feature

src/store.js

@@ -11,6 +11,9 @@ export const substitutionFilter = ref(
 export const timetableClass = ref(
   localStorage.getItem("timetableClass") || "none"
 );
+export const timetableGroups = ref(
+  JSON.parse(localStorage.getItem("timetableGroups") || "[]")
+);
 
 watch(substitutionFilter, (newValue) => {
   if (newValue == "other") {
@@ -23,6 +26,10 @@ watch(timetableClass, (newValue) => {
   localStorage.setItem("timetableClass", newValue);
   fetchData();
 });
+watch(timetableGroups, (newValue) => {
+  localStorage.setItem("timetableGroups", JSON.stringify(newValue));
+  fetchData();
+});
 
 export const selectedDate = ref(new Date(new Date().setUTCHours(0, 0, 0, 0)));
 export const selectedDay = computed(() => selectedDate.value.getDay() - 1);
@@ -56,14 +63,45 @@ export const parsedTimetable = computed(() => {
   return timetable.value.map((day) => {
     const newDay = [];
     for (const lesson of day) {
-      const lessonLength = lesson.length || 1;
+      var usedLesson = lesson;
-      delete lesson.length;
+      // Check for timetable groups
-      for (var i = 0; i < lessonLength; i++) newDay.push(lesson);
+      if (Array.isArray(lesson)) {
+        var matchingLesson = lesson.find((e) =>
+          timetableGroups.value.includes(e.group)
+        );
+        if (!matchingLesson) {
+          matchingLesson = {
+            subject: "???",
+            teacher: "Please configure a timetable group in the settings",
+            length: lesson[0].length || 1,
+          };
+        }
+        usedLesson = matchingLesson;
+      }
+      const lessonLength = usedLesson.length || 1;
+      delete usedLesson.length;
+      for (var i = 0; i < lessonLength; i++) newDay.push(usedLesson);
     }
     return newDay;
   });
 });
 
+export const possibleTimetableGroups = computed(() => {
+  const foundTimetableGroups = [];
+  for (const day of timetable.value) {
+    for (const lesson of day) {
+      if (Array.isArray(lesson)) {
+        for (const group of lesson) {
+          if (!foundTimetableGroups.includes(group.group)) {
+            foundTimetableGroups.push(group.group);
+          }
+        }
+      }
+    }
+  }
+  return foundTimetableGroups;
+});
+
 const baseUrl = import.meta.env.VITE_API_ENDPOINT || "/api";
 
 export async function fetchData() {

src/views/SettingsView.vue

@@ -1,6 +1,11 @@
 <script setup>
-import { classList } from "../store";
+import {
-import { substitutionFilter, timetableClass } from "../store";
+  classList,
+  possibleTimetableGroups,
+  substitutionFilter,
+  timetableClass,
+  timetableGroups,
+} from "../store";
 
 // eslint-disable-next-line no-undef
 const gitHash = GITVERSION;
@@ -35,6 +40,23 @@ const gitHash = GITVERSION;
       </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.
+    </p>
+    <select v-model="timetableGroups" multiple>
+      <option value="none">None</option>
+      <option
+        v-for="option in possibleTimetableGroups"
+        :value="option"
+        :key="option"
+      >
+        {{ option }}
+      </option>
+    </select>
+    <div class="spacer"></div>
     <h2>About</h2>
     <p>
       This Tool queries and parses the latest timetable data every minute. The
@@ -69,6 +91,10 @@ select {
   border-radius: 5px;
 }
 
+select[multiple] {
+  min-width: 90px;
+}
+
 .spacer {
   display: block;
   margin: 15px 0;

src/views/TimetableView.vue

@@ -69,12 +69,14 @@ function isCancelled(substitution) {
               <s>{{ lesson.teacher }}</s>
               {{ lesson.substitution.change.teacher }},
             </span>
-            <span class="info" v-else> {{ lesson.teacher }}, </span>
+            <span class="info" v-else> {{ lesson.teacher }}</span>
             <!-- Room changed -->
             <span class="info" v-if="isChanged(lesson, 'room')">
               <s>{{ lesson.room }}</s> {{ lesson.substitution.change.room }}
             </span>
-            <span class="info" v-else>{{ lesson.room }}</span>
+            <span class="info" v-else-if="lesson.room"
+              >, {{ lesson.room }}</span
+            >
             <!-- Show notes if available -->
             <span class="info" v-if="getNotes(lesson.substitution)"
               >, Notes: {{ getNotes(lesson.substitution) }}