From f0389abfeba80d48e97c667940092cbb2de4b53c Mon Sep 17 00:00:00 2001
From: Dorian Grasset <doriangrasset@proton.me>
Date: Tue, 13 Jan 2026 17:05:17 +0100
Subject: [PATCH] feat(maintenance): add quick duration buttons and pre-fill
 form fields

---
 src/lang/en.json              |  5 ++
 src/pages/EditMaintenance.vue | 96 +++++++++++++++++++++++++++++++++--
 2 files changed, 96 insertions(+), 5 deletions(-)

diff --git a/src/lang/en.json b/src/lang/en.json
index 342e8267e..d0e236a7b 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -57,6 +57,8 @@
     "time ago": "{0} ago",
     "day": "day | days",
     "hour": "hour | hours",
+    "minute": "minute | minutes",
+    "minuteShort": "min",
     "year": "year | years",
     "Response": "Response",
     "Ping": "Ping",
@@ -668,6 +670,9 @@
     "recurringIntervalMessage": "Run once every day | Run once every {0} days",
     "affectedMonitorsDescription": "Select monitors that are affected by current maintenance",
     "affectedStatusPages": "Show this maintenance message on selected status pages",
+    "Quick Duration": "Quick Duration",
+    "Set end time based on start time": "Set end time based on start time",
+    "Please set start time first": "Please set start time first",
     "noMonitorsSelectedWarning": "You are creating a maintenance without any affected monitors. Are you sure you want to continue?",
     "noMonitorsOrStatusPagesSelectedError": "Cannot create maintenance without affected monitors or status pages",
     "passwordNotMatchMsg": "The repeat password does not match.",
diff --git a/src/pages/EditMaintenance.vue b/src/pages/EditMaintenance.vue
index aafc31927..b10fd0a89 100644
--- a/src/pages/EditMaintenance.vue
+++ b/src/pages/EditMaintenance.vue
@@ -124,7 +124,72 @@
                             </div>
 
                             <!-- Single Maintenance Window -->
-                            <template v-if="maintenance.strategy === 'single'"></template>
+                            <template v-if="maintenance.strategy === 'single'">
+                                <div class="my-3">
+                                    <label class="form-label">{{ $t("Quick Duration") }}</label>
+                                    <div class="d-flex gap-2 flex-wrap">
+                                        <button
+                                            type="button"
+                                            class="btn btn-outline-primary btn-sm"
+                                            @click="setQuickDuration(15)"
+                                        >
+                                            15 {{ $t("minuteShort") }}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-outline-primary btn-sm"
+                                            @click="setQuickDuration(30)"
+                                        >
+                                            30 {{ $t("minuteShort") }}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-outline-primary btn-sm"
+                                            @click="setQuickDuration(60)"
+                                        >
+                                            1 {{ $tc("hour", 1) }}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-outline-primary btn-sm"
+                                            @click="setQuickDuration(120)"
+                                        >
+                                            2 {{ $tc("hour", 2) }}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-outline-primary btn-sm"
+                                            @click="setQuickDuration(240)"
+                                        >
+                                            4 {{ $tc("hour", 4) }}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-outline-primary btn-sm"
+                                            @click="setQuickDuration(480)"
+                                        >
+                                            8 {{ $tc("hour", 8) }}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-outline-primary btn-sm"
+                                            @click="setQuickDuration(720)"
+                                        >
+                                            12 {{ $tc("hour", 12) }}
+                                        </button>
+                                        <button
+                                            type="button"
+                                            class="btn btn-outline-primary btn-sm"
+                                            @click="setQuickDuration(1440)"
+                                        >
+                                            24 {{ $tc("hour", 24) }}
+                                        </button>
+                                    </div>
+                                    <div class="form-text">
+                                        {{ $t("Set end time based on start time") }}
+                                    </div>
+                                </div>
+                            </template>
 
                             <template v-if="maintenance.strategy === 'cron'">
                                 <!-- Cron -->
@@ -579,9 +644,6 @@ export default {
                 const minutes = String(now.getMinutes()).padStart(2, "0");
                 const currentDateTime = `${year}-${month}-${day}T${hours}:${minutes}`;
 
-                // Get client's timezone
-                const clientTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
-
                 this.maintenance = {
                     title: "",
                     description: "",
@@ -603,7 +665,7 @@ export default {
                     ],
                     weekdays: [],
                     daysOfMonth: [],
-                    timezoneOption: clientTimezone,
+                    timezoneOption: "SAME_AS_SERVER",
                 };
             } else if (this.isEdit || this.isClone) {
                 this.$root.getSocket().emit("getMaintenance", this.$route.params.id, (res) => {
@@ -667,6 +729,30 @@ export default {
             }
         },
 
+        /**
+         * Set quick duration for single maintenance
+         * Calculates end time based on start time + duration in minutes
+         * @param {number} minutes Duration in minutes
+         * @returns {void}
+         */
+        setQuickDuration(minutes) {
+            if (!this.maintenance.dateRange[0]) {
+                this.$root.toastError(this.$t("Please set start time first"));
+                return;
+            }
+
+            const startDate = new Date(this.maintenance.dateRange[0]);
+            const endDate = new Date(startDate.getTime() + minutes * 60000);
+
+            const year = endDate.getFullYear();
+            const month = String(endDate.getMonth() + 1).padStart(2, "0");
+            const day = String(endDate.getDate()).padStart(2, "0");
+            const hours = String(endDate.getHours()).padStart(2, "0");
+            const mins = String(endDate.getMinutes()).padStart(2, "0");
+
+            this.maintenance.dateRange[1] = `${year}-${month}-${day}T${hours}:${mins}`;
+        },
+
         /**
          * Handle form submission - show confirmation if no monitors selected
          * @returns {void}