From 7efe658503efdbbc54c8615ffa7bc3d5e369e1c2 Mon Sep 17 00:00:00 2001
From: Jokob-sk <jokob.sk@gmail.com>
Date: Sat, 5 Aug 2023 15:42:26 +1000
Subject: [PATCH] network tree port/wifi icons

---
 docs/API.md           |  2 +-
 front/css/pialert.css | 12 +++++++++++-
 front/network.php     |  6 +++++-
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/docs/API.md b/docs/API.md
index cd13a241..3b321f6d 100755
--- a/docs/API.md
+++ b/docs/API.md
@@ -5,7 +5,7 @@ PiAlert comes with a simple API. These API endpoints are static files, that are
 
 ### When are the endpoints updated
 
-Once you enable the API (`ENABLE_API` setting), the endpoints are updated when objects in the API endpoints are changed:
+The endpoints are updated when objects in the API endpoints are changed.
 
 ### Location of the endpoints
 
diff --git a/front/css/pialert.css b/front/css/pialert.css
index 45dc9dc6..f80c25e4 100755
--- a/front/css/pialert.css
+++ b/front/css/pialert.css
@@ -799,6 +799,8 @@ height: 50px;
     margin-bottom: 6px;
 }
 
+/* NETWORK page */
+
 /* AdminLTE overrides */
 #networkTree .box
 {
@@ -822,6 +824,14 @@ height: 50px;
     float:left;
     display:inline;  
 }
+
+#networkTree .portBckgIcon
+{
+    opacity: 0.3;
+    display: initial;    
+    float: inline-start;
+}
+
 #networkTree
 {
     margin-left: 16px;
@@ -839,7 +849,7 @@ height: 50px;
 {
     display: block;
     position: absolute;
-    margin-left: 156px;
+    margin-left: 170px;
     top: -3px;
     font-size: large;
     left: -15px;
diff --git a/front/network.php b/front/network.php
index 0eb7e451..7089acf4 100755
--- a/front/network.php
+++ b/front/network.php
@@ -644,9 +644,13 @@
       renderNode:  nodeData =>  { 
         var fontSize = "font-size:"+emSize+"em;";
 
+        (!emptyArr.includes(nodeData.data.port )) ? port =  nodeData.data.port : port = "";
+
+        (port == "" || port == 0 ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
+
         // Build HTML for individual nodes in the network diagram
         deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ?  "<div class='netIcon ' ><i class='fa fa-"+nodeData.data.icon +"'></i></div>"    : "";
-        devicePort = (!emptyArr.includes(nodeData.data.port )) ?  "<div class='netPort ' style=width:"+emSize*2.5+"em; >"+nodeData.data.port +"</div>" : "";
+        devicePort = `<div class='netPort ' style="width:${emSize*2.7}em;height:${emSize*2.7}em" >${port}</div> <div class="portBckgIcon" style="margin-left:-${emSize*2.5}em;">${portBckgIcon}</div>`;
         collapseExpandIcon = nodeData.data.hiddenChildren ?  "square-plus" :"square-minus";
         collapseExpandHtml = (nodeData.data.hasChildren) ?  "<div class='netCollapse' style='font-size:"+emSize*2.5+"em;' data-mytreepath='"+nodeData.data.path+"' data-mytreemac='"+nodeData.data.mac+"'><i class='fa fa-"+ collapseExpandIcon +" pointer'></i></div>"    : "";
         statusCss = " netStatus-" + nodeData.data.status;