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

webapp: Added network info screen

Browse Source
This commit is contained in:
Thomas Basler 2022-04-13 22:43:26 +02:00
parent 868f0cf3a5
commit fbedd75e0e
10 changed files with 348 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
webapp/src/components/AboutView.vue
View File

@ -1,5 +1,7 @@
<template>
<div class="bg-light p-5 rounded">
<h1>About</h1>
<div class="container" role="main">
<div class="page-header">
<h1>About</h1>
</div>
</div>
</template>

16
webapp/src/components/HomeView.vue
View File

@ -1,5 +1,17 @@
<template>
<div class="bg-light p-5 rounded">
<h1>Home</h1>
<div class="container" role="main">
<div class="page-header">
<h1>Home</h1>
</div>
<div class="bg-light p-5 rounded">
</div>
</div>
</template>
<script>
export default {
components: {
},
};
</script>

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

@ -15,8 +15,27 @@
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<router-link class="nav-link" to="/">Home</router-link>
<router-link class="nav-link" to="/about">About</router-link>
<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"
>
Info
</a>
<ul class="dropdown-menu" aria-labelledby="navbarScrollingDropdown">
<li><router-link class="dropdown-item" to="/info/network">Network</router-link></li>
</ul>
</li>
<li class="nav-item">
<router-link class="nav-link" to="/about">About</router-link>
</li>
</div>
</div>
</div>

29
webapp/src/components/NetworkInfoView.vue Normal file
View File

@ -0,0 +1,29 @@
<template>
<div class="container" role="main">
<div class="page-header">
<h1>Network Info</h1>
</div>
<div class="bg-light p-5 rounded">
<WifiStationInfo />
<WifiApInfo />
<InterfaceStationInfo />
<InterfaceApInfo />
</div>
</div>
</template>
<script>
import WifiStationInfo from "./partials/WifiStationInfo.vue";
import WifiApInfo from "./partials/WifiApInfo.vue"
import InterfaceStationInfo from "./partials/InterfaceStationInfo.vue"
import InterfaceApInfo from "./partials/InterfaceApInfo.vue"
export default {
components: {
WifiStationInfo,
WifiApInfo,
InterfaceStationInfo,
InterfaceApInfo,
},
};
</script>

56
webapp/src/components/partials/InterfaceApInfo.vue Normal file
View File

@ -0,0 +1,56 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
Network Interface (Access Point)
</div>
<div class="card-body">
<div class="table-responsive">
<table id="wifi_sta" class="table table-hover table-condensed">
<tbody id="wifi_sta-data">
<tr>
<th>IP Address</th>
<td>{{ networkDataList.ap_ip }}</td>
</tr>
<tr>
<th>MAC Address</th>
<td>{{ networkDataList.ap_mac }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
getRSSIasQuality(rssi) {
var quality = 0;
if (rssi <= -100) {
quality = 0;
} else if (rssi >= -50) {
quality = 100;
} else {
quality = 2 * (rssi + 100);
}
return quality;
},
},
};
</script>

72
webapp/src/components/partials/InterfaceStationInfo.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
Network Interface (Station)
</div>
<div class="card-body">
<div class="table-responsive">
<table id="wifi_sta" class="table table-hover table-condensed">
<tbody id="wifi_sta-data">
<tr>
<th>IP Address</th>
<td>{{ networkDataList.sta_ip }}</td>
</tr>
<tr>
<th>Netmask</th>
<td>{{ networkDataList.sta_netmask }}</td>
</tr>
<tr>
<th>Default Gateway</th>
<td>{{ networkDataList.sta_gateway }}</td>
</tr>
<tr>
<th>DNS 1</th>
<td>{{ networkDataList.sta_dns1 }}</td>
</tr>
<tr>
<th>DNS 2</th>
<td>{{ networkDataList.sta_dns2 }}</td>
</tr>
<tr>
<th>MAC Address</th>
<td>{{ networkDataList.sta_mac }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
getRSSIasQuality(rssi) {
var quality = 0;
if (rssi <= -100) {
quality = 0;
} else if (rssi >= -50) {
quality = 100;
} else {
quality = 2 * (rssi + 100);
}
return quality;
},
},
};
</script>

69
webapp/src/components/partials/WifiApInfo.vue Normal file
View File

@ -0,0 +1,69 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
WiFi Information (Access Point)
</div>
<div class="card-body">
<div class="table-responsive">
<table id="wifi_sta" class="table table-hover table-condensed">
<tbody id="wifi_sta-data">
<tr>
<th>Status</th>
<td
class="badge"
:class="{
'bg-danger': !networkDataList.ap_status,
'bg-success': networkDataList.ap_status,
}"
>
<span v-if="networkDataList.ap_status">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
<tr>
<th>SSID</th>
<td>{{ networkDataList.ap_ssid }}</td>
</tr>
<tr>
<th># Stations</th>
<td>{{ networkDataList.ap_stationnum }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
getRSSIasQuality(rssi) {
var quality = 0;
if (rssi <= -100) {
quality = 0;
} else if (rssi >= -50) {
quality = 100;
} else {
quality = 2 * (rssi + 100);
}
return quality;
},
},
};
</script>

73
webapp/src/components/partials/WifiStationInfo.vue Normal file
View File

@ -0,0 +1,73 @@
<template>
<div class="card">
<div class="card-header text-white bg-primary">
WiFi Information (Station)
</div>
<div class="card-body">
<div class="table-responsive">
<table id="wifi_sta" class="table table-hover table-condensed">
<tbody id="wifi_sta-data">
<tr>
<th>Status</th>
<td
class="badge"
:class="{
'bg-danger': !networkDataList.sta_status,
'bg-success': networkDataList.sta_status,
}"
>
<span v-if="networkDataList.sta_status">enabled</span>
<span v-else>disabled</span>
</td>
</tr>
<tr>
<th>SSID</th>
<td>{{ networkDataList.sta_ssid }}</td>
</tr>
<tr>
<th>Quality</th>
<td>{{ this.getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
</tr>
<tr>
<th>RSSI</th>
<td>{{ networkDataList.sta_rssi }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
networkDataList: [],
};
},
created() {
this.getNetworkInfo();
},
methods: {
getNetworkInfo() {
fetch("/api/network/status")
.then((response) => response.json())
.then((data) => (this.networkDataList = data));
},
getRSSIasQuality(rssi) {
var quality = 0;
if (rssi <= -100) {
quality = 0;
} else if (rssi >= -50) {
quality = 100;
} else {
quality = 2 * (rssi + 100);
}
return quality;
},
},
};
</script>

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

@ -1,6 +1,7 @@
import { createWebHistory, createRouter } from 'vue-router';
import HomeView from '@/components/HomeView'
import AboutView from '@/components/AboutView'
import NetworkInfoView from '@/components/NetworkInfoView'
const routes = [
{
@ -12,6 +13,11 @@ const routes = [
path: '/about',
name: 'About',
component: AboutView
},
{
path: '/info/network',
name: 'Network',
component: NetworkInfoView
}
];

3
webapp/vue.config.js
View File

@ -21,5 +21,8 @@ module.exports = defineConfig({
minRatio: 0.8,
}
}
},
devServer: {
proxy: 'http://172.217.28.1/'
}
})