From 428c300e9f42f8b9232f780d387292c1a94fcd23 Mon Sep 17 00:00:00 2001
From: Rémy Raes <contact@remyraes.com>
Date: Wed, 29 Mar 2023 00:45:16 +0200
Subject: feat: i18n (#182)

* build: add vue-i18n dependency

* feat: add i18n plugin to vue project

* feat: use translations in play button

* feat: translate play view

* feat: translate menu items

* feat: translate local mods view

* feat: translate online mods view

* feat: translate mods menu

* feat: translate thunderstore mod card component

* fix: remove useless "this" keyword

* feat: translate settings view

* fix: remove leftover test invocation

* feat: add language selector component

* feat: using language selector updates interface's language

* feat: save language in persistent store on selector change

* feat: initialize lang on app launch

* refactor: move i18n code into App.mounted callback

* feat: update interface language on app launch

* feat: adjust language selection on language selector load

* fix: this.$root can't be null

* feat: translate store notifications

* fix: add missing parameter to english translation

* feat: translate "by" author keyword

* feat: translate repair window

* feat: translate repair window title

* docs: add some documentation regarding localization

* docs: explain how to add a new language

* feat: translate Northstar release canal selector elements

* docs: describe how to inject variable into translations

* feat: translate "info" word

* feat: translate popconfirm buttons

* fix: remove "this" keyword

* fix: save store when updating interface language
---
 src-vue/src/views/PlayView.vue                  | 14 ++++----
 src-vue/src/views/RepairView.vue                | 27 ++++++++++----
 src-vue/src/views/SettingsView.vue              | 47 ++++++++++++++++---------
 src-vue/src/views/mods/LocalModsView.vue        | 18 ++++++----
 src-vue/src/views/mods/ThunderstoreModsView.vue |  4 +--
 5 files changed, 70 insertions(+), 40 deletions(-)

(limited to 'src-vue/src/views')

diff --git a/src-vue/src/views/PlayView.vue b/src-vue/src/views/PlayView.vue
index beca6724..57d02904 100644
--- a/src-vue/src/views/PlayView.vue
+++ b/src-vue/src/views/PlayView.vue
@@ -34,27 +34,27 @@ export default defineComponent({
     <div class="fc_launch__container">
         <div class="fc_title">Northstar</div>
         <div class="fc_northstar__version__container">
-            {{ northstarVersion === '' ? 'Unknown version' : `v${northstarVersion}` }}
+            {{ northstarVersion === '' ? $t('play.unknown_version') : `v${northstarVersion}` }}
             <div v-if="northstarVersion !== ''" class="fc_changelog__link" @click="showChangelogPage">
-                (see patch notes)
+                ({{ $t('play.see_patch_notes') }})
             </div>
             <div v-if="playerCount >= 0" class="fc-stats__container">
-                {{ playerCount }} players,
-                {{ serverCount }} servers
+                {{ playerCount }} {{ $t('play.players') }},
+                {{ serverCount }} {{ $t('play.servers') }}
             </div>
             <div v-else="playerCount >= 0" class="fc-stats__container">
-                Unable to load playercount
+                {{ $t('play.unable_to_load_playercount') }}
             </div>
         </div>
         <div>
             <PlayButton />
             <div v-if="$store.state.developer_mode" id="fc_services__status">
                 <div>
-                    <div class="fc_version__line">Northstar is running: </div>
+                    <div class="fc_version__line">{{ $t('play.northstar_running') }}</div>
                     <div class="fc_version__line fc_version__line__boolean"> {{ northstarIsRunning }}</div>
                 </div>
                 <div>
-                    <div class="fc_version__line">Origin is running: </div>
+                    <div class="fc_version__line">{{ $t('play.origin_running') }}</div>
                     <div class="fc_version__line fc_version__line__boolean">{{ $store.state.origin_is_running }}</div>
                 </div>
             </div>
diff --git a/src-vue/src/views/RepairView.vue b/src-vue/src/views/RepairView.vue
index e7cd479a..12224524 100644
--- a/src-vue/src/views/RepairView.vue
+++ b/src-vue/src/views/RepairView.vue
@@ -1,30 +1,30 @@
 <template>
     <div class="fc-container">
         <el-scrollbar>
-            <el-alert title="Info" type="info" :closable="false" show-icon>
-                This window contains various functionality to repair common issues with Northstar and FlightCore.
+            <el-alert :title="$t('generic.informationShort')" type="info" :closable="false" show-icon>
+                {{ $t('settings.repair.window.warning') }}
             </el-alert>
 
-            <h1>Repair</h1>
+            <h1>{{ $t('settings.repair.title') }}</h1>
 
             <h2>Northstar</h2>
 
             <el-button type="primary" @click="disableAllModsButCore">
-                Disable all but core mods
+                {{ $t('settings.repair.window.disable_all_but_core') }}
             </el-button>
 
             <el-button type="primary" @click="forceInstallNorthstar">
-                Force reinstall Northstar
+                {{ $t('settings.repair.window.force_reinstall_ns') }}
             </el-button>
 
             <h2>FlightCore</h2>
 
             <el-button type="primary" @click="cleanUpDownloadFolder">
-                Force delete temp download folder
+                {{ $t('settings.repair.window.force_delete_temp_dl') }}
             </el-button>
 
             <el-button type="primary" @click="clearFlightCorePersistentStore">
-                Delete FlightCore persistent store
+                {{ $t('settings.repair.window.delete_persistent_store') }}
             </el-button>
         </el-scrollbar>
     </div>
@@ -37,10 +37,16 @@ import { GameInstall } from "../utils/GameInstall";
 import { invoke } from "@tauri-apps/api";
 import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { Store } from 'tauri-plugin-store-api';
+import { appWindow } from "@tauri-apps/api/window";
 const persistentStore = new Store('flight-core-settings.json');
 
 export default defineComponent({
     name: "RepairView",
+    computed: {
+        lang(): string {
+            return this.$root!.$i18n.locale;
+        }
+    },
     methods: {
         async disableAllModsButCore() {
             let game_install = {
@@ -135,6 +141,13 @@ export default defineComponent({
             // ...and save
             await persistentStore.save();
         },
+    },
+    watch: {
+        // Lang value is propagated to repair view after it's mounted, so we need to watch
+        // its value, and update window title accordingly.
+        lang(newv: string) {
+            appWindow.setTitle( this.$t('settings.repair.window.title') );
+        }
     }
 });
 </script>
diff --git a/src-vue/src/views/SettingsView.vue b/src-vue/src/views/SettingsView.vue
index 4e816740..9a92865d 100644
--- a/src-vue/src/views/SettingsView.vue
+++ b/src-vue/src/views/SettingsView.vue
@@ -3,11 +3,11 @@
         <el-scrollbar>
             <div class="fc_settings__container">
                 <!-- Game folder location -->
-                <h3>Manage installation</h3>
+                <h3>{{ $t('settings.manage_install') }}</h3>
                 <el-input
                     v-model="$store.state.game_path"
                     class="w-50 m-2"
-                    placeholder="Choose installation folder"
+                    :placeholder="$t('settings.choose_folder')"
                     @click="updateGamePath"
                 >
                     <template #prepend>
@@ -17,37 +17,46 @@
 
                 <!-- Thunderstore mods per page configuration -->
                 <div class="fc_parameter__panel">
-                    <h3>Number of Thunderstore mods per page</h3>
+                    <h3>{{ $t('settings.nb_ts_mods_per_page') }}</h3>
                     <h6>
-                        This has an impact on display performances when browsing Thunderstore mods.<br>
-                        Set this value to 0 to disable pagination.
+                        {{ $t('settings.nb_ts_mods_per_page_desc1') }}<br>
+                        {{ $t('settings.nb_ts_mods_per_page_desc2') }}
                     </h6>
-                    <el-input 
-                        v-model="modsPerPage" 
+                    <el-input
+                        v-model="modsPerPage"
                         type="number"
                     >
                         <template #append>
-                            <el-button @click="modsPerPage = 20">Reset to default</el-button>
+                            <el-button @click="modsPerPage = 20">
+                                {{ $t('settings.nb_ts_mods_reset') }}
+                            </el-button>
                         </template>
                     </el-input>
                 </div>
 
-                <h3>Repair</h3>
+                <!-- Interface localization -->
+                <div class="fc_parameter__panel">
+                    <h3>{{ $t('settings.language') }}</h3>
+                    <language-selector/>
+                </div>
+
+                <h3>{{ $t('settings.repair.title') }}</h3>
                 <el-button type="primary" @click="openRepairWindow">
-                    Open Repair window
+                    {{ $t('settings.repair.open_window') }}
                 </el-button>
 
-                <h3>About:</h3>
+                <h3>{{ $t('settings.about') }}</h3>
+
                 <div class="fc_northstar__version" @click="activateDeveloperMode">
-                    FlightCore Version: {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
+                    {{ $t('settings.flightcore_version') }} {{ flightcoreVersion === '' ? 'Unknown version' : `${flightcoreVersion}` }}
                 </div>
                 <br />
                 <br />
                 UI design inspired by <el-link :underline="false" target="_blank" href="https://github.com/TFORevive/tforevive_launcher/" type="primary">TFORevive Launcher</el-link> (not yet public)
 
-                <h3>Testing:</h3>
+                <h3>{{ $t('settings.testing') }}</h3>
                 <span>
-                    Enable testing release channels
+                    {{ $t('settings.enable_test_channels') }}
                     <el-switch v-model="enableReleasesSwitch"></el-switch>
                 </span>
             </div>
@@ -61,10 +70,14 @@ import { ElNotification } from 'element-plus';
 import { invoke } from "@tauri-apps/api";
 import { ReleaseCanal } from "../utils/ReleaseCanal";
 import { Store } from 'tauri-plugin-store-api';
+import LanguageSelector from "../components/LanguageSelector.vue";
 const persistentStore = new Store('flight-core-settings.json');
 
 export default defineComponent({
     name: "SettingsView",
+    components: {
+        LanguageSelector
+    },
     data() {
         return {
             developerModeClicks: 0
@@ -107,8 +120,8 @@ export default defineComponent({
             if (this.developerModeClicks >= 6) {
                 this.$store.state.developer_mode = true;
                 ElNotification({
-                    title: 'Watch out!',
-                    message: 'Developer mode enabled.',
+                    title: this.$t('settings.dev_mode_enabled_title'),
+                    message: this.$t('settings.dev_mode_enabled_text'),
                     type: 'info',
                     position: 'bottom-right'
                 });
@@ -156,7 +169,7 @@ h3:first-of-type {
     font-weight: unset;
 }
 
-.el-input {
+.el-input, .el-select {
     width: 50%;
 }
 
diff --git a/src-vue/src/views/mods/LocalModsView.vue b/src-vue/src/views/mods/LocalModsView.vue
index ed801b7a..4bc870fe 100644
--- a/src-vue/src/views/mods/LocalModsView.vue
+++ b/src-vue/src/views/mods/LocalModsView.vue
@@ -1,23 +1,27 @@
 <template>
     <el-scrollbar>
         <div>
-            <p v-if="mods.length === 0">No mods were found.</p>
+            <p v-if="mods.length === 0">{{ $t('mods.local.no_mods') }}</p>
             <el-card v-else shadow="hover" v-for="mod in mods" v-bind:key="mod.name">
                 <el-switch style="--el-switch-on-color: #13ce66; --el-switch-off-color: #8957e5" v-model="mod.enabled"
                             :before-change="() => updateWhichModsEnabled(mod)" :loading="global_load_indicator" />
                 <el-popconfirm
-                    title="Are you sure to delete this mod?"
+                    :title="$t('mods.local.delete_confirm')"
+                    :confirm-button-text="$t('generic.yes')"
+                    :cancel-button-text="$t('generic.no')"
                     @confirm="deleteMod(mod)"
                 >
                     <template #reference>
-                        <el-button type="danger">Delete</el-button>
+                        <el-button type="danger">
+                            {{ $t('mods.local.delete') }}
+                        </el-button>
                     </template>
                 </el-popconfirm>
                 {{ mod.name }}
                 <span v-if="mod.version != null">(v{{ mod.version }})</span>
                 <img
                     v-if="mod.thunderstore_mod_string != null"
-                    title="This Northstar mod is part of a Thunderstore mod"
+                    :title="$t('mods.local.part_of_ts_mod')"
                     src="/src/assets/thunderstore-icon.png"
                     class="image"
                     height="16"
@@ -80,7 +84,7 @@ export default defineComponent({
             }
             catch (error) {
                 ElNotification({
-                    title: 'Error',
+                    title: this.$t('generic.error'),
                     message: `${error}`,
                     type: 'error',
                     position: 'bottom-right'
@@ -101,14 +105,14 @@ export default defineComponent({
                 .then((message) => {
                     // Just a visual indicator that it worked
                     ElNotification({
-                        title: `Success deleting ${mod.name}`,
+                        title: this.$t('mods.local.success_deleting', {modName: mod.name}),
                         type: 'success',
                         position: 'bottom-right'
                     });
                 })
                 .catch((error) => {
                     ElNotification({
-                        title: 'Error',
+                        title: this.$t('generic.error'),
                         message: error,
                         type: 'error',
                         position: 'bottom-right'
diff --git a/src-vue/src/views/mods/ThunderstoreModsView.vue b/src-vue/src/views/mods/ThunderstoreModsView.vue
index 19809f3e..0a0b9965 100644
--- a/src-vue/src/views/mods/ThunderstoreModsView.vue
+++ b/src-vue/src/views/mods/ThunderstoreModsView.vue
@@ -18,8 +18,8 @@
 
                 <!-- Message displayed if no mod matched searched words -->
                 <div v-if="filteredMods.length === 0" class="modMessage">
-                    No matching mod has been found.<br/>
-                    Try another search!
+                    {{ $t('mods.online.no_match') }}<br/>
+                    {{ $t('mods.online.try_another_search') }}
                 </div>
 
                 <!-- Mod cards -->
-- 
cgit v1.2.3