✨ Add timetable group feature

src/views/SettingsView.vue

@@ -1,6 +1,11 @@
 <script setup>
-import { classList } from "../store";
-import { substitutionFilter, timetableClass } from "../store";
+import {
+  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;