From 4a5aec36dd9c1898305fc7571795ef267b600b0a Mon Sep 17 00:00:00 2001
From: Julian Krauser <jkrauser209@gmail.com>
Date: Fri, 7 Feb 2025 13:07:58 +0100
Subject: [PATCH] fix: calendar entry creation time shift

---
 .../club/calendar/CreateCalendarModal.vue     | 61 ++++++++++++++++---
 .../club/calendar/UpdateCalendarModal.vue     |  2 +-
 2 files changed, 53 insertions(+), 10 deletions(-)

diff --git a/src/components/admin/club/calendar/CreateCalendarModal.vue b/src/components/admin/club/calendar/CreateCalendarModal.vue
index 7e27380..a1a77f6 100644
--- a/src/components/admin/club/calendar/CreateCalendarModal.vue
+++ b/src/components/admin/club/calendar/CreateCalendarModal.vue
@@ -79,11 +79,30 @@
       <div v-if="!allDay" class="flex flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
-          <input type="datetime-local" id="starttime" required :value="data.start.split(':00+')[0]" />
+          <input
+            type="datetime-local"
+            id="starttime"
+            required
+            :value="formatForDateTimeLocalInput(data.start)"
+            @change="
+              ($event) => {
+                ($refs.endtime as HTMLInputElement).min = formatForDateTimeLocalInput(
+                  ($event.target as HTMLInputElement).value
+                );
+              }
+            "
+          />
         </div>
         <div class="w-full">
           <label for="endtime">Endzeit</label>
-          <input type="datetime-local" id="endtime" required :value="data.end.split(':00+')[0]" />
+          <input
+            ref="endtime"
+            type="datetime-local"
+            id="endtime"
+            required
+            :value="formatForDateTimeLocalInput(data.end)"
+            :min="formatForDateTimeLocalInput(data.start)"
+          />
         </div>
       </div>
       <div v-else class="flex flex-row gap-2">
@@ -93,8 +112,12 @@
             type="date"
             id="startdate"
             required
-            :value="data.start"
-            @change="($event) => (($refs.enddate as HTMLInputElement).max = ($event.target as HTMLInputElement).value)"
+            :value="formatForDateInput(data.start)"
+            @change="
+              ($event) => {
+                ($refs.enddate as HTMLInputElement).min = formatForDateInput(($event.target as HTMLInputElement).value);
+              }
+            "
           />
         </div>
         <div class="w-full">
@@ -105,7 +128,7 @@
             id="enddate"
             required
             :value="decrementEndDate(data.end)"
-            :min="data.start"
+            :min="formatForDateInput(data.start)"
           />
         </div>
       </div>
@@ -180,11 +203,11 @@ export default defineComponent({
       let createCalendar: CreateCalendarViewModel = {
         typeId: this.selectedType.id,
         starttime: this.allDay
-          ? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0))
-          : formData.starttime.value,
+          ? new Date(new Date(formData.startdate.value).setHours(0, 0, 0, 0)).toISOString()
+          : new Date(formData.starttime.value).toISOString(),
         endtime: this.allDay
-          ? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999))
-          : formData.endtime.value,
+          ? new Date(new Date(formData.enddate.value).setHours(23, 59, 59, 999)).toISOString()
+          : new Date(formData.endtime.value).toISOString(),
         title: formData.title.value,
         content: formData.content.value,
         location: formData.location.value,
@@ -209,6 +232,26 @@ export default defineComponent({
       const month = String(localDate.getMonth() + 1).padStart(2, "0");
       const day = String(localDate.getDate() - 1).padStart(2, "0");
 
+      return `${year}-${month}-${day}`;
+    },
+    formatForDateTimeLocalInput(utcDateString: string) {
+      const localDate = new Date(utcDateString);
+
+      const year = localDate.getFullYear();
+      const month = String(localDate.getMonth() + 1).padStart(2, "0");
+      const day = String(localDate.getDate()).padStart(2, "0");
+      const hours = String(localDate.getHours()).padStart(2, "0");
+      const minutes = String(localDate.getMinutes()).padStart(2, "0");
+
+      return `${year}-${month}-${day}T${hours}:${minutes}`;
+    },
+    formatForDateInput(utcDateString: string) {
+      const localDate = new Date(utcDateString);
+
+      const year = localDate.getFullYear();
+      const month = String(localDate.getMonth() + 1).padStart(2, "0");
+      const day = String(localDate.getDate()).padStart(2, "0");
+
       return `${year}-${month}-${day}`;
     },
   },
diff --git a/src/components/admin/club/calendar/UpdateCalendarModal.vue b/src/components/admin/club/calendar/UpdateCalendarModal.vue
index 0f06597..19b46ee 100644
--- a/src/components/admin/club/calendar/UpdateCalendarModal.vue
+++ b/src/components/admin/club/calendar/UpdateCalendarModal.vue
@@ -78,7 +78,7 @@
         <input type="checkbox" id="allDay" v-model="calendar.allDay" />
         <label for="allDay">ganztägig</label>
       </div>
-      <div v-if="calendar.allDay == false" class="flex flex-row gap-2">
+      <div v-if="!calendar.allDay" class="flex flex-row gap-2">
         <div class="w-full">
           <label for="starttime">Startzeit</label>
           <input