webapp: create interface for NetworkStatus
This commit is contained in:
Thomas Basler
parent
19ee117a53
commit
2aad0cbe70
@ -9,11 +9,11 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>IP Address</th>
|
||||
<td>{{ ap_ip }}</td>
|
||||
<td>{{ networkStatus.ap_ip }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<td>{{ ap_mac }}</td>
|
||||
<td>{{ networkStatus.ap_mac }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -23,12 +23,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import type { NetworkStatus } from '@/types/NetworkStatus';
|
||||
import { defineComponent, type PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
ap_ip: String,
|
||||
ap_mac: String,
|
||||
networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="card">
|
||||
<div class="card-header text-white bg-primary">
|
||||
Network Interface ({{ network_mode }})
|
||||
Network Interface ({{ networkStatus.network_mode }})
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="table-responsive">
|
||||
@ -9,31 +9,31 @@
|
||||
<tbody>
|
||||
<tr>
|
||||
<th>Hostname</th>
|
||||
<td>{{ network_hostname }}</td>
|
||||
<td>{{ networkStatus.network_hostname }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>IP Address</th>
|
||||
<td>{{ network_ip }}</td>
|
||||
<td>{{ networkStatus.network_ip }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Netmask</th>
|
||||
<td>{{ network_netmask }}</td>
|
||||
<td>{{ networkStatus.network_netmask }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Default Gateway</th>
|
||||
<td>{{ network_gateway }}</td>
|
||||
<td>{{ networkStatus.network_gateway }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>DNS 1</th>
|
||||
<td>{{ network_dns1 }}</td>
|
||||
<td>{{ networkStatus.network_dns1 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>DNS 2</th>
|
||||
<td>{{ network_dns2 }}</td>
|
||||
<td>{{ networkStatus.network_dns2 }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>MAC Address</th>
|
||||
<td>{{ network_mac }}</td>
|
||||
<td>{{ networkStatus.network_mac }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -43,18 +43,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import type { NetworkStatus } from '@/types/NetworkStatus';
|
||||
import { defineComponent, type PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
network_hostname: String,
|
||||
network_ip: String,
|
||||
network_netmask: String,
|
||||
network_gateway: String,
|
||||
network_dns1: String,
|
||||
network_dns2: String,
|
||||
network_mac: String,
|
||||
network_mode: String,
|
||||
networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -10,20 +10,20 @@
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td class="badge" :class="{
|
||||
'bg-danger': !ap_status,
|
||||
'bg-success': ap_status,
|
||||
'bg-danger': !networkStatus.ap_status,
|
||||
'bg-success': networkStatus.ap_status,
|
||||
}">
|
||||
<span v-if="ap_status">enabled</span>
|
||||
<span v-if="networkStatus.ap_status">enabled</span>
|
||||
<span v-else>disabled</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>SSID</th>
|
||||
<td>{{ ap_ssid }}</td>
|
||||
<td>{{ networkStatus.ap_ssid }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th># Stations</th>
|
||||
<td>{{ ap_stationnum }}</td>
|
||||
<td>{{ networkStatus.ap_stationnum }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -33,13 +33,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import type { NetworkStatus } from '@/types/NetworkStatus';
|
||||
import { defineComponent, type PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
ap_status: { type: Boolean, required: true },
|
||||
ap_ssid: String,
|
||||
ap_stationnum: { type: Number, required: true },
|
||||
networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
@ -10,24 +10,24 @@
|
||||
<tr>
|
||||
<th>Status</th>
|
||||
<td class="badge" :class="{
|
||||
'bg-danger': !sta_status,
|
||||
'bg-success': sta_status,
|
||||
'bg-danger': !networkStatus.sta_status,
|
||||
'bg-success': networkStatus.sta_status,
|
||||
}">
|
||||
<span v-if="sta_status">enabled</span>
|
||||
<span v-if="networkStatus.sta_status">enabled</span>
|
||||
<span v-else>disabled</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>SSID</th>
|
||||
<td>{{ sta_ssid }}</td>
|
||||
<td>{{ networkStatus.sta_ssid }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Quality</th>
|
||||
<td>{{ getRSSIasQuality(sta_rssi) }} %</td>
|
||||
<td>{{ getRSSIasQuality(networkStatus.sta_rssi) }} %</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>RSSI</th>
|
||||
<td>{{ sta_rssi }}</td>
|
||||
<td>{{ networkStatus.sta_rssi }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
@ -37,13 +37,12 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import type { NetworkStatus } from '@/types/NetworkStatus';
|
||||
import { defineComponent, type PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
sta_status: { type: Boolean, required: true },
|
||||
sta_ssid: String,
|
||||
sta_rssi: { type: Number, required: true },
|
||||
networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
|
||||
},
|
||||
methods: {
|
||||
getRSSIasQuality(rssi: number) {
|
||||
|
||||
22
webapp/src/types/NetworkStatus.ts
Normal file
22
webapp/src/types/NetworkStatus.ts
Normal file
@ -0,0 +1,22 @@
|
||||
export interface NetworkStatus {
|
||||
// WifiStationInfo
|
||||
sta_status: boolean,
|
||||
sta_ssid: string,
|
||||
sta_rssi: number,
|
||||
// WifiApInfo
|
||||
ap_status: boolean,
|
||||
ap_ssid: string,
|
||||
ap_stationnum: number,
|
||||
// InterfaceNetworkInfo
|
||||
network_hostname: string,
|
||||
network_ip: string,
|
||||
network_netmask: string,
|
||||
network_gateway: string,
|
||||
network_dns1: string,
|
||||
network_dns2: string,
|
||||
network_mac: string,
|
||||
network_mode: string,
|
||||
// InterfaceApInfo
|
||||
ap_ip: string,
|
||||
ap_mac: string,
|
||||
}
|
||||
@ -10,13 +10,13 @@
|
||||
</div>
|
||||
|
||||
<template v-if="!dataLoading">
|
||||
<WifiStationInfo v-bind="networkDataList" />
|
||||
<WifiStationInfo :networkStatus="networkDataList" />
|
||||
<div class="mt-5"></div>
|
||||
<WifiApInfo v-bind="networkDataList" />
|
||||
<WifiApInfo :networkStatus="networkDataList" />
|
||||
<div class="mt-5"></div>
|
||||
<InterfaceNetworkInfo v-bind="networkDataList" />
|
||||
<InterfaceNetworkInfo :networkStatus="networkDataList" />
|
||||
<div class="mt-5"></div>
|
||||
<InterfaceApInfo v-bind="networkDataList" />
|
||||
<InterfaceApInfo :networkStatus="networkDataList" />
|
||||
<div class="mt-5"></div>
|
||||
</template>
|
||||
</div>
|
||||
@ -28,6 +28,7 @@ import WifiStationInfo from "@/components/WifiStationInfo.vue";
|
||||
import WifiApInfo from "@/components/WifiApInfo.vue";
|
||||
import InterfaceNetworkInfo from "@/components/InterfaceNetworkInfo.vue";
|
||||
import InterfaceApInfo from "@/components/InterfaceApInfo.vue";
|
||||
import type { NetworkStatus } from '@/types/NetworkStatus';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
@ -39,28 +40,7 @@ export default defineComponent({
|
||||
data() {
|
||||
return {
|
||||
dataLoading: true,
|
||||
networkDataList: {
|
||||
// WifiStationInfo
|
||||
sta_status: false,
|
||||
sta_ssid: "",
|
||||
sta_rssi: 0,
|
||||
// WifiApInfo
|
||||
ap_status: false,
|
||||
ap_ssid: "",
|
||||
ap_stationnum: 0,
|
||||
// InterfaceNetworkInfo
|
||||
network_hostname: "",
|
||||
network_ip: "",
|
||||
network_netmask: "",
|
||||
network_gateway: "",
|
||||
network_dns1: "",
|
||||
network_dns2: "",
|
||||
network_mac: "",
|
||||
network_mode: "",
|
||||
// InterfaceApInfo
|
||||
ap_ip: "",
|
||||
ap_mac: "",
|
||||
}
|
||||
networkDataList: {} as NetworkStatus,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user