From 457a3e75ddd02bfa4f6657f40193ffc26f34da01 Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Thu, 3 Aug 2023 16:32:52 +0200
Subject: [PATCH 1/9] Allow a 'default locale' and locale switcher on status
pages
---
db/patch-status-page-locale-selector.sql | 5 +++
server/model/status_page.js | 4 +++
.../status-page-socket-handler.js | 2 ++
src/lang/en.json | 2 ++
src/mixins/lang.js | 7 +++++
src/pages/StatusPage.vue | 31 +++++++++++++++++--
6 files changed, 49 insertions(+), 2 deletions(-)
create mode 100644 db/patch-status-page-locale-selector.sql
diff --git a/db/patch-status-page-locale-selector.sql b/db/patch-status-page-locale-selector.sql
new file mode 100644
index 000000000..3335e3ba0
--- /dev/null
+++ b/db/patch-status-page-locale-selector.sql
@@ -0,0 +1,5 @@
+-- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
+BEGIN TRANSACTION;
+ALTER TABLE status_page ADD show_locale_selector BOOLEAN NOT NULL DEFAULT 0;
+ALTER TABLE status_page ADD default_locale TEXT DEFAULT "";
+COMMIT;
diff --git a/server/model/status_page.js b/server/model/status_page.js
index 38f548ebb..6cf2ef717 100644
--- a/server/model/status_page.js
+++ b/server/model/status_page.js
@@ -403,6 +403,8 @@ class StatusPage extends BeanModel {
autoRefreshInterval: this.autoRefreshInterval,
published: !!this.published,
showTags: !!this.show_tags,
+ showLocaleSelector: !!this.show_locale_selector,
+ defaultLocale: this.default_locale,
domainNameList: this.getDomainNameList(),
customCSS: this.custom_css,
footerText: this.footer_text,
@@ -427,6 +429,8 @@ class StatusPage extends BeanModel {
theme: this.theme,
published: !!this.published,
showTags: !!this.show_tags,
+ showLocaleSelector: !!this.show_locale_selector,
+ defaultLocale: this.default_locale,
customCSS: this.custom_css,
footerText: this.footer_text,
showPoweredBy: !!this.show_powered_by,
diff --git a/server/socket-handlers/status-page-socket-handler.js b/server/socket-handlers/status-page-socket-handler.js
index cbcc52b8f..3f7604c3e 100644
--- a/server/socket-handlers/status-page-socket-handler.js
+++ b/server/socket-handlers/status-page-socket-handler.js
@@ -160,6 +160,8 @@ module.exports.statusPageSocketHandler = (socket) => {
//statusPage.published = ;
//statusPage.search_engine_index = ;
statusPage.show_tags = config.showTags;
+ statusPage.show_locale_selector = config.showLocaleSelector;
+ statusPage.default_locale = config.defaultLocale;
//statusPage.password = null;
statusPage.footer_text = config.footerText;
statusPage.custom_css = config.customCSS;
diff --git a/src/lang/en.json b/src/lang/en.json
index e215f1031..48498df9d 100644
--- a/src/lang/en.json
+++ b/src/lang/en.json
@@ -291,6 +291,8 @@
"Switch to Light Theme": "Switch to Light Theme",
"Switch to Dark Theme": "Switch to Dark Theme",
"Show Tags": "Show Tags",
+ "Show Locale Selector": "Show Locale Selector",
+ "Default Locale": "Default Locale",
"Hide Tags": "Hide Tags",
"Description": "Description",
"No monitors available.": "No monitors available.",
diff --git a/src/mixins/lang.js b/src/mixins/lang.js
index 9061e7d3d..76b5b755a 100644
--- a/src/mixins/lang.js
+++ b/src/mixins/lang.js
@@ -33,6 +33,13 @@ export default {
this.$i18n.locale = lang;
localStorage.locale = lang;
setPageLocale();
+ },
+ /** Change the language for the current page (no localstore set) */
+ async changeCurrentPageLang(lang) {
+ let message = (await langModules["../lang/" + lang + ".json"]()).default;
+ this.$i18n.setLocaleMessage(lang, message);
+ this.$i18n.locale = lang;
+ setPageLocale();
}
}
};
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 116968282..96823b970 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -56,6 +56,18 @@
<label class="form-check-label" for="showTags">{{ $t("Show Tags") }}</label>
</div>
+ <div class="my-3 form-check form-switch">
+ <input id="showLocaleSelector" v-model="config.showLocaleSelector" class="form-check-input" type="checkbox">
+ <label class="form-check-label" for="showLocaleSelector">{{ $t("Show Locale Selector") }}</label>
+ </div>
+
+ <div class="my-3">
+ <label for="defaultLocale" class="form-label">{{ $t("Default Locale") }}</label>
+ <select v-model="config.defaultLocale" class="form-select" id="defaultLocale">
+ <option v-for="locale in $i18n.availableLocales" :value="locale" :text="$i18n.messages[locale].languageName"></option>
+ </select>
+ </div>
+
<!-- Show Powered By -->
<div class="my-3 form-check form-switch">
<input id="show-powered-by" v-model="config.showPoweredBy" class="form-check-input" type="checkbox" data-testid="show-powered-by-checkbox">
@@ -128,7 +140,7 @@
<!-- Main Status Page -->
<div :class="{ edit: enableEditMode}" class="main">
- <!-- Logo & Title -->
+ <!-- Logo, Title & Language -->
<h1 class="mb-4 title-flex">
<!-- Logo -->
<span class="logo-wrapper" @click="showImageCropUploadMethod">
@@ -151,7 +163,14 @@
/>
<!-- Title -->
- <Editable v-model="config.title" tag="span" :contenteditable="editMode" :noNL="true" />
+ <Editable v-model="config.title" class="title" tag="span" :contenteditable="editMode" :noNL="true" />
+
+ <!-- Locale Selector -->
+ <span class="language-selector">
+ <select v-model="$root.language" class="form-select">
+ <option v-for="locale in $i18n.availableLocales" :value="locale" :text="$i18n.messages[locale].languageName"></option>
+ </select>
+ </span>
</h1>
<!-- Admin functions -->
@@ -723,6 +742,10 @@ export default {
}, (this.config.autoRefreshInterval + 10) * 1000);
this.updateUpdateTimer();
+
+ if (!localStorage.locale && this.config.defaultLocale) {
+ this.$root.changeCurrentPageLang(this.config.defaultLocale)
+ }
}).catch( function (error) {
if (error.response.status === 404) {
location.href = "/page-not-found";
@@ -1143,6 +1166,10 @@ footer {
display: flex;
align-items: center;
gap: 10px;
+
+ .title {
+ flex-grow: 1;
+ }
}
.logo-wrapper {
From a483ea6a8f36646faaa3c1e7a34dcb169aeb019c Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Thu, 3 Aug 2023 16:43:59 +0200
Subject: [PATCH 2/9] Fix linter issues
---
src/pages/StatusPage.vue | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 96823b970..d299e2090 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -63,8 +63,8 @@
<div class="my-3">
<label for="defaultLocale" class="form-label">{{ $t("Default Locale") }}</label>
- <select v-model="config.defaultLocale" class="form-select" id="defaultLocale">
- <option v-for="locale in $i18n.availableLocales" :value="locale" :text="$i18n.messages[locale].languageName"></option>
+ <select id="defaultLocale" v-model="config.defaultLocale" class="form-select">
+ <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale" :text="$i18n.messages[locale].languageName"></option>
</select>
</div>
@@ -168,7 +168,7 @@
<!-- Locale Selector -->
<span class="language-selector">
<select v-model="$root.language" class="form-select">
- <option v-for="locale in $i18n.availableLocales" :value="locale" :text="$i18n.messages[locale].languageName"></option>
+ <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale" :text="$i18n.messages[locale].languageName"></option>
</select>
</span>
</h1>
@@ -744,7 +744,7 @@ export default {
this.updateUpdateTimer();
if (!localStorage.locale && this.config.defaultLocale) {
- this.$root.changeCurrentPageLang(this.config.defaultLocale)
+ this.$root.changeCurrentPageLang(this.config.defaultLocale);
}
}).catch( function (error) {
if (error.response.status === 404) {
From 995b115d27f44b76075a0ae853fbcff5664df759 Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Sat, 5 Aug 2023 17:55:27 +0200
Subject: [PATCH 3/9] Update src/mixins/lang.js
Co-authored-by: Matthew Nickson <mnickson@sidingsmedia.com>
---
src/mixins/lang.js | 5 ++++-
1 file changed, 4 insertions(+), 1 deletion(-)
diff --git a/src/mixins/lang.js b/src/mixins/lang.js
index 76b5b755a..baa2af351 100644
--- a/src/mixins/lang.js
+++ b/src/mixins/lang.js
@@ -34,7 +34,10 @@ export default {
localStorage.locale = lang;
setPageLocale();
},
- /** Change the language for the current page (no localstore set) */
+ /**
+ * Change the language for the current page (no localstore set)
+ * @param {string} lang Code of language to switch to.
+ */
async changeCurrentPageLang(lang) {
let message = (await langModules["../lang/" + lang + ".json"]()).default;
this.$i18n.setLocaleMessage(lang, message);
From 24968f331b13d43282d42aa87c2c3ff9145ba521 Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Sat, 5 Aug 2023 18:47:52 +0200
Subject: [PATCH 4/9] Update src/mixins/lang.js
---
src/mixins/lang.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/mixins/lang.js b/src/mixins/lang.js
index baa2af351..ef462272c 100644
--- a/src/mixins/lang.js
+++ b/src/mixins/lang.js
@@ -35,7 +35,7 @@ export default {
setPageLocale();
},
/**
- * Change the language for the current page (no localstore set)
+ * Change the language for the current page (no localstore set)
* @param {string} lang Code of language to switch to.
*/
async changeCurrentPageLang(lang) {
From 7226686bde4f53086319438287cecb23b5b24463 Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Sat, 5 Aug 2023 18:47:57 +0200
Subject: [PATCH 5/9] Update src/mixins/lang.js
---
src/mixins/lang.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/mixins/lang.js b/src/mixins/lang.js
index ef462272c..b7eb6f3d8 100644
--- a/src/mixins/lang.js
+++ b/src/mixins/lang.js
@@ -34,7 +34,7 @@ export default {
localStorage.locale = lang;
setPageLocale();
},
- /**
+ /**
* Change the language for the current page (no localstore set)
* @param {string} lang Code of language to switch to.
*/
From c3b4ad85e5b55be2b23e584b75c031fefb5e29c2 Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:32:55 +0200
Subject: [PATCH 6/9] Convert migration to knex migration
---
.../2023-09-13-1047-locale-on-statuspage.js | 15 +++++++++++++++
db/patch-status-page-locale-selector.sql | 5 -----
2 files changed, 15 insertions(+), 5 deletions(-)
create mode 100644 db/knex_migrations/2023-09-13-1047-locale-on-statuspage.js
delete mode 100644 db/patch-status-page-locale-selector.sql
diff --git a/db/knex_migrations/2023-09-13-1047-locale-on-statuspage.js b/db/knex_migrations/2023-09-13-1047-locale-on-statuspage.js
new file mode 100644
index 000000000..1f7a13937
--- /dev/null
+++ b/db/knex_migrations/2023-09-13-1047-locale-on-statuspage.js
@@ -0,0 +1,15 @@
+exports.up = function (knex) {
+ return knex.schema
+ .alterTable("status_page", function (table) {
+ table.boolean("show_locale_selector").notNullable().defaultTo(false);
+ table.string("default_locale").nullable().defaultTo("");
+ });
+};
+
+exports.down = function (knex) {
+ return knex.schema
+ .alterTable("status_page", function (table) {
+ table.dropColumn("default_locale");
+ table.dropColumn("show_locale_selector");
+ });
+};
diff --git a/db/patch-status-page-locale-selector.sql b/db/patch-status-page-locale-selector.sql
deleted file mode 100644
index 3335e3ba0..000000000
--- a/db/patch-status-page-locale-selector.sql
+++ /dev/null
@@ -1,5 +0,0 @@
--- You should not modify if this have pushed to Github, unless it does serious wrong with the db.
-BEGIN TRANSACTION;
-ALTER TABLE status_page ADD show_locale_selector BOOLEAN NOT NULL DEFAULT 0;
-ALTER TABLE status_page ADD default_locale TEXT DEFAULT "";
-COMMIT;
From b75580003ff6c07b996b2d136c14a43fe2536aa1 Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Wed, 13 Sep 2023 11:35:52 +0200
Subject: [PATCH 7/9] Fix linter warning
---
src/mixins/lang.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/src/mixins/lang.js b/src/mixins/lang.js
index b7eb6f3d8..32d23e9f5 100644
--- a/src/mixins/lang.js
+++ b/src/mixins/lang.js
@@ -37,6 +37,7 @@ export default {
/**
* Change the language for the current page (no localstore set)
* @param {string} lang Code of language to switch to.
+ * @returns {Promise<void>}
*/
async changeCurrentPageLang(lang) {
let message = (await langModules["../lang/" + lang + ".json"]()).default;
From 836199dea5f6995c2f89fc22332a401ac0a6b817 Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Mon, 18 Nov 2024 12:31:44 +0100
Subject: [PATCH 8/9] Fix that localeSelector hides/shows on config change
---
src/pages/StatusPage.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index d299e2090..640b32faf 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -166,7 +166,7 @@
<Editable v-model="config.title" class="title" tag="span" :contenteditable="editMode" :noNL="true" />
<!-- Locale Selector -->
- <span class="language-selector">
+ <span class="language-selector" v-if="config.showLocaleSelector">
<select v-model="$root.language" class="form-select">
<option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale" :text="$i18n.messages[locale].languageName"></option>
</select>
From 1557f58118604a18053cad0a57feb8836820b5e7 Mon Sep 17 00:00:00 2001
From: Wampie Driessen <1059058+wampiedriessen@users.noreply.github.com>
Date: Mon, 18 Nov 2024 12:35:28 +0100
Subject: [PATCH 9/9] Appease vue linter
---
src/pages/StatusPage.vue | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/pages/StatusPage.vue b/src/pages/StatusPage.vue
index 640b32faf..d88699fa4 100644
--- a/src/pages/StatusPage.vue
+++ b/src/pages/StatusPage.vue
@@ -166,7 +166,7 @@
<Editable v-model="config.title" class="title" tag="span" :contenteditable="editMode" :noNL="true" />
<!-- Locale Selector -->
- <span class="language-selector" v-if="config.showLocaleSelector">
+ <span v-if="config.showLocaleSelector" class="language-selector">
<select v-model="$root.language" class="form-select">
<option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale" :text="$i18n.messages[locale].languageName"></option>
</select>