♻️ Refactor frontend code

src/assets/base.css

@@ -2,12 +2,12 @@
   --bg-color: #353535;
   --element-color: #333030;
   --element-color-hover: #292424;
-  --element-border-input: #34631f;
+  --element-border-input: #4e7a3a;
   --element-border-action: #1f5b63;
   --text-color: #bdbdbd;
   --font-family: "sourcesanspro";
   --titlebar-color: #212121;
-  --titlebar-element-active-color: #335723;
+  --titlebar-element-active-color: #466439;
   --bottomnav-color: #555555;
   --bottomnav-icon-color: #c7c7c7;
   --bottomnav-icon-active-color: #456c47;
@@ -18,6 +18,8 @@
   --substitution-background-addition: #476331;
   --substitution-background-deletion: #7d2b2d;
   --substitution-background-unchanged: #26272a;
+  --timetable-trust-warning-border: #b71c1c;
+  --timetable-trust-warning-background: #412727;
 }
 
 @font-face {

src/components/loading-element.vue

@@ -26,10 +26,12 @@ defineProps({
   transition: all 0.8s;
   transition-delay: 0.2s;
 }
+
 .container.active {
   height: 100px;
   opacity: 1;
 }
+
 .loader {
   width: 48px;
   height: 48px;
@@ -40,6 +42,7 @@ defineProps({
   box-sizing: border-box;
   animation: rotation 1s linear infinite;
 }
+
 @keyframes rotation {
   0% {
     transform: rotate(0deg);

src/components/titlebar-element.vue

@@ -58,10 +58,11 @@ a {
   text-decoration: none;
   color: inherit;
   padding: 4px;
+  border-radius: 5px;
+  transition: background-color 0.2s;
 }
 
 a.router-link-active {
   background-color: var(--titlebar-element-active-color);
-  border-radius: 5px;
 }
 </style>

src/store.js

@@ -110,10 +110,10 @@ export async function fetchData() {
   const checkResponse = await fetch(`${baseUrl}/check`);
   if (checkResponse.status != 200) router.push("/login");
 
-  fetchClassList();
-  fetchTimetable();
-  fetchSubstitutions();
-  fetchHistory();
+  await fetchClassList();
+  await fetchTimetable();
+  await fetchSubstitutions();
+  await fetchHistory();
 
   loading.value = false;
 }

src/views/HistoryView.vue

@@ -78,7 +78,7 @@ function getColor(type) {
   border-radius: 11px;
   margin: 10px 0px;
   padding: 10px 10px;
-  grid-template-columns: 40px auto;
+  grid-template-columns: min-content auto;
   gap: 5px;
 }
 

src/views/SettingsView.vue

@@ -13,6 +13,7 @@ const gitHash = GITVERSION;
 
 <template>
   <div class="settings">
+    <!-- Filtering -->
     <h2>{{ $t("settings.heading.filtering") }}</h2>
     <p>{{ $t("settings.text.filtering") }}</p>
     <select v-model="classFilter">
@@ -23,6 +24,8 @@ const gitHash = GITVERSION;
       <option value="other">{{ $t("settings.other") }}</option>
     </select>
     <div class="spacer"></div>
+
+    <!-- Timetable Groups -->
     <h2>{{ $t("settings.heading.timetableGroups") }}</h2>
     <p>{{ $t("settings.text.timetableGroups") }}</p>
     <select v-model="timetableGroups" multiple>
@@ -36,6 +39,8 @@ const gitHash = GITVERSION;
       </option>
     </select>
     <div class="spacer"></div>
+
+    <!-- Language -->
     <h2>{{ $t("settings.heading.language") }}</h2>
     <p>{{ $t("settings.text.language") }}</p>
     <select v-model="language">
@@ -48,6 +53,8 @@ const gitHash = GITVERSION;
       </option>
     </select>
     <div class="spacer"></div>
+
+    <!-- About -->
     <h2>{{ $t("settings.heading.about") }}</h2>
     <p>{{ $t("settings.text.about") }}</p>
     <div class="spacer"></div>
@@ -74,6 +81,12 @@ select {
   outline: none;
   border: 2px solid var(--element-border-input);
   border-radius: 5px;
+  background-color: var(--element-color);
+  transition: background-color 0.2s;
+}
+
+select:hover {
+  background-color: var(--element-color-hover);
 }
 
 select[multiple] {

src/views/SubstitutionView.vue

@@ -36,14 +36,10 @@ const substitutions = computed(() => {
   padding: 0px 10px 80px 10px;
 }
 
-.title {
-  font-size: 18px;
-}
-
 .substitution {
   display: grid;
   background-color: var(--substitution-background-unchanged);
-  min-height: 35px;
+  min-height: 50px;
   border-radius: 11px;
   margin: 10px 0px;
   padding: 10px 15px;

src/views/TimetableView.vue

@@ -12,11 +12,14 @@ import { getSubstitutionColor } from "../util";
 import { computed } from "vue";
 import TimetableSetup from "../components/initial-setup.vue";
 
+// Link the timetable with the substitutions
 const linkedTimetable = computed(() => {
   const currentDay = parsedTimetable.value[selectedDay.value];
   if (!currentDay) return [];
+
   const newDay = currentDay.map((e, index) => {
     const newElement = { ...e };
+    // Find a substitution mathing this lesson
     newElement.substitution = substitutions.value.find((entry) => {
       const entryDay = new Date(entry.date).getTime();
       return (
@@ -32,16 +35,14 @@ const linkedTimetable = computed(() => {
 
 function isChanged(lesson, key) {
   const substitution = lesson.substitution;
-  if (!substitution) return false;
-  if (!substitution.change) return false;
+  if (!(substitution && substitution.change)) return false;
   const changedKeys = Object.keys(substitution.change);
   if (!changedKeys.includes(key)) return false;
   return lesson[key] != substitution.change[key];
 }
 
 function getNotes(substitution) {
-  if (!substitution) return;
-  if (!substitution.notes) return;
+  if (!(substitution && substitution.notes)) return;
   return substitution.notes;
 }
 
@@ -52,7 +53,7 @@ function isCancelled(substitution) {
 </script>
 <template>
   <TimetableSetup
-    v-show="!classFilter || classFilter == 'none'"
+    v-show="classFilter == 'none'"
     :options="classList"
     v-model="classFilter"
   />
@@ -113,8 +114,8 @@ function isCancelled(substitution) {
   justify-content: center;
 }
 .trust-warning {
-  border: 1px solid #b71c1c;
-  background-color: #412727;
+  border: 1px solid var(--timetable-trust-warning-border);
+  background-color: var(--timetable-trust-warning-background);
   border-radius: 4px;
   padding: 3px 10px;
   margin-top: 10px;
@@ -127,7 +128,7 @@ function isCancelled(substitution) {
   min-height: 50px;
   border-radius: 11px;
   margin: 10px 0px;
-  padding: 15px 15px;
+  padding: 15px;
   grid-template-columns: max-content auto;
   gap: 15px;
 }