The start and end dates of the maintenance are now stored in UTC, which allows it to be converted between time zones

src/components/MonitorList.vue

@@ -25,7 +25,7 @@
                 {{ $t("No Maintenance, please") }} <router-link to="/addMaintenance">{{ $t("add one") }}</router-link>
             </div>
 
-            <router-link v-if="selectedList === 'maintenance'" v-for="(item, index) in sortedMaintenanceList" :key="index" :to="maintenanceURL(item.id)" class="item" :class="{ 'disabled': (Date.parse(item.end_date) < Date.now()) }">
+            <router-link v-if="selectedList === 'maintenance'" v-for="(item, index) in sortedMaintenanceList" :key="index" :to="maintenanceURL(item.id)" class="item" :class="{ 'disabled': !this.$root.isActiveMaintenance(item.end_date) }">
                 <div class="row">
                     <div class="col-9 col-md-8 small-padding">
                         <div class="info">
@@ -66,7 +66,7 @@
 import HeartbeatBar from "../components/HeartbeatBar.vue";
 import Uptime from "../components/Uptime.vue";
 import Tag from "../components/Tag.vue";
-import {getMaintenanceRelativeURL, getMonitorRelativeURL } from "../util.ts";
+import { getMaintenanceRelativeURL, getMonitorRelativeURL } from "../util.ts";
 
 export default {
     components: {
@@ -90,18 +90,17 @@ export default {
             let result = Object.values(this.$root.maintenanceList);
 
             result.sort((m1, m2) => {
-                const now = Date.now();
 
-                if (Date.parse(m1.end_date) >= now !== Date.parse(m2.end_date) >= now) {
-                    if (Date.parse(m2.end_date) < now) {
+                if (this.$root.isActiveMaintenance(m1.end_date) !== this.$root.isActiveMaintenance(m2.end_date)) {
+                    if (!this.$root.isActiveMaintenance(m2.end_date)) {
                         return -1;
                     }
-                    if (Date.parse(m1.end_date) < now) {
+                    if (!this.$root.isActiveMaintenance(m1.end_date)) {
                         return 1;
                     }
                 }
 
-                if (Date.parse(m1.end_date) >= now && Date.parse(m2.end_date) >= now) {
+                if (this.$root.isActiveMaintenance(m1.end_date) && this.$root.isActiveMaintenance(m2.end_date)) {
                     if (Date.parse(m1.end_date) < Date.parse(m2.end_date)) {
                         return -1;
                     }
@@ -111,7 +110,7 @@ export default {
                     }
                 }
 
-                if (Date.parse(m1.end_date) < now && Date.parse(m2.end_date) < now) {
+                if (!this.$root.isActiveMaintenance(m1.end_date) && !this.$root.isActiveMaintenance(m2.end_date)) {
                     if (Date.parse(m1.end_date) < Date.parse(m2.end_date)) {
                         return 1;
                     }

src/mixins/datetime.js

@@ -18,6 +18,14 @@ export default {
     },
 
     methods: {
+        isActiveMaintenance(endDate) {
+            return (dayjs.utc(endDate).unix() >= dayjs.utc().unix());
+        },
+
+        toUTC(value) {
+            return dayjs.tz(value, this.timezone).utc().format();
+        },
+
         datetime(value) {
             return this.datetimeFormat(value, "YYYY-MM-DD HH:mm:ss");
         },
@@ -26,10 +34,10 @@ export default {
             const inputDate = new Date(value);
             const now = new Date(Date.now());
 
-            if (inputDate.getFullYear() === now.getFullYear() && inputDate.getMonth() === now.getMonth() && inputDate.getDay() === now.getDay())
-                return this.datetimeMaintenanceFormat(value, "HH:mm");
+            if (inputDate.getFullYear() === now.getUTCFullYear() && inputDate.getMonth() === now.getUTCMonth() && inputDate.getDay() === now.getUTCDay())
+                return this.datetimeFormat(value, "HH:mm");
             else
-                return this.datetimeMaintenanceFormat(value, "YYYY-MM-DD HH:mm");
+                return this.datetimeFormat(value, "YYYY-MM-DD HH:mm");
         },
 
         date(value) {
@@ -52,13 +60,6 @@ export default {
             }
             return "";
         },
-
-        datetimeMaintenanceFormat(value, format) {
-            if (value !== undefined && value !== "") {
-                return dayjs(value).format(format);
-            }
-            return "";
-        }
     },
 
     computed: {

src/pages/EditMaintenance.vue

@@ -50,14 +50,14 @@
 
                             <!-- Start Date Time -->
                             <div class="my-3">
-                                <label for="start_date" class="form-label">{{ $t("Start of maintenance") }}</label>
+                                <label for="start_date" class="form-label">{{ $t("Start of maintenance") }} ({{this.$root.timezone}})</label>
                                 <input :type="'datetime-local'" id="start_date" v-model="maintenance.start_date"
                                        class="form-control" :class="{'darkCalendar': dark }" required>
                             </div>
 
                             <!-- End Date Time -->
                             <div class="my-3">
-                                <label for="end_date" class="form-label">{{ $t("Expected end of maintenance") }}</label>
+                                <label for="end_date" class="form-label">{{ $t("Expected end of maintenance") }} ({{this.$root.timezone}})</label>
                                 <input :type="'datetime-local'" id="end_date" v-model="maintenance.end_date"
                                        class="form-control" :class="{'darkCalendar': dark }" required>
                             </div>
@@ -156,6 +156,8 @@ export default {
             } else if (this.isEdit) {
                 this.$root.getSocket().emit("getMaintenance", this.$route.params.id, (res) => {
                     if (res.ok) {
+                        res.maintenance.start_date = this.$root.datetimeFormat(res.maintenance.start_date, "YYYY-MM-DDTHH:mm");
+                        res.maintenance.end_date = this.$root.datetimeFormat(res.maintenance.end_date, "YYYY-MM-DDTHH:mm");
                         this.maintenance = res.maintenance;
 
                         this.$root.getSocket().emit("getMonitorMaintenance", this.$route.params.id, (res) => {
@@ -182,9 +184,11 @@ export default {
                 return this.processing = false;
             }
 
+            this.maintenance.start_date = this.$root.toUTC(this.maintenance.start_date);
+            this.maintenance.end_date = this.$root.toUTC(this.maintenance.end_date);
+
             if (this.isAdd) {
                 this.$root.addMaintenance(this.maintenance, async (res) => {
-
                     if (res.ok) {
                         await this.addMonitorMaintenance(res.maintenanceID, () => {
                             toast.success(res.msg);
@@ -206,8 +210,7 @@ export default {
                             this.$root.toastRes(res);
                             this.init();
                         });
-                    }
-                    else {
+                    } else {
                         this.processing = false;
                         toast.error(res.msg);
                     }

src/pages/StatusPage.vue

@@ -152,7 +152,7 @@
 
             <!-- Incident Date -->
             <div class="date mt-3">
-                {{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }} ({{ dateFromNowMaintenance(maintenanceItem.start_date) }})<br />
+                {{ $t("End") }}: {{ $root.datetimeMaintenance(maintenanceItem.end_date) }} ({{ dateFromNow(maintenanceItem.start_date) }})<br />
             </div>
         </div>
 
@@ -620,10 +620,6 @@ export default {
             return dayjs.utc(date).fromNow();
         },
 
-        dateFromNowMaintenance(date) {
-            return dayjs(date).fromNow();
-        },
-
     }
 };
 </script>