From a15255afb898b77df53c23ed5470194a0570cb57 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 24 Jul 2021 21:36:13 +0100
Subject: [PATCH] :sparkles: Implements language switcher into config component

---
 .../Configuration/ConfigContainer.vue          | 18 +++++++++++++++++-
 src/components/Settings/ConfigLauncher.vue     |  9 +++++++++
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/components/Configuration/ConfigContainer.vue b/src/components/Configuration/ConfigContainer.vue
index a7c137f9..720e6111 100644
--- a/src/components/Configuration/ConfigContainer.vue
+++ b/src/components/Configuration/ConfigContainer.vue
@@ -21,6 +21,10 @@
           <CloudIcon class="button-icon"/>
           {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
         </button>
+        <button class="config-button center" @click="openLanguageSwitchModal()">
+          <LanguageIcon class="button-icon"/>
+          {{ $t('config.change-language-button') }}
+        </button>
         <button class="config-button center" @click="openRebuildAppModal()">
           <RebuildIcon class="button-icon"/>
           {{ $t('config.rebuild-app-button') }}
@@ -37,6 +41,7 @@
             You are using a very small screen, and some screens in this menu may not be optimal
         </p>
         <p class="app-version">{{ $t('config.app-version-note') }} {{ appVersion }}</p>
+        <p class="language">{{ getLanguage() }}</p>
         <div class="config-note">
           <span>{{ $t('config.backup-note') }}</span>
         </div>
@@ -76,6 +81,7 @@ import 'highlight.js/styles/mono-blue.css';
 
 import JsonToYaml from '@/utils/JsonToYaml';
 import { localStorageKeys, modalNames } from '@/utils/defaults';
+import { getUsersLanguage } from '@/utils/ConfigHelpers';
 import JsonEditor from '@/components/Configuration/JsonEditor';
 import CustomCssEditor from '@/components/Configuration/CustomCss';
 import RebuildApp from '@/components/Configuration/RebuildApp';
@@ -86,6 +92,7 @@ import EditIcon from '@/assets/interface-icons/config-edit-json.svg';
 import CustomCssIcon from '@/assets/interface-icons/config-custom-css.svg';
 import CloudIcon from '@/assets/interface-icons/cloud-backup-restore.svg';
 import RebuildIcon from '@/assets/interface-icons/application-rebuild.svg';
+import LanguageIcon from '@/assets/interface-icons/config-language.svg';
 import IconAbout from '@/assets/interface-icons/application-about.svg';
 
 export default {
@@ -117,6 +124,7 @@ export default {
     EditIcon,
     CloudIcon,
     CustomCssIcon,
+    LanguageIcon,
     RebuildIcon,
     IconAbout,
   },
@@ -135,6 +143,9 @@ export default {
     openCloudSync() {
       this.$modal.show(modalNames.CLOUD_BACKUP);
     },
+    openLanguageSwitchModal() {
+      this.$modal.show(modalNames.LANG_SWITCHER);
+    },
     copyConfigToClipboard() {
       navigator.clipboard.writeText(this.jsonParser(this.config));
       this.$toasted.show(this.$t('config.data-copied-msg'));
@@ -168,6 +179,10 @@ export default {
       const highlighted = hljs.highlight(this.jsonParser(this.config), { language: 'yaml' }).value;
       document.getElementById('conf-yaml').innerHTML = highlighted;
     },
+    getLanguage() {
+      const lang = getUsersLanguage();
+      return lang ? `${lang.flag} ${lang.name}` : '';
+    },
   },
   mounted() {
     this.initiateStntaxHighlighter();
@@ -217,10 +232,11 @@ a.config-button, button.config-button {
   }
 }
 
-p.app-version {
+p.app-version, p.language {
   margin: 0.5rem auto;
   font-size: 1rem;
   color: var(--transparent-white-50);
+  cursor: default;
 }
 
 div.code-container {
diff --git a/src/components/Settings/ConfigLauncher.vue b/src/components/Settings/ConfigLauncher.vue
index 272cf432..3eca1fda 100644
--- a/src/components/Settings/ConfigLauncher.vue
+++ b/src/components/Settings/ConfigLauncher.vue
@@ -20,6 +20,13 @@
       @closed="$emit('modalChanged', false)" classes="dashy-modal">
       <CloudBackupRestore :config="combineConfig()" />
     </modal>
+
+    <!-- Modal for manually changing locale -->
+    <modal :name="modalNames.LANG_SWITCHER" :resizable="true" width="30%" height="25%"
+      @closed="$emit('modalChanged', false)" classes="dashy-modal">
+      <LanguageSwitcher />
+    </modal>
+
   </div>
 </template>
 
@@ -29,6 +36,7 @@ import IconSpanner from '@/assets/interface-icons/config-editor.svg';
 import IconCloud from '@/assets/interface-icons/cloud-backup-restore.svg';
 import ConfigContainer from '@/components/Configuration/ConfigContainer';
 import CloudBackupRestore from '@/components/Configuration/CloudBackupRestore';
+import LanguageSwitcher from '@/components/Settings/LanguageSwitcher';
 import { topLevelConfKeys, localStorageKeys, modalNames } from '@/utils/defaults';
 
 export default {
@@ -43,6 +51,7 @@ export default {
     IconCloud,
     ConfigContainer,
     CloudBackupRestore,
+    LanguageSwitcher,
   },
   props: {
     sections: Array,