2018-08-13 16:48:13 +02:00
|
|
|
<template>
|
|
|
|
<div id="language">
|
|
|
|
<h2>{{ $t('preferences.language.title') }}</h2>
|
|
|
|
<div class="display-language">
|
|
|
|
<table class="language">
|
|
|
|
<tbody>
|
|
|
|
<tr>
|
|
|
|
<td class="title">{{ $t('preferences.language.display_language') }}</td>
|
|
|
|
<td class="status">
|
|
|
|
<el-select v-model="displayLanguage" placeholder="style">
|
|
|
|
<el-option
|
|
|
|
v-for="lang in languages"
|
|
|
|
:key="lang.key"
|
|
|
|
:label="lang.name"
|
|
|
|
:value="lang.key">
|
|
|
|
</el-option>
|
|
|
|
</el-select>
|
2018-08-14 03:18:30 +02:00
|
|
|
<p class="notice">{{ $t('preferences.language.notice') }}</p>
|
2018-08-13 16:48:13 +02:00
|
|
|
</td>
|
|
|
|
</tr>
|
|
|
|
</tbody>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import Language from '~/src/constants/language'
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'language',
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
languages: [
|
2018-08-16 13:58:17 +02:00
|
|
|
Language.de,
|
2018-08-13 16:48:13 +02:00
|
|
|
Language.en,
|
2018-08-14 23:07:08 +02:00
|
|
|
Language.fr,
|
2018-08-13 16:48:13 +02:00
|
|
|
Language.ja
|
|
|
|
]
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
displayLanguage: {
|
|
|
|
get () {
|
|
|
|
return this.$store.state.Preferences.Language.language.language
|
|
|
|
},
|
|
|
|
set (value) {
|
2018-08-14 03:18:30 +02:00
|
|
|
this.$store.dispatch('Preferences/Language/changeLanguage', value)
|
|
|
|
.then(() => {
|
|
|
|
this.confirm()
|
|
|
|
})
|
2018-08-13 16:48:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
created () {
|
|
|
|
this.$store.dispatch('Preferences/Language/loadLanguage')
|
2018-08-14 03:18:30 +02:00
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
confirm () {
|
|
|
|
this.$confirm(
|
|
|
|
this.$t('preferences.language.confirm.message'),
|
|
|
|
this.$t('preferences.language.confirm.title'),
|
|
|
|
{
|
|
|
|
confirmButtonText: this.$t('preferences.language.confirm.ok'),
|
|
|
|
cancelButtonText: this.$t('preferences.language.confirm.cancel'),
|
|
|
|
type: 'warning'
|
|
|
|
}
|
|
|
|
)
|
|
|
|
.then(() => {
|
|
|
|
this.$store.dispatch('Preferences/Language/relaunch')
|
|
|
|
})
|
|
|
|
.cancel(() => {
|
|
|
|
})
|
|
|
|
}
|
2018-08-13 16:48:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
#language {
|
|
|
|
table {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
|
|
|
|
td {
|
|
|
|
padding: 16px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
|
|
text-align: right;
|
|
|
|
width: 50%;
|
|
|
|
}
|
|
|
|
|
|
|
|
.status {
|
|
|
|
width: 50%;
|
|
|
|
text-align: center;
|
2018-08-14 03:18:30 +02:00
|
|
|
|
|
|
|
.notice {
|
|
|
|
color: #c0c4cc;
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
2018-08-13 16:48:13 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|