Show state, not carrier behind interface in the Pi-hole interface overview

Signed-off-by: DL6ER <dl6er@dl6er.de>

scripts/js/interfaces.js

@@ -32,9 +32,19 @@ $(function () {
 
     // For each interface in data.interface, create a new object and push it to json
     data.interfaces.forEach(function (interface) {
-      const status = interface.carrier
-        ? '<span class="text-green">UP</span>'
-        : '<span class="text-red">DOWN</span>';
+      const carrierColor = interface.carrier ? "text-green" : "text-red";
+      let stateText = interface.state.toUpperCase();
+      if (stateText === "UNKNOWN" && interface.flags !== undefined && interface.flags.length > 0) {
+        if (interface.flags.includes("pointopoint")) {
+          // WireGuards, etc. -> the typo is intentional
+          stateText = "P2P";
+        } else if (interface.flags.includes("loopback")) {
+          // Loopback interfaces
+          stateText = "LOOPBACK";
+        }
+      }
+
+      const status = `<span class="${carrierColor}">${stateText}</span>`;
 
       var obj = {
         text: interface.name + " - " + status,
@@ -306,6 +316,21 @@ $(function () {
         nodes: [],
       };
 
+      furtherDetails.nodes.push(
+        {
+          text:
+            "Carrier: " +
+            (interface.carrier
+              ? "<span class='text-green'>Connected</span>"
+              : "<span class='text-red'>Disconnected</span>"),
+          icon: "fa fa-link fa-fw",
+        },
+        {
+          text: "State: " + utils.escapeHtml(interface.state.toUpperCase()),
+          icon: "fa fa-server fa-fw",
+        }
+      );
+
       if (interface.parent_dev_name !== undefined) {
         let extra = "";
         if (interface.parent_dev_bus_name !== undefined) {