Adding translation by using i18n

This commit is contained in:
Félix Aime
2021-02-08 16:34:32 +01:00
parent b759054908
commit 8b3cc56b08
18 changed files with 456 additions and 467 deletions

View File

@ -2,41 +2,42 @@
<div :class="[ keyboard == false ? 'center' : '' ]">
<div v-if="keyboard == false">
<div v-if="have_internet">
<p v-html="translation.already_connected_question"></p>
<p v-html="$t('wifi-select.already_connected_question')"></p>
<div class="empty-action">
<button class="btn" @click="have_internet = false">{{ translation.no_btn }}</button> <button class="btn" :class="[ connecting ? 'loading' : '', success ? 'btn-success' : 'btn-primary', ]" @click="$router.push({ name: 'generate-ap' })">{{ translation.yes_btn }}</button>
<button class="btn" @click="have_internet = false">{{ $t("wifi-select.no_btn") }}</button> &nbsp;
<button class="btn" :class="[ connecting ? 'loading' : '', success ? 'btn-success' : 'btn-primary', ]" @click="$router.push({ name: 'generate-ap' })">{{ $t("wifi-select.yes_btn") }}</button>
</div>
</div>
<div v-else>
<div v-if="enter_creds" class="wifi-login">
<div class="form-group">
<select class="form-select" id="ssid-select" v-model="ssid">
<option value="" selected>{{ translation.wifi_name }}</option>
<option value="" selected>{{ $t("wifi-select.wifi_name") }}</option>
<option v-for="ssid in ssids" v-bind:key="ssid.ssid">
{{ ssid.ssid }}
</option>
</select>
</div>
<div class="form-group">
<input class="form-input" type="password" id="password" v-model="password" :placeholder="translation.wifi_password" v-on:click="keyboard = (virtual_keyboard)? true : false">
<input class="form-input" type="password" id="password" v-model="password" :placeholder="$t('wifi-select.wifi_password')" v-on:click="keyboard = (window.config.virtual_keyboard)? true : false">
</div>
<div class="form-group">
<button class="btn width-100" :class="[ connecting ? 'loading' : '', success ? 'btn-success' : 'btn-primary', ]" v-on:click="wifi_setup()">{{ btnval }}</button>
</div>
<div class="form-group">
<button class="btn width-100" :class="[ refreshing ? 'loading' : '' ]" v-on:click="refresh_wifi_list()">{{ translation.refresh_btn }}</button>
<button class="btn width-100" :class="[ refreshing ? 'loading' : '' ]" v-on:click="refresh_wifi_list()">{{ $t("wifi-select.refresh_btn") }}</button>
</div>
</div>
<div v-else>
<p><strong>{{ translation.not_connected }}</strong><br />{{ translation.please_config }}</p>
<p><strong>{{ $t("wifi-select.not_connected") }}</strong><br />{{ $t("wifi-select.please_config") }}</p>
<div class="empty-action">
<button class="btn btn-primary" @click="enter_creds = true">{{ translation.lets_do_btn }}</button>
<button class="btn btn-primary" @click="enter_creds = true">{{ $t("wifi-select.lets_do_btn") }}</button>
</div>
</div>
</div>
</div>
<div v-else>
<input :value="input" class="keyboardinput" @input="onInputChange" :placeholder="translation.tap_keyboard">
<input :value="input" class="keyboardinput" @input="onInputChange" :placeholder="$t('wifi-select.tap_keyboard')">
<SimpleKeyboard @onChange="onChange" @onKeyPress="onKeyPress" :input="input" />
</div>
</div>
@ -63,7 +64,7 @@ export default {
connecting: false,
error: false,
success: false,
btnval: "",
btnval: this.$t("wifi-select.connect_to_it"),
ssid: "",
selected_ssid: false,
password: "",
@ -72,7 +73,6 @@ export default {
ssids: [],
have_internet: false,
enter_creds: false,
virtual_keyboard: false,
refreshing: false,
translation: {}
}
@ -84,15 +84,15 @@ export default {
},
methods: {
wifi_connect: function() {
axios.get(`/api/network/wifi/connect`, { timeout: 60000 })
axios.get('/api/network/wifi/connect', { timeout: 60000 })
.then(response => {
if (response.data.status) {
this.success = true
this.connecting = false
this.btnval = this.translation.wifi_connected
this.btnval = this.$t('wifi-select.wifi_connected')
setTimeout(() => router.push('generate-ap'), 1000);
} else {
this.btnval = this.translation["wifi_not_connected"]
this.btnval = this.$t('wifi-select.wifi_not_connected')
this.connecting = false
}
})
@ -102,7 +102,7 @@ export default {
},
wifi_setup: function() {
if (this.ssid.length && this.password.length >= 8 ){
axios.post(`/api/network/wifi/setup`, { ssid: this.ssid, password: this.password }, { timeout: 60000 })
axios.post('/api/network/wifi/setup', { ssid: this.ssid, password: this.password }, { timeout: 60000 })
.then(response => {
if(response.data.status) {
this.connecting = true
@ -116,15 +116,6 @@ export default {
});
}
},
get_config: function() {
axios.get(`/api/misc/config`, { timeout: 60000 })
.then(response => {
this.virtual_keyboard = response.data.virtual_keyboard
})
.catch(error => {
console.log(error)
});
},
onChange(input) {
this.input = input
this.password = this.input;
@ -141,25 +132,22 @@ export default {
},
refresh_wifi_list: function(){
this.refreshing = true
axios.get(`/api/network/wifi/list`, { timeout: 10000 })
.then(response => {
this.refreshing = false
this.append_ssids(response.data.networks)
}).catch(error => {
this.refreshing = false
console.log(error)
axios.get('/api/network/wifi/list', { timeout: 10000 })
.then(response => {
this.refreshing = false
this.append_ssids(response.data.networks)
}).catch(error => {
this.refreshing = false
console.log(error)
});
}
},
created: function() {
this.translation = window.translation[this.$route.name]
this.btnval = this.translation.connect_to_it
this.get_config()
this.have_internet = (this.internet) ? true : false
this.keyboard = false
if (typeof this.list_ssids == "object" && this.list_ssids.length != 0){
if (typeof this.list_ssids == 'object' && this.list_ssids.length != 0){
this.ssids = this.list_ssids
} else {
this.refresh_wifi_list()