patrick/OpenDTU
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

webapp: Implemented first part of the network settings

Browse Source
This commit is contained in:
Thomas Basler 2022-04-15 14:23:25 +02:00
parent 06837320f7
commit 9e5906e5aa
3 changed files with 214 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
webapp/src/components/NavBar.vue
View File

@ -18,6 +18,25 @@
<li class="nav-item">
<router-link class="nav-link" to="/">Home</router-link>
</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">
<a
class="nav-link dropdown-toggle"
@ -30,8 +49,16 @@
Info
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<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>
<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>
</li>
<li class="nav-item">

179
webapp/src/components/NetworkAdminView.vue Normal file
View 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>

6
webapp/src/router/index.js
View File

@ -3,6 +3,7 @@ import HomeView from '@/components/HomeView'
import AboutView from '@/components/AboutView'
import NetworkInfoView from '@/components/NetworkInfoView'
import SystemInfoView from '@/components/SystemInfoView'
import NetworkAdminView from '@/components/NetworkAdminView'
const routes = [
{
@ -24,6 +25,11 @@ const routes = [
path: '/info/system',
name: 'System',
component: SystemInfoView
},
{
path: '/settings/network',
name: 'Network Settings',
component: NetworkAdminView
}
];