From 2aad0cbe700de1fc6ffec68552e9eaf58f224bb5 Mon Sep 17 00:00:00 2001
From: Thomas Basler <thomas@familie-basler.net>
Date: Mon, 17 Oct 2022 20:43:27 +0200
Subject: [PATCH] webapp: create interface for NetworkStatus

---
 webapp/src/components/InterfaceApInfo.vue     | 10 +++---
 .../src/components/InterfaceNetworkInfo.vue   | 28 +++++++---------
 webapp/src/components/WifiApInfo.vue          | 17 +++++-----
 webapp/src/components/WifiStationInfo.vue     | 19 ++++++-----
 webapp/src/types/NetworkStatus.ts             | 22 +++++++++++++
 webapp/src/views/NetworkInfoView.vue          | 32 ++++---------------
 6 files changed, 61 insertions(+), 67 deletions(-)
 create mode 100644 webapp/src/types/NetworkStatus.ts

diff --git a/webapp/src/components/InterfaceApInfo.vue b/webapp/src/components/InterfaceApInfo.vue
index 21c1324..adea981 100644
--- a/webapp/src/components/InterfaceApInfo.vue
+++ b/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,
-        ap_mac: String,
+        networkStatus: { type: Object as PropType<NetworkStatus>, required: true },
     },
 });
 </script>
diff --git a/webapp/src/components/InterfaceNetworkInfo.vue b/webapp/src/components/InterfaceNetworkInfo.vue
index c640da5..dd0902a 100644
--- a/webapp/src/components/InterfaceNetworkInfo.vue
+++ b/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,
-        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>
diff --git a/webapp/src/components/WifiApInfo.vue b/webapp/src/components/WifiApInfo.vue
index bdf1eb9..ee057e5 100644
--- a/webapp/src/components/WifiApInfo.vue
+++ b/webapp/src/components/WifiApInfo.vue
@@ -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>
diff --git a/webapp/src/components/WifiStationInfo.vue b/webapp/src/components/WifiStationInfo.vue
index a3e3e04..52fcf64 100644
--- a/webapp/src/components/WifiStationInfo.vue
+++ b/webapp/src/components/WifiStationInfo.vue
@@ -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) {
diff --git a/webapp/src/types/NetworkStatus.ts b/webapp/src/types/NetworkStatus.ts
new file mode 100644
index 0000000..01f7fe2
--- /dev/null
+++ b/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,
+}
\ No newline at end of file
diff --git a/webapp/src/views/NetworkInfoView.vue b/webapp/src/views/NetworkInfoView.vue
index 9d28e60..a039353 100644
--- a/webapp/src/views/NetworkInfoView.vue
+++ b/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: {
-                // 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() {