webapp: Implemented first part of the network settings
This commit is contained in:
Thomas Basler
parent
06837320f7
commit
9e5906e5aa
@ -18,6 +18,25 @@
|
|||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<router-link class="nav-link" to="/">Home</router-link>
|
<router-link class="nav-link" to="/">Home</router-link>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="nav-item dropdown">
|
||||||
|
<a
|
||||||
|
class="nav-link dropdown-toggle"
|
||||||
|
href="#"
|
||||||
|
id="navbarScrollingDropdown"
|
||||||
|
role="button"
|
||||||
|
data-bs-toggle="dropdown"
|
||||||
|
aria-expanded="false"
|
||||||
|
>
|
||||||
|
Settings
|
||||||
|
</a>
|
||||||
|
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
|
||||||
|
<li>
|
||||||
|
<router-link class="dropdown-item" to="/settings/network"
|
||||||
|
>Network Settings</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
<li class="nav-item dropdown">
|
<li class="nav-item dropdown">
|
||||||
<a
|
<a
|
||||||
class="nav-link dropdown-toggle"
|
class="nav-link dropdown-toggle"
|
||||||
@ -30,8 +49,16 @@
|
|||||||
Info
|
Info
|
||||||
</a>
|
</a>
|
||||||
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
|
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
|
||||||
<li><router-link class="dropdown-item" to="/info/system">System</router-link></li>
|
<li>
|
||||||
<li><router-link class="dropdown-item" to="/info/network">Network</router-link></li>
|
<router-link class="dropdown-item" to="/info/system"
|
||||||
|
>System</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<router-link class="dropdown-item" to="/info/network"
|
||||||
|
>Network</router-link
|
||||||
|
>
|
||||||
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
|
|||||||
179
webapp/src/components/NetworkAdminView.vue
Normal file
179
webapp/src/components/NetworkAdminView.vue
Normal file
@ -0,0 +1,179 @@
|
|||||||
|
<template>
|
||||||
|
<div class="container" role="main">
|
||||||
|
<div class="page-header">
|
||||||
|
<h1>Network Settings</h1>
|
||||||
|
</div>
|
||||||
|
<form>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header text-white bg-primary">WiFi Configuration</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="inputSSID" class="col-sm-2 col-form-label"
|
||||||
|
>WiFi SSID:</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="inputSSID"
|
||||||
|
maxlength="32"
|
||||||
|
placeholder="SSID"
|
||||||
|
v-model="networkConfigList.ssid"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="inputPassword" class="col-sm-2 col-form-label"
|
||||||
|
>WiFi Password:</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
class="form-control"
|
||||||
|
id="inputPassword"
|
||||||
|
maxlength="32"
|
||||||
|
placeholder="PSK"
|
||||||
|
v-model="networkConfigList.password"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="inputHostname" class="col-sm-2 col-form-label"
|
||||||
|
>Hostname:</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="inputHostname"
|
||||||
|
maxlength="32"
|
||||||
|
placeholder="Hostname"
|
||||||
|
v-model="networkConfigList.hostname"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="form-check form-switch">
|
||||||
|
<input
|
||||||
|
class="form-check-input"
|
||||||
|
type="checkbox"
|
||||||
|
id="inputDHCP"
|
||||||
|
v-model="networkConfigList.dhcp"
|
||||||
|
/>
|
||||||
|
<label class="form-check-label" for="inputDHCP">Enable DHCP</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" v-show="!networkConfigList.dhcp">
|
||||||
|
<div class="card-header text-white bg-primary">
|
||||||
|
Static IP Configuration
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="inputIP" class="col-sm-2 col-form-label"
|
||||||
|
>IP Address:</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="inputIP"
|
||||||
|
maxlength="32"
|
||||||
|
placeholder="IP address"
|
||||||
|
v-model="networkConfigList.ipaddress"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="inputNetmask" class="col-sm-2 col-form-label"
|
||||||
|
>Netmask:</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="inputNetmask"
|
||||||
|
maxlength="32"
|
||||||
|
placeholder="Netmask"
|
||||||
|
v-model="networkConfigList.netmask"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="inputGateway" class="col-sm-2 col-form-label"
|
||||||
|
>Default Gateway:</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="inputGateway"
|
||||||
|
maxlength="32"
|
||||||
|
placeholder="Default Gateway"
|
||||||
|
v-model="networkConfigList.gateway"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="inputDNS1" class="col-sm-2 col-form-label"
|
||||||
|
>DNS Server 1:</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="inputDNS1"
|
||||||
|
maxlength="32"
|
||||||
|
placeholder="DNS Server 1"
|
||||||
|
v-model="networkConfigList.dns1"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="row mb-3">
|
||||||
|
<label for="inputDNS2" class="col-sm-2 col-form-label"
|
||||||
|
>DNS Server 2:</label
|
||||||
|
>
|
||||||
|
<div class="col-sm-10">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="form-control"
|
||||||
|
id="inputDNS2"
|
||||||
|
maxlength="32"
|
||||||
|
placeholder="DNS Server 2"
|
||||||
|
v-model="networkConfigList.dns2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
{{ networkConfigList }}
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
networkConfigList: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getNetworkConfig();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getNetworkConfig() {
|
||||||
|
fetch("/api/network/config")
|
||||||
|
.then((response) => response.json())
|
||||||
|
.then((data) => (this.networkConfigList = data));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -3,6 +3,7 @@ import HomeView from '@/components/HomeView'
|
|||||||
import AboutView from '@/components/AboutView'
|
import AboutView from '@/components/AboutView'
|
||||||
import NetworkInfoView from '@/components/NetworkInfoView'
|
import NetworkInfoView from '@/components/NetworkInfoView'
|
||||||
import SystemInfoView from '@/components/SystemInfoView'
|
import SystemInfoView from '@/components/SystemInfoView'
|
||||||
|
import NetworkAdminView from '@/components/NetworkAdminView'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -24,6 +25,11 @@ const routes = [
|
|||||||
path: '/info/system',
|
path: '/info/system',
|
||||||
name: 'System',
|
name: 'System',
|
||||||
component: SystemInfoView
|
component: SystemInfoView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/settings/network',
|
||||||
|
name: 'Network Settings',
|
||||||
|
component: NetworkAdminView
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user