Show network status (WiFi/Ethernet) in network info view

src/WebApi_network.cpp

@@ -31,13 +31,14 @@ void WebApiNetworkClass::onNetworkStatus(AsyncWebServerRequest* request)
 
     root[F("sta_status")] = ((WiFi.getMode() & WIFI_STA) != 0);
     root[F("sta_ssid")] = WiFi.SSID();
-    root[F("sta_ip")] = NetworkSettings.localIP().toString();
-    root[F("sta_netmask")] = NetworkSettings.subnetMask().toString();
-    root[F("sta_gateway")] = NetworkSettings.gatewayIP().toString();
-    root[F("sta_dns1")] = NetworkSettings.dnsIP(0).toString();
-    root[F("sta_dns2")] = NetworkSettings.dnsIP(1).toString();
-    root[F("sta_mac")] = NetworkSettings.macAddress();
     root[F("sta_rssi")] = WiFi.RSSI();
+    root[F("network_ip")] = NetworkSettings.localIP().toString();
+    root[F("network_netmask")] = NetworkSettings.subnetMask().toString();
+    root[F("network_gateway")] = NetworkSettings.gatewayIP().toString();
+    root[F("network_dns1")] = NetworkSettings.dnsIP(0).toString();
+    root[F("network_dns2")] = NetworkSettings.dnsIP(1).toString();
+    root[F("network_mac")] = NetworkSettings.macAddress();
+    root[F("network_mode")] = NetworkSettings.NetworkMode() == network_mode::WiFi ? F("Station") : F("Ethernet");
     root[F("ap_status")] = ((WiFi.getMode() & WIFI_AP) != 0);
     root[F("ap_ssid")] = NetworkSettings.getApName();
     root[F("ap_ip")] = WiFi.softAPIP().toString();

webapp/src/components/NetworkInfoView.vue

@@ -14,7 +14,7 @@
             <div class="mt-5"></div>
             <WifiApInfo v-bind="networkDataList" />
             <div class="mt-5"></div>
-            <InterfaceStationInfo v-bind="networkDataList" />
+            <InterfaceNetworkInfo v-bind="networkDataList" />
             <div class="mt-5"></div>
             <InterfaceApInfo v-bind="networkDataList" />
             <div class="mt-5"></div>
@@ -26,14 +26,14 @@
 import { defineComponent } from 'vue';
 import WifiStationInfo from "./partials/WifiStationInfo.vue";
 import WifiApInfo from "./partials/WifiApInfo.vue";
-import InterfaceStationInfo from "./partials/InterfaceStationInfo.vue";
+import InterfaceNetworkInfo from "./partials/InterfaceNetworkInfo.vue";
 import InterfaceApInfo from "./partials/InterfaceApInfo.vue";
 
 export default defineComponent({
     components: {
         WifiStationInfo,
         WifiApInfo,
-        InterfaceStationInfo,
+        InterfaceNetworkInfo,
         InterfaceApInfo,
     },
     data() {
@@ -48,13 +48,14 @@ export default defineComponent({
                 ap_status: false,
                 ap_ssid: "",
                 ap_stationnum: 0,
-                // InterfaceStationInfo
-                sta_ip: "",
-                sta_netmask: "",
-                sta_gateway: "",
-                sta_dns1: "",
-                sta_dns2: "",
-                sta_mac: "",
+                // InterfaceNetworkInfo
+                network_ip: "",
+                network_netmask: "",
+                network_gateway: "",
+                network_dns1: "",
+                network_dns2: "",
+                network_mac: "",
+                network_mode: "",
                 // InterfaceApInfo
                 ap_ip: "",
                 ap_mac: "",

webapp/src/components/partials/InterfaceNetworkInfo.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="card">
         <div class="card-header text-white bg-primary">
-            Network Interface (Station)
+            Network Interface ({{ network_mode }})
         </div>
         <div class="card-body">
             <div class="table-responsive">
@@ -9,27 +9,27 @@
                     <tbody>
                         <tr>
                             <th>IP Address</th>
-                            <td>{{ sta_ip }}</td>
+                            <td>{{ network_ip }}</td>
                         </tr>
                         <tr>
                             <th>Netmask</th>
-                            <td>{{ sta_netmask }}</td>
+                            <td>{{ network_netmask }}</td>
                         </tr>
                         <tr>
                             <th>Default Gateway</th>
-                            <td>{{ sta_gateway }}</td>
+                            <td>{{ network_gateway }}</td>
                         </tr>
                         <tr>
                             <th>DNS 1</th>
-                            <td>{{ sta_dns1 }}</td>
+                            <td>{{ network_dns1 }}</td>
                         </tr>
                         <tr>
                             <th>DNS 2</th>
-                            <td>{{ sta_dns2 }}</td>
+                            <td>{{ network_dns2 }}</td>
                         </tr>
                         <tr>
                             <th>MAC Address</th>
-                            <td>{{ sta_mac }}</td>
+                            <td>{{ network_mac }}</td>
                         </tr>
                     </tbody>
                 </table>
@@ -43,12 +43,13 @@ import { defineComponent } from 'vue';
 
 export default defineComponent({
     props: {
-        sta_ip: String,
-        sta_netmask: String,
-        sta_gateway: String,
-        sta_dns1: String,
-        sta_dns2: String,
-        sta_mac: String,
+        network_ip: String,
+        network_netmask: String,
+        network_gateway: String,
+        network_dns1: String,
+        network_dns2: String,
+        network_mac: String,
+        network_mode: String,
     },
 });
 </script>