Network tree 0.1

back/pialert.py

@@ -3054,17 +3054,20 @@ def isNewVersion():
         buildTimestamp = int(f.read().strip())
         f.close() 
 
-        url = requests.get("https://api.github.com/repos/jokob-sk/Pi.Alert/releases")
+        try:
-        text = url.text
+            url = requests.get("https://api.github.com/repos/jokob-sk/Pi.Alert/releases")
-
+            text = url.text
-        data = json.loads(text)
+            data = json.loads(text)
+        except requests.exceptions.ConnectionError as e:
+            file_print("    Couldn't check for new release.") 
+            data = ""
 
         # make sure we received a valid response and not an API rate limit exceeded message
         if len(data) > 0 and "published_at" in data[0]:        
-        
-            dateTimeStr = data[0]["published_at"]
 
-            realeaseTimestamp = int(datetime.datetime.strptime(dateTimeStr, '%Y-%m-%dT%H:%M:%SZ').strftime('%s'))
+            dateTimeStr = data[0]["published_at"]            
+
+            realeaseTimestamp = int(datetime.datetime.strptime(dateTimeStr, '%Y-%m-%dT%H:%M:%SZ').strftime('%s'))            
 
             if realeaseTimestamp > buildTimestamp + 600:        
                 file_print("    New version of the container available!")

front/css/pialert.css

@@ -571,8 +571,8 @@
     display: table-cell;
     text-align: center; 
     padding: 10px; 
-    /* min-width: 180px;  */
+    min-width: 180px; 
-    width: 25%; 
+    width: 20%; 
     vertical-align: middle;
 }
 .db_tools_table_cell_b {
@@ -720,42 +720,75 @@ height: 50px;
     font-size: large;
 }
 
-#columnsSelectNew li
-{
-    list-style-type: none;
-    padding: 1px;
-}
-
 .pointer
 {
     cursor:pointer;
 }
-.mainDrgLi
+.db_info_table_row .select2-container--default .select2-selection--multiple .select2-selection__choice
 {
-    padding: 3px;
+    background-color:#258744;
-    text-align: start;
-    width: 100%;    
 }
-.drgLiLeft i
+.db_info_table_row .select2-container--default .select2-selection--multiple
 {
-    width:25px;
+    background-color:#606060;
-}
-.drgLiLeft
-{
-    width:92%;
-    float: left;
-}
-.drgLiRight
-{
-    width:5%;    
 }
 
-.fullwidth
+.select2-container .select2-dropdown
 {
-    width:100%
+    background-color:#606060;
 }
 
-.columnsOrder
+#networkTree .box
 {
-    display:block;
+    padding:2px;
-}
+    margin:2px;
+}
+#networkTree .netNodeText
+{
+    top: 2px;
+    margin: 2px;    
+    position: absolute;
+}
+#networkTree
+{
+    margin-left: 16px;
+    /* border: solid;
+    border-color:#606060;     */
+    position: relative;
+    font-size: 0.75em;
+}
+#networkTree .netIcon
+{
+    width: 25px;;
+    float:left;
+    display:inline;    
+}
+#networkTree .netCollapse
+{
+    display: block;
+    position: absolute;
+    margin-left: 156px;
+    top: -3px;
+    font-size: large;
+    left: -15px;
+}
+#networkTree .highlightedNode
+{
+    border: solid;
+    border-color:cyan;
+}
+#networkTree .netStatus-Off-line i
+{
+    color: #dd4b39;
+}
+
+.spanNetworkTree {
+    display: inline-block;
+    width: 120px;
+    white-space: nowrap;
+    overflow: hidden !important;
+    text-overflow: ellipsis;
+}
+
+
+  

front/devices.php

@@ -192,8 +192,9 @@
   var parTableOrder   = 'Front_Devices_Order';
   var tableRows       = 10;
   var tableOrder      = [[3,'desc'], [0,'asc']];
-  var tableColumnVisible = [0,1,2,3,4,5,6,7,8,9,10,12,13]
+  var tableColumnVisible = [0,1,2,3,4,5,6,7,8,9,10,12,13,14];
-  var tableColumnOrder = [0,1,2,3,4,5,6,7,8,9,10,12,13]  
+  var columnsStr = '[0,1,2,3,4,5,6,7,8,9,10,12,13,14]';
+  var tableColumnOrder = [0,1,2,3,4,5,6,7,8,9,10,12,13,14] ; 
 
   // Read parameters & Initialize components
   main();
@@ -203,12 +204,12 @@
 function main () {
 
   // get visible columns
-  $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue=[0,1,2,3,4,5,6,7,8,9,10,11,12,13]&parameter=Front_Devices_Columns_Visible', function(data) {
+  $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue='+columnsStr+'&parameter=Front_Devices_Columns_Visible', function(data) {
     
     tableColumnVisible = numberArrayFromString(data);
 
     // get the custom order specified by the user
-    $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue=[0,1,2,3,4,5,6,7,8,9,10,11,12,13]&parameter=Front_Devices_Columns_Order', function(data) {
+    $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue='+columnsStr+'&parameter=Front_Devices_Columns_Order', function(data) {
     
       tableColumnOrder = numberArrayFromString(data);
 
@@ -226,7 +227,9 @@ function main () {
                                   '<?php echo lang('Device_TableHead_Status');?>',
                                   '<?php echo lang('Device_TableHead_MAC_full');?>',
                                   '<?php echo lang('Device_TableHead_LastIPOrder');?>',
-                                  '<?php echo lang('Device_TableHead_Rowid');?>'];
+                                  '<?php echo lang('Device_TableHead_Rowid');?>',
+                                  '<?php echo lang('Device_TableHead_Parent_MAC');?>'
+                                ];
 
       html = '';
                                   
@@ -423,18 +426,26 @@ function initializeDatatable () {
 // -----------------------------------------------------------------------------
 // Gets a JSON list of rowID and mac from the displayed table in the UI
 function getDevicesFromTable(table)
-{
+{  
-  // rowIDs = table.column(12, { 'search': 'applied' }).data().toArray()  // rowID is in hidden column 12
+  rowIDs = table.column(mapIndx(13), { 'search': 'applied' }).data().toArray()  //   
-  rowIDs = table.column(mapIndx(13), { 'search': 'applied' }).data().toArray()  // rowID is in hidden column 12
+  rowMACs = table.column(mapIndx(11), { 'search': 'applied' }).data().toArray() // 
-  // rowMACs = table.column(10, { 'search': 'applied' }).data().toArray() // MAC is in hidden column 10
-  rowMACs = table.column(mapIndx(11), { 'search': 'applied' }).data().toArray() // MAC is in hidden column 10
   rowNames = table.column(mapIndx(0), { 'search': 'applied' }).data().toArray() // 
   rowTypes = table.column(mapIndx(2), { 'search': 'applied' }).data().toArray() // 
+  rowIcons = table.column(mapIndx(3), { 'search': 'applied' }).data().toArray() // 
+  rowParentMAC = table.column(mapIndx(14), { 'search': 'applied' }).data().toArray() // 
+  rowStatus = table.column(mapIndx(10), { 'search': 'applied' }).data().toArray() // 
 
   result = []
 
   rowIDs.map(function(rowID, index){
-    result.push({"rowid": rowID, "mac":rowMACs[index], "name" : rowNames[index],"type" : rowTypes[index] })
+    result.push({
+                  "rowid": rowID, 
+                  "mac":rowMACs[index], 
+                  "name" : rowNames[index],
+                  "type" : rowTypes[index],
+                  "icon" : rowIcons[index],
+                  "parentMac" : rowParentMAC[index],
+                  "status" : rowStatus[index] })
   })
 
   return JSON.stringify (result)

front/js/pialert_common.js

@@ -260,6 +260,16 @@ function saveData(functionName, id, value) {
 }
 
 
+// -----------------------------------------------------------------------------
+// remove an item from an array
+function removeItemFromArray(arr, value) {
+  var index = arr.indexOf(value);
+  if (index > -1) {
+    arr.splice(index, 1);
+  }
+  return arr;
+}
+
 // -----------------------------------------------------------------------------
 function sleep(milliseconds) {
   const date = Date.now();

front/maintenance.php

@@ -202,8 +202,8 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a" style="text-align:center;">
                             <form method="post" action="maintenance.php">
-                              <div style="">
+                              <div style="display: inline-block;">
-                                  <select name="langselector" id="langselector" class="fullwidth form-control bg-green"  style="margin-bottom:5px;">
+                                  <select name="langselector" id="langselector" class="form-control bg-green"  style="width:160px; margin-bottom:5px;">
                                       <option value=""><?php echo lang('Maintenance_lang_selector_empty');?></option>
                                       <option value="en_us"><?php echo lang('Maintenance_lang_en_us');?></option>
                                       <option value="de_de"><?php echo lang('Maintenance_lang_de_de');?></option>
@@ -219,8 +219,8 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a" style="text-align: center;">
                             <form method="post" action="maintenance.php">
-                            <div style=" text-align: center;">
+                            <div style="display: inline-block; text-align: center;">
-                                <select name="skinselector" class="form-control bg-green" style="margin-bottom:5px;">
+                                <select name="skinselector" class="form-control bg-green" style="width:160px; margin-bottom:5px;">
                                     <option value=""><?php echo lang('Maintenance_themeselector_empty');?></option>
                                     <option value="skin-black-light">black light</option>
                                     <option value="skin-black">black</option>
@@ -235,7 +235,7 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                                     <option value="skin-yellow-light">yellow light</option>
                                     <option value="skin-yellow">yellow</option>
                                 </select></div>
-                            <div style="display: block;"><input type="submit" name="skinselector_set" value="<?php echo lang('Maintenance_themeselector_apply');?>" class="fullwidth btn bg-green">
+                            <div style="display: block;"><input type="submit" name="skinselector_set" value="<?php echo lang('Maintenance_themeselector_apply');?>" class="btn bg-green" style="width:160px;">
                                 <?php // echo $pia_skin_test; ?>
                             </div>
                             </form>
@@ -246,7 +246,7 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                     </div>
                     <div class="db_info_table_row">
                         <div class="db_tools_table_cell_a">
-                            <button type="button" class="btn bg-green dbtools-button fullwidth" id="btnToggleDarkmode" onclick="askToggleDarkmode()"><?php echo lang('Maintenance_Tool_darkmode');?></button>
+                            <button type="button" class="btn bg-green dbtools-button" id="btnToggleDarkmode" onclick="askToggleDarkmode()"><?php echo lang('Maintenance_Tool_darkmode');?></button>
                         </div>
                         <div class="db_tools_table_cell_b"><?php echo lang('Maintenance_Tool_darkmode_text');?></div>
                     </div>   
@@ -269,6 +269,7 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                                 <option value="11"><?php echo lang('Device_TableHead_MAC_full');?></option>                            
                                 <option value="12"><?php echo lang('Device_TableHead_LastIPOrder');?></option>
                                 <option value="13"><?php echo lang('Device_TableHead_Rowid');?></option>
+                                <option value="14"><?php echo lang('Device_TableHead_Parent_MAC');?></option>
                               </select>
                               <span class="input-group-addon"><i title="<?php echo lang('DevDetail_GoToNetworkNode');?>" class="fa fa-save  pointer" onclick="saveSelectedColumns();"></i></span>   
                             </div>
@@ -278,24 +279,6 @@ if (isset($_POST['submit']) && submit && isset($_POST['skinselector_set'])) {
                         
                         <div class="db_tools_table_cell_b"><?php echo lang('Maintenance_Tool_displayed_columns_text');?></div>
                     </div>  
-
-
-                    <div class="db_info_table_row">
-                      <div class="db_tools_table_cell_a">
-                          <div class="form-group" > 
-                            <div class="" > 
-                              <ul id="columnsSelectNew" class="" multiple=""    tabindex="-1" aria-hidden="true">
-                              </ul>
-                              <span class="input-group-addon"><i title="<?php echo lang('Gen_Save');?>" class="fa fa-save  pointer" onclick="saveSelectedColumns();"></i></span>   
-                            </div>
-                          </div>
-
-                        </div>
-                        <div class="db_tools_table_cell_b"><?php echo lang('Maintenance_Tool_order_columns_text');?></div>
-                        </div>
-                        
-                        
-                    
                     
                     
                 </div>
@@ -778,28 +761,13 @@ function scrollDown()
 // Manage displayed columns
 // --------------------------------------------------------
 
-var columnLabels = [    '<?php echo lang('Device_TableHead_Name');?>',
-                        '<?php echo lang('Device_TableHead_Owner');?>',
-                        '<?php echo lang('Device_TableHead_Type');?>',
-                        '<?php echo lang('Device_TableHead_Icon');?>',
-                        '<?php echo lang('Device_TableHead_Favorite');?>',
-                        '<?php echo lang('Device_TableHead_Group');?>',
-                        '<?php echo lang('Device_TableHead_FirstSession');?>',
-                        '<?php echo lang('Device_TableHead_LastSession');?>',
-                        '<?php echo lang('Device_TableHead_LastIP');?>',
-                        '<?php echo lang('Device_TableHead_MAC');?>',
-                        '<?php echo lang('Device_TableHead_Status');?>',                            
-                        '<?php echo lang('Device_TableHead_MAC_full');?>',                            
-                        '<?php echo lang('Device_TableHead_LastIPOrder');?>',
-                        '<?php echo lang('Device_TableHead_Rowid');?>'];
-
 function saveSelectedColumns () { 
   $.get('php/server/parameters.php?action=set&expireMinutes=525600&value=['+ $('#columnsSelect').val().toString() +']&parameter=Front_Devices_Columns_Visible', function(data) {
     // save full order of all columns to simplify mapping later on
     
     colDisplayed = $('#columnsSelect').val();
 
-    colDefaultOrder = ['0','1','2','3','4','5','6','7','8','9','10','12','13'];
+    colDefaultOrder = ['0','1','2','3','4','5','6','7','8','9','10','12','13','14'];
 
     colNewOrder = colDisplayed;
 
@@ -823,12 +791,10 @@ function saveSelectedColumns () {
 
 // --------------------------------------------------------
 function initializeSelectedColumns () { 
-  $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue=[0,1,2,3,4,5,6,7,8,9,10,12,13]&parameter=Front_Devices_Columns_Visible', function(data) {
+  $.get('php/server/parameters.php?action=get&expireMinutes=525600&defaultValue=[0,1,2,3,4,5,6,7,8,9,10,12,13,14]&parameter=Front_Devices_Columns_Visible', function(data) {
 
     tableColumnShow = numberArrayFromString(data);
 
-    listItems = ''
-
     for(i=0; i < tableColumnShow.length; i++)
     {
       // create the option and append to Select2
@@ -836,22 +802,9 @@ function initializeSelectedColumns () {
       
       $("#columnsSelect").append(option).trigger('change');
 
-
+      $(option).attr('eee','eee')
-      listItems += '<li value="'+tableColumnShow[i]+'" class="ui-state-default pointer">\
+    }
-                                  <div class="mainDrgLi  btn-sm btn bg-olive ">\
+    
-                                    <div class="drgLiLeft">  \
-                                      <i title="<?php echo lang('Maintenance_Tool_drag_me');?>" class="fa fa-grip  pointer" ></i>\
-                                      '+columnLabels[tableColumnShow[i]]+'\
-                                    </div>\
-                                    <div class="drgLiRight">\
-                                      <input class="flat-red" title="<?php echo lang('Maintenance_Tool_check_visible');?>" type="checkbox"  checked >\
-                                    </div>\
-                                  </div>\
-                                </li>';
-    }    
-
-    $("#columnsSelectNew").html(listItems);
-
   });
 } 
 
@@ -861,26 +814,20 @@ function initializeSelectedColumns () {
 $(function () {    
     selectEl = $('.select2').select2();
    
-    console.log('------------')
     selectEl.next().children().children().children().sortable({
       containment: 'parent', stop: function (event, ui) {
         ui.item.parent().children('[title]').each(function () {
           var title = $(this).attr('title');
-          console.log(title)
           var original = $( 'option:contains(' + title + ')', selectEl ).first();
           original.detach();
           selectEl.append(original)
         });
-        // selectEl.change();
+        selectEl.change();
       }
     });
 });
 
 
-$( function() {
-    $( "#columnsSelectNew" ).sortable();
-  } );
-
 
 // --------------------------------------------------------
 // General initialization

front/network.php

@@ -24,10 +24,13 @@
     </h1>
   </section>
 
+
+
+  <div id="networkTree" ></div>
+
   <!-- Main content ---------------------------------------------------------- -->
   <section class="content">
     <?php
-
       // Create top-level node (network devices) tabs 
       function createDeviceTabs($node_mac, $node_name, $node_status, $node_type, $node_ports_count, $icon, $activetab) {        
 
@@ -54,7 +57,7 @@
         
         $idFromMac = str_replace(":", "_", $node_mac);
         $str_tab_header = '<li class="'.$activetab.'">
-                              <a href="#'.$idFromMac.'" id="'.$idFromMac.'_id" data-toggle="tab" >' // _id is added so it doesn't conflict with AdminLTE tab behavior
+                              <a href="#'.$idFromMac.'" data-mytabmac="'.$node_mac.'" id="'.$idFromMac.'_id" data-toggle="tab" >' // _id is added so it doesn't conflict with AdminLTE tab behavior
                                 .$icon.$node_name.' ' .$str_port.$node_badge.
                               '</a>
                           </li>';
@@ -312,7 +315,7 @@
     echo '<div class="nav-tabs-custom" style="margin-bottom: 0px;">
     <ul class="nav nav-tabs">';
 
-    $activetab='active';                    
+    $activetab='active';
     foreach ($tableData as $row) {                            
         createDeviceTabs( $row['node_mac'], 
                           $row['node_name'], 
@@ -433,26 +436,230 @@
 
 
   ?>
-
+    
     <!-- /.content -->
   </div>
   <!-- /.content-wrapper -->
 
 <!-- ----------------------------------------------------------------------- -->
+
+
+
 <?php
   require 'php/templates/footer.php';
 ?>
 
+<script src="lib/AdminLTE/index.js"></script>
+<script src="lib/AdminLTE/require.js"></script>
+<script src="js/pialert_common.js"></script>
 
-<script defer>
+
+<script>
+  // ---------------------------------------------------------------------------
+  // Tree functionality
+  // ---------------------------------------------------------------------------
+  // ---------------------------------------------------------------------------  
+  function getDevicesList()
+  {
+    // Read cache
+    devicesList = getCache('devicesList');
+    
+    if (devicesList != '') {
+        devicesList = JSON.parse (devicesList);
+    } else {
+        devicesList = [];
+    }
+    return devicesList;
+  }
+
+  
+  // ---------------------------------------------------------------------------
+  var leafNodesCount = 0;
+  var treeLoadedAlready = false;
+  var hiddenMacs = [];
+
+  function getChildren(node, list, path)
+  {
+    var children = [];
+
+    // loop thru all items and find childern...
+    for(var i in list)
+    {
+      //... of teh current node
+      if(list[i].parentMac == node.mac && !hiddenMacs.includes(list[i].parentMac))
+      {        
+        // and process them 
+        children.push(getChildren(list[i], list, path + ((path == "") ? "" : '|') + list[i].parentMac, hiddenMacs))
+      }
+    }
+
+    // note the total number of leaf nodes to calculate the font scaling
+    if(!treeLoadedAlready && children.length == 0) 
+    { 
+      leafNodesCount++ 
+    }
+    
+    return { 
+      name: node.name,      
+      path: path,
+      mac: node.mac,
+      parentMac: node.parentMac,
+      icon: node.icon,
+      type: node.type,
+      status: node.status,
+      hasChildren: children.length > 0 || hiddenMacs.includes(node.mac),
+      hiddenChildren: hiddenMacs.includes(node.mac),
+      qty: children.length,
+      children:  children
+    };
+        
+  }
 
   // ---------------------------------------------------------------------------
-  // events on tab change
+  list = getDevicesList();
+  function getHierarchy()
+  {    
+    for(i in list)
+    {      
+      if(list[i].mac == 'Internet')
+      { 
+        return (getChildren(list[i], list, ''))
+        break;
+      }
+    }
+  }
+
+
+  // ---------------------------------------------------------------------------
+  function toggleSubTree(parentMac, treePath)
+  {
+    treePath = treePath.split('|')
+
+    if(!hiddenMacs.includes(parentMac))
+    {
+      hiddenMacs.push(parentMac)
+    }
+    else
+    {
+      removeItemFromArray(hiddenMacs, parentMac)
+    }
+
+    list = getDevicesList();
+
+    // updatedTree = myHierarchy;
+    updatedTree = getHierarchy()
+
+    myTree.refresh(updatedTree);
+
+    // re-attach any onclick events
+    attachTreeEvents();   
+  }
+
+  // --------------------------------------------------------------------------- 
+  function attachTreeEvents()
+  {
+    //  toggle subtree functionality
+    $("div[data-mytreemac]").each(function(){
+        $(this).attr('onclick', 'toggleSubTree("'+$(this).attr('data-mytreemac')+'","'+ $(this).attr('data-mytreepath')+'")')
+    }); 
+  }
+
+  // --------------------------------------------------------------------------- 
+  var myTree;
+  var treeAreaHeight = 600;
+  function initTree(myHierarchy)
+  {    
+    // to prevent font scaling everytime we collapse/expand a subtree
+    treeLoadedAlready = true;
+
+    $("#networkTree").attr('style', "height:"+treeAreaHeight+"px; width:1070px")
+
+    myTree = Treeviz.create({
+      htmlId: "networkTree",
+      
+      renderNode:  nodeData =>  { 
+
+        // calculate the font size of the leaf nodes to fit everything into the tree area
+        var fontSize = (nodeData.data.hasChildren) ? "" : "font-size:"+((600/(20*leafNodesCount)).toFixed(2))+"em;";
+
+        deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ?  "<div class='netIcon '><i class='fa fa-"+nodeData.data.icon +"'></i></div>"    : "";
+        collapseExpandIcon = nodeData.data.hiddenChildren ?  "square-plus" :"square-minus";
+        collapseExpandHtml = (nodeData.data.hasChildren) ?  "<div class='netCollapse' data-mytreepath='"+nodeData.data.path+"' data-mytreemac='"+nodeData.data.mac+"'><i class='fa fa-"+ collapseExpandIcon +" pointer'></i></div>"    : "";
+        statusCss = " netStatus-" + nodeData.data.status;
+
+        selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac')
+
+        highlightedCss = nodeData.data.mac == selectedNodeMac ? " highlightedNode" : "";
+
+        return result = "<div class='box "+statusCss+" "+highlightedCss+"'  data-mytreemacmain='"+nodeData.data.mac+"' \
+                          style='height:"+nodeData.settings.nodeHeight+"px;\
+                                 width:180px;\
+                                 display:flex;\
+                                 flex-direction:column;\
+                                 justify-content:center;\
+                                 " + fontSize + "\
+                                 align-items:center;\
+                                 background-color:" +nodeData.data.color+";\
+                                 border-radius:5px;'\
+                          >\
+                          <div class='netNodeText'>\
+                            <strong>" + deviceIcon +
+                              "<span class='spanNetworkTree'>"+nodeData.data.name+"</span>\
+                            </strong>"
+                            +collapseExpandHtml+ 
+                          "</div></div>";
+        },
+
+      onNodeClick:  nodeData =>  { 
+          // console.log(this)  
+        },
+      mainAxisNodeSpacing: 'auto',
+      secondaryAxisNodeSpacing: 0.3,
+      nodeHeight: '25',    
+      marginTop: '5',
+      hasZoom: false,
+      hasPan: false,
+      marginLeft: '15',
+      idKey: "name",
+      hasFlatData: false,
+      linkWidth: (nodeData) => 3,
+      relationnalField: "children",
+      });
+
+      myTree.refresh(myHierarchy);
+      
+    }
+
+  // ---------------------------------------------------------------------------
+  // Tabs functionality
+  // ---------------------------------------------------------------------------
+  // Register events on tab change
+  
   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   
 
-    initButtons();
+    // init parent node
+    var currentNodeMac = $(".tab-content .active td[data-mynodemac]").attr('data-mynodemac');      
+
+    initButtons(currentNodeMac);
+
+    // change highlighted node in the tree
+    selNode = $("#networkTree .highlightedNode")[0]
+
+    // console.log(selNode)
+
+    if(selNode)
+    {
+      $(selNode).attr('class',  $(selNode).attr('class').replace('highlightedNode'))
+    }
+
+    newSelNode = $("#networkTree div[data-mytreemacmain='"+currentNodeMac+"']")[0]
+    
+    $(newSelNode).attr('class',  $(newSelNode).attr('class') + ' highlightedNode')
+    
+
   });
 
+
   // ---------------------------------------------------------------------------
   function initTab()
   {
@@ -483,15 +690,14 @@
     $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
       setCache(key, $(e.target).attr('id'))
     });
+
+  
     
   }
 
   // ---------------------------------------------------------------------------
-  function initButtons()
+  function initButtons(currentNodeMac)
   {
-    // init parent node
-    var currentNodeMac = $(".tab-content .active td[data-mynodemac]").attr('data-mynodemac');
-
     // init the Assign buttons
     $('#unassignedDevices  button[data-myleafmac]').each(function(){
       $(this).attr('onclick', 'updateLeaf("'+$(this).attr('data-myleafmac')+'","'+currentNodeMac+'")')
@@ -510,7 +716,18 @@
     setTimeout("location.reload();", 1000); // refresh page after 1s
   }
 
-  // init selected (first) tab
-  initTab();
 
-</script>
+  // init selected (first) tab
+  initTab();  
+
+  // create tree
+  initTree(getHierarchy());
+
+  // attach on-click events
+  attachTreeEvents();
+
+
+</script>
+
+
+

front/php/server/devices.php

@@ -584,7 +584,8 @@ function getDevicesList() {
     array("dev_Status", 10, -1),            
     array("dev_MAC_full", 11, -1),          
     array("dev_LastIP_orderable", 12, -1),  
-    array("rowid", 13, -1)                  
+    array("rowid", 13, -1),            
+    array("dev_Network_Node_MAC_ADDR", 14, -1)                  
   );
 
   // get device columns order
@@ -632,7 +633,8 @@ function getDevicesList() {
                             $row['dev_Status'],
                             $row['dev_MAC'], // MAC (hidden)
                             formatIPlong ($row['dev_LastIP']), // IP orderable
-                            $row['rowid'] // Rowid (hidden)      
+                            $row['rowid'], // Rowid (hidden)      
+                            $row['dev_Network_Node_MAC_ADDR'] // 
                             );
 
     $newOrder = array();

front/php/templates/language/en_us.php

@@ -68,6 +68,7 @@ $lang['en_us'] = array(
 'Device_TableHead_Type' => 'Type',
 'Device_TableHead_Icon' => 'Icon',
 'Device_TableHead_RowID' => 'Row ID',
+'Device_TableHead_Parent_MAC' => 'Parent node MAC',
 'Device_TableHead_Favorite' => 'Favorite',
 'Device_TableHead_Group' => 'Group',
 'Device_TableHead_FirstSession' => 'First Session',
@@ -76,7 +77,6 @@ $lang['en_us'] = array(
 'Device_TableHead_MAC' => 'MAC',
 'Device_TableHead_MAC_full' => 'Full MAC',
 'Device_TableHead_LastIPOrder' => 'Last IP Order',
-'Device_TableHead_Rowid' => 'Rowid',
 'Device_TableHead_Status' => 'Status',
 'Device_Searchbox' => 'Search',
 'Device_Tablelenght' => 'Show _MENU_ entries',
@@ -255,8 +255,8 @@ $lang['en_us'] = array(
 'Maintenance_Tools_Tab_Tools' => 'Tools',
 'Maintenance_Tools_Tab_BackupRestore' => 'Backup / Restore',
 'Maintenance_Tools_Tab_Logging' => 'Logs',
-'Maintenance_Tool_displayed_columns_text' => 'Which columns should be displayed in the <a href="devices.php"><b> <i class="fa fa-laptop"></i> Devices</b></a> page.',
+'Maintenance_Tool_displayed_columns_text' => 'Change the order of the columns in the <a href="devices.php"><b> <i class="fa fa-laptop"></i> Devices</b></a> page. (The drag-and-drop is a bit clunky, but for now workable, not a common task).',
-'Maintenance_Tool_order_columns_text' => 'Change the order of the columns in the <a href="devices.php"><b> <i class="fa fa-laptop"></i> Devices</b></a> page.',
+'Maintenance_Tool_order_columns_text' => '',
 'Maintenance_Tool_darkmode' => 'Toggle Modes (Dark/Light)',
 'Maintenance_Tool_drag_me' => 'Drag me to reorder columns.',
 'Maintenance_Tool_check_visible' => 'Uncheck to hide column.',