Merge pull request #12 from ahinrichs/pr-info-params-as-props

[webapp] reduce api requests on info pages

webapp/src/components/NetworkInfoView.vue

@@ -3,13 +3,13 @@
         <div class="page-header">
             <h1>Network Info</h1>
         </div>
-        <WifiStationInfo />
+        <WifiStationInfo v-bind="networkDataList"/>
         <div class="mt-5"></div>
-        <WifiApInfo />
+        <WifiApInfo v-bind="networkDataList"/>
         <div class="mt-5"></div>
-        <InterfaceStationInfo />
+        <InterfaceStationInfo v-bind="networkDataList"/>
         <div class="mt-5"></div>
-        <InterfaceApInfo />
+        <InterfaceApInfo v-bind="networkDataList"/>
         <div class="mt-5"></div>
     </div>
 </template>
@@ -28,5 +28,39 @@ export default defineComponent({
         InterfaceStationInfo,
         InterfaceApInfo,
     },
+    data() {
+        return {
+            networkDataList: {
+                // WifiStationInfo
+                sta_status: false,
+                sta_ssid: "",
+                sta_rssi: 0,
+                // WifiApInfo
+                ap_status: false,
+                ap_ssid: "",
+                ap_stationnum: 0,
+                // InterfaceStationInfo
+                sta_ip: "",
+                sta_netmask: "",
+                sta_gateway: "",
+                sta_dns1: "",
+                sta_dns2: "",
+                sta_mac: "",
+                // InterfaceApInfo
+                ap_ip: "",
+                ap_mac: "",
+            }
+        }
+    },
+    created() {
+        this.getNetworkInfo();
+    },
+    methods: {
+        getNetworkInfo() {
+            fetch("/api/network/status")
+                .then((response) => response.json())
+                .then((data) => (this.networkDataList = data));
+        },
+    },
 });
 </script>

webapp/src/components/SystemInfoView.vue

@@ -3,11 +3,11 @@
         <div class="page-header">
             <h1>System Info</h1>
         </div>
-        <FirmwareInfo />
+        <FirmwareInfo v-bind="systemDataList"/>
         <div class="mt-5"></div>
-        <HardwareInfo />
+        <HardwareInfo v-bind="systemDataList"/>
         <div class="mt-5"></div>
-        <MemoryInfo />
+        <MemoryInfo v-bind="systemDataList"/>
         <div class="mt-5"></div>
     </div>
 </template>
@@ -24,5 +24,42 @@ export default defineComponent({
         FirmwareInfo,
         MemoryInfo,
     },
+    data() {
+        return {
+            systemDataList: {
+                // HardwareInfo
+                chipmodel: "",
+                chiprevision: "",
+                chipcores: "",
+                cpufreq: "",
+                // FirmwareInfo
+                hostname: "",
+                sdkversion: "",
+                firmware_version: "",
+                git_hash: "",
+                resetreason_0: "",
+                resetreason_1: "",
+                cfgsavecount: 0,
+                uptime: 0,
+                // MemoryInfo
+                heap_total: 0,
+                heap_used: 0,
+                littlefs_total: 0,
+                littlefs_used: 0,
+                sketch_total: 0,
+                sketch_used: 0
+            }
+        }
+    },
+    created() {
+        this.getSystemInfo();
+    },
+    methods: {
+        getSystemInfo() {
+            fetch("/api/system/status")
+                .then((response) => response.json())
+                .then((data) => (this.systemDataList = data));
+        },
+    },
 });
 </script>

webapp/src/components/partials/FirmwareInfo.vue

@@ -9,35 +9,35 @@
                     <tbody>
                         <tr>
                             <th>Hostname</th>
-                            <td>{{ systemDataList.hostname }}</td>
+                            <td>{{ hostname }}</td>
                         </tr>
                         <tr>
                             <th>SDK Version</th>
-                            <td>{{ systemDataList.sdkversion }}</td>
+                            <td>{{ sdkversion }}</td>
                         </tr>
                         <tr>
                             <th>Firmware Version</th>
-                            <td>{{ systemDataList.firmware_version }}</td>
+                            <td>{{ firmware_version }}</td>
                         </tr>
                         <tr>
                             <th>Git Hash</th>
-                            <td>{{ systemDataList.git_hash }}</td>
+                            <td>{{ git_hash }}</td>
                         </tr>
                         <tr>
                             <th>Reset Reason CPU 0</th>
-                            <td>{{ systemDataList.resetreason_0 }}</td>
+                            <td>{{ resetreason_0 }}</td>
                         </tr>
                         <tr>
                             <th>Reset Reason CPU 1</th>
-                            <td>{{ systemDataList.resetreason_1 }}</td>
+                            <td>{{ resetreason_1 }}</td>
                         </tr>
                         <tr>
                             <th>Config save count</th>
-                            <td>{{ systemDataList.cfgsavecount }}</td>
+                            <td>{{ cfgsavecount }}</td>
                         </tr>
                         <tr>
                             <th>Uptime</th>
-                            <td>{{ timeInHours(systemDataList.uptime) }}</td>
+                            <td>{{ timeInHours(uptime) }}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -50,22 +50,15 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-    data() {
+    props: {
-        return {
+        hostname: String,
-            systemDataList: {
+        sdkversion: String,
-                hostname: "",
+        firmware_version: String,
-                sdkversion: "",
+        git_hash: String,
-                firmware_version: "",
+        resetreason_0: String,
-                git_hash: "",
+        resetreason_1: String,
-                resetreason_0: "",
+        cfgsavecount: { type: Number, required: true },
-                resetreason_1: "",
+        uptime: { type: Number, required: true },
-                cfgsavecount: 0,
-                uptime: 0
-            },
-        };
-    },
-    created() {
-        this.getSystemInfo();
     },
     computed: {
         timeInHours() {
@@ -83,12 +76,5 @@ export default defineComponent({
             };
         },
     },
-    methods: {
-        getSystemInfo() {
-            fetch("/api/system/status")
-                .then((response) => response.json())
-                .then((data) => (this.systemDataList = data));
-        },
-    },
 });
 </script>

webapp/src/components/partials/FsInfo.vue

@@ -29,7 +29,7 @@ export default defineComponent({
     },
     methods: {
         getPercent() {
-            return Math.round((this.used / this.total) * 100);
+            return this.total === 0 ? 0 : Math.round((this.used / this.total) * 100);
         },
     },
 });

webapp/src/components/partials/HardwareInfo.vue

@@ -9,19 +9,19 @@
                     <tbody>
                         <tr>
                             <th>Chip Model</th>
-                            <td>{{ systemDataList.chipmodel }}</td>
+                            <td>{{ chipmodel }}</td>
                         </tr>
                         <tr>
                             <th>Chip Revision</th>
-                            <td>{{ systemDataList.chiprevision }}</td>
+                            <td>{{ chiprevision }}</td>
                         </tr>
                         <tr>
                             <th>Chip Cores</th>
-                            <td>{{ systemDataList.chipcores }}</td>
+                            <td>{{ chipcores }}</td>
                         </tr>
                         <tr>
                             <th>CPU Frequency</th>
-                            <td>{{ systemDataList.cpufreq }} MHz</td>
+                            <td>{{ cpufreq }} MHz</td>
                         </tr>
                     </tbody>
                 </table>
@@ -34,25 +34,11 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-    data() {
+    props: {
-        return {
+        chipmodel: String,
-            systemDataList: {
+        chiprevision: String,
-                chipmodel: "",
+        chipcores: String,
-                chiprevision: "",
+        cpufreq: String,
-                chipcores: "",
-                cpufreq: ""
-            },
-        };
-    },
-    created() {
-        this.getSystemInfo();
-    },
-    methods: {
-        getSystemInfo() {
-            fetch("/api/system/status")
-                .then((response) => response.json())
-                .then((data) => (this.systemDataList = data));
-        },
     },
 });
 </script>

webapp/src/components/partials/InterfaceApInfo.vue

@@ -9,11 +9,11 @@
                     <tbody>
                         <tr>
                             <th>IP Address</th>
-                            <td>{{ networkDataList.ap_ip }}</td>
+                            <td>{{ ap_ip }}</td>
                         </tr>
                         <tr>
                             <th>MAC Address</th>
-                            <td>{{ networkDataList.ap_mac }}</td>
+                            <td>{{ ap_mac }}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -26,23 +26,9 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-    data() {
+    props: {
-        return {
+        ap_ip: String,
-            networkDataList: {
+        ap_mac: String,
-                ap_ip: "",
-                ap_mac: ""
-            },
-        };
-    },
-    created() {
-        this.getNetworkInfo();
-    },
-    methods: {
-        getNetworkInfo() {
-            fetch("/api/network/status")
-                .then((response) => response.json())
-                .then((data) => (this.networkDataList = data));
-        },
     },
 });
 </script>

webapp/src/components/partials/InterfaceStationInfo.vue

@@ -9,27 +9,27 @@
                     <tbody>
                         <tr>
                             <th>IP Address</th>
-                            <td>{{ networkDataList.sta_ip }}</td>
+                            <td>{{ sta_ip }}</td>
                         </tr>
                         <tr>
                             <th>Netmask</th>
-                            <td>{{ networkDataList.sta_netmask }}</td>
+                            <td>{{ sta_netmask }}</td>
                         </tr>
                         <tr>
                             <th>Default Gateway</th>
-                            <td>{{ networkDataList.sta_gateway }}</td>
+                            <td>{{ sta_gateway }}</td>
                         </tr>
                         <tr>
                             <th>DNS 1</th>
-                            <td>{{ networkDataList.sta_dns1 }}</td>
+                            <td>{{ sta_dns1 }}</td>
                         </tr>
                         <tr>
                             <th>DNS 2</th>
-                            <td>{{ networkDataList.sta_dns2 }}</td>
+                            <td>{{ sta_dns2 }}</td>
                         </tr>
                         <tr>
                             <th>MAC Address</th>
-                            <td>{{ networkDataList.sta_mac }}</td>
+                            <td>{{ sta_mac }}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -42,27 +42,13 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-    data() {
+    props: {
-        return {
+        sta_ip: String,
-            networkDataList: {
+        sta_netmask: String,
-                sta_ip: "",
+        sta_gateway: String,
-                sta_netmask: "",
+        sta_dns1: String,
-                sta_gateway: "",
+        sta_dns2: String,
-                sta_dns1: "",
+        sta_mac: String,
-                sta_dns2: "",
-                sta_mac: ""
-            },
-        };
-    },
-    created() {
-        this.getNetworkInfo();
-    },
-    methods: {
-        getNetworkInfo() {
-            fetch("/api/network/status")
-                .then((response) => response.json())
-                .then((data) => (this.networkDataList = data));
-        },
     },
 });
 </script>

webapp/src/components/partials/MemoryInfo.vue

@@ -14,10 +14,10 @@
                         </tr>
                     </thead>
                     <tbody>
-                        <FsInfo name="Heap" :total="systemDataList.heap_total" :used="systemDataList.heap_used" />
+                        <FsInfo name="Heap" :total="heap_total" :used="heap_used" />
-                        <FsInfo name="LittleFs" :total="systemDataList.littlefs_total"
+                        <FsInfo name="LittleFs" :total="littlefs_total"
-                            :used="systemDataList.littlefs_used" />
+                            :used="littlefs_used" />
-                        <FsInfo name="Sketch" :total="systemDataList.sketch_total" :used="systemDataList.sketch_used" />
+                        <FsInfo name="Sketch" :total="sketch_total" :used="sketch_used" />
                     </tbody>
                 </table>
             </div>
@@ -33,27 +33,13 @@ export default defineComponent({
     components: {
         FsInfo,
     },
-    data() {
+    props: {
-        return {
+        heap_total: { type: Number, required: true },
-            systemDataList: {
+        heap_used: { type: Number, required: true },
-                heap_total: 0,
+        littlefs_total: { type: Number, required: true },
-                heap_used: 0,
+        littlefs_used: { type: Number, required: true },
-                littlefs_total: 0,
+        sketch_total: { type: Number, required: true },
-                littlefs_used: 0,
+        sketch_used: { type: Number, required: true },
-                sketch_total: 0,
-                sketch_used: 0
-            },
-        };
-    },
-    created() {
-        this.getSystemInfo();
-    },
-    methods: {
-        getSystemInfo() {
-            fetch("/api/system/status")
-                .then((response) => response.json())
-                .then((data) => (this.systemDataList = data));
-        },
     },
 });
 </script>

webapp/src/components/partials/WifiApInfo.vue

@@ -10,20 +10,20 @@
                         <tr>
                             <th>Status</th>
                             <td class="badge" :class="{
-                                'bg-danger': !networkDataList.ap_status,
+                                'bg-danger': !ap_status,
-                                'bg-success': networkDataList.ap_status,
+                                'bg-success': ap_status,
                             }">
-                                <span v-if="networkDataList.ap_status">enabled</span>
+                                <span v-if="ap_status">enabled</span>
                                 <span v-else>disabled</span>
                             </td>
                         </tr>
                         <tr>
                             <th>SSID</th>
-                            <td>{{ networkDataList.ap_ssid }}</td>
+                            <td>{{ ap_ssid }}</td>
                         </tr>
                         <tr>
                             <th># Stations</th>
-                            <td>{{ networkDataList.ap_stationnum }}</td>
+                            <td>{{ ap_stationnum }}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -36,24 +36,10 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-    data() {
+    props: {
-        return {
+        ap_status: { type: Boolean, required: true },
-            networkDataList: {
+        ap_ssid: String,
-                ap_status: false,
+        ap_stationnum: { type: Number, required: true },
-                ap_ssid: "",
-                ap_stationnum: 0
-            },
-        };
-    },
-    created() {
-        this.getNetworkInfo();
-    },
-    methods: {
-        getNetworkInfo() {
-            fetch("/api/network/status")
-                .then((response) => response.json())
-                .then((data) => (this.networkDataList = data));
-        },
     },
 });
 </script>

webapp/src/components/partials/WifiStationInfo.vue

@@ -10,24 +10,24 @@
                         <tr>
                             <th>Status</th>
                             <td class="badge" :class="{
-                                'bg-danger': !networkDataList.sta_status,
+                                'bg-danger': !sta_status,
-                                'bg-success': networkDataList.sta_status,
+                                'bg-success': sta_status,
                             }">
-                                <span v-if="networkDataList.sta_status">enabled</span>
+                                <span v-if="sta_status">enabled</span>
                                 <span v-else>disabled</span>
                             </td>
                         </tr>
                         <tr>
                             <th>SSID</th>
-                            <td>{{ networkDataList.sta_ssid }}</td>
+                            <td>{{ sta_ssid }}</td>
                         </tr>
                         <tr>
                             <th>Quality</th>
-                            <td>{{ getRSSIasQuality(networkDataList.sta_rssi) }} %</td>
+                            <td>{{ getRSSIasQuality(sta_rssi) }} %</td>
                         </tr>
                         <tr>
                             <th>RSSI</th>
-                            <td>{{ networkDataList.sta_rssi }}</td>
+                            <td>{{ sta_rssi }}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -40,24 +40,12 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-    data() {
+    props: {
-        return {
+        sta_status: { type: Boolean, required: true },
-            networkDataList: {
+        sta_ssid: String,
-                sta_status: false,
+        sta_rssi: { type: Number, required: true },
-                sta_ssid: "",
-                sta_rssi: 0
-            },
-        };
-    },
-    created() {
-        this.getNetworkInfo();
     },
     methods: {
-        getNetworkInfo() {
-            fetch("/api/network/status")
-                .then((response) => response.json())
-                .then((data) => (this.networkDataList = data));
-        },
         getRSSIasQuality(rssi: number) {
             let quality = 0;