Commit 2a67c3d8 authored by Richard Blechinger's avatar Richard Blechinger
Browse files

Add test translations and ensure the entire interface updates on locale change

parent 40a95b79
<template> <template>
<div id="app"> <div id="app" :key="localeKey">
<app-header <app-header
:modules="modules" :modules="modules"
:user="user" :user="user"
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
import 'bootstrap/dist/css/bootstrap.css' import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css' import 'bootstrap-vue/dist/bootstrap-vue.css'
import { translationVm } from '@/plugins/translation'
import header from './components/Header.vue' import header from './components/Header.vue'
import footer from './components/Footer.vue' import footer from './components/Footer.vue'
...@@ -23,38 +25,31 @@ export default { ...@@ -23,38 +25,31 @@ export default {
'app-header': header, 'app-header': header,
'app-footer': footer 'app-footer': footer
}, },
data () {
return {
modules_logged_out: [
{ slug: 'home', title: 'Home' },
],
modules_logged_in: [
{ slug: 'home', title: 'Home' },
{ slug: 'shows', title: 'Shows' },
{ slug: 'files', title: 'Files & Playlists' },
],
modules_logged_in_superuser : [
{ slug: 'home', title: 'Home' },
{ slug: 'shows', title: 'Shows' },
{ slug: 'files', title: 'Files & Playlists' },
{ slug: 'emissions', title: 'Emissions' },
],
}
},
computed: { computed: {
userOIDC () { return this.$store.state.auth.userOIDC }, userOIDC () { return this.$store.state.auth.userOIDC },
user () { return this.$store.state.auth.user }, user () { return this.$store.state.auth.user },
localeKey: () => translationVm.activeLocale,
modules: function () { modules: function () {
// Logged out
let modules = [
{ slug: 'home', title: this.$t('navigation.home') },
]
if (this.user.logged_in === true) { if (this.user.logged_in === true) {
if (this.user.steeringUser && this.user.steeringUser.is_superuser) { modules = (this.user.steeringUser && this.user.steeringUser.is_superuser)
return this.modules_logged_in_superuser // Super user
} else { ? [ { slug: 'home', title: this.$t('navigation.home') },
return this.modules_logged_in { slug: 'shows', title: this.$t('navigation.shows') },
} { slug: 'files', title: this.$t('navigation.filesPlaylists') },
} else { { slug: 'calendar', title: this.$t('navigation.calendar') }, ]
return this.modules_logged_out // Regular user
: [ { slug: 'home', title: this.$t('navigation.home') },
{ slug: 'shows', title: this.$t('navigation.shows') },
{ slug: 'files', title: this.$t('navigation.filesPlaylists') }, ]
} }
}
return modules
},
}, },
created () { created () {
this.$store.dispatch('auth/oidcInit') this.$store.dispatch('auth/oidcInit')
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<b-container> <b-container>
<show-selector <show-selector
ref="showSelector" ref="showSelector"
title="Emissions" :title="$t('navigation.calendar')"
:callback="showHasSwitched" :callback="showHasSwitched"
/> />
<hr> <hr>
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<b-container> <b-container>
<div v-if="$parent.user.logged_in === true"> <div v-if="$parent.user.logged_in === true">
<div align="center"> <div align="center">
<h1>Welcome to the Dashboard!</h1> <h1>{{ $t('home.welcome') }}</h1>
<p>Here are some infos for you on how to use this interface...</p> <p>Here are some infos for you on how to use this interface...</p>
<br> <br>
</div> </div>
......
<template> <template>
<footer> <footer class="tw-p-2">
<b-container> <b-container>
<b-row> <b-row>
<b-col> <b-col>
AURA/<b>dashboard v{{ version }}</b> | AURA/<b>dashboard v{{ version }}</b> |
<router-link to="/credits"> <router-link to="/credits">
Credits Credits
</router-link> | </router-link>
...
</b-col> </b-col>
<b-col align="right"> <b-col align="right">
All the UI you need to run a community radio ... almost ... working on it! {{ $t('footer.tagline') }}
</b-col> </b-col>
</b-row> </b-row>
</b-container> </b-container>
......
...@@ -46,19 +46,15 @@ ...@@ -46,19 +46,15 @@
</b-nav-item> </b-nav-item>
</b-navbar-nav> </b-navbar-nav>
<b-navbar-nav class="ml-auto"> <b-navbar-nav class="ml-auto">
<b-nav-item>
{{ $t('helloWorld') }}
</b-nav-item>
<b-nav-item-dropdown <b-nav-item-dropdown
:text="$activeLocale.toUpperCase()" :text="$activeLocale().toUpperCase()"
right right
> >
<b-dropdown-item :active="$activeLocale === 'de'" @click="$locale('de')"> <b-dropdown-item :active="$activeLocale() === 'de'" @click="$locale('de')">
DE DE
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item :active="$activeLocale === 'en'" @click="$locale('en')"> <b-dropdown-item :active="$activeLocale() === 'en'" @click="$locale('en')">
EN EN
</b-dropdown-item> </b-dropdown-item>
</b-nav-item-dropdown> </b-nav-item-dropdown>
...@@ -71,13 +67,13 @@ ...@@ -71,13 +67,13 @@
<em>{{ user.name }}</em> <em>{{ user.name }}</em>
</template> </template>
<b-dropdown-item to="settings"> <b-dropdown-item to="settings">
Settings {{ $t('settings') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item href="#"> <b-dropdown-item href="#">
Profile {{ $t('profile') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item @click="$parent.signOut"> <b-dropdown-item @click="$parent.signOut">
Signout {{ $t('auth.signOut') }}
</b-dropdown-item> </b-dropdown-item>
</b-nav-item-dropdown> </b-nav-item-dropdown>
<b-nav-item <b-nav-item
...@@ -87,7 +83,7 @@ ...@@ -87,7 +83,7 @@
<img <img
src="/assets/16x16/system-users.png" src="/assets/16x16/system-users.png"
alt="log-in symbol" alt="log-in symbol"
title="Log in" :title="$t('auth.signIn')"
> >
</b-nav-item> </b-nav-item>
<div class="help-image-container"> <div class="help-image-container">
......
export default { export default {
'helloWorld': 'Hallo, Welt' 'helloWorld': 'Hallo, Welt',
'settings': 'Einstellungen',
'profile': 'Profil',
'auth': {
'signOut': 'Abmelden',
'signIn': 'Anmelden'
},
'navigation': {
'home': 'Home',
'shows': 'Sendungen',
'filesPlaylists': 'Dateien & Playlists',
'calendar': 'Kalender',
},
'home': {
'welcome': 'Willkommen im Dashboard'
},
'footer': {
'tagline': 'Alles was Du für ein freies Radio brauchst .. fast .. wir arbeiten dran!'
}
} }
export default { export default {
'helloWorld': 'Hello, World' 'helloWorld': 'Hello, World',
'settings': 'Settings',
'profile': 'Profile',
'auth': {
'signOut': 'Sign out',
'signIn': 'Sign in'
},
'navigation': {
'home': 'Home',
'shows': 'Shows',
'filesPlaylists': 'Files & Playlists',
'calendar': 'Calendar',
},
'home': {
'welcome': 'Welcome to the dashboard!'
},
'footer': {
'tagline': 'All the UI you need to run a community radio ... almost ... working on it!'
}
} }
import Polyglot from 'node-polyglot'; import Vue from "vue";
import Polyglot from "node-polyglot";
import de from '@/i18n/de' import de from '@/i18n/de'
import en from '@/i18n/en' import en from '@/i18n/en'
const Translation = {} export const translationVm = new Vue({
Translation.install = function(Vue) { created() {
const availableLocales = { de, en }; const potentialLocale = navigator.language.substring(0, 2)
const potentialLocale = navigator.language.substring(0, 2) this.activeLocale = this.availableLocales.hasOwnProperty(potentialLocale) ? potentialLocale : 'de'
const activeLocale = availableLocales.hasOwnProperty(potentialLocale) ? potentialLocale : 'de'
const phrases = availableLocales[activeLocale];
Vue.prototype.polyglot = new Polyglot({ phrases }) const phrases = this.availableLocales[this.activeLocale];
Vue.prototype.$activeLocale = activeLocale this.polyglot = new Polyglot({ phrases })
Vue.prototype.getPhrasesForLocale = (locale) => availableLocales[locale]; },
Vue.prototype.$locale = function(newLocale) { data() {
const phrases = this.getPhrasesForLocale(newLocale) return {
availableLocales: { de, en },
activeLocale: 'de',
polyglot: null,
}
},
this.$activeLocale = newLocale methods: {
this.polyglot = new Polyglot({ phrases }) getPhrasesForLocale(locale) {
this.$forceUpdate() return this.availableLocales[locale];
} },
Vue.prototype.$t = function(text, context = {}) { locale(newLocale) {
return this.polyglot.t(text, context) const phrases = this.getPhrasesForLocale(newLocale)
}
}; this.activeLocale = newLocale
this.polyglot = new Polyglot({ phrases })
this.polyglot.locale(newLocale)
},
export default Translation t(text, context = {}) {
return this.polyglot.t(text, context);
}
},
})
export default {
install(Vue) {
Vue.prototype.$activeLocale = () => translationVm.activeLocale
Vue.prototype.$locale = function (newLocale) {
translationVm.locale(newLocale)
}
Vue.prototype.$t = function (text, context = {}) {
return translationVm.t(text, context)
}
}
}
import Polyglot from 'node-polyglot';
import de from '@/i18n/de'
import en from '@/i18n/en'
export default {
beforeCreate() {
const availableLocales = { de, en };
const potentialLocale = navigator.language.substring(0, 2)
const activeLocale = availableLocales.hasOwnProperty(potentialLocale) ? potentialLocale : 'de'
const phrases = availableLocales[activeLocale];
},
}
...@@ -17,7 +17,7 @@ export default new Router({ ...@@ -17,7 +17,7 @@ export default new Router({
{ path: '/', alias: '/home', name: 'home', component: Home }, { path: '/', alias: '/home', name: 'home', component: Home },
{ path: '/shows', name: 'shows', component: ShowManager }, { path: '/shows', name: 'shows', component: ShowManager },
{ path: '/files', name: 'files', component: FileManager }, { path: '/files', name: 'files', component: FileManager },
{ path: '/emissions', name: 'emissions', component: EmissionManager }, { path: '/calendar', name: 'emissions', component: EmissionManager },
{ path: '/help', name: 'help', component: Help }, { path: '/help', name: 'help', component: Help },
{ path: '/settings', name: 'settings', component: Settings }, { path: '/settings', name: 'settings', component: Settings },
{ path: '/credits', name: 'credits', component: Credits }, { path: '/credits', name: 'credits', component: Credits },
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment