From dac0d09167b589948d5060f2b804060b8689f77f Mon Sep 17 00:00:00 2001
From: minie4 <minie4@gmx.de>
Date: Sun, 11 Jun 2023 23:54:18 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fix=20issues=20with=20UTC=20time?=
 =?UTF-8?q?=20handling?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Using `.setUTCHours` can cause the day to shift at specific times
---
 src/components/day-carousel.vue      |  4 ++--
 src/components/history-list.vue      | 22 ++++++++++++++--------
 src/components/substitution-list.vue | 22 ++++++++++++++--------
 src/store.js                         |  4 ++--
 src/util.js                          | 12 ++++++++----
 5 files changed, 40 insertions(+), 24 deletions(-)

diff --git a/src/components/day-carousel.vue b/src/components/day-carousel.vue
index df34c74..c2c99d5 100644
--- a/src/components/day-carousel.vue
+++ b/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>
 
diff --git a/src/components/history-list.vue b/src/components/history-list.vue
index fbd79c6..d3dc2ca 100644
--- a/src/components/history-list.vue
+++ b/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), {
-              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,
-            })
+            $t(
+              getSubstitutionText(
+                event.change,
+                !classFilter || classFilter == "none"
+              ),
+              {
+                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>
diff --git a/src/components/substitution-list.vue b/src/components/substitution-list.vue
index 12d2b02..33d878d 100644
--- a/src/components/substitution-list.vue
+++ b/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), {
-            subject: substitution.change.subject,
-            class: substitution.class.join(", "),
-            teacher: substitution.teacher,
-            new_teacher: substitution.change.teacher,
-            room: substitution.change.room,
-          })
+          $t(
+            getSubstitutionText(
+              substitution,
+              !classFilter || classFilter == "none"
+            ),
+            {
+              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 }}
diff --git a/src/store.js b/src/store.js
index 3e57386..f12ba82 100644
--- a/src/store.js
+++ b/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)
diff --git a/src/util.js b/src/util.js
index 7417206..1ccaa23 100644
--- a/src/util.js
+++ b/src/util.js
@@ -1,7 +1,4 @@
-import { classFilter } from "@/store";
-
-export function getSubstitutionText(substitution) {
-  const includeClass = !classFilter.value || classFilter.value == "none";
+export function getSubstitutionText(substitution, includeClass) {
   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())
+  );
+}