🐛 Fix issues with UTC time handling

- Using `.setUTCHours` can cause the day to shift at specific times

src/components/day-carousel.vue

@@ -3,7 +3,7 @@ import { selectedDate, changeDate, changeDay } from "@/store";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import { Virtual } from "swiper";
 import { ref, watch } from "vue";
-import { getDateSkippingWeekend } from "@/util";
+import { getDateSkippingWeekend, setUTCMidnight } from "@/util";
 import ScrollableContainer from "@/components/scrollable-container.vue";
 
 defineProps({
@@ -89,7 +89,7 @@ watch(changeDay, (change) => {
   changeDay.value = 0;
 });
 watch(changeDate, (date) => {
-  slideToDate(new Date(date.setUTCHours(0, 0, 0, 0)));
+  slideToDate(setUTCMidnight(date));
 });
 </script>
 

src/components/history-list.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { history, loadingFailed } from "@/store";
+import { history, loadingFailed, classFilter } from "@/store";
 import { getSubstitutionText } from "@/util";
 import { computed } from "vue";
 import dayjs from "dayjs";
@@ -65,13 +65,19 @@ const chars = {
         <!-- If the entry is an addition or deletion generate a text -->
         <span class="text" v-else
           >{{
-            $t(getSubstitutionText(event.change), {
+            $t(
-              subject: event.change.change.subject,
+              getSubstitutionText(
-              class: event.change.class.join(", "),
+                event.change,
-              teacher: event.change.teacher,
+                !classFilter || classFilter == "none"
-              new_teacher: event.change.change.teacher,
+              ),
-              room: event.change.change.room,
+              {
-            })
+                subject: event.change.change.subject,
+                class: event.change.class.join(", "),
+                teacher: event.change.teacher,
+                new_teacher: event.change.change.teacher,
+                room: event.change.change.room,
+              }
+            )
           }}<span class="notes" v-if="event.change.notes">
             {{ $t("timetable.notes") }} {{ event.change.notes }}
           </span>

src/components/substitution-list.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { substitutions, loadingFailed } from "@/store";
+import { substitutions, loadingFailed, classFilter } from "@/store";
 import { getSubstitutionText, getSubstitutionColor } from "@/util";
 import { computed } from "vue";
 import InfoCard from "@/components/info-card.vue";
@@ -46,13 +46,19 @@ const substitutionsForDate = computed(() => {
       <span class="hour">{{ substitution.lesson }}</span>
       <div class="infos">
         <span class="text">{{
-          $t(getSubstitutionText(substitution), {
+          $t(
-            subject: substitution.change.subject,
+            getSubstitutionText(
-            class: substitution.class.join(", "),
+              substitution,
-            teacher: substitution.teacher,
+              !classFilter || classFilter == "none"
-            new_teacher: substitution.change.teacher,
+            ),
-            room: substitution.change.room,
+            {
-          })
+              subject: substitution.change.subject,
+              class: substitution.class.join(", "),
+              teacher: substitution.teacher,
+              new_teacher: substitution.change.teacher,
+              room: substitution.change.room,
+            }
+          )
         }}</span>
         <span class="notes" v-if="substitution.notes">
           {{ $t("timetable.notes") }} {{ substitution.notes }}

src/store.js

@@ -1,5 +1,5 @@
 import { ref, watch, computed } from "vue";
-import { getNextAndPrevDay } from "@/util";
+import { getNextAndPrevDay, setUTCMidnight } from "@/util";
 import i18n from "@/i18n";
 
 /* Router */
@@ -32,7 +32,7 @@ watch(theme, (newValue) => {
 });
 
 /* Date selector */
-export const selectedDate = ref(new Date(new Date().setUTCHours(0, 0, 0, 0)));
+export const selectedDate = ref(setUTCMidnight(new Date()));
 export const selectedDay = computed(() => selectedDate.value.getDay() - 1);
 // Jump to next Monday if it is weekend
 if (selectedDay.value == 5)

src/util.js

@@ -1,7 +1,4 @@
-import { classFilter } from "@/store";
+export function getSubstitutionText(substitution, includeClass) {
-
-export function getSubstitutionText(substitution) {
-  const includeClass = !classFilter.value || classFilter.value == "none";
   const includeClassValue = includeClass ? "withClass" : "withoutClass";
 
   // TODO: implement more texts
@@ -48,3 +45,10 @@ export function getNextAndPrevDay(date) {
     getDateSkippingWeekend(new Date(date.getTime() - 86400000)),
   ].map((e) => e.getTime());
 }
+
+export function setUTCMidnight(date) {
+  // Set the time to UTC midnight while keeping the correct date
+  return new Date(
+    Date.UTC(date.getFullYear(), date.getMonth(), date.getDate())
+  );
+}