WIP

src/assets/app.scss

@@ -556,6 +556,31 @@ h5.settings-subheading::after {
     border-bottom: 1px solid $dark-border-color;
 }
 
+
+$shadow-box-padding: 20px;
+
+.shadow-box-with-fixed-bottom-bar {
+    padding-top: $shadow-box-padding;
+    padding-bottom: 0;
+    padding-right: $shadow-box-padding;
+    padding-left: $shadow-box-padding;
+}
+
+.fixed-bottom-bar {
+    position: sticky;
+    bottom: 0;
+    margin-left: -$shadow-box-padding;
+    margin-right: -$shadow-box-padding;
+    z-index: 100;
+    background-color: rgba(white, 0.2);
+    backdrop-filter: blur(2px);
+    border-radius: 0 0 10px 10px;
+
+    .dark & {
+        background-color: rgba($dark-header-bg, 0.9);
+    }
+}
+
 // Localization
 
 @import "localization.scss";

src/components/MaintenanceTime.vue

@@ -10,7 +10,7 @@
                 {{ endDateTime }}
             </div>
             <div class="timeslot">
-                UTC{{ maintenance.timezoneOffset }} {{ maintenance.timezone }}
+                UTC{{ maintenance.timezoneOffset }} <span v-if="maintenance.timezone !== 'UTC'">{{ maintenance.timezone }}</span>
             </div>
         </div>
     </div>

src/lang/en.json

@@ -398,6 +398,8 @@
     "startDateTime": "Start Date/Time",
     "endDateTime": "End Date/Time",
     "cronExpression": "Cron Expression",
+    "cronSchedule": "Schedule: ",
+    "invalidCronExpression": "Invalid Cron Expression: {0}",
     "recurringInterval": "Interval",
     "Recurring": "Recurring",
     "strategyManual": "Active/Inactive Manually",

src/pages/EditMaintenance.vue

@@ -3,7 +3,7 @@
         <div>
             <h1 class="mb-3">{{ pageName }}</h1>
             <form @submit.prevent="submit">
-                <div class="shadow-box">
+                <div class="shadow-box shadow-box-with-fixed-bottom-bar">
                     <div class="row">
                         <div class="col-xl-10">
                             <!-- Title -->
@@ -108,7 +108,7 @@
                                     <label for="cron" class="form-label">
                                         {{ $t("cronExpression") }}
                                     </label>
-                                    <p>Run: {{ cronDescription }}</p>
+                                    <p>{{ $t("cronSchedule") }}{{ cronDescription }}</p>
                                     <input id="cron" v-model="maintenance.cron" type="text" class="form-control" required>
                                 </div>
 
@@ -233,16 +233,11 @@
                                     </div>
                                 </div>
                             </template>
+                        </div>
+                    </div>
 
-                            <div class="mt-4 mb-1">
+                    <div class="fixed-bottom-bar p-3">
-                                <button
+                        <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
-                                    id="monitor-submit-btn" class="btn btn-primary" type="submit"
-                                    :disabled="processing"
-                                >
-                                    {{ $t("Save") }}
-                                </button>
-                            </div>
-                        </div>
                     </div>
                 </div>
             </form>
@@ -256,7 +251,7 @@ import VueMultiselect from "vue-multiselect";
 import dayjs from "dayjs";
 import Datepicker from "@vuepic/vue-datepicker";
 import { timezoneList } from "../util-frontend";
-import cronstrue from "cronstrue";
+import cronstrue from "cronstrue/i18n";
 
 const toast = useToast();
 
@@ -330,9 +325,28 @@ export default {
             if (! this.maintenance.cron) {
                 return "";
             }
+
+            let locale = "";
+
+            if (this.$root.language) {
+                locale = this.$root.language.replace("-", "_");
+            }
+
+            // Special handling
+            // If locale is also not working in your language, you can map it here
+            // https://github.com/bradymholt/cRonstrue/tree/master/src/i18n/locales
+            if (locale === "zh_HK") {
+                locale = "zh_TW";
+            }
+
+            try {
                 return cronstrue.toString(this.maintenance.cron, {
-                locale: "zh-TW",
+                    locale,
                 });
+            } catch (e) {
+                return this.$t("invalidCronExpression", e.message);
+            }
+
         },
 
         selectedStatusPagesOptions() {
@@ -528,10 +542,6 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.shadow-box {
-    padding: 20px;
-}
-
 textarea {
     min-height: 150px;
 }

src/pages/EditMonitor.vue

@@ -3,7 +3,7 @@
         <div>
             <h1 class="mb-3">{{ pageName }}</h1>
             <form @submit.prevent="submit">
-                <div class="shadow-box">
+                <div class="shadow-box shadow-box-with-fixed-bottom-bar">
                     <div class="row">
                         <div class="col-md-6">
                             <h2 class="mb-2">{{ $t("General") }}</h2>
@@ -1102,31 +1102,7 @@ message HealthCheckResponse {
 <style lang="scss" scoped>
     @import "../assets/vars.scss";
 
-    $padding: 20px;
-
-    .shadow-box {
-        padding-top: $padding;
-        padding-bottom: 0;
-        padding-right: $padding;
-        padding-left: $padding;
-    }
-
     textarea {
         min-height: 200px;
     }
-
-    .fixed-bottom-bar {
-        position: sticky;
-        bottom: 0;
-        margin-left: -$padding;
-        margin-right: -$padding;
-        z-index: 100;
-        background-color: rgba(white, 0.2);
-        backdrop-filter: blur(2px);
-        border-radius: 0 0 10px 10px;
-
-        .dark & {
-            background-color: rgba($dark-header-bg, 0.9);
-        }
-    }
 </style>