🌐 Translations for app config, json editor, rebuild dialog and css dialog

src/components/Configuration/ConfigContainer.vue

@@ -1,67 +1,69 @@
 <template>
   <Tabs :navAuto="true" name="Add Item" ref="tabView">
-    <TabItem name="Config" class="main-tab">
+    <TabItem :name="$t('config.main-tab')" class="main-tab">
       <div class="main-options-container">
         <h2>Configuration Options</h2>
         <a class="hyperlink-wrapper"  @click="downloadConfigFile('conf.yml', yaml)">
           <button class="config-button center">
-          <DownloadIcon class="button-icon"/>
-          Download Config
+            <DownloadIcon class="button-icon"/>
+            {{ $t('config.download-config-button') }}
           </button>
         </a>
         <button class="config-button center" @click="() => navigateToTab(2)">
           <EditIcon class="button-icon"/>
-          Edit Config
+          {{ $t('config.edit-config-button') }}
         </button>
         <button class="config-button center" @click="() => navigateToTab(3)">
           <CustomCssIcon class="button-icon"/>
-          Edit Custom CSS
+          {{ $t('config.edit-css-button') }}
         </button>
         <button class="config-button center" @click="openCloudSync()">
           <CloudIcon class="button-icon"/>
-          {{backupId ? 'Edit Cloud Sync' : 'Enable Cloud Sync'}}
+          {{backupId ? $t('config.edit-cloud-sync-button') : $t('config.cloud-sync-button') }}
         </button>
         <button class="config-button center" @click="openRebuildAppModal()">
           <RebuildIcon class="button-icon"/>
-          Rebuild Application
+          {{ $t('config.rebuild-app-button') }}
         </button>
         <button class="config-button center" @click="resetLocalSettings()">
           <DeleteIcon class="button-icon"/>
-          Reset Local Settings
+          {{ $t('config.reset-settings-button') }}
         </button>
         <button class="config-button center" @click="openAboutModal()">
           <IconAbout class="button-icon" />
-          App Info
+          {{ $t('config.app-info-button') }}
         </button>
         <p class="small-screen-note" style="display: none;">
             You are using a very small screen, and some screens in this menu may not be optimal
         </p>
-        <p class="app-version">Dashy version {{ appVersion }}</p>
+        <p class="app-version">{{ $t('config.app-version-note') }} {{ appVersion }}</p>
         <div class="config-note">
-          <span>
-            It is recommend to make a backup of your conf.yml file before making changes.
-          </span>
+          <span>{{ $t('config.backup-note') }}</span>
         </div>
       </div>
       <!-- Rebuild App Modal -->
       <RebuildApp />
     </TabItem>
-    <TabItem name="View Config" class="code-container">
+    <TabItem :name="$t('config.view-config-tab')" class="code-container">
       <pre id="conf-yaml">{{yaml}}</pre>
       <div class="yaml-action-buttons">
-        <h2>Actions</h2>
+        <h2>{{ $t('config.actions-label') }}</h2>
         <a class="yaml-button download" @click="downloadConfigFile('conf.yml', yaml)">
-          Download Config
+           {{ $t('config.download-config-button') }}
+        </a>
+        <a class="yaml-button copy" @click="copyConfigToClipboard()">
+          {{ $t('config.copy-config-label') }}
+        </a>
+        <a class="yaml-button reset" @click="resetLocalSettings()">
+          {{ $t('config.reset-config-label') }}
         </a>
-        <a class="yaml-button copy" @click="copyConfigToClipboard()">Copy Config</a>
-        <a class="yaml-button reset" @click="resetLocalSettings()">Reset Config</a>
       </div>
     </TabItem>
-    <TabItem name="Edit Config">
+    <TabItem :name="$t('config.edit-config-tab')">
       <JsonEditor :config="config" />
     </TabItem>
-    <TabItem name="Custom Styles">
-      <CustomCssEditor :config="config" initialCss="hello" />
+    <TabItem :name="$t('config.custom-css-tab')">
+      <CustomCssEditor :config="config" />
     </TabItem>
   </Tabs>
 </template>
@@ -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();
   },
 };
 </script>