webapp: Added network info screen
This commit is contained in:
Thomas Basler
parent
868f0cf3a5
commit
fbedd75e0e
@ -1,5 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="bg-light p-5 rounded">
|
<div class="container" role="main">
|
||||||
|
<div class="page-header">
|
||||||
<h1>About</h1>
|
<h1>About</h1>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -1,5 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="bg-light p-5 rounded">
|
<div class="container" role="main">
|
||||||
|
<div class="page-header">
|
||||||
<h1>Home</h1>
|
<h1>Home</h1>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bg-light p-5 rounded">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -15,8 +15,27 @@
|
|||||||
</button>
|
</button>
|
||||||
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
|
||||||
<div class="navbar-nav">
|
<div class="navbar-nav">
|
||||||
|
<li class="nav-item">
|
||||||
<router-link class="nav-link" to="/">Home</router-link>
|
<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>
|
<router-link class="nav-link" to="/about">About</router-link>
|
||||||
|
</li>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
29
webapp/src/components/NetworkInfoView.vue
Normal file
29
webapp/src/components/NetworkInfoView.vue
Normal 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
56
webapp/src/components/partials/InterfaceApInfo.vue
Normal 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
72
webapp/src/components/partials/InterfaceStationInfo.vue
Normal 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
69
webapp/src/components/partials/WifiApInfo.vue
Normal 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
73
webapp/src/components/partials/WifiStationInfo.vue
Normal 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>
|
||||||
@ -1,6 +1,7 @@
|
|||||||
import { createWebHistory, createRouter } from 'vue-router';
|
import { createWebHistory, createRouter } from 'vue-router';
|
||||||
import HomeView from '@/components/HomeView'
|
import HomeView from '@/components/HomeView'
|
||||||
import AboutView from '@/components/AboutView'
|
import AboutView from '@/components/AboutView'
|
||||||
|
import NetworkInfoView from '@/components/NetworkInfoView'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -12,6 +13,11 @@ const routes = [
|
|||||||
path: '/about',
|
path: '/about',
|
||||||
name: 'About',
|
name: 'About',
|
||||||
component: AboutView
|
component: AboutView
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/info/network',
|
||||||
|
name: 'Network',
|
||||||
|
component: NetworkInfoView
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@ -21,5 +21,8 @@ module.exports = defineConfig({
|
|||||||
minRatio: 0.8,
|
minRatio: 0.8,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
proxy: 'http://172.217.28.1/'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user