Merge b000c1d532 into d7ffa33950

src/mixins/lang.js

@@ -1,5 +1,5 @@
 import { currentLocale } from "../i18n";
-import { setPageLocale, relativeTimeFormatter } from "../util-frontend";
+import { setPageLocale, rtf } from "../util-frontend";
 const langModules = import.meta.glob("../lang/*.json");
 
 export default {
@@ -34,7 +34,7 @@ export default {
             this.$i18n.locale = lang;
             localStorage.locale = lang;
             setPageLocale();
-            relativeTimeFormatter.updateLocale(lang);
+            rtf.updateLocale(lang);
         },
     },
 };

src/pages/Details.vue

@@ -285,7 +285,7 @@ import Tag from "../components/Tag.vue";
 import CertificateInfo from "../components/CertificateInfo.vue";
 import { getMonitorRelativeURL } from "../util.ts";
 import { URL } from "whatwg-url";
-import { getResBaseURL, relativeTimeFormatter } from "../util-frontend";
+import { getResBaseURL, rtf } from "../util-frontend";
 import { highlight, languages } from "prismjs/components/prism-core";
 import "prismjs/components/prism-clike";
 import "prismjs/components/prism-javascript";
@@ -659,7 +659,7 @@ export default {
         },
 
         secondsToHumanReadableFormat(seconds) {
-            return relativeTimeFormatter.secondsToHumanReadableFormat(seconds);
+            return rtf.secondsToHumanReadableFormat(seconds);
         }
 
     },

src/pages/EditMonitor.vue

@@ -1076,7 +1076,7 @@ import RemoteBrowserDialog from "../components/RemoteBrowserDialog.vue";
 import ProxyDialog from "../components/ProxyDialog.vue";
 import TagsManager from "../components/TagsManager.vue";
 import { genSecret, isDev, MAX_INTERVAL_SECOND, MIN_INTERVAL_SECOND, sleep } from "../util.ts";
-import { hostNameRegexPattern, relativeTimeFormatter } from "../util-frontend";
+import { hostNameRegexPattern, rtf } from "../util-frontend";
 import HiddenInput from "../components/HiddenInput.vue";
 import EditMonitorConditions from "../components/EditMonitorConditions.vue";
 import { version } from "../../package.json";
@@ -1093,7 +1093,7 @@ const monitorDefaults = {
     url: "https://",
     method: "GET",
     interval: 60,
-    humanReadableInterval: relativeTimeFormatter.secondsToHumanReadableFormat(60),
+    humanReadableInterval: rtf.secondsToHumanReadableFormat(60),
     retryInterval: 60,
     resendInterval: 0,
     maxretries: 0,
@@ -1477,7 +1477,7 @@ message HealthCheckResponse {
                 this.monitor.retryInterval = value;
             }
             // Converting monitor.interval to human readable format.
-            this.monitor.humanReadableInterval = relativeTimeFormatter.secondsToHumanReadableFormat(value);
+            this.monitor.humanReadableInterval = rtf.secondsToHumanReadableFormat(value);
         },
 
         "monitor.timeout"(value, oldValue) {

src/util-frontend.js

@@ -219,8 +219,17 @@ class RelativeTimeFormatter {
      * Default locale and options for Relative Time Formatter
      */
     constructor() {
+        this.locale = currentLocale();
         this.options = { numeric: "auto" };
-        this.instance = new Intl.RelativeTimeFormat(currentLocale(), this.options);
+        this.rtf = new Intl.RelativeTimeFormat(this.locale, this.options);
+    }
+
+    /**
+     * Method to get the singleton instance
+     * @returns {object} Intl.RelativeTimeFormat instance
+     */
+    getInstance() {
+        return this.rtf;
     }
 
     /**
@@ -229,7 +238,8 @@ class RelativeTimeFormatter {
      * @returns {void} No return value.
      */
     updateLocale(locale) {
-        this.instance = new Intl.RelativeTimeFormat(locale, this.options);
+        this.locale = locale;
+        this.rtf = new Intl.RelativeTimeFormat(this.locale, this.options);
     }
 
     /**
@@ -245,24 +255,24 @@ class RelativeTimeFormatter {
         const parts = [];
         /**
          * Build the formatted string from parts
-         * 1. Get the relative time formatted parts from the instance.
-         * 2. Filter out the relevant parts literal (unit of time) or integer (value).
-         * 3. Map out the required values.
          * @param {number} value Receives value in seconds.
          * @param {string} unitOfTime Expected unit of time after conversion.
          * @returns {void}
          */
         const toFormattedPart = (value, unitOfTime) => {
-            const partsArray = this.instance.formatToParts(value, unitOfTime);
-            const filteredParts = partsArray
-                .filter(
-                    (part, index) =>
+            const res = this.getInstance().formatToParts(value, unitOfTime);
+            let formattedString = res
+                .map((part, _idx) => {
+                    if (
                         (part.type === "literal" || part.type === "integer") &&
-                        index > 0
-                )
-                .map((part) => part.value);
-
-            const formattedString = filteredParts.join("").trim();
+                        _idx > 0
+                    ) {
+                        return part.value;
+                    }
+                    return "";
+                })
+                .join("");
+            formattedString = formattedString.trim();
             parts.push(formattedString);
         };
 
@@ -279,12 +289,14 @@ class RelativeTimeFormatter {
             toFormattedPart(secs, "second");
         }
 
-        if (parts.length > 0) {
-            return `${parts.join(" ")}`;
-        }
-        return this.instance.format(0, "second"); // Handle case for 0 seconds
+        const result =
+            parts.length > 0
+                ? `${parts.join(" ")}`
+                : this.getInstance().format(0, "second"); // Handle case for 0 seconds
+
+        return result;
     }
 }
 
-export const relativeTimeFormatter = new RelativeTimeFormatter();
+export const rtf = new RelativeTimeFormatter();