diff --git a/src/mixins/lang.js b/src/mixins/lang.js index f8a02415e..0fff8cdc8 100644 --- a/src/mixins/lang.js +++ b/src/mixins/lang.js @@ -1,5 +1,5 @@ import { currentLocale } from "../i18n"; -import { setPageLocale, rtf } from "../util-frontend"; +import { setPageLocale, relativeTimeFormatter } 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(); - rtf.updateLocale(lang); + relativeTimeFormatter.updateLocale(lang); }, }, }; diff --git a/src/pages/Details.vue b/src/pages/Details.vue index 90805e80f..995d9f2e4 100644 --- a/src/pages/Details.vue +++ b/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, rtf } from "../util-frontend"; +import { getResBaseURL, relativeTimeFormatter } 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 rtf.secondsToHumanReadableFormat(seconds); + return relativeTimeFormatter.secondsToHumanReadableFormat(seconds); } }, diff --git a/src/pages/EditMonitor.vue b/src/pages/EditMonitor.vue index 311f0487d..2d578d5a3 100644 --- a/src/pages/EditMonitor.vue +++ b/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, rtf } from "../util-frontend"; +import { hostNameRegexPattern, relativeTimeFormatter } 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: rtf.secondsToHumanReadableFormat(60), + humanReadableInterval: relativeTimeFormatter.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 = rtf.secondsToHumanReadableFormat(value); + this.monitor.humanReadableInterval = relativeTimeFormatter.secondsToHumanReadableFormat(value); }, "monitor.timeout"(value, oldValue) { diff --git a/src/util-frontend.js b/src/util-frontend.js index 505ae8316..a3dc4c3ac 100644 --- a/src/util-frontend.js +++ b/src/util-frontend.js @@ -219,17 +219,8 @@ class RelativeTimeFormatter { * Default locale and options for Relative Time Formatter */ constructor() { - this.locale = currentLocale(); this.options = { numeric: "auto" }; - this.rtf = new Intl.RelativeTimeFormat(this.locale, this.options); - } - - /** - * Method to get the singleton instance - * @returns {object} Intl.RelativeTimeFormat instance - */ - getInstance() { - return this.rtf; + this.instance = new Intl.RelativeTimeFormat(currentLocale(), this.options); } /** @@ -238,8 +229,7 @@ class RelativeTimeFormatter { * @returns {void} No return value. */ updateLocale(locale) { - this.locale = locale; - this.rtf = new Intl.RelativeTimeFormat(this.locale, this.options); + this.instance = new Intl.RelativeTimeFormat(locale, this.options); } /** @@ -255,24 +245,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 res = this.getInstance().formatToParts(value, unitOfTime); - let formattedString = res - .map((part, _idx) => { - if ( + const partsArray = this.instance.formatToParts(value, unitOfTime); + const filteredParts = partsArray + .filter( + (part, index) => (part.type === "literal" || part.type === "integer") && - _idx > 0 - ) { - return part.value; - } - return ""; - }) - .join(""); - formattedString = formattedString.trim(); + index > 0 + ) + .map((part) => part.value); + + const formattedString = filteredParts.join("").trim(); parts.push(formattedString); }; @@ -289,14 +279,12 @@ class RelativeTimeFormatter { toFormattedPart(secs, "second"); } - const result = - parts.length > 0 - ? `${parts.join(" ")}` - : this.getInstance().format(0, "second"); // Handle case for 0 seconds - - return result; + if (parts.length > 0) { + return `${parts.join(" ")}`; + } + return this.instance.format(0, "second"); // Handle case for 0 seconds } } -export const rtf = new RelativeTimeFormatter(); +export const relativeTimeFormatter = new RelativeTimeFormatter();