Allow to set the prefered locale
This commit is contained in:
parent
e3d97cff22
commit
560ab278d2
5 changed files with 61 additions and 2 deletions
|
@ -24,6 +24,7 @@ const toggleBurger = () => {
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<RouterLink to="/add-account" class="navbar-item">{{ $t("navbar.addAccount") }}</RouterLink>
|
<RouterLink to="/add-account" class="navbar-item">{{ $t("navbar.addAccount") }}</RouterLink>
|
||||||
<RouterLink to="/manage-accounts" class="navbar-item">{{ $t("navbar.manageAccounts") }}</RouterLink>
|
<RouterLink to="/manage-accounts" class="navbar-item">{{ $t("navbar.manageAccounts") }}</RouterLink>
|
||||||
|
<RouterLink to="/config" class="navbar-item">{{ $t("navbar.config") }}</RouterLink>
|
||||||
<RouterLink to="/about" class="navbar-item">{{ $t("navbar.about") }}</RouterLink>
|
<RouterLink to="/about" class="navbar-item">{{ $t("navbar.about") }}</RouterLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
{
|
{
|
||||||
|
"locale_name": "English",
|
||||||
"invariants": {
|
"invariants": {
|
||||||
"controls": {
|
"controls": {
|
||||||
"cancel": "Cancel",
|
"cancel": "Cancel",
|
||||||
|
@ -10,6 +11,7 @@
|
||||||
"navbar": {
|
"navbar": {
|
||||||
"addAccount": "New account",
|
"addAccount": "New account",
|
||||||
"manageAccounts": "Accounts",
|
"manageAccounts": "Accounts",
|
||||||
|
"config": "Preferences",
|
||||||
"about": "About"
|
"about": "About"
|
||||||
},
|
},
|
||||||
"about": {
|
"about": {
|
||||||
|
@ -41,6 +43,11 @@
|
||||||
"unknown": "Unknown error."
|
"unknown": "Unknown error."
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"config": {
|
||||||
|
"title": "Preferences",
|
||||||
|
"language": "Language",
|
||||||
|
"close": "@:invariants.controls.close"
|
||||||
|
},
|
||||||
"deleteAccount": {
|
"deleteAccount": {
|
||||||
"title": "Delete account",
|
"title": "Delete account",
|
||||||
"account": "You are about to delete the following account:",
|
"account": "You are about to delete the following account:",
|
||||||
|
|
11
src/main.js
11
src/main.js
|
@ -2,17 +2,24 @@ import './assets/main.sass';
|
||||||
|
|
||||||
import { createApp } from 'vue';
|
import { createApp } from 'vue';
|
||||||
import { createI18n } from 'vue-i18n'
|
import { createI18n } from 'vue-i18n'
|
||||||
|
import { useStorage } from '@vueuse/core'
|
||||||
import App from './App.vue';
|
import App from './App.vue';
|
||||||
import router from './router';
|
import router from './router';
|
||||||
|
|
||||||
import msg_en from './locales/en.json';
|
import msg_en from './locales/en.json';
|
||||||
|
|
||||||
|
const default_locale = 'en'
|
||||||
|
const stored_locale = useStorage('sake-locale', '');
|
||||||
|
if (!stored_locale.value) {
|
||||||
|
stored_locale.value = default_locale
|
||||||
|
}
|
||||||
|
|
||||||
const messages = {
|
const messages = {
|
||||||
en: msg_en,
|
en: msg_en,
|
||||||
};
|
};
|
||||||
const i18n = createI18n({
|
const i18n = createI18n({
|
||||||
locale: 'en',
|
locale: stored_locale.value,
|
||||||
fallbackLocale: 'en',
|
fallbackLocale: default_locale,
|
||||||
messages,
|
messages,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { useStorage } from '@vueuse/core'
|
||||||
import MainView from '../views/MainView.vue';
|
import MainView from '../views/MainView.vue';
|
||||||
import AboutView from '../views/AboutView.vue';
|
import AboutView from '../views/AboutView.vue';
|
||||||
import AddAccountView from '../views/AddAccountView.vue';
|
import AddAccountView from '../views/AddAccountView.vue';
|
||||||
|
import ConfigView from '../views/ConfigView.vue';
|
||||||
import DeleteAccountView from '../views/DeleteAccountView.vue';
|
import DeleteAccountView from '../views/DeleteAccountView.vue';
|
||||||
import ManageAccountsView from '../views/ManageAccountsView.vue';
|
import ManageAccountsView from '../views/ManageAccountsView.vue';
|
||||||
|
|
||||||
|
@ -32,6 +33,11 @@ const router = createRouter({
|
||||||
name: 'add-account',
|
name: 'add-account',
|
||||||
component: AddAccountView
|
component: AddAccountView
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/config',
|
||||||
|
name: 'config',
|
||||||
|
component: ConfigView,
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/delete-account/:id',
|
path: '/delete-account/:id',
|
||||||
name: 'delete-account',
|
name: 'delete-account',
|
||||||
|
|
38
src/views/ConfigView.vue
Normal file
38
src/views/ConfigView.vue
Normal file
|
@ -0,0 +1,38 @@
|
||||||
|
<script setup>
|
||||||
|
import { watch } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useI18n } from 'vue-i18n';
|
||||||
|
import { useStorage } from '@vueuse/core'
|
||||||
|
import LayoutComponent from '../components/LayoutComponent.vue';
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const stored_locale = useStorage('sake-locale', '');
|
||||||
|
const { t, locale } = useI18n({ useScope: 'global' });
|
||||||
|
|
||||||
|
const toMainView = () => {
|
||||||
|
return router.push('/');
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(locale, async (newLocale) => {
|
||||||
|
stored_locale.value = newLocale;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<LayoutComponent>
|
||||||
|
<h1 class="title is-1">{{ $t("config.title") }}</h1>
|
||||||
|
<div class="field">
|
||||||
|
<label class="label" for="app-language">{{ $t("config.language") }}</label>
|
||||||
|
<div class="control">
|
||||||
|
<div class="select is-fullwidth">
|
||||||
|
<select id="app-language" v-model="$i18n.locale">
|
||||||
|
<option v-for="locale in $i18n.availableLocales" :key="`locale-${locale}`" :value="locale">{{ $t("locale_name", locale) }}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="buttons is-centered">
|
||||||
|
<button class="button is-light" @click="toMainView">{{ $t("config.close") }}</button>
|
||||||
|
</div>
|
||||||
|
</LayoutComponent>
|
||||||
|
</template>
|
Loading…
Reference in a new issue