120 lines
3.6 KiB
Vue
120 lines
3.6 KiB
Vue
<template>
|
|
<form @submit.prevent="save">
|
|
<h3>{{ $t('connection.title') }}</h3>
|
|
|
|
<div v-if="connection === null" class="loading">
|
|
<LoadingIndicator></LoadingIndicator>
|
|
</div>
|
|
|
|
<div v-else>
|
|
<check v-model.boolean="connection.accesspoint" :title="$t('connection.accesspoint')"></check>
|
|
<span class="hint">{{ $t('connection.accesspointHint') }}</span>
|
|
|
|
<check v-model.boolean="connection.station" :title="$t('connection.stationmode')"></check>
|
|
<span class="hint">{{ $t('connection.stationmodeHint') }}</span>
|
|
|
|
<label for="ssid">{{ $t('connection.ssid') }}</label>
|
|
<input type="text" id="ssid" v-model="connection.ssid" :disabled="!connection.station">
|
|
|
|
<label for="password">{{ $t('connection.password') }}</label>
|
|
<input type="password" id="password" v-model="connection.password" :disabled="!connection.station">
|
|
|
|
<check v-model.boolean="connection.dhcp" :disabled="!connection.station" :title="$t('connection.dhcp')" class="form-control"></check>
|
|
<span class="hint">{{ $t('connection.dhcpHint') }}</span>
|
|
|
|
|
|
<div class="suboptions">
|
|
<label for="ip">{{ $t('connection.ipaddress') }}</label>
|
|
<input type="text" id="ip" v-model="connection.ip" :disabled="!connection.station || connection.dhcp">
|
|
|
|
<label for="subnetmask">{{ $t('connection.subnetmask') }}</label>
|
|
<input type="text" id="subnetmask" v-model="connection.subnetmask" :disabled="!connection.station || connection.dhcp">
|
|
|
|
<label for="gateway">{{ $t('connection.gateway') }}</label>
|
|
<input type="text" id="gateway" v-model="connection.gateway" :disabled="!connection.station || connection.dhcp">
|
|
</div>
|
|
|
|
|
|
<label for="hostname">{{ $t('connection.hostname') }}</label>
|
|
<input type="text" :placeholder="$t('connection.hostnamePlaceholder')" id="hostname" v-model="connection.hostname" :disabled="!connection.station">
|
|
<span class="hint">{{ $t('connection.hostnameHint') }}</span>
|
|
|
|
<div class="buttons">
|
|
<input type="submit" :disabled="saving" :value="saving ? $t('applyButtonSaving') : $t('applyButton')">
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import LoadingIndicator from '@/components/loadingIndicator.vue';
|
|
import check from '@/components/check.vue';
|
|
import BaseVM from '@/BaseVM';
|
|
|
|
export default {
|
|
mixins: [BaseVM],
|
|
|
|
components: {
|
|
LoadingIndicator,
|
|
check
|
|
},
|
|
|
|
data()
|
|
{
|
|
return {
|
|
connection: null
|
|
}
|
|
},
|
|
|
|
|
|
mounted()
|
|
{
|
|
this.load();
|
|
},
|
|
|
|
|
|
methods: {
|
|
load()
|
|
{
|
|
const self = this;
|
|
|
|
return axios.get('/api/connection', { retry: 10, retryDelay: 1000 })
|
|
.then(response =>
|
|
{
|
|
if (typeof response.data == 'object')
|
|
self.connection = response.data;
|
|
})
|
|
.catch(e => self.handleAPIError('error.loadConnection', e));
|
|
},
|
|
|
|
|
|
save()
|
|
{
|
|
const self = this;
|
|
if (self.saving)
|
|
return;
|
|
|
|
self.setSaving(true);
|
|
|
|
axios.post('/api/connection', {
|
|
hostname: self.connection.hostname,
|
|
accesspoint: self.connection.accesspoint,
|
|
station: self.connection.station,
|
|
ssid: self.connection.ssid,
|
|
password: self.connection.password,
|
|
dhcp: self.connection.dhcp,
|
|
ip: self.connection.ip,
|
|
subnetmask: self.connection.subnetmask,
|
|
gateway: self.connection.gateway,
|
|
}, { retry: 10, retryDelay: 1000, headers: { 'Content-Type': 'application/json' } })
|
|
.then(response => {})
|
|
.catch(e => self.handleAPIError('error.applyConnection', e))
|
|
.then(() =>
|
|
{
|
|
self.setSaving(false);
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script> |