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>
<div id="app">
<div id="app" :key="localeKey">
<app-header
:modules="modules"
:user="user"
......@@ -14,6 +14,8 @@
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { translationVm } from '@/plugins/translation'
import header from './components/Header.vue'
import footer from './components/Footer.vue'
......@@ -23,38 +25,31 @@ export default {
'app-header': header,
'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: {
userOIDC () { return this.$store.state.auth.userOIDC },
user () { return this.$store.state.auth.user },
localeKey: () => translationVm.activeLocale,
modules: function () {
// Logged out
let modules = [
{ slug: 'home', title: this.$t('navigation.home') },
]
if (this.user.logged_in === true) {
if (this.user.steeringUser && this.user.steeringUser.is_superuser) {
return this.modules_logged_in_superuser
} else {
return this.modules_logged_in
}
} else {
return this.modules_logged_out
modules = (this.user.steeringUser && this.user.steeringUser.is_superuser)
// Super user
? [ { slug: 'home', title: this.$t('navigation.home') },
{ slug: 'shows', title: this.$t('navigation.shows') },
{ slug: 'files', title: this.$t('navigation.filesPlaylists') },
{ slug: 'calendar', title: this.$t('navigation.calendar') }, ]
// 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 () {
this.$store.dispatch('auth/oidcInit')
......
......@@ -2,7 +2,7 @@
<b-container>
<show-selector
ref="showSelector"
title="Emissions"
:title="$t('navigation.calendar')"
:callback="showHasSwitched"
/>
<hr>
......
......@@ -2,7 +2,7 @@
<b-container>
<div v-if="$parent.user.logged_in === true">
<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>
<br>
</div>
......
<template>
<footer>
<footer class="tw-p-2">
<b-container>
<b-row>
<b-col>
AURA/<b>dashboard v{{ version }}</b> |
<router-link to="/credits">
Credits
</router-link> |
...
</router-link>
</b-col>
<b-col align="right">
All the UI you need to run a community radio ... almost ... working on it!
{{ $t('footer.tagline') }}
</b-col>
</b-row>
</b-container>
......
......@@ -46,19 +46,15 @@
</b-nav-item>
</b-navbar-nav>
<b-navbar-nav class="ml-auto">
<b-nav-item>
{{ $t('helloWorld') }}
</b-nav-item>
<b-nav-item-dropdown
:text="$activeLocale.toUpperCase()"
:text="$activeLocale().toUpperCase()"
right
>
<b-dropdown-item :active="$activeLocale === 'de'" @click="$locale('de')">
<b-dropdown-item :active="$activeLocale() === 'de'" @click="$locale('de')">
DE
</b-dropdown-item>
<b-dropdown-item :active="$activeLocale === 'en'" @click="$locale('en')">
<b-dropdown-item :active="$activeLocale() === 'en'" @click="$locale('en')">
EN
</b-dropdown-item>
</b-nav-item-dropdown>
......@@ -71,13 +67,13 @@
<em>{{ user.name }}</em>
</template>
<b-dropdown-item to="settings">
Settings
{{ $t('settings') }}
</b-dropdown-item>
<b-dropdown-item href="#">
Profile
{{ $t('profile') }}
</b-dropdown-item>
<b-dropdown-item @click="$parent.signOut">
Signout
{{ $t('auth.signOut') }}
</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item
......@@ -87,7 +83,7 @@
<img
src="/assets/16x16/system-users.png"
alt="log-in symbol"
title="Log in"
:title="$t('auth.signIn')"
>
</b-nav-item>
<div class="help-image-container">
......
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 {
'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 en from '@/i18n/en'
const Translation = {}
Translation.install = function(Vue) {
const availableLocales = { de, en };
const potentialLocale = navigator.language.substring(0, 2)
const activeLocale = availableLocales.hasOwnProperty(potentialLocale) ? potentialLocale : 'de'
const phrases = availableLocales[activeLocale];
export const translationVm = new Vue({
created() {
const potentialLocale = navigator.language.substring(0, 2)
this.activeLocale = this.availableLocales.hasOwnProperty(potentialLocale) ? potentialLocale : 'de'
Vue.prototype.polyglot = new Polyglot({ phrases })
Vue.prototype.$activeLocale = activeLocale
Vue.prototype.getPhrasesForLocale = (locale) => availableLocales[locale];
const phrases = this.availableLocales[this.activeLocale];
this.polyglot = new Polyglot({ phrases })
},
Vue.prototype.$locale = function(newLocale) {
const phrases = this.getPhrasesForLocale(newLocale)
data() {
return {
availableLocales: { de, en },
activeLocale: 'de',
polyglot: null,
}
},
this.$activeLocale = newLocale
this.polyglot = new Polyglot({ phrases })
this.$forceUpdate()
}
methods: {
getPhrasesForLocale(locale) {
return this.availableLocales[locale];
},
Vue.prototype.$t = function(text, context = {}) {
return this.polyglot.t(text, context)
}
};
locale(newLocale) {
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({
{ path: '/', alias: '/home', name: 'home', component: Home },
{ path: '/shows', name: 'shows', component: ShowManager },
{ 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: '/settings', name: 'settings', component: Settings },
{ 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