Enables translation of strings.

android/app/capacitor.build.gradle

@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-app')
+    implementation project(':capacitor-device')
     implementation project(':capacitor-haptics')
     implementation project(':capacitor-keyboard')
     implementation project(':capacitor-status-bar')

android/app/src/main/assets/capacitor.plugins.json

@@ -3,6 +3,10 @@
 		"pkg": "@capacitor/app",
 		"classpath": "com.capacitorjs.plugins.app.AppPlugin"
 	},
+	{
+		"pkg": "@capacitor/device",
+		"classpath": "com.capacitorjs.plugins.device.DevicePlugin"
+	},
 	{
 		"pkg": "@capacitor/haptics",
 		"classpath": "com.capacitorjs.plugins.haptics.HapticsPlugin"

android/capacitor.settings.gradle

@@ -5,6 +5,9 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 include ':capacitor-app'
 project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
 
+include ':capacitor-device'
+project(':capacitor-device').projectDir = new File('../node_modules/@capacitor/device/android')
+
 include ':capacitor-haptics'
 project(':capacitor-haptics').projectDir = new File('../node_modules/@capacitor/haptics/android')
 

package-lock.json

@@ -2151,6 +2151,11 @@
         "tslib": "^2.1.0"
       }
     },
+    "@capacitor/device": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@capacitor/device/-/device-1.1.2.tgz",
+      "integrity": "sha512-1i6yvuSC7Ys7fs4JsUtfwG/00d2FF2TvWpbYs7YbkXhp1vOTL510gwjc5S6FTyhh8M9sAaUU5tKB68XwlSK/GA=="
+    },
     "@capacitor/haptics": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/@capacitor/haptics/-/haptics-1.1.4.tgz",
@@ -2311,6 +2316,74 @@
       "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
       "dev": true
     },
+    "@intlify/core-base": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/core-base/-/core-base-9.1.10.tgz",
+      "integrity": "sha512-So9CNUavB/IsZ+zBmk2Cv6McQp6vc2wbGi1S0XQmJ8Vz+UFcNn9MFXAe9gY67PreIHrbLsLxDD0cwo1qsxM1Nw==",
+      "requires": {
+        "@intlify/devtools-if": "9.1.10",
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10"
+      }
+    },
+    "@intlify/devtools-if": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/devtools-if/-/devtools-if-9.1.10.tgz",
+      "integrity": "sha512-SHaKoYu6sog3+Q8js1y3oXLywuogbH1sKuc7NSYkN3GElvXSBaMoCzW+we0ZSFqj/6c7vTNLg9nQ6rxhKqYwnQ==",
+      "requires": {
+        "@intlify/shared": "9.1.10"
+      }
+    },
+    "@intlify/message-compiler": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-compiler/-/message-compiler-9.1.10.tgz",
+      "integrity": "sha512-+JiJpXff/XTb0EadYwdxOyRTB0hXNd4n1HaJ/a4yuV960uRmPXaklJsedW0LNdcptd/hYUZtCkI7Lc9J5C1gxg==",
+      "requires": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "source-map": "0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
+        }
+      }
+    },
+    "@intlify/message-resolver": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/message-resolver/-/message-resolver-9.1.10.tgz",
+      "integrity": "sha512-5YixMG/M05m0cn9+gOzd4EZQTFRUu8RGhzxJbR1DWN21x/Z3bJ8QpDYj6hC4FwBj5uKsRfKpJQ3Xqg98KWoA+w=="
+    },
+    "@intlify/runtime": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/runtime/-/runtime-9.1.10.tgz",
+      "integrity": "sha512-7QsuByNzpe3Gfmhwq6hzgXcMPpxz8Zxb/XFI6s9lQdPLPe5Lgw4U1ovRPZTOs6Y2hwitR3j/HD8BJNGWpJnOFA==",
+      "requires": {
+        "@intlify/message-compiler": "9.1.10",
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      }
+    },
+    "@intlify/shared": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/shared/-/shared-9.1.10.tgz",
+      "integrity": "sha512-Om54xJeo1Vw+K1+wHYyXngE8cAbrxZHpWjYzMR9wCkqbhGtRV5VLhVc214Ze2YatPrWlS2WSMOWXR8JktX/IgA=="
+    },
+    "@intlify/vue-devtools": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/@intlify/vue-devtools/-/vue-devtools-9.1.10.tgz",
+      "integrity": "sha512-5l3qYARVbkWAkagLu1XbDUWRJSL8br1Dj60wgMaKB0+HswVsrR6LloYZTg7ozyvM621V6+zsmwzbQxbVQyrytQ==",
+      "requires": {
+        "@intlify/message-resolver": "9.1.10",
+        "@intlify/runtime": "9.1.10",
+        "@intlify/shared": "9.1.10"
+      }
+    },
     "@ionic/cli-framework": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@ionic/cli-framework/-/cli-framework-5.1.1.tgz",
@@ -14096,6 +14169,17 @@
       "integrity": "sha512-BXq3jwIagosjgNVae6tkHzzIk6a8MHFtzAdwhnV5VlvPTFxDCvIttgSiHWjdGoTJvXtmRu5HacExfdarRcFhog==",
       "dev": true
     },
+    "vue-i18n": {
+      "version": "9.1.10",
+      "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-9.1.10.tgz",
+      "integrity": "sha512-jpr7gV5KPk4n+sSPdpZT8Qx3XzTcNDWffRlHV/cT2NUyEf+sEgTTmLvnBAibjOFJ0zsUyZlVTAWH5DDnYep+1g==",
+      "requires": {
+        "@intlify/core-base": "9.1.10",
+        "@intlify/shared": "9.1.10",
+        "@intlify/vue-devtools": "9.1.10",
+        "@vue/devtools-api": "^6.0.0-beta.7"
+      }
+    },
     "vue-loader": {
       "version": "17.0.0",
       "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-17.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "@capacitor/android": "3.5.1",
     "@capacitor/app": "1.1.1",
     "@capacitor/core": "3.4.3",
+    "@capacitor/device": "^1.1.2",
     "@capacitor/haptics": "1.1.4",
     "@capacitor/keyboard": "1.2.2",
     "@capacitor/status-bar": "1.0.8",
@@ -26,6 +27,7 @@
     "core-js": "^3.22.7",
     "pinia": "^2.0.14",
     "vue": "^3.2.36",
+    "vue-i18n": "^9.1.10",
     "vue-router": "^4.0.15",
     "vuex": "^4.0.2"
   },

src/App.vue

@@ -7,12 +7,25 @@
 <script lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
 import { defineComponent } from 'vue';
+import { Device, DevicePlugin } from '@capacitor/device';
 
 export default defineComponent({
   name: 'App',
   components: {
     IonApp,
     IonRouterOutlet
+  },
+  mounted() {
+    const device: DevicePlugin = Device;
+    device.getLanguageCode().then((res) => {
+      console.log('Default lang', res.value);
+      if (res.value.includes('-')) {
+        const language = res.value.split('-')[0];
+        this.$i18n.locale = language;
+      } else {
+        this.$i18n.locale = res.value;
+      }
+    })
   }
 });
 </script>

src/locales/translation-strings.ts

@@ -0,0 +1,36 @@
+export const translationStrings = {
+    en: {
+        collections: 'Collections',
+        label_view_all_collections: 'View all collections',
+        items: 'Items',
+        label_view_all_items: 'View all items',
+        label_loading: 'Loading...',
+        label_items_list: 'Items list',
+        label_collections_list: 'Collections list',
+        collection: 'Collection',
+        label_site_url: 'Archive site URL',
+        placeholder_site_url: 'https://my-tainacan-archive.com',
+        label_user_name: 'User name',
+        placeholder_user_name: 'your user name',
+        label_user_password: 'User password',
+        placeholder_user_password: 'your password here',
+        label_access_archive: 'Access archive'
+    },
+    pt: {
+        collections: "Coleções",
+        label_view_all_collections: "Ver todas as coleções",
+        items: 'Itens',
+        label_view_all_items: 'Ver todos os itens',
+        label_loading: 'Carregando...',
+        label_items_list: 'Lista de itens',
+        label_collections_list: 'Lista de coleções',
+        collection: 'Coleção',
+        label_site_url: 'URL do Site do Acervo',
+        placeholder_site_url: 'https://meu-acervo-tainacan.com',
+        label_user_name: 'Nome de usuário',
+        placeholder_user_name: 'seu nome de usuário aqui',
+        label_user_password: 'Senha do usuário',
+        placeholder_user_password: 'sua senha de usuário aqui',
+        label_access_archive: 'Acessar acervo'
+    }
+}

src/main.ts

@@ -29,11 +29,21 @@ import '@ionic/vue/css/display.css';
 import './theme/variables.css';
 import './theme/core.css'; //importei do arquivo criado
 
+/* Translation */
+import { createI18n } from 'vue-i18n';
+import { translationStrings } from './locales/translation-strings';
+
+const i18n = createI18n({
+  locale: 'en', // set locale
+  fallbackLocale: 'en', // set fallback locale
+  messages: translationStrings, // set locale messages
+  })
 
 const app = createApp(App)
   .use(IonicVue)
   .use(router)
-  .use(createPinia());
+  .use(createPinia())
+  .use(i18n);
 
 app.component('base-layout', BaseLayout);
 app.component('base-collectionlist', CollectionList);

src/pages/CollectionPage.vue

@@ -1,8 +1,8 @@
 <template>
-    <base-layout page-title="Collection" page-default-back-link="/collections">
+    <base-layout :page-title="$t('collection')" page-default-back-link="/collections">
         <ion-loading
             :is-open="isLoading"
-            message="Carregando..."
+            :message="$t('label_loading')"
         >
         </ion-loading>
         <items-list :items="tainacanStore.collectionItems"></items-list>

src/pages/CollectionsPage.vue

@@ -1,14 +1,11 @@
 <template>
-    <base-layout page-title="Collections list" page-default-back-link="/">
+    <base-layout :page-title="$t('label_collections_list')" page-default-back-link="/">
         <ion-loading
                 :is-open="isLoading"
-                message="Carregando..."
+                :message="$t('label_loading')"
         >
         </ion-loading>
         <ion-list>
-            <ion-list-header>
-                Coleções
-            </ion-list-header>
             <collections-list :collections="tainacanStore.collections"></collections-list>
         </ion-list>
     </base-layout>
@@ -17,7 +14,7 @@
 <script>
 import CollectionsList from '@/components/lists/CollectionsList.vue';
 import BaseLayout from '@/components/base/BaseLayout.vue';
-import { IonLoading, IonListHeader, IonList } from '@ionic/vue';
+import { IonLoading, IonList } from '@ionic/vue';
 
 import {
     useTainacanStore
@@ -30,8 +27,7 @@ export default {
         CollectionsList,
         BaseLayout,
         IonLoading,
-        IonList,
+        IonList
-        IonListHeader
     },
     setup() {
         const isLoading = ref(false);

src/pages/HomePage.vue

@@ -2,25 +2,25 @@
     <base-layout>
         <ion-loading
             :is-open="isLoading"
-            message="Carregando..."
+            :message="$t('label_loading')"
         >
         </ion-loading>
         <ion-list>
             <ion-list-header>
-                Coleções
+                {{ $t('collections') }}
             </ion-list-header>
             <collections-list :collections="tainacanStore.collections"></collections-list>
         </ion-list>
         <ion-button fill="clear" size="small" routerLink="/collections">
-            Acessar lista completa de coleções
+            {{ $t('label_view_all_collections') }}
         </ion-button>
         <ion-list>
             <ion-list-header>
-                Items
+                {{ $t('items') }}
             </ion-list-header>
             <items-list :items="tainacanStore.items"></items-list>
             <ion-button fill="clear" size="small" routerLink="/items">
-                Acessar lista completa de itens
+                 {{ $t('label_view_all_items') }}
             </ion-button>
         </ion-list>
     </base-layout>

src/pages/ItemsPage.vue

@@ -1,8 +1,8 @@
 <template>
-    <base-layout page-title="Items List" page-default-back-link="/collections">
+    <base-layout :page-title="$t('label_items_list')" page-default-back-link="/collections">
         <ion-loading
                 :is-open="isLoading"
-                message="Carregando..."
+                :message="$t('label_loading')"
         >
         </ion-loading>
         <items-list :items="tainacanStore.items"></items-list>

src/pages/LoginPage.vue

@@ -8,10 +8,10 @@
                         <ion-list class="ion-no-margin" inset>
                             <ion-item>
                                 <ion-label position="floating">
-                                    URL do Site do Acervo
+                                    {{ $t('label_site_url') }}
                                 </ion-label>
                                 <ion-input 
-                                        placeholder="https://my-tainacan-museum.com" 
+                                        :placeholder="$t('placeholder_site_url')" 
                                         autofocus="true" 
                                         id="siteUrl"
                                         type="url"
@@ -24,10 +24,10 @@
                             </ion-item>
                             <ion-item>
                                 <ion-label position="floating">
-                                    Nome do usuário
+                                    {{ $t('label_user_name') }}
                                 </ion-label>
                                 <ion-input 
-                                        placeholder="seu nome de usuário aqui"
+                                        :placeholder="$t('placeholder_user_name')"
                                         id="userLogin"
                                         type="text"
                                         name="userLogin"
@@ -40,10 +40,10 @@
                             </ion-item>
                             <ion-item>
                                 <ion-label position="floating">
-                                    Senha do usuário
+                                    {{ $t('label_user_password') }}
                                 </ion-label>
                                 <ion-input 
-                                        placeholder="sua senha de usuário aqui"  
+                                        :placeholder="$t('placeholder_user_password')" 
                                         id="userPassword"
                                         type="password"
                                         name="userPassword"
@@ -56,7 +56,7 @@
                         </ion-list>
                         <br>
                         <ion-button type="submit" fill="clear">
-                            Acessar acervo
+                            {{ $t('label_access_archive') }}
                             <ion-icon slot="end" :icon="arrowForwardOutline"></ion-icon>
                         </ion-button>
                     </form>