Enables translation of strings.
This commit is contained in:
parent
9fa43f10c8
commit
6b0cdd01d7
|
@ -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')
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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')
|
||||
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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"
|
||||
},
|
||||
|
|
13
src/App.vue
13
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>
|
|
@ -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'
|
||||
}
|
||||
}
|
12
src/main.ts
12
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);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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,
|
||||
IonListHeader
|
||||
IonList
|
||||
},
|
||||
setup() {
|
||||
const isLoading = ref(false);
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue