network tree port/wifi icons

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
 

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;

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;