116 lines
4.7 KiB
Vue
116 lines
4.7 KiB
Vue
<template>
|
|
<div class="backend-content" id="content">
|
|
<div class="column col-6 col-xs-12">
|
|
<h3 class="s-title">Network configuration</h3>
|
|
<h5 class="s-subtitle">Interfaces configuration</h5>
|
|
<img src="@/assets/network.png" id="network-thumbnail" />
|
|
<div class="container interfaces-container">
|
|
<div class="columns">
|
|
<div class="column col-6">
|
|
<span class="interface-label">Wireless AP interface</span>
|
|
<div class="form-group">
|
|
<div class="btn-group btn-group-block">
|
|
<button class="btn btn-sm btn-iface" @click="change_interface('in', iface)" :class="iface == config.network.in ? 'active' : ''" v-for="iface in config.ifaces_in" :key="iface">{{ iface.toUpperCase() }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column col-6">
|
|
<span class="interface-label">Internet link interface</span>
|
|
<div class="form-group">
|
|
<div class="btn-group btn-group-block">
|
|
<button class="btn btn-sm btn-iface" @click="change_interface('out', iface)" :class="iface == config.network.out ? 'active' : ''" v-for="iface in config.ifaces_out" :key="iface">{{ iface.toUpperCase() }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h5 class="s-subtitle">Edit SSIDs names</h5>
|
|
<div class="form-group">
|
|
<table class="table table-striped table-hover">
|
|
<tbody>
|
|
<tr v-for="ssid in config.network.ssids" :key="ssid">
|
|
<td>{{ ssid }}</td>
|
|
<td><button class="btn btn-sm" v-on:click="delete_ssid(ssid)">Delete</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td><input class="form-input" v-model="ssid" type="text" placeholder="SSID name"></td>
|
|
<td><button class="btn btn-sm" @click="add_ssid()">Add</button></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
export default {
|
|
name: 'manageinterface',
|
|
data() {
|
|
return {
|
|
config: {},
|
|
ssid: ""
|
|
}
|
|
},
|
|
props: {},
|
|
methods: {
|
|
async get_jwt() {
|
|
await axios.get(`/api/get-token`, { timeout: 10000 })
|
|
.then(response => {
|
|
if (response.data.token) {
|
|
this.jwt = response.data.token
|
|
}
|
|
})
|
|
.catch(err => (console.log(err)))
|
|
},
|
|
load_config: function() {
|
|
axios.get(`/api/config/list`, {
|
|
timeout: 10000,
|
|
headers: { 'X-Token': this.jwt }
|
|
}).then(response => {
|
|
if (response.data) {
|
|
this.config = response.data
|
|
}
|
|
})
|
|
.catch(err => (console.log(err)))
|
|
},
|
|
delete_ssid: function(ssid) {
|
|
var i = this.config.network.ssids.indexOf(ssid);
|
|
this.config.network.ssids.splice(i, 1);
|
|
this.update_ssids();
|
|
},
|
|
add_ssid: function() {
|
|
this.config.network.ssids.push(this.ssid);
|
|
this.ssid = "";
|
|
this.update_ssids();
|
|
},
|
|
update_ssids: function() {
|
|
axios.get(`/api/config/edit/network/ssids/${this.config.network.ssids.join("|")}`, {
|
|
timeout: 10000,
|
|
headers: { 'X-Token': this.jwt }
|
|
}).then(response => {
|
|
if (response.data.status) {
|
|
console.log(response.data)
|
|
}
|
|
})
|
|
.catch(err => (console.log(err)))
|
|
},
|
|
change_interface: function(type, iface) {
|
|
axios.get(`/api/config/edit/network/${type}/${iface}`, {
|
|
timeout: 10000,
|
|
headers: { 'X-Token': this.jwt }
|
|
}).then(response => {
|
|
if (response.data.status) this.config.network[type] = iface
|
|
})
|
|
.catch(err => (console.log(err)))
|
|
},
|
|
},
|
|
created: function() {
|
|
this.get_jwt().then(() => {
|
|
this.load_config();
|
|
});
|
|
}
|
|
}
|
|
</script> |