webapp: create interface for NetworkStatus

webapp/src/components/InterfaceApInfo.vue

@@ -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,
+        networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
-        ap_mac: String,
     },
 });
 </script>

webapp/src/components/InterfaceNetworkInfo.vue

@@ -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,
+        networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
-        network_ip: String,
-        network_netmask: String,
-        network_gateway: String,
-        network_dns1: String,
-        network_dns2: String,
-        network_mac: String,
-        network_mode: String,
     },
 });
 </script>

webapp/src/components/WifiApInfo.vue

@@ -10,20 +10,20 @@
                         <tr>
                             <th>Status</th>
                             <td class="badge" :class="{
-                                'bg-danger': !ap_status,
+                                'bg-danger': !networkStatus.ap_status,
-                                'bg-success': 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 },
+        networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
-        ap_ssid: String,
-        ap_stationnum: { type: Number, required: true },
     },
 });
 </script>

webapp/src/components/WifiStationInfo.vue

@@ -10,24 +10,24 @@
                         <tr>
                             <th>Status</th>
                             <td class="badge" :class="{
-                                'bg-danger': !sta_status,
+                                'bg-danger': !networkStatus.sta_status,
-                                'bg-success': 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 },
+        networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
-        sta_ssid: String,
-        sta_rssi: { type: Number, required: true },
     },
     methods: {
         getRSSIasQuality(rssi: number) {

webapp/src/types/NetworkStatus.ts

@@ -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,
+}

webapp/src/views/NetworkInfoView.vue

@@ -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: {
+            networkDataList: {} as NetworkStatus,
-                // 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: "",
-            }
         }
     },
     created() {