From ef3468e2fb61c2a3379cb695952e8c3f69be0707 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Sat, 24 Jul 2021 14:18:48 +0100 Subject: [PATCH] :globe_with_meridians: Translations for app config, json editor, rebuild dialog and css dialog --- src/assets/locales/en-GB.json | 62 ++++++++++++++++++ .../Configuration/ConfigContainer.vue | 64 ++++++++++--------- src/components/Configuration/CustomCss.vue | 7 +- src/components/Configuration/JsonEditor.vue | 42 ++++++------ src/components/Configuration/RebuildApp.vue | 33 ++++++---- 5 files changed, 144 insertions(+), 64 deletions(-) diff --git a/src/assets/locales/en-GB.json b/src/assets/locales/en-GB.json index c43435cd..408aee3e 100644 --- a/src/assets/locales/en-GB.json +++ b/src/assets/locales/en-GB.json @@ -19,6 +19,68 @@ "remember-me-day": "1 Day", "remember-me-week": "1 Week" }, + "config": { + "main-tab": "Config", + "view-config-tab": "View Config", + "edit-config-tab": "Edit Config", + "custom-css-tab": "Custom Styles", + "heading": "Configuration Options", + "download-config-button": "Download Config", + "edit-config-button": "Edit Config", + "edit-css-button": "Edit Custom CSS", + "cloud-sync-button": "Enable Cloud Sync", + "edit-cloud-sync-button": "Edit Cloud Sync", + "rebuild-app-button": "Rebuild Application", + "reset-settings-button": "Reset Local Settings", + "app-info-button": "App Info", + "app-version-note": "Dashy version", + "backup-note": "It is recommend to make a backup of your configuration before making changes.", + "reset-config-msg-l1": "This will remove all user settings from local storage, but won't effect your 'conf.yml' file.", + "reset-config-msg-l2": "You should first backup any changes you've made locally, if you want to use them in the future.", + "reset-config-msg-l3": "Are you sure you want to proceed?", + "data-cleared-msg": "Data cleared successfully", + "actions-label": "Actions", + "copy-config-label": "Copy Config", + "data-copied-msg": "Config has been copied to clipboard", + "reset-config-label": "Reset Config", + "css-save-btn": "Save Changes", + "css-note-label": "Note", + "css-note-l1": "You will need to refresh the page for your changes to take effect.", + "css-note-l2": "Styles overrides are only stored locally, so it is recommended to make a copy of your CSS.", + "css-note-l3": "To remove all custom styles, delete the contents and hit Save Changes" + }, + "config-editor": { + "save-location-label": "Save Location", + "location-local-label": "Apply Locally", + "location-disk-label": "Write Changes to Config File", + "save-button": "Save Changes", + "valid-label": "Config is Valid", + "status-success-msg": "Task Complete", + "status-fail-msg": "Task Failed", + "success-msg-disk": "Config file written to disk successfully", + "success-msg-local": "Local changes saved successfully", + "success-note-l1": "The app should rebuild automatically.", + "success-note-l2": "This may take up to a minute.", + "success-note-l3": "You will need to refresh the page for changes to take effect.", + "error-msg-save-mode": "Please select a Save Mode: Local or File", + "error-msg-cannot-save": "An error occurred saving config", + "error-msg-bad-json": "Error in JSON, possibly malformed", + "warning-msg-validation": "Validation Warning" + }, + "app-rebuild": { + "title": "Rebuild Application", + "rebuild-note-l1": "A rebuild is required for changes written to the conf.yml file to take effect.", + "rebuild-note-l2": "This should happen automatically, but if it hasn't, you can manually trigger it here.", + "rebuild-note-l3": "This is not required for modifications stored locally.", + "rebuild-button": "Start Build", + "rebuilding-status-1": "Building...", + "rebuilding-status-2": "This may take a few minutes", + "error-permission": "You do no have permission to trigger this action", + "success-msg": "Build completed succesfully", + "fail-msg": "Build operation failed", + "reload-note": "A page reload is now required for changes to take effect", + "reload-button": "Reload Page" + }, "cloud-sync": { "title": "Cloud Backup & Restore", "intro-l1": "Cloud backup and restore is an optional feature, that enables you to upload your config to the internet, and then restore it on any other device or instance of Dashy.", diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue index e38995aa..a7c137f9 100644 --- a/src/components/Configuration/ConfigContainer.vue +++ b/src/components/Configuration/ConfigContainer.vue @@ -1,67 +1,69 @@ @@ -135,18 +137,16 @@ export default { }, copyConfigToClipboard() { navigator.clipboard.writeText(this.jsonParser(this.config)); - // event.target.textContent = 'Copied to clipboard'; + this.$toasted.show(this.$t('config.data-copied-msg')); }, /* Checks that the user is sure, then resets site-wide local storage, and reloads page */ resetLocalSettings() { - const msg = 'This will remove all user settings from local storage, ' - + 'but won\'t effect your \'conf.yml\' file. ' - + 'It is recommend to make a backup of your modified YAML settings first.\n\n' - + 'Are you sure you want to proceed?'; + const msg = `${this.$t('config.reset-config-msg-l1') + }${this.$t('config.reset-config-msg-l2')}\n\n${this.$t('config.reset-config-msg-l3')}`; const isTheUserSure = confirm(msg); // eslint-disable-line no-alert, no-restricted-globals if (isTheUserSure) { localStorage.clear(); - this.$toasted.show('Data cleared succesfully'); + this.$toasted.show(this.$t('config.data-cleared-msg')); setTimeout(() => { location.reload(true); // eslint-disable-line no-restricted-globals }, 1900); @@ -162,11 +162,15 @@ export default { element.click(); document.body.removeChild(element); }, + /* Highlights the YAML config in View config tab */ + initiateStntaxHighlighter() { + hljs.registerLanguage('yaml', yaml); + const highlighted = hljs.highlight(this.jsonParser(this.config), { language: 'yaml' }).value; + document.getElementById('conf-yaml').innerHTML = highlighted; + }, }, mounted() { - hljs.registerLanguage('yaml', yaml); - const highlighted = hljs.highlight(this.jsonParser(this.config), { language: 'yaml' }).value; - document.getElementById('conf-yaml').innerHTML = highlighted; + this.initiateStntaxHighlighter(); }, }; diff --git a/src/components/Configuration/CustomCss.vue b/src/components/Configuration/CustomCss.vue index e2523da5..a7f2c929 100644 --- a/src/components/Configuration/CustomCss.vue +++ b/src/components/Configuration/CustomCss.vue @@ -1,11 +1,10 @@ @@ -103,7 +108,7 @@ export default { } else if (this.saveMode === 'file') { this.writeConfigToDisk(); } else { - this.$toasted.show('Please select a Save Mode: Local or File'); + this.$toasted.show(this.$t('config-editor.error-msg-save-mode')); } }, writeConfigToDisk() { @@ -121,9 +126,9 @@ export default { this.responseText = response.data.message; if (this.saveSuccess) { this.carefullyClearLocalStorage(); - this.showToast('Config file written to disk succesfully', true); + this.showToast(this.$t('config-editor.success-msg-disk'), true); } else { - this.showToast('An error occurred saving config', false); + this.showToast(this.$t('config-editor.error-msg-cannot-save'), false); } }) .catch((error) => { @@ -146,7 +151,7 @@ export default { if (data.appConfig.theme) { localStorage.setItem(localStorageKeys.THEME, data.appConfig.theme); } - this.showToast('Changes saved succesfully', true); + this.showToast(this.$t('config-editor.success-msg-local'), true); }, carefullyClearLocalStorage() { localStorage.removeItem(localStorageKeys.PAGE_INFO); @@ -160,7 +165,8 @@ export default { case 'validation': errorMessages.push({ type: 'validation', - msg: `Validatation Warning: ${error.error.keyword} ${error.error.message}`, + msg: `${this.$t('config-editor.warning-msg-validation')}: ` + + `${error.error.keyword} ${error.error.message}`, }); break; case 'error': @@ -172,7 +178,7 @@ export default { default: errorMessages.push({ type: 'editor', - msg: 'Error in JSON', + msg: this.$t('config-editor.error-msg-bad-json'), }); break; } diff --git a/src/components/Configuration/RebuildApp.vue b/src/components/Configuration/RebuildApp.vue index 4d1ebcaa..e6a71b17 100644 --- a/src/components/Configuration/RebuildApp.vue +++ b/src/components/Configuration/RebuildApp.vue @@ -2,35 +2,41 @@
-

Rebuild Application

+

{{ $t('app-rebuild.title') }}

- A rebuild is required for changes written to the conf.yml file to take effect. - This should happen automatically, but if it hasn't, you can manually trigger it here.
- This is not required for modifications stored locally. + {{ $t('app-rebuild.rebuild-note-l1') }} + {{ $t('app-rebuild.rebuild-note-l2') }}
+ {{ $t('app-rebuild.rebuild-note-l3') }}

-

You do no have permission to trigger this action

+

{{ $t('app-rebuild.error-permission') }}

-

This may take a few minutes...

+

{{ $t('app-rebuild.rebuilding-status-2') }}...

-

✅ Build completed succesfully

-

❌ Build operation failed

+

+ ✅ {{ $t('app-rebuild.success-msg') }} +

+

+ ❌ {{ $t('app-rebuild.fail-msg') }} + 

{{ output || error }}

{{ message }}

- A page reload is now required for changes to take effect + {{ $t('app-rebuild.reload-note') }}

@@ -65,6 +71,7 @@ export default { allowRebuild: true, }), methods: { + /* Calls to the rebuild endpoint, to kickoff the app build */ startBuild() { const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin; const endpoint = `${baseUrl}/config-manager/rebuild`; @@ -77,6 +84,7 @@ export default { this.finished({ success: false, error }); }); }, + /* Called when rebuild is complete, updates UI with either success or fail message */ finished(responseData) { this.loading = false; if (responseData) { @@ -89,7 +97,8 @@ export default { this.error = error; } this.$toasted.show( - (this.success ? '✅ Build Completed Succesfully' : '❌ Build Failed'), + (this.success + ? `✅ ${this.$t('app-rebuild.success-msg')}` : `❌ ${this.$t('app-rebuild.fail-msg')}`), { className: `toast-${this.success ? 'success' : 'error'}` }, ); },