🐛 Matching any substitution on empty lessons

If a timetable lesson is empty (eg. has no teacher),
just matching any lesson to it is not intended behaviour,
like it is the other way around.

server/api/index.js

@@ -177,6 +177,7 @@ export async function getSubstitutions(req, res) {
       id: element.id,
       class: element.class,
       type: element.type,
+      rawType: element.rawType,
       lesson: element.lesson,
       date: new Date(element.date).getTime(),
       notes: element.notes,

server/parser/filesystem.js

@@ -0,0 +1,24 @@
+import fs from "fs";
+
+/* 
+This file provider allows the application to use a local folder containing
+parsable (.html) files, instead of downloading them from the internet.
+
+This can be especially useful for development.
+*/
+
+export class FileSystemClient {
+  constructor(path) {
+    this.path = path;
+  }
+
+  getFiles() {
+    const contents = [];
+    const files = fs.readdirSync(this.path);
+    for (const file of files) {
+      const data = fs.readFileSync(this.path + "/" + file).toString();
+      contents.push(data);
+    }
+    return contents;
+  }
+}

server/parser/index.js

@@ -39,8 +39,32 @@ export class Parser {
       const dayPlans = [];
       for (const plan of plans) {
         const foundPlan = dayPlans.find((e) => e.date == plan.date);
-        if (!foundPlan) dayPlans.push(plan);
-        else foundPlan.changes.push(...plan.changes);
+        if (!foundPlan) {
+          // Make sure to not insert duplicate substitutions within a file
+          const changes = structuredClone(plan.changes);
+          const cleanedChanges = [];
+          for (const change of changes) {
+            const changeExists = cleanedChanges.find(
+              (e) => JSON.stringify(e) == JSON.stringify(change),
+            );
+            if (!changeExists) {
+              cleanedChanges.push(change);
+            }
+            // Use the new array of changes
+            plan.changes = cleanedChanges;
+          }
+          dayPlans.push(plan);
+        } else {
+          for (const change of plan.changes) {
+            // Make sure to not insert a substitution that already exists in the changes
+            const changeExists = foundPlan.changes.find(
+              (e) => JSON.stringify(e) == JSON.stringify(change),
+            );
+            if (!changeExists) {
+              foundPlan.changes.push(change);
+            }
+          }
+        }
       }
       // Insert substitutions of all substitution plans
       for (const plan of dayPlans) {
@@ -96,15 +120,15 @@ export class Parser {
       // (Date, Type, Lesson, Classes and Subject need to be the same)
       const matchingSubstitutionId = knownSubstitutions.findIndex(
         (substitution) => {
-          return substitution.date == new Date(date).setUTCHours(0, 0, 0, 0) &&
-            substitution.type == (change.type == "Entfall")
-            ? "cancellation"
-            : "change" &&
-                substitution.lesson == change.lesson &&
-                classes.sort().join(",") ==
-                  substitution.class.sort().join(",") &&
-                substitution.changedSubject == change.subject &&
-                substitution.teacher == (change.teacher || "");
+          return (
+            substitution.date.getTime() ==
+              new Date(date).setUTCHours(0, 0, 0, 0) &&
+            substitution.rawType == change.type &&
+            substitution.lesson == change.lesson &&
+            classes.sort().join(",") == substitution.class.sort().join(",") &&
+            substitution.changedSubject == change.subject &&
+            substitution.teacher == (change.teacher || "")
+          );
         },
       );
       const matchingSubstitution = knownSubstitutions[matchingSubstitutionId];
@@ -115,7 +139,12 @@ export class Parser {
           data: {
             class: classes,
             date: new Date(date),
-            type: change.type == "Entfall" ? "cancellation" : "change",
+            type:
+              change.type == "Entfall" ||
+              change.type == "eigenverantwortliches Arbeiten"
+                ? "cancellation"
+                : "change",
+            rawType: change.type,
             lesson: parseInt(change.lesson),
             teacher: change.teacher || "",
             changedTeacher: change.changedTeacher,
@@ -133,6 +162,7 @@ export class Parser {
             changes: {
               class: classes,
               type: change.type == "Entfall" ? "cancellation" : "change",
+              rawType: change.type,
               lesson: parseInt(change.lesson),
               date: new Date(date),
               notes: change.notes,
@@ -204,6 +234,7 @@ export class Parser {
           changes: {
             class: remainingSubstitution.class,
             type: remainingSubstitution.type,
+            rawType: remainingSubstitution.rawType,
             lesson: remainingSubstitution.lesson,
             date: remainingSubstitution.date.getTime(),
             notes: remainingSubstitution.notes,

server/prisma/schema.prisma

@@ -27,6 +27,7 @@ model Substitution {
   class          String[]
   date           DateTime
   type           String
+  rawType        String   @default("unknown")
   lesson         Int
   teacher        String
   changedTeacher String?

src/App.vue

@@ -16,7 +16,7 @@ import {
 } from "@/store";
 import { computed, ref } from "vue";
 
-const autoThemes = { true: "dark", false: "light" };
+const autoThemes = { true: "darker", false: "light" };
 const autoTheme = ref("dark");
 const colorSchemeMedia = window.matchMedia("(prefers-color-scheme: dark)");
 autoTheme.value = autoThemes[colorSchemeMedia.matches];

src/assets/themes.css

@@ -3,7 +3,6 @@
   --element-color: #212121;
   --element-color-hover: #1b1b1b;
   --element-border-input: #4e7a3a;
-  --element-border-focus: #9ac982;
   --element-border-action: #1f5b63;
   --text-color: #bdbdbd;
   --font-family: "sourcesanspro";
@@ -31,7 +30,6 @@
   --element-color: #bdbdbd;
   --element-color-hover: #ada9a9;
   --element-border-input: #4caf50;
-  --element-border-focus: #7ba764;
   --element-border-action: #3f51b5;
   --text-color: #353131;
   --font-family: "sourcesanspro";
@@ -53,3 +51,30 @@
   --timetable-trust-warning-border: #b71c1c;
   --timetable-trust-warning-background: #dabcbc;
 }
+
+.app.theme-darker {
+  --bg-color: #111111;
+  --element-color: #252525;
+  --element-color-hover: #1d1d1d;
+  --element-border-input: #4e7a3a;
+  --element-border-action: #1f5b63;
+  --text-color: #bdbdbd;
+  --font-family: "sourcesanspro";
+  --titlebar-color: #1d1d1d;
+  --titlebar-element-active-color: #44573b;
+  --titlebar-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
+  --bottomnav-color: hsl(137, 8%, 17%);
+  --bottomnav-icon-color: #899c8b;
+  --bottomnav-icon-active-color: #1e271f;
+  --bottomnav-active-color: #7c8670;
+  --bottomnav-shadow: 5px 7px 19px 0px rgba(0, 0, 0, 0.25);
+  --loader-color: #7ca74b;
+  --loader-error-color: #a54a4a;
+  --substitution-background-change: #095079;
+  --substitution-background-cancellation: #7d2b2d;
+  --substitution-background-addition: #326430;
+  --substitution-background-deletion: #7d2b2d;
+  --substitution-background-unchanged: #1c1e1d;
+  --timetable-trust-warning-border: #b71c1c;
+  --timetable-trust-warning-background: #412727;
+}

src/components/history-list.vue

@@ -79,8 +79,11 @@ const chars = {
                 room: event.change.change.room,
               },
             )
-          }}<span class="notes" v-if="event.change.notes">
-            {{ $t("timetable.notes") }} {{ event.change.notes }}
+          }}<span class="notes">
+            <i>{{ event.change.rawType }}</i>
+            <span v-if="event.change.notes">
+              / {{ $t("timetable.notes") }} {{ event.change.notes }}</span
+            >
           </span>
         </span>
         <span class="notes">

src/components/lesson-card.vue

@@ -130,6 +130,9 @@ function getTime(index) {
           >, {{ $t("timetable.notes") }} {{ getNotes(lesson.substitution) }}
         </span>
       </div>
+      <span class="info type" v-if="lesson.substitution">
+        <i>{{ lesson.substitution.rawType }}</i>
+      </span>
     </div>
     <div class="times" v-if="getTime(index).start && !edit">
       <span>{{ getTime(index).start }} -</span>

src/components/substitution-list.vue

@@ -60,8 +60,11 @@ const substitutionsForDate = computed(() => {
             },
           )
         }}</span>
-        <span class="notes" v-if="substitution.notes">
-          {{ $t("timetable.notes") }} {{ substitution.notes }}
+        <span class="detail">
+          <i>{{ substitution.rawType }}</i>
+          <span v-if="substitution.notes">
+            / {{ $t("timetable.notes") }} {{ substitution.notes }}</span
+          >
         </span>
       </div>
     </div>
@@ -98,7 +101,7 @@ const substitutionsForDate = computed(() => {
   word-wrap: break-word;
 }
 
-.notes {
+.detail {
   font-size: 13px;
   font-weight: 100;
 }

src/components/timetable-list.vue

@@ -24,7 +24,7 @@ const linkedTimetable = computed(() => {
           return (
             entry.lesson == index + 1 &&
             entryDay == props.date.getTime() &&
-            (entry.teacher == e.teacher || !entry.teacher || !e.teacher)
+            (entry.teacher == e.teacher || !entry.teacher)
           );
         },
       );

src/components/timetable-setup.vue

@@ -89,8 +89,4 @@ select {
 select:hover {
   background-color: var(--element-color-hover);
 }
-
-select:focus {
-  border-color: var(--element-border-focus);
-}
 </style>

src/store.js

@@ -30,19 +30,6 @@ export const activeProfileId = ref(
   localStorage.getItem("activeProfile") || profiles.value[0].id,
 );
 
-watch(
-  () => activeProfile.value.classFilter,
-  () => {
-    fetchData(getNextAndPrevDay(selectedDate.value), false);
-  },
-);
-
-export const localTimetables = ref(
-  JSON.parse(localStorage.getItem("timetables")) || [],
-);
-
-export const theme = ref(localStorage.getItem("theme") || "auto");
-
 watch(
   profiles,
   (newValue) => {
@@ -53,6 +40,27 @@ watch(
 watch(activeProfileId, (newValue) => {
   localStorage.setItem("activeProfile", newValue);
 });
+watch(
+  () => activeProfile.value.classFilter,
+  () => {
+    fetchData(getNextAndPrevDay(selectedDate.value), false);
+  },
+);
+
+export const cachedTimetables = ref(
+  JSON.parse(localStorage.getItem("cachedTimetables")) || {},
+);
+export const localTimetables = ref(
+  JSON.parse(localStorage.getItem("timetables")) || [],
+);
+
+watch(
+  cachedTimetables,
+  (newValue) => {
+    localStorage.setItem("cachedTimetables", JSON.stringify(newValue));
+  },
+  { deep: true },
+);
 watch(
   localTimetables,
   (newValue) => {
@@ -60,6 +68,8 @@ watch(
   },
   { deep: true },
 );
+
+export const theme = ref(localStorage.getItem("theme") || "auto");
 watch(theme, (newValue) => {
   localStorage.setItem("theme", newValue);
 });
@@ -92,8 +102,12 @@ export const timetable = computed(() => {
   );
 });
 export const sessionInfo = ref({});
-export const timetables = ref([]);
-export const times = ref([]);
+export const timetables = ref(
+  (cachedTimetables.value[activeProfileId.value] || {}).timetables || [],
+);
+export const times = ref(
+  (cachedTimetables.value[activeProfileId.value] || {}).times || [],
+);
 export const substitutions = ref({});
 export const history = ref({});
 export const classList = ref([]);
@@ -182,6 +196,13 @@ export async function fetchTimetables() {
   } else {
     timetables.value = timetableData.timetables;
     times.value = timetableData.times;
+
+    cachedTimetables.value[activeProfileId.value] =
+      structuredClone(timetableData);
+    for (const timetable of cachedTimetables.value[activeProfileId.value]
+      .timetables) {
+      timetable.fromCache = true;
+    }
   }
 }
 

src/strings.js

@@ -62,6 +62,7 @@ export const strings = {
         auto: "Auto",
         dark: "Dark",
         light: "Light",
+        darker: "Darker",
       },
     },
     timetable: {
@@ -192,6 +193,7 @@ export const strings = {
         auto: "Automatisch",
         dark: "Dunkel",
         light: "Hell",
+        darker: "Darker",
       },
     },
     timetable: {

src/views/LoginView.vue

@@ -1,21 +1,24 @@
 <template>
-  <div class="login">
-    <h1>Timetable V2</h1>
-    <form action="/auth/login" method="POST">
-      <input
-        type="password"
-        name="password"
-        autocomplete="current-password"
-        placeholder="Password"
-      />
-      <button type="submit">Login</button>
-    </form>
+  <div class="container">
+    <div class="login">
+      <h1>Timetable V2</h1>
+      <form action="/auth/login" method="POST">
+        <input
+          type="password"
+          name="password"
+          autocomplete="current-password"
+          placeholder="Password"
+        />
+        <button type="submit">Login</button>
+      </form>
+    </div>
   </div>
 </template>
 
 <style scoped>
-.login {
-  padding: 50px 10px;
+.container {
+  height: 100%;
+  overflow-y: scroll;
 }
 
 .login {
@@ -25,6 +28,7 @@
   flex-direction: column;
   font-family: Arial, Helvetica, sans-serif;
   color: var(--text-color);
+  padding: 30px 0px;
 }
 
 form {

src/views/settings/AdminSettings.vue

@@ -1,9 +1,16 @@
 <script setup>
 import ExpandSection from "@/components/settings/expand-section.vue";
 import KeyCard from "@/components/settings/key-card.vue";
-import TimetableCard from "@/components/settings/timetable-card.vue";
+import RadioCard from "@/components/settings/radio-card.vue";
 import { baseUrl } from "@/store";
-import { PlusIcon, SaveIcon, XIcon, RefreshCwIcon } from "lucide-vue-next";
+import {
+  PlusIcon,
+  SaveIcon,
+  XIcon,
+  RefreshCwIcon,
+  Edit2Icon,
+  TrashIcon,
+} from "lucide-vue-next";
 import { ref } from "vue";
 
 function confirm(message) {
@@ -146,24 +153,33 @@ updateData();
           <span>Cancel edit</span>
         </div>
       </div>
-      <TimetableCard
+      <RadioCard
         v-for="timetable in timetables"
         :key="timetable"
-        :timetable="timetable"
-        :editable="true"
+        :title="timetable.title"
+        :subtitle="`${$t('settings.source')}:  ${timetable.source}, Class: ${
+          timetable.class
+        }, ID: ${timetable.id}`"
         :selected="timetable.id == timetableEditId"
-        :admin="true"
-        @delete="deleteObject('timetable', timetable.id)"
-        @edit="
-          () => {
-            timetableEditId = timetable.id;
-            timetableName = timetable.title;
-            timetableClass = timetable.class;
-            timetableSource = timetable.source;
-            timetableTrusted = timetable.trusted;
-          }
-        "
-      />
+      >
+        <Edit2Icon
+          @click="
+            () => {
+              timetableEditId = timetable.id;
+              timetableName = timetable.title;
+              timetableClass = timetable.class;
+              timetableSource = timetable.source;
+              timetableTrusted = timetable.trusted;
+            }
+          "
+        />
+        <TrashIcon
+          @click="
+            if (confirm('Delete this timetable?'))
+              deleteObject('timetable', timetable.id);
+          "
+        />
+      </RadioCard>
     </div>
   </ExpandSection>
   <ExpandSection title="Keys">

src/views/settings/AppearanceSettings.vue

@@ -12,8 +12,9 @@ import i18n, { language, localeNames } from "@/i18n";
       $t('settings.theme.auto'),
       $t('settings.theme.light'),
       $t('settings.theme.dark'),
+      $t('settings.theme.darker'),
     ]"
-    :values="['auto', 'light', 'dark']"
+    :values="['auto', 'light', 'dark', 'darker']"
     v-model="theme"
   />
   <div class="spacer" />

src/views/settings/ProfileSettings.vue

@@ -51,7 +51,7 @@ function importProfile(event) {
 
 function exportProfile(profile) {
   download(
-    JSON.stringify(profile),
+    new Blob(["\ufeff", JSON.stringify(profile)]),
     `profile-${profile.id}.json`,
     "application/json",
   );

src/views/settings/TimetableSettings.vue

@@ -51,7 +51,7 @@ function importTimetable(event) {
 
 function exportTimetable(timetable) {
   download(
-    JSON.stringify(timetable),
+    new Blob(["\ufeff", JSON.stringify(timetable)]),
     `timetable-${timetable.id}.json`,
     "application/json",
   );