From 8b596c0f6ee62d20168cb0d78794f4e93b28e1e1 Mon Sep 17 00:00:00 2001
From: "kujiu (@rincevent)" <kujiu@kujiu.org>
Date: Sat, 4 Dec 2021 16:44:11 +0100
Subject: [PATCH] Fix: translations

---
 src/NervTN.vue                | 33 +++++++++++++++++++++------------
 src/assets/css/common.less    |  6 ++++--
 src/components/NervTNApps.vue | 19 ++++++++++++++-----
 src/components/ReloadPWA.vue  | 13 ++++++++-----
 src/locale/en.json            |  7 +++++++
 src/locale/fr.json            |  7 +++++++
 src/main.js                   |  3 +--
 vite.config.js                |  4 +++-
 8 files changed, 65 insertions(+), 27 deletions(-)

diff --git a/src/NervTN.vue b/src/NervTN.vue
index c08c125..deb9ec0 100644
--- a/src/NervTN.vue
+++ b/src/NervTN.vue
@@ -1,20 +1,29 @@
 <script setup>
 import ReloadPWA from './components/ReloadPWA.vue';
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
 </script>
 
 <template>
-  <ReloadPWA/>
-  <main>
-      <router-view></router-view>
-  </main>
-  <header>
-      <router-link to='/apps'>
-          <img alt="" src="./assets/logo.svg"/>
-          {{ $t('home.apps') }}
-      </router-link>
-  </header>
-  <footer>
-  </footer>
+    <ReloadPWA/>
+    <main>
+        <router-view></router-view>
+    </main>
+    <header>
+        <router-link to='/apps'>
+            <img alt="" src="./assets/logo.svg"/>
+            {{ t('home.apps') }}
+        </router-link>
+        <select v-model="$i18n.locale" @change="$i18n.loadMessages()">
+            <option value="de">Deutsch</option>
+            <option value="en">English</option>
+            <option value="fr">Français</option>
+            <option value="nl">Nederlands</option>
+        </select>
+    </header>
+    <footer>
+    </footer>
 
 </template>
 
diff --git a/src/assets/css/common.less b/src/assets/css/common.less
index 7e3026b..2de7fab 100644
--- a/src/assets/css/common.less
+++ b/src/assets/css/common.less
@@ -236,12 +236,14 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   font-size: 2.2rem;
+  padding-bottom: .3rem;
+  border-bottom: 0.3em solid var(--BClr);
 }
 
 h2 {
   font-size: 1.65rem;
-  padding-bottom: .3rem;
-  border-bottom: 0.3em solid var(--BClr);
+  padding-bottom: .2rem;
+  border-bottom: 0.2em solid var(--BClr);
 }
 
 h3 {
diff --git a/src/components/NervTNApps.vue b/src/components/NervTNApps.vue
index 16577e7..275e504 100644
--- a/src/components/NervTNApps.vue
+++ b/src/components/NervTNApps.vue
@@ -1,7 +1,16 @@
+<script setup>
+import {useI18n} from 'vue-i18n';
+
+const {t} = useI18n({useScope: 'local'});
+</script>
+
 <template>
-    <h1>Communication</h1>
-    <h1>Accounting</h1>
-    <h1>Ordering</h1>
-    <h1>Stocks</h1>
-    <h1>Monitoring</h1>
+    <h1>{{ t('apps.communication') }}</h1>
+    <h1>{{ t('apps.accounting') }}</h1>
+    <h1>{{ t('apps.ordering') }}</h1>
+    <h1>{{ t('apps.stocks') }}</h1>
+    <h1>{{ t('apps.monitoring') }}</h1>
 </template>
+
+<i18n lang="json" locale="en" src="../locale/en.json"/>
+<i18n lang="json" locale="fr" src="../locale/fr.json"/>
diff --git a/src/components/ReloadPWA.vue b/src/components/ReloadPWA.vue
index 9a56ee5..8443377 100644
--- a/src/components/ReloadPWA.vue
+++ b/src/components/ReloadPWA.vue
@@ -2,18 +2,18 @@
     <div v-if="offlineReady || needRefresh" role="alert">
         <div class="admonition warning">
             <span v-if="offlineReady">
-                {{ $t('pwa.ready') }}
+                {{ t('pwa.ready') }}
             </span>
             <span v-else>
-                {{ $t('pwa.new_content') }}
+                {{ t('pwa.new_content') }}
             </span>
         </div>
         <div class="">
             <button v-if="needRefresh" @click="updateServiceWorker()">
-                {{ $t('pwa.reload') }}
+                {{ t('pwa.reload') }}
             </button>
             <button @click="close">
-                {{ $t('pwa.close') }}
+                {{ t('pwa.close') }}
             </button>
         </div>
     </div>
@@ -22,18 +22,20 @@
 <script>
 import {defineComponent} from "vue";
 import {useRegisterSW} from "virtual:pwa-register/vue";
+import {useI18n} from 'vue-i18n';
 
 const {updateServiceWorker} = useRegisterSW();
 
 export default defineComponent({
     name: "ReloadPWA",
     setup() {
+        const {t} = useI18n({useScope: 'local'});
         const {offlineReady, needRefresh, updateServiceWorker} = useRegisterSW();
         const close = async () => {
             offlineReady.value = false;
             needRefresh.value = false;
         };
-        return {offlineReady, needRefresh, updateServiceWorker, close};
+        return {offlineReady, needRefresh, updateServiceWorker, close, t};
     },
     methods: {
         async close() {
@@ -46,5 +48,6 @@ export default defineComponent({
     },
 });
 </script>
+
 <i18n lang="json" locale="en" src="../locale/en.json"/>
 <i18n lang="json" locale="fr" src="../locale/fr.json"/>
diff --git a/src/locale/en.json b/src/locale/en.json
index d82e5f2..38c386a 100644
--- a/src/locale/en.json
+++ b/src/locale/en.json
@@ -1,4 +1,11 @@
 {
+    "apps": {
+        "communication": "",
+        "accounting": "",
+        "ordering": "",
+        "stocks": "",
+        "monitoring": ""
+    },
     "home": {
         "apps": "Applications"
     },
diff --git a/src/locale/fr.json b/src/locale/fr.json
index 40b1427..78c8841 100644
--- a/src/locale/fr.json
+++ b/src/locale/fr.json
@@ -1,4 +1,11 @@
 {
+    "apps": {
+        "communication": "Communication",
+        "accounting": "Comptabilité",
+        "ordering": "Commande",
+        "stocks": "Stocks",
+        "monitoring": "Veille"
+    },
     "home": {
         "apps": "Applications"
     },
diff --git a/src/main.js b/src/main.js
index 18ef86f..20c0c61 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,8 +22,7 @@ app.use(createI18n({
     locale: languages[0].trim().split(/-|_/)[0],
     fallbackLocale: 'en',
     legacy: false,
-    globalInjection: true,
-    messages: {}
+    globalInjection: true
 }));
 app.use(router);
 app.use(store);
diff --git a/vite.config.js b/vite.config.js
index d4ce8e5..a66f1b4 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -16,7 +16,9 @@ export default defineConfig({
     plugins: [
         vue(),
         vueI18n({
-            include: path.resolve(__dirname, '**/locale/**')
+            include: path.resolve(__dirname, '**/locale/**'),
+            compositionOnly: true,
+            fullInstall: true
         }),
         VitePWA({
             mode: "production",