Translate SPA prototype

range-of-motion · Dec 16, 2023 · fb115a1 · fb115a1
1 parent 070677b
commit fb115a1
Show file tree

Hide file tree

Showing 10 changed files with 71 additions and 14 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,6 +23,7 @@
         "axios": "^1.6.0",
         "lucide-vue": "^0.292.0",
         "vue-color": "^2.7.0",
+        "vue-i18n": "^8.28.2",
         "vue-router": "3"
     }
 }
diff --git a/resources/assets/js/prototype/app.js b/resources/assets/js/prototype/app.js
@@ -1,7 +1,10 @@
 import ApexCharts from 'apexcharts';
 import Vue from 'vue';
+import VueI18n from 'vue-i18n'
 import VueRouter from 'vue-router';
 
+import translations from './translations';
+
 import App from './components/App.vue';
 
 import Login from './screens/Login.vue';
@@ -15,6 +18,8 @@ window.ApexCharts = ApexCharts;
 
 Vue.prototype.versionNumber = window.versionNumber;
 
+Vue.use(VueI18n);
+
 Vue.use(VueRouter);
 
 const routes = [
@@ -45,13 +50,19 @@ const routes = [
     },
 ];
 
+const i18n = new VueI18n({
+    locale: 'en',
+    messages: translations,
+});
+
 const router = new VueRouter({
     mode: 'history',
     routes,
 });
 
 new Vue({
     el: '#app',
+    i18n,
     router,
     render: h => h(App),
 });
diff --git a/resources/assets/js/prototype/components/App.vue b/resources/assets/js/prototype/components/App.vue
@@ -1,4 +1,17 @@
 <script setup>
+import { getCurrentInstance } from 'vue';
+
+const i18n = getCurrentInstance().proxy.$i18n;
+
+const applySettings = () => {
+    applyLocale();
+    applyTheme();
+};
+
+const applyLocale = () => {
+    i18n.locale = localStorage.getItem('language');
+};
+
 const applyTheme = () => {
     const dark = localStorage.getItem('theme') === 'dark';
 
@@ -8,9 +21,9 @@ const applyTheme = () => {
     el.classList.remove(dark ? 'light' : 'dark');
 };
 
-applyTheme();
+applySettings();
 
-document.addEventListener('themeChanged', () => applyTheme());
+document.addEventListener('settingsChanged', () => applySettings());
 </script>
 
 <template>

diff --git a/resources/assets/js/prototype/components/Navigation.vue b/resources/assets/js/prototype/components/Navigation.vue
@@ -17,11 +17,11 @@ const logOut = () => {
             <div class="flex space-x-4">
                 <router-link class="flex items-center py-1 px-3 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" :to="{ name: 'dashboard' }">
                     <Home :size="16" />
-                    <span class="ml-2 text-sm">Dashboard</span>
+                    <span class="ml-2 text-sm">{{ $t('dashboard') }}</span>
                 </router-link>
                 <router-link class="flex items-center py-1 px-3 text-gray-500 dark:text-gray-400 hover:text-black dark:hover:text-white" :to="{ name: 'transactions.index' }">
                     <ArrowRightLeft :size="16" />
-                    <span class="ml-2 text-sm">Transactions</span>
+                    <span class="ml-2 text-sm">{{ $t('transactions') }}</span>
                 </router-link>
             </div>
             <div class="flex items-center space-x-4">

diff --git a/resources/assets/js/prototype/screens/Login.vue b/resources/assets/js/prototype/screens/Login.vue
@@ -15,10 +15,10 @@ const logIn = () => {
 
             if (json.token) {
                 localStorage.setItem('api_key', json.token);
+                localStorage.setItem('language', json.language);
                 localStorage.setItem('theme', json.theme);
 
-                const e = new Event('themeChanged');
-                document.dispatchEvent(e);
+                document.dispatchEvent(new Event('settingsChanged'));
 
                 router.push('dashboard');
             }
@@ -38,14 +38,14 @@ const logIn = () => {
         <div class="flex-1 max-w-sm">
             <div class="p-5 space-y-5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                 <div>
-                    <label class="block mb-2 text-sm dark:text-white">E-mail</label>
+                    <label class="block mb-2 text-sm dark:text-white">{{ $t('email') }}</label>
                     <input class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg" type="email" v-model="email" />
                 </div>
                 <div>
-                    <label class="block mb-2 text-sm dark:text-white">Password</label>
+                    <label class="block mb-2 text-sm dark:text-white">{{ $t('password') }}</label>
                     <input class="w-full px-3.5 py-2.5 text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg" type="password" v-model="password" @keyup.enter="logIn" />
                 </div>
-                <button class="w-full py-3 text-sm text-white bg-gray-900 dark:bg-gray-950 rounded-lg" @click="logIn">Log in</button>
+                <button class="w-full py-3 text-sm text-white bg-gray-900 dark:bg-gray-950 rounded-lg" @click="logIn">{{ $t('logIn') }}</button>
             </div>
             <div class="mt-5 text-sm text-center dark:text-white">{{ versionNumber }}</div>
         </div>

diff --git a/resources/assets/js/prototype/screens/Settings/Preferences.vue b/resources/assets/js/prototype/screens/Settings/Preferences.vue
@@ -30,10 +30,10 @@ const update = () => {
         .then(response => {
             // Done
 
+            localStorage.setItem('language', response.data.language);
             localStorage.setItem('theme', response.data.theme);
 
-            const e = new Event('themeChanged');
-            document.dispatchEvent(e);
+            document.dispatchEvent(new Event('settingsChanged'));
         })
         .catch(() => {
             alert('Unable to save');
@@ -50,7 +50,7 @@ onMounted(() => retrieve());
             <div class="p-5 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg">
                 <div class="space-y-5 max-w-xs">
                     <div>
-                        <div class="mb-2 text-sm dark:text-white">Language</div>
+                        <div class="mb-2 text-sm dark:text-white">{{ $t('language') }}</div>
                         <select class="px-3.5 py-2.5 w-full text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg appearance-none" v-model="language" @change="update">
                             <option value="en">English</option>
                             <option value="nl">Dutch</option>
@@ -62,14 +62,14 @@ onMounted(() => retrieve());
                         </select>
                     </div>
                     <div>
-                        <div class="mb-2 text-sm dark:text-white">Theme</div>
+                        <div class="mb-2 text-sm dark:text-white">{{ $t('theme') }}</div>
                         <select class="px-3.5 py-2.5 w-full text-sm dark:text-white dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg appearance-none" v-model="theme" @change="update">
                             <option value="light">Light</option>
                             <option value="dark">Dark</option>
                         </select>
                     </div>
                     <div>
-                        <div class="mb-2 text-sm dark:text-white">Weekly report</div>
+                        <div class="mb-2 text-sm dark:text-white">{{ $t('weeklyReport') }}</div>
                         <button class="relative flex w-9 h-6 bg-gray-200 rounded-full" :class="{ 'bg-gray-900': weeklyReport }" @click="toggleWeeklyReport()">
                             <span class="absolute top-0.5 left-0.5 w-5 h-5 bg-white rounded-full" :class="{ 'left-auto right-0.5': weeklyReport }"></span>
                         </button>

diff --git a/resources/assets/js/prototype/translations/en.json b/resources/assets/js/prototype/translations/en.json
@@ -0,0 +1,10 @@
+{
+    "dashboard": "Dashboard",
+    "email": "E-mail",
+    "language": "Language",
+    "logIn": "Log in",
+    "password": "Password",
+    "theme": "Theme",
+    "transactions": "Transactions",
+    "weeklyReport": "Weekly report"
+}
diff --git a/resources/assets/js/prototype/translations/index.js b/resources/assets/js/prototype/translations/index.js
@@ -0,0 +1,7 @@
+import * as en from './en.json';
+import * as nl from './nl.json';
+
+export default {
+    en,
+    nl,
+};
diff --git a/resources/assets/js/prototype/translations/nl.json b/resources/assets/js/prototype/translations/nl.json
@@ -0,0 +1,10 @@
+{
+    "dashboard": "Dashboard",
+    "email": "E-mail",
+    "language": "Taal",
+    "logIn": "Log in",
+    "password": "Wachtwoord",
+    "theme": "Thema",
+    "transactions": "Transacties",
+    "weeklyReport": "Wekelijks rapport"
+}