Network diagram #278 work

front/css/pialert.css

@@ -773,6 +773,12 @@ height: 50px;
     margin: 2px;    
     position: absolute;
 }
+#networkTree .netPort
+{
+    width: 8px;;
+    float:left;
+    display:inline;  
+}
 #networkTree
 {
     margin-left: 16px;

front/devices.php

@@ -192,8 +192,8 @@
   var tableRows       = 10;
   var tableOrder      = [[3,'desc'], [0,'asc']];
   
-  var columnsStr = '[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17]';
-  var tableColumnOrder = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17] ; 
+  var columnsStr = '[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]';
+  var tableColumnOrder = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18]; 
   var tableColumnVisible = tableColumnOrder;
 
   // Read parameters & Initialize components

front/maintenance.php

@@ -276,6 +276,7 @@ $db->close();
                                 <option value="15"><?= lang('Device_TableHead_Connected_Devices');?></option>
                                 <option value="16"><?= lang('Device_TableHead_Location');?></option>
                                 <option value="17"><?= lang('Device_TableHead_Vendor');?></option>
+                                <option value="18"><?= lang('Device_TableHead_Port');?></option>
                               </select>
                               <span class="input-group-addon"><i title="<?= lang('Gen_Save');?>" class="fa fa-save  pointer" onclick="saveSelectedColumns();"></i></span>   
                             </div>

front/network.php

@@ -267,7 +267,7 @@
     //             /          \
     //   Smart TV (leaf)      Switch 2 (node (for the PC) and leaf (for Switch 1))
     //                          \
-    //                          PC (leaf)
+    //                          PC (leaf) <------- leafs are not included in this SQL query
     
     $sql = "SELECT node_name, node_mac, online, node_type, node_ports_count, parent_mac, node_icon
             FROM 
@@ -465,7 +465,8 @@
                                                               "parentMac":item[14], 
                                                               "rowid":item[13], 
                                                               "status":item[10],
-                                                              "childrenQty":item[15]
+                                                              "childrenQty":item[15],
+                                                              "port":item[18]                                                              
                                                               }})
 
       setCache('devicesListNew', JSON.stringify(devicesListnew))
@@ -541,6 +542,7 @@
       name: node.name,      
       path: path,
       mac: node.mac,
+      port: node.port,
       id: node.mac,
       parentMac: node.parentMac,
       icon: node.icon,
@@ -628,7 +630,9 @@
       renderNode:  nodeData =>  { 
         var fontSize = "font-size:"+emSize+"em;";
 
+        // 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 ' >"+nodeData.data.port +"</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;
@@ -648,7 +652,7 @@
                                  border-radius:5px;'\
                           >\
                           <div class='netNodeText '>\
-                            <strong>" + deviceIcon +
+                            <strong>" + devicePort + deviceIcon +
                               "<span class='spanNetworkTree anonymizeDev'>"+nodeData.data.name+"</span>\
                             </strong>"
                             +collapseExpandHtml+ 

front/php/server/devices.php

@@ -602,7 +602,8 @@ function getDevicesList() {
     array("dev_Network_Node_MAC_ADDR", 14, 14),
     array("connected_devices", 15, 15),
     array("dev_Location", 16, 16),
-    array("dev_Vendor", 17, 17)           
+    array("dev_Vendor", 17, 17),           
+    array("dev_Network_Node_port", 18, 18)           
   );
 
   if($forceDefaultOrder == FALSE) 
@@ -668,7 +669,8 @@ function getDevicesList() {
                             handleNull($row['dev_Network_Node_MAC_ADDR']),
                             handleNull($row['connected_devices']),
                             handleNull($row['dev_Location']), 
-                            handleNull($row['dev_Vendor'])                            
+                            handleNull($row['dev_Vendor']),                            
+                            handleNull($row['dev_Network_Node_port'])                            
                           );
 
     $newOrder = array();

front/php/templates/language/en_us.php

@@ -80,6 +80,7 @@ $lang['en_us'] = array(
 'Device_TableHead_Connected_Devices' => 'Connected Devices',
 'Device_TableHead_Location' => 'Location',
 'Device_TableHead_Vendor' => 'Vendor',
+'Device_TableHead_Port' => 'Port',
 'Device_TableHead_Favorite' => 'Favorite',
 'Device_TableHead_Group' => 'Group',
 'Device_TableHead_FirstSession' => 'First Session',