From 19ba095e07f07f70f0c4b8f15862304dfebdf49e Mon Sep 17 00:00:00 2001
From: Massedil <massedil-framagit.org@msd.im>
Date: Mon, 4 Nov 2024 22:35:01 +0100
Subject: [PATCH] Issue #1571: Fixes the switches for displaying hours not
 working.

---
 src/views/Event/EditView.vue | 32 ++++++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/views/Event/EditView.vue b/src/views/Event/EditView.vue
index 0896ecf36..341664ca2 100644
--- a/src/views/Event/EditView.vue
+++ b/src/views/Event/EditView.vue
@@ -67,12 +67,12 @@
         label-for="begins-on-field"
       >
         <event-date-picker
-          :time="eventOptions.showStartTime"
+          :time="showStartTime"
           v-model="beginsOn"
           @blur="consistencyBeginsOnBeforeEndsOn"
         ></event-date-picker>
 
-        <o-switch v-model="eventOptions.showStartTime">{{
+        <o-switch v-model="showStartTime">{{
           t("Show the time when the event begins")
         }}</o-switch>
       </o-field>
@@ -84,12 +84,12 @@
         class="items-center"
       >
         <event-date-picker
-          :time="eventOptions.showEndTime"
+          :time="showEndTime"
           v-model="endsOn"
           @blur="consistencyBeginsOnBeforeEndsOn"
           :min="beginsOn"
         ></event-date-picker>
-        <o-switch v-model="eventOptions.showEndTime">{{
+        <o-switch v-model="showEndTime">{{
           t("Show the time when the event ends")
         }}</o-switch>
       </o-field>
@@ -1201,6 +1201,30 @@ const isEventModified = computed((): boolean => {
   );
 });
 
+const showStartTime = computed({
+  get(): boolean {
+    return event.value.options.showStartTime;
+  },
+  set(newShowStartTime: boolean) {
+    event.value.options = {
+      ...event.value.options,
+      showStartTime: newShowStartTime,
+    };
+  },
+});
+
+const showEndTime = computed({
+  get(): boolean {
+    return event.value.options.showEndTime;
+  },
+  set(newshowEndTime: boolean) {
+    event.value.options = {
+      ...event.value.options,
+      showEndTime: newshowEndTime,
+    };
+  },
+});
+
 const beginsOn = ref(new Date());
 const endsOn = ref(new Date());