From a6acd065bb11a419da7477424af428222f9991db Mon Sep 17 00:00:00 2001
From: Louis Lam <louislam@users.noreply.github.com>
Date: Fri, 31 Mar 2023 20:58:45 +0800
Subject: [PATCH] WIP

---
 src/assets/app.scss                | 25 ++++++++++++++++
 src/components/MaintenanceTime.vue |  2 +-
 src/lang/en.json                   |  2 ++
 src/pages/EditMaintenance.vue      | 48 ++++++++++++++++++------------
 src/pages/EditMonitor.vue          | 26 +---------------
 5 files changed, 58 insertions(+), 45 deletions(-)

diff --git a/src/assets/app.scss b/src/assets/app.scss
index f550406f..d233e8d9 100644
--- a/src/assets/app.scss
+++ b/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";
diff --git a/src/components/MaintenanceTime.vue b/src/components/MaintenanceTime.vue
index 9a798031..ba885553 100644
--- a/src/components/MaintenanceTime.vue
+++ b/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>
diff --git a/src/lang/en.json b/src/lang/en.json
index d09e4882..4a2fe881 100644
--- a/src/lang/en.json
+++ b/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",
diff --git a/src/pages/EditMaintenance.vue b/src/pages/EditMaintenance.vue
index 1f59305c..eb9ef7fd 100644
--- a/src/pages/EditMaintenance.vue
+++ b/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,17 +233,12 @@
                                     </div>
                                 </div>
                             </template>
-
-                            <div class="mt-4 mb-1">
-                                <button
-                                    id="monitor-submit-btn" class="btn btn-primary" type="submit"
-                                    :disabled="processing"
-                                >
-                                    {{ $t("Save") }}
-                                </button>
-                            </div>
                         </div>
                     </div>
+
+                    <div class="fixed-bottom-bar p-3">
+                        <button id="monitor-submit-btn" class="btn btn-primary" type="submit" :disabled="processing">{{ $t("Save") }}</button>
+                    </div>
                 </div>
             </form>
         </div>
@@ -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 "";
             }
-            return cronstrue.toString(this.maintenance.cron, {
-                locale: "zh-TW",
-            });
+
+            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,
+                });
+            } 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;
 }
diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue
index 24b35ca2..addcc7c9 100644
--- a/src/pages/EditMonitor.vue
+++ b/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>