treeviz flatdata experiment + better invalid TZ handling

front/css/app.css

@@ -1529,6 +1529,14 @@ input[readonly] {
     flex-direction:column;
     justify-content:center;
 }
+.networkHelpIcon
+{
+  padding: 5px;
+  margin-left: 5px;
+  top: 55px;
+  position: absolute;
+  z-index:5;
+}
 #networkTree .netNodeText
 { 
     position: absolute;
@@ -1589,7 +1597,7 @@ input[readonly] {
 
 .spanNetworkTree {
     display: inline-block;
-    width: 120px;
+    width: 135px;
     white-space: nowrap;
     overflow: hidden !important;
     text-overflow: ellipsis;
@@ -1635,6 +1643,10 @@ input[readonly] {
     {
         display: none;
     }
+    .dev-detail-tab-name
+    {
+        display: none;
+    }
 }
 
 /* ----------------------------------------------------------------- */

front/deviceDetails.php

@@ -61,12 +61,54 @@
         <!-- <div class="box-transparent"> -->
           <div id="navDevice" class="nav-tabs-custom">
             <ul class="nav nav-tabs" style="font-size:16px;">
-              <li> <a id="tabDetails"  href="#panDetails"  data-toggle="tab"> <?= lang('DevDetail_Tab_Details');?>  </a></li>
+              <li> 
-              <li> <a id="tabTools"    href="#panTools"    data-toggle="tab"> <?= lang('DevDetail_Tab_Tools');?>    </a></li>
+                <a id="tabDetails"  href="#panDetails"  data-toggle="tab"> 
-              <li> <a id="tabSessions" href="#panSessions" data-toggle="tab"> <?= lang('DevDetail_Tab_Sessions');?> </a></li>
+                  <i class="fa fa-info-circle"></i> 
-              <li> <a id="tabPresence" href="#panPresence" data-toggle="tab"> <?= lang('DevDetail_Tab_Presence');?> </a></li>
+                    <span class="dev-detail-tab-name"> 
-              <li> <a id="tabEvents"   href="#panEvents"   data-toggle="tab"> <?= lang('DevDetail_Tab_Events');?>   </a></li>              
+                      <?= lang('DevDetail_Tab_Details');?>  
-              <li> <a id="tabPlugins"  href="#panPlugins"  data-toggle="tab"> <?= lang('DevDetail_Tab_Plugins');?>  </a></li>
+                    </span>
+                </a>
+                </li>
+                <li> 
+                <a id="tabTools"    href="#panTools"    data-toggle="tab"> 
+                  <i class="fa fa-screwdriver-wrench"></i> 
+                    <span class="dev-detail-tab-name">
+                      <?= lang('DevDetail_Tab_Tools');?>    
+                    </span>
+                </a>
+                </li>
+              <li> 
+                <a id="tabSessions" href="#panSessions" data-toggle="tab"> 
+                  <i class="fa fa-list-ol"></i> 
+                    <span class="dev-detail-tab-name">
+                      <?= lang('DevDetail_Tab_Sessions');?> 
+                    </span>
+                </a>
+                </li>
+              <li> 
+                <a id="tabPresence" href="#panPresence" data-toggle="tab"> 
+                  <i class="fa fa-calendar"></i> 
+                    <span class="dev-detail-tab-name"> 
+                      <?= lang('DevDetail_Tab_Presence');?> 
+                    </span>
+                </a>
+                </li>
+              <li> 
+                <a id="tabEvents"   href="#panEvents"   data-toggle="tab"> 
+                  <i class="fa fa-bolt"></i>  
+                    <span class="dev-detail-tab-name">
+                      <?= lang('DevDetail_Tab_Events');?>   
+                    </span>
+                </a>
+                </li>              
+              <li> 
+                <a id="tabPlugins"  href="#panPlugins"  data-toggle="tab"> 
+                  <i class="fa fa-plug"></i> 
+                    <span class="dev-detail-tab-name">
+                      <?= lang('DevDetail_Tab_Plugins');?>  
+                    </span>
+                </a>
+                </li>
 
               <div class="btn-group pull-right">
                 <button type="button" class="btn btn-default"  style="padding: 10px; min-width: 30px;"

front/devices.php

@@ -40,9 +40,9 @@
 
       <div class="row" id="DevicePresence">
           <div class="col-md-12">
-          <div class="box" id="clients">
+            <div class="box" id="clients">
               <div class="box-header ">
-                <h3 class="box-title"><?= lang('Device_Shortcut_OnlineChart');?> </h3> 
+                <h3 class="box-title col-md-12"><?= lang('Device_Shortcut_OnlineChart');?> </h3> 
               </div>
               <div class="box-body">
                 <div class="chart">
@@ -61,7 +61,7 @@
       <!-- Device Filters ------------------------------------------------------- -->
       <div class="box box-aqua hidden" id="columnFiltersWrap">
         <div class="box-header ">
-          <h3 class="box-title"><?= lang('Devices_Filters');?> </h3> 
+          <h3 class="box-title col-md-12"><?= lang('Devices_Filters');?> </h3> 
         </div>
         <!-- Placeholder ------------------------------------------------------- -->
          <div id="columnFilters" ></div>

front/network.php

@@ -464,9 +464,8 @@
   require 'php/templates/footer.php';
 ?>
 
-
+<script src="lib/treeviz/bundle.js"></script> 
-<script src="lib/treeviz/index.js"></script>
+<script src="lib/treeviz/bundle.js.map"></script> 
-<script src="lib/treeviz/require.js"></script>
 
 
 <script defer>
@@ -526,7 +525,6 @@
 
     // Init global variable
     deviceListGlobal = devicesListnew;
-
     
     // create tree
     initTree(getHierarchy());
@@ -538,378 +536,414 @@
 
 
 <script defer>
-  // ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
-  // Tree functionality
+// Tree functionality
-  // ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
-  
+
-  // ---------------------------------------------------------------------------
+// ---------------------------------------------------------------------------
+var leafNodesCount = 0;
+var visibleNodesCount = 0;
+var parentNodesCount = 0;
+var hiddenMacs = []; // hidden children
+var hiddenChildren = [];
+var deviceListGlobal = null; 
+
+
+
+
+// ---------------------------------------------------------------------------
+// Recursively get children nodes and build a tree
+function getChildren(node, list, path, visited = [])
+{
+    var children = [];
+
+    // Check for infinite recursion by seeing if the node has been visited before
+    if (visited.includes(node.mac.toLowerCase())) {
+        console.error("Infinite recursion detected at node:", node.mac);
+        write_notification("[ERROR] ⚠ Infinite recursion detected. You probably have assigned the Internet node to another children node or to itself. Please open a new issue on GitHub and describe how you did it.", 'interrupt')
+        return { error: "Infinite recursion detected", node: node.mac };
+    }
+
+    // Add current node to visited list
+    visited.push(node.mac.toLowerCase());
+
+    // Loop through all items to find children of the current node
+    for (var i in list) {
+        if (list[i].parentMac.toLowerCase() == node.mac.toLowerCase() && !hiddenMacs.includes(list[i].parentMac)) {   
+
+            visibleNodesCount++;
+
+            // Process children recursively, passing a copy of the visited list
+            children.push(getChildren(list[i], list, path + ((path == "") ? "" : '|') + list[i].parentMac, visited));
+        }
+    }
+
+    // Track leaf and parent node counts
+    if (children.length == 0) {
+        leafNodesCount++;
+    } else {
+        parentNodesCount++;
+    }
+
+    return { 
+        name: node.name,
+        path: path,
+        mac: node.mac,
+        port: node.port,
+        id: 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
+    };
+}
+
+// ---------------------------------------------------------------------------  
+function getHierarchy()
+{ 
+  for(i in deviceListGlobal)
+  {      
+    if(deviceListGlobal[i].mac == 'Internet')
+    { 
+      return (getChildren(deviceListGlobal[i], deviceListGlobal, ''))
+      break;
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+function getFlatData() {
+  var result = [];
   var leafNodesCount = 0;
-  var visibleNodesCount = 0;
   var parentNodesCount = 0;
-  var hiddenMacs = []; // hidden children
+  var visibleNodesCount = 0;
-  var hiddenChildren = [];
-  var deviceListGlobal = null; 
   
+  for (let node of deviceListGlobal) {
+    let path = "";
+    let childrenCount = 0;
 
-  
+    // count children of this node
-
+    for (let nodeTmp of deviceListGlobal) {
-  // ---------------------------------------------------------------------------
+        if (nodeTmp.parentMac === node.mac) {
-  // Recursively get children nodes and build a tree
+            childrenCount++;
-  function getChildren(node, list, path, visited = [])
+        }
-  {
-      var children = [];
-
-      // Check for infinite recursion by seeing if the node has been visited before
-      if (visited.includes(node.mac.toLowerCase())) {
-          console.error("Infinite recursion detected at node:", node.mac);
-          write_notification("[ERROR] ⚠ Infinite recursion detected. You probably have assigned the Internet node to another children node or to itself. Please open a new issue on GitHub and describe how you did it.", 'interrupt')
-          return { error: "Infinite recursion detected", node: node.mac };
-      }
-
-      // Add current node to visited list
-      visited.push(node.mac.toLowerCase());
-
-      // Loop through all items to find children of the current node
-      for (var i in list) {
-          if (list[i].parentMac.toLowerCase() == node.mac.toLowerCase() && !hiddenMacs.includes(list[i].parentMac)) {   
-
-              visibleNodesCount++;
-
-              // Process children recursively, passing a copy of the visited list
-              children.push(getChildren(list[i], list, path + ((path == "") ? "" : '|') + list[i].parentMac, visited));
-          }
-      }
-
-      // Track leaf and parent node counts
-      if (children.length == 0) {
-          leafNodesCount++;
-      } else {
-          parentNodesCount++;
-      }
-
-      return { 
-          name: node.name,
-          path: path,
-          mac: node.mac,
-          port: node.port,
-          id: 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
-      };
-  }
-
-
-  // ---------------------------------------------------------------------------
-  
-  function getHierarchy()
-  { 
-    for(i in deviceListGlobal)
-    {      
-      if(deviceListGlobal[i].mac == 'Internet')
-      { 
-        return (getChildren(deviceListGlobal[i], deviceListGlobal, ''))
-        break;
-      }
     }
-  }
-
-
-  // ---------------------------------------------------------------------------
-  function toggleSubTree(parentMac, treePath)
-  {
-    treePath = treePath.split('|')
-
-    if(!hiddenMacs.includes(parentMac))
-    {
-      hiddenMacs.push(parentMac)
-    }
-    else
-    {
-      removeItemFromArray(hiddenMacs, parentMac)
-    }
-
-    // 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')+'")')        
-    }); 
-  }
-
-  // --------------------------------------------------------------------------- 
-  // Handle network node click - select correct tab in the bottom table
-  function handleNodeClick(event)
-  {
-    // console.log(event.target.offsetParent.offsetParent)
-
-    const targetTabMAC = $(event.target.offsetParent.offsetParent).attr("data-mytreemacmain");    
-
-    var targetTab = $(`a[data-mytabmac="${targetTabMAC}"]`);
-  
-    // Simulate a click event on the target tab
-    targetTab.click();
-  }
-
-  // --------------------------------------------------------------------------- 
-  var myTree;
-  var visibleTreeArea = $(window).height()-155;
-  var nodeWidth = 160;
-  var emSize;
-  var nodeHeight;
-  var sizeCoefficient = 1
-
-  function initTree(myHierarchy)
-  {
-    console.log(myHierarchy)
-
-    // calculate the drawing area based on teh tree width and available screen size
-    var treeAreaHeight = visibleTreeArea > 800 ? 800 : visibleTreeArea;
-    let screenWidth = $('.content-header').width();
-    let treeWidth = (nodeWidth + 20) *  parentNodesCount;
-    let treeAreaWidth  =  screenWidth < treeWidth ? treeWidth : screenWidth;
-
-    // init the drawing area size
-    $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${treeAreaWidth}px`)
-
-    if(myHierarchy.type == "")
-    {
-      showModalOk(getString('Network_Configuration_Error'), getString('Network_Root_Not_Configured'))      
-      
-      return;
-    }
-
-    // calculate the font size of the leaf nodes to fit everything into the tree area
-    leafNodesCount == 0 ? 1 : leafNodesCount;
-    emSize = ((treeAreaHeight/(25*leafNodesCount)).toFixed(2));
-    emSize = emSize > 1 ? 1 : emSize;
-
-    // nodeHeight = ((emSize*100*0.30).toFixed(0))
-    nodeHeight = ((emSize*100*0.30).toFixed(0))
-
-    console.log(Treeviz);
-
-    myTree = Treeviz.create({
-      htmlId: "networkTree",
-      renderNode:  nodeData =>  {
-        var fontSize = "font-size:"+emSize+"em;";
-
-        (!emptyArr.includes(nodeData.data.port )) ? port =  nodeData.data.port : port = "";
-
-        (port == "" || port == 0 || port == 'None' ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
-
-        portHtml = (port == "" || port == 0 || port == 'None' ) ? "" : port
-
-        // Build HTML for individual nodes in the network diagram        
-        deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ?  
-                  `<div class="netIcon">
-                        ${atob(nodeData.data.icon)}
-                  </div>` : "";
-        devicePort = `<div  class="netPort" 
-                            style="width:${emSize*sizeCoefficient}em;height:${emSize*sizeCoefficient}em">
-                        ${portHtml}</div> 
-                      <div  class="portBckgIcon" 
-                            style="margin-left:-${emSize*sizeCoefficient}em;">
-                            ${portBckgIcon}
-                      </div>`;
-        collapseExpandIcon = nodeData.data.hiddenChildren ? 
-                            "square-plus" : "square-minus";
-                            
-        // generate +/- icon if node has children nodes
-        collapseExpandHtml = nodeData.data.hasChildren ? 
-                      `<div class="netCollapse" 
-                            style="font-size:${emSize*sizeCoefficient}em;top:${1/2*emSize*sizeCoefficient}em" 
-                            data-mytreepath="${nodeData.data.path}" 
-                            data-mytreemac="${nodeData.data.mac}">
-                        <i class="fa fa-${collapseExpandIcon} pointer"></i>
-                      </div>` : "";
-
-        selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac')
-
-        highlightedCss = nodeData.data.mac == selectedNodeMac ? 
-                      " highlightedNode" : "";
-
-        // css indicating online/offline status
-        statusCss = ` netStatus-${nodeData.data.status}`;
-
-        return result = `<div class="box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
-                              data-mytreemacmain="${nodeData.data.mac}"
-                              style="height:${nodeData.settings.nodeHeight}px;${fontSize}"
-                          >
-                            <div class="netNodeText">
-                              <strong>${devicePort}  ${deviceIcon}
-                                <span class="spanNetworkTree anonymizeDev" >${nodeData.data.name}</span>
-                              </strong>
-                              ${collapseExpandHtml}
-                            </div>
-                          </div>`;
-      },
-
-      onNodeClick:  nodeData =>  {
-        console.log(this)
-      },
-      mainAxisNodeSpacing: 'auto',
-      // mainAxisNodeSpacing: 3,
-      secondaryAxisNodeSpacing: 0.3,
-      nodeHeight: nodeHeight.toString(),
-      marginTop: '5',
-      hasZoom: true,
-      hasPan: true,
-      // marginLeft: '15',
-      idKey: "id",
-      hasFlatData: false,
-      linkWidth: (nodeData) => 3,
-      linkColor: (nodeData) => "#ffcc80",
-      onNodeClick: (nodeData) => handleNodeClick(nodeData),
-        relationnalField: "children",
-      });
-      
-
-
-      myTree.refresh(myHierarchy);
-
-      // hide spinning icon
-      hideSpinner()
-    }
-
-  // ---------------------------------------------------------------------------
-  // Tabs functionality
-  // ---------------------------------------------------------------------------
-  // Register events on tab change
-  
-  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   
-
-    initButtons()
-
-  });
-
-
-  // ---------------------------------------------------------------------------
-  function initTab()
-  {
-    key = "activeNetworkTab"
-
-    // default selection
-    selectedTab = "Internet_id"
-
-    // the #target from the url
-    target = getQueryString('mac') 
-
-    // update cookie if target specified
-    if(target != "")
-    {      
-      setCache(key, target.replaceAll(":","_")+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
-    }
-
-    // get the tab id from the cookie (already overridden by the target)
-    if(!emptyArr.includes(getCache(key)))
-    {
-      selectedTab = getCache(key);
-    }
-
-    // Activate panel
-    $('.nav-tabs a[id='+ selectedTab +']').tab('show');
-
-    // When changed save new current tab
-    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
-      setCache(key, $(e.target).attr('id'))
-    });
     
-  }
+    // store parent and leaf node count
-
+    if (childrenCount === 0) {
-  // ---------------------------------------------------------------------------
+        leafNodesCount++;
-  function initDeviceNamesFromMACs()
+    } else {
-  {
+        parentNodesCount++;
-    $('.mac-to-name').each(function() {
+    }
-        var dataMacValue = $(this).attr('my-data-mac');
+    
-
+    if (!hiddenMacs.includes(node.parentMac)) {   
-        if(dataMacValue =="" )
+      if (!((node.parentMac == "") && node.mac != "Internet")) {  // skip leaf nodes without father that are not the root
-        {
+        visibleNodesCount++;
-          $(this).html(getString("Network_Root"))
-        }
-        else{
-          $(this).html(getNameByMacAddress(dataMacValue));
-        }
-
         
-    });
+        result.push({
-    
+            name: node.name,
-  }
+            path: path,
-
+            mac: node.mac, // Replacing "mac" with "id"
-  // ---------------------------------------------------------------------------
+            parentMac: node.mac == "Internet" ? "" : node.parentMac, // Replacing "parentMac" with "father"
-  function initButtons()
+            port: node.port,
-  { 
+            icon: node.icon,
-
+            type: node.type,
-    var currentNodeMac = $(".tab-content .active td[data-mynodemac]").attr('data-mynodemac'); 
+            status: node.status,
-
+            hasChildren: childrenCount > 0 || hiddenMacs.includes(node.mac),
-    // change highlighted node in the tree
+            hiddenChildren: hiddenMacs.includes(node.mac),
-    selNode = $("#networkTree .highlightedNode")[0]
+            qty: childrenCount,
-
+        });
-    // 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')
-
-
-    // init the Assign buttons
-    $('#unassignedDevices  button[data-myleafmac]').each(function(){
-      $(this).attr('onclick', `updateLeaf("${$(this).attr('data-myleafmac')}","${currentNodeMac}")`)
-    }); 
-
-    // init Unassign buttons
-    $('#assignedDevices button[data-myleafmac]').each(function(){
-      $(this).attr('onclick', `updateLeaf("${$(this).attr('data-myleafmac')}","")`)
-    }); 
   }
 
-  // ---------------------------------------------------------------------------
+  return result;
-  function updateLeaf(leafMac,nodeMac)
+}
+  
+//---------------------------------------------------------------------------
+function toggleSubTree(parentMac, treePath)
+{
+  treePath = treePath.split('|')
+
+  if(!hiddenMacs.includes(parentMac))
   {
-    console.log(leafMac) // child
+    hiddenMacs.push(parentMac)
-    console.log(nodeMac) // parent
+  }
-    console.log(nodeMac != "") // parent
+  else
-
+  {
-    // prevent the assignment of the Internet root node avoiding recursion when generating the network tree topology
+    removeItemFromArray(hiddenMacs, parentMac)
-    if(leafMac.toLowerCase().includes('internet') && nodeMac != "")
-    {
-      showMessage(getString('Network_Cant_Assign'))
-    }
-    else{
-      saveData('updateNetworkLeaf', leafMac, nodeMac);
-      setTimeout("location.reload();", 500); // refresh page 
-    }
   }
 
-  // init device names where macs are used
+  updatedTree = getHierarchy()
-  initDeviceNamesFromMACs();
+  myTree.refresh(updatedTree);
 
-  // init selected (first) tab
+  // re-attach any onclick events
-  initTab();  
+  attachTreeEvents();   
+}
+
+// --------------------------------------------------------------------------- 
+function attachTreeEvents()
+{
+  //  toggle subtree functionality
+  $("div[data-mytreemac]").each(function(){
+      $(this).attr('onclick', 'toggleSubTree("'+$(this).attr('data-mytreemac')+'","'+ $(this).attr('data-mytreepath')+'")')        
+  }); 
+}
+
+// --------------------------------------------------------------------------- 
+// Handle network node click - select correct tab in the bottom table
+function handleNodeClick(nodeData)
+{    
+  const targetTabMAC = nodeData.data.mac;    
+
+  var targetTab = $(`a[data-mytabmac="${targetTabMAC}"]`);
+
+  // Simulate a click event on the target tab
+  targetTab.click();
+}
+
+// --------------------------------------------------------------------------- 
+var myTree;
+var visibleTreeArea = $(window).height()-155;
+var nodeWidth = 120;
+var emSize;
+var nodeHeight;
+var sizeCoefficient = 1.4
+
+function initTree(myHierarchy)
+{
+  // calculate the drawing area based on teh tree width and available screen size
+  var treeAreaHeight = visibleTreeArea > 800 ? 800 : visibleTreeArea;
+  let screenWidth = $('.content-header').width();
+  let treeWidth = (nodeWidth + 20) *  parentNodesCount;
+  let treeAreaWidth  =  screenWidth < treeWidth ? treeWidth : screenWidth;
+
+  // init the drawing area size
+  $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${treeAreaWidth}px`)
+
+  if(myHierarchy.type == "")
+  {
+    showModalOk(getString('Network_Configuration_Error'), getString('Network_Root_Not_Configured'))      
+    
+    return;
+  }
+
+  // calculate the font size of the leaf nodes to fit everything into the tree area
+  leafNodesCount == 0 ? 1 : leafNodesCount;
+  emSize = ((treeAreaHeight/(25*leafNodesCount)).toFixed(2));
+  emSize = emSize > 1 ? 1 : emSize;
+
+  // nodeHeight = ((emSize*100*0.30).toFixed(0))
+  nodeHeight = ((emSize*100*0.30).toFixed(0))
+
+  console.log(Treeviz);
+
+  myTree = Treeviz.create({
+    htmlId: "networkTree",
+    renderNode:  nodeData =>  {
+
+      var fontSize = "font-size:"+emSize+"em;";
+
+      (!emptyArr.includes(nodeData.data.port )) ? port =  nodeData.data.port : port = "";
+
+      (port == "" || port == 0 || port == 'None' ) ? portBckgIcon = `<i class="fa fa-wifi"></i>` : portBckgIcon = `<i class="fa fa-ethernet"></i>`;
+
+      portHtml = (port == "" || port == 0 || port == 'None' ) ? "" : port;
+      
+      // Build HTML for individual nodes in the network diagram        
+      deviceIcon = (!emptyArr.includes(nodeData.data.icon )) ?  
+                `<div class="netIcon">
+                      ${atob(nodeData.data.icon)}
+                </div>` : "";
+      devicePort = `<div  class="netPort" 
+                          style="width:${emSize*sizeCoefficient}em;height:${emSize*sizeCoefficient}em">
+                      ${portHtml}</div> 
+                    <div  class="portBckgIcon" 
+                          style="margin-left:-${emSize*sizeCoefficient}em;">
+                          ${portBckgIcon}
+                    </div>`;
+      collapseExpandIcon = nodeData.data.hiddenChildren ? 
+                          "square-plus" : "square-minus";
+                          
+      // generate +/- icon if node has children nodes
+      collapseExpandHtml = nodeData.data.hasChildren ? 
+                    `<div class="netCollapse" 
+                          style="font-size:${emSize*sizeCoefficient}em;top:${emSize/6}em" 
+                          data-mytreepath="${nodeData.data.path}" 
+                          data-mytreemac="${nodeData.data.mac}">
+                      <i class="fa fa-${collapseExpandIcon} pointer"></i>
+                    </div>` : "";
+
+      selectedNodeMac = $(".nav-tabs-custom .active a").attr('data-mytabmac')
+
+      highlightedCss = nodeData.data.mac == selectedNodeMac ? 
+                    " highlightedNode" : "";
+
+      // css indicating online/offline status
+      statusCss = ` netStatus-${nodeData.data.status}`;
+
+      return result = `<div class="box ${nodeData.data.hasChildren ? "pointer":""} ${statusCss} ${highlightedCss}"
+                            data-mytreemacmain="${nodeData.data.mac}"
+                            style="height:${nodeData.settings.nodeHeight}px;${fontSize}"
+                        >
+                          <div class="netNodeText">
+                            <strong>${devicePort}  ${deviceIcon}
+                              <span class="spanNetworkTree anonymizeDev" >${nodeData.data.name}</span>
+                            </strong>
+                            ${collapseExpandHtml}
+                          </div>
+                        </div>`;
+    },
+    mainAxisNodeSpacing: 'auto',
+    secondaryAxisNodeSpacing: 0.3,
+    nodeHeight: nodeHeight.toString(),
+    marginTop: '5',
+    isHorizontal : true,
+    hasZoom: true,
+    hasPan: true,
+    marginLeft: '15',
+    idKey: "mac",
+    hasFlatData: false,
+    relationnalField: "children",
+    linkWidth: (nodeData) => 3,
+    linkColor: (nodeData) => "#ffcc80",
+    onNodeClick: (nodeData) => handleNodeClick(nodeData),
+  });      
+
+  console.log(deviceListGlobal);
+  myTree.refresh(myHierarchy);
+
+  // hide spinning icon
+  hideSpinner()
+}
+
+
+// ---------------------------------------------------------------------------
+// Tabs functionality
+// ---------------------------------------------------------------------------
+// Register events on tab change
+
+$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {   
 
-  // init Assign/Unassign buttons
   initButtons()
 
+});
+
+
+// ---------------------------------------------------------------------------
+function initTab()
+{
+  key = "activeNetworkTab"
+
+  // default selection
+  selectedTab = "Internet_id"
+
+  // the #target from the url
+  target = getQueryString('mac') 
+
+  // update cookie if target specified
+  if(target != "")
+  {      
+    setCache(key, target.replaceAll(":","_")+'_id') // _id is added so it doesn't conflict with AdminLTE tab behavior
+  }
+
+  // get the tab id from the cookie (already overridden by the target)
+  if(!emptyArr.includes(getCache(key)))
+  {
+    selectedTab = getCache(key);
+  }
+
+  // Activate panel
+  $('.nav-tabs a[id='+ selectedTab +']').tab('show');
+
+  // When changed save new current tab
+  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
+    setCache(key, $(e.target).attr('id'))
+  });
+  
+}
+
+// ---------------------------------------------------------------------------
+function initDeviceNamesFromMACs()
+{
+  $('.mac-to-name').each(function() {
+      var dataMacValue = $(this).attr('my-data-mac');
+
+      if(dataMacValue =="" )
+      {
+        $(this).html(getString("Network_Root"))
+      }
+      else{
+        $(this).html(getNameByMacAddress(dataMacValue));
+      }
+  });
+  
+}
+
+// ---------------------------------------------------------------------------
+function initButtons()
+{ 
+
+  var currentNodeMac = $(".tab-content .active td[data-mynodemac]").attr('data-mynodemac'); 
+
+  // 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')
+
+
+  // init the Assign buttons
+  $('#unassignedDevices  button[data-myleafmac]').each(function(){
+    $(this).attr('onclick', `updateLeaf("${$(this).attr('data-myleafmac')}","${currentNodeMac}")`)
+  }); 
+
+  // init Unassign buttons
+  $('#assignedDevices button[data-myleafmac]').each(function(){
+    $(this).attr('onclick', `updateLeaf("${$(this).attr('data-myleafmac')}","")`)
+  }); 
+}
+
+// ---------------------------------------------------------------------------
+function updateLeaf(leafMac,nodeMac)
+{
+  console.log(leafMac) // child
+  console.log(nodeMac) // parent
+  console.log(nodeMac != "") // parent
+
+  // prevent the assignment of the Internet root node avoiding recursion when generating the network tree topology
+  if(leafMac.toLowerCase().includes('internet') && nodeMac != "")
+  {
+    showMessage(getString('Network_Cant_Assign'))
+  }
+  else{
+    saveData('updateNetworkLeaf', leafMac, nodeMac);
+    setTimeout("location.reload();", 500); // refresh page 
+  }
+}
+
+// init device names where macs are used
+initDeviceNamesFromMACs();
+
+// init selected (first) tab
+initTab();  
+
+// init Assign/Unassign buttons
+initButtons()
+
 </script>
 
 

front/php/templates/language/ca_ca.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "Aturar alertes",
     "DevDetail_Shortcut_Presence": "Presència",
     "DevDetail_Shortcut_Sessions": "Sessions",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Detalls",
+    "DevDetail_Tab_Details": "Detalls",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Esdeveniments",
+    "DevDetail_Tab_Events": "Esdeveniments",
     "DevDetail_Tab_EventsTableDate": "Data",
     "DevDetail_Tab_EventsTableEvent": "Tipus d'esdeveniment",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -154,10 +154,10 @@
     "DevDetail_Tab_NmapTableState": "Estat",
     "DevDetail_Tab_NmapTableText": "Configurar un calendari a <a href=\"/settings.php#NMAP_ACTIVE\">Configuració</a>",
     "DevDetail_Tab_NmapTableTime": "Temps",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Connectors (Plugins)",
+    "DevDetail_Tab_Plugins": "Connectors (Plugins)",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Presència",
+    "DevDetail_Tab_Presence": "Presència",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Sessions",
+    "DevDetail_Tab_Sessions": "Sessions",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Eines",
+    "DevDetail_Tab_Tools": "Eines",
     "DevDetail_Tab_Tools_Internet_Info_Description": "L'eina d'informació d'Internet mostra informació sobre la connexió a Internet, com ara adreça IP, ciutat, país, codi d'àrea i zona horària.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "S'ha produït un error",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Inici Informació d'Internet",

front/php/templates/language/de_de.json

@@ -150,8 +150,8 @@
     "DevDetail_Shortcut_DownAlerts": "Down Meldungen",
     "DevDetail_Shortcut_Presence": "Anwesenheit",
     "DevDetail_Shortcut_Sessions": "Sitzungen",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Details",
+    "DevDetail_Tab_Details": "Details",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Ereignisse",
+    "DevDetail_Tab_Events": "Ereignisse",
     "DevDetail_Tab_EventsTableDate": "Datum",
     "DevDetail_Tab_EventsTableEvent": "Ereignistype",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -166,10 +166,10 @@
     "DevDetail_Tab_NmapTableState": "Status",
     "DevDetail_Tab_NmapTableText": "Erstelle einen Plan über die<a href=\"/settings.php#NMAP_ACTIVE\">Einstellungen</a>",
     "DevDetail_Tab_NmapTableTime": "Zeit",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Plugins",
+    "DevDetail_Tab_Plugins": "Plugins",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Anwesenheit",
+    "DevDetail_Tab_Presence": "Anwesenheit",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Sitzungen",
+    "DevDetail_Tab_Sessions": "Sitzungen",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Werkzeuge",
+    "DevDetail_Tab_Tools": "Werkzeuge",
     "DevDetail_Tab_Tools_Internet_Info_Description": "Das Internet-Info-Tool zeigt Informationen über die Internetverbindung an, wie z. B. IP-Adresse, Stadt, Land, Ortsvorwahl und Zeitzone.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Es ist ein Fehler aufgetreten",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Internet-Info starten",

front/php/templates/language/en_us.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "Down Alerts",
     "DevDetail_Shortcut_Presence": "Presence",
     "DevDetail_Shortcut_Sessions": "Sessions",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Details",
+    "DevDetail_Tab_Details": "Details",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Events",
+    "DevDetail_Tab_Events": "Events",
     "DevDetail_Tab_EventsTableDate": "Date",
     "DevDetail_Tab_EventsTableEvent": "Event type",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -154,10 +154,10 @@
     "DevDetail_Tab_NmapTableState": "State",
     "DevDetail_Tab_NmapTableText": "Set up a schedule in <a href=\"/settings.php#NMAP_ACTIVE\">Settings</a>",
     "DevDetail_Tab_NmapTableTime": "Time",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Plugins",
+    "DevDetail_Tab_Plugins": "Plugins",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Presence",
+    "DevDetail_Tab_Presence": "Presence",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Sessions",
+    "DevDetail_Tab_Sessions": "Sessions",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Tools",
+    "DevDetail_Tab_Tools": "Tools",
     "DevDetail_Tab_Tools_Internet_Info_Description": "The Internet info tool displays information about the Internet connection, such as IP address, city, country, area code and time zone.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "An error has occurred",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Start Internet Info",

front/php/templates/language/es_es.json

@@ -148,8 +148,8 @@
     "DevDetail_Shortcut_DownAlerts": "Alerta(s) de caída(s)",
     "DevDetail_Shortcut_Presence": "Historial",
     "DevDetail_Shortcut_Sessions": "Sesiones",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Detalles",
+    "DevDetail_Tab_Details": "Detalles",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Eventos",
+    "DevDetail_Tab_Events": "Eventos",
     "DevDetail_Tab_EventsTableDate": "Fecha",
     "DevDetail_Tab_EventsTableEvent": "Tipo de evento",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -164,10 +164,10 @@
     "DevDetail_Tab_NmapTableState": "Estado",
     "DevDetail_Tab_NmapTableText": "Establece la programación en los <a href=\"/settings.php#NMAP_ACTIVE\">Ajustes</a>",
     "DevDetail_Tab_NmapTableTime": "Tiempo",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Plugins",
+    "DevDetail_Tab_Plugins": "Plugins",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Historial",
+    "DevDetail_Tab_Presence": "Historial",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Sesiones",
+    "DevDetail_Tab_Sessions": "Sesiones",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Herramientas",
+    "DevDetail_Tab_Tools": "Herramientas",
     "DevDetail_Tab_Tools_Internet_Info_Description": "La herramienta de información de internet muestra información sobre la conexión a Internet, como dirección IP, ciudad, país, código de área y zona horaria.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Se ha producido un error",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Iniciar información de Internet",

front/php/templates/language/fr_fr.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "Alertes de panne",
     "DevDetail_Shortcut_Presence": "Présence",
     "DevDetail_Shortcut_Sessions": "Sessions",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Détails",
+    "DevDetail_Tab_Details": "Détails",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Événements",
+    "DevDetail_Tab_Events": "Événements",
     "DevDetail_Tab_EventsTableDate": "Date",
     "DevDetail_Tab_EventsTableEvent": "Type d'événement",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -154,10 +154,10 @@
     "DevDetail_Tab_NmapTableState": "État",
     "DevDetail_Tab_NmapTableText": "Configurer une programmation dans les <a href=\"/settings.php#NMAP_ACTIVE\">Paramètres</a>",
     "DevDetail_Tab_NmapTableTime": "Heure",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Plugins",
+    "DevDetail_Tab_Plugins": "Plugins",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Présence",
+    "DevDetail_Tab_Presence": "Présence",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Sessions",
+    "DevDetail_Tab_Sessions": "Sessions",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Outils",
+    "DevDetail_Tab_Tools": "Outils",
     "DevDetail_Tab_Tools_Internet_Info_Description": "L'outil Infos Internet affiche les informations sur la connexion Internet, comme l'adresse IP, la ville, la région, le code région et le fuseau horaire.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Une erreur est survenue",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Lancer les informations Internet",

front/php/templates/language/it_it.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "Avvisi disconnessione",
     "DevDetail_Shortcut_Presence": "Presenza",
     "DevDetail_Shortcut_Sessions": "Sessioni",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Dettagli",
+    "DevDetail_Tab_Details": "Dettagli",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Eventi",
+    "DevDetail_Tab_Events": "Eventi",
     "DevDetail_Tab_EventsTableDate": "Data",
     "DevDetail_Tab_EventsTableEvent": "Tipo evento",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -154,10 +154,10 @@
     "DevDetail_Tab_NmapTableState": "Stato",
     "DevDetail_Tab_NmapTableText": "Imposta una pianificazione nelle <a href=\"/settings.php#NMAP_ACTIVE\">Impostazioni</a>",
     "DevDetail_Tab_NmapTableTime": "Ora",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Plugin",
+    "DevDetail_Tab_Plugins": "Plugin",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Presenza",
+    "DevDetail_Tab_Presence": "Presenza",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Sessioni",
+    "DevDetail_Tab_Sessions": "Sessioni",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Strumenti",
+    "DevDetail_Tab_Tools": "Strumenti",
     "DevDetail_Tab_Tools_Internet_Info_Description": "Lo strumento informazioni Internet visualizza informazioni sulla connessione Internet, come indirizzo IP, città, paese, prefisso e fuso orario.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Si è verificato un errore",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Avvia info Internet",

front/php/templates/language/nb_no.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "Nede Varslinger",
     "DevDetail_Shortcut_Presence": "Tilstedeværelse",
     "DevDetail_Shortcut_Sessions": "Sesjoner",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Detaljer",
+    "DevDetail_Tab_Details": "Detaljer",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Hendelser",
+    "DevDetail_Tab_Events": "Hendelser",
     "DevDetail_Tab_EventsTableDate": "Dato",
     "DevDetail_Tab_EventsTableEvent": "Hendelstype",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -154,10 +154,10 @@
     "DevDetail_Tab_NmapTableState": "Tilstand",
     "DevDetail_Tab_NmapTableText": "Konfigurer en tidsplan i <a href=\"/settings.php#NMAP_ACTIVE\">Innstillinger</a>",
     "DevDetail_Tab_NmapTableTime": "Tidspunkt",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Plugins",
+    "DevDetail_Tab_Plugins": "Plugins",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Tilstedeværelse",
+    "DevDetail_Tab_Presence": "Tilstedeværelse",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Økter",
+    "DevDetail_Tab_Sessions": "Økter",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Verktøy",
+    "DevDetail_Tab_Tools": "Verktøy",
     "DevDetail_Tab_Tools_Internet_Info_Description": "Internett-informasjonsverktøyet viser informasjon om Internett-tilkoblingen, for eksempel IP-adresse, by, land, retningsnummer og tidssone.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "En feil har oppstått",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Start Internett-informasjonsverktøyet",

front/php/templates/language/pl_pl.json

@@ -155,9 +155,9 @@
     "DevDetail_Tab_NmapTableText": "Ustaw harmonogram w <a href=\"/settings.php#NMAP_ACTIVE\">Ustawieniach</a>",
     "DevDetail_Tab_NmapTableTime": "Czas",
     "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i>Pluginy",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Obecność",
+    "DevDetail_Tab_Presence": "Obecność",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Sesje",
+    "DevDetail_Tab_Sessions": "Sesje",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Narzędzia",
+    "DevDetail_Tab_Tools": "Narzędzia",
     "DevDetail_Tab_Tools_Internet_Info_Description": "Narzędzie informacji o Internecie wyświetla informację o połączeniu z Internetem, takie jak adres IP, miasto, państwo, kod pocztowy i strefa czasowa.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Wystąpił błąd",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Rozpocznij Informacje o Internecie",

front/php/templates/language/pt_br.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "Alertas para baixo",
     "DevDetail_Shortcut_Presence": "Presença",
     "DevDetail_Shortcut_Sessions": "Sessões",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Detalhes",
+    "DevDetail_Tab_Details": "Detalhes",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Eventos",
+    "DevDetail_Tab_Events": "Eventos",
     "DevDetail_Tab_EventsTableDate": "Data",
     "DevDetail_Tab_EventsTableEvent": "Tipo de evento",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -155,9 +155,9 @@
     "DevDetail_Tab_NmapTableText": "Configure uma programação em <a href=\"/settings.php#NMAP_ACTIVE\">Configurações</a>",
     "DevDetail_Tab_NmapTableTime": "Tempo",
     "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"> </i> Plugins",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Presença",
+    "DevDetail_Tab_Presence": "Presença",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Sessões",
+    "DevDetail_Tab_Sessions": "Sessões",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Ferramentas",
+    "DevDetail_Tab_Tools": "Ferramentas",
     "DevDetail_Tab_Tools_Internet_Info_Description": "A ferramenta info Internet exibe informações sobre a conexão com a Internet, como endereço IP, cidade, país, código de área e fuso horário.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Um erro ocorreu",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Iniciar informações da Internet",

front/php/templates/language/ru_ru.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "Оповещения о сбое",
     "DevDetail_Shortcut_Presence": "Присутствие",
     "DevDetail_Shortcut_Sessions": "Сеансы",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Детали",
+    "DevDetail_Tab_Details": "Детали",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> События",
+    "DevDetail_Tab_Events": "События",
     "DevDetail_Tab_EventsTableDate": "Дата",
     "DevDetail_Tab_EventsTableEvent": "Тип события",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -154,10 +154,10 @@
     "DevDetail_Tab_NmapTableState": "Состояние",
     "DevDetail_Tab_NmapTableText": "Настройте расписание в <a href=\"/settings.php#NMAP_ACTIVE\">Настройки</a>",
     "DevDetail_Tab_NmapTableTime": "Время",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Плагины",
+    "DevDetail_Tab_Plugins": "Плагины",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Присутствие",
+    "DevDetail_Tab_Presence": "Присутствие",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Сеансы",
+    "DevDetail_Tab_Sessions": "Сеансы",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Инструменты",
+    "DevDetail_Tab_Tools": "Инструменты",
     "DevDetail_Tab_Tools_Internet_Info_Description": "Инструмент «Информация об Интернете» отображает информацию о подключении к Интернету, такую как IP-адрес, город, страна, код города и часовой пояс.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Произошла ошибка",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Показать инфо об Интернете",

front/php/templates/language/tr_tr.json

@@ -138,7 +138,7 @@
     "DevDetail_Shortcut_DownAlerts": "",
     "DevDetail_Shortcut_Presence": "",
     "DevDetail_Shortcut_Sessions": "Oturumlar",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Detaylar",
+    "DevDetail_Tab_Details": "Detaylar",
     "DevDetail_Tab_Events": "",
     "DevDetail_Tab_EventsTableDate": "Tarih",
     "DevDetail_Tab_EventsTableEvent": "",
@@ -156,7 +156,7 @@
     "DevDetail_Tab_NmapTableTime": "Zaman",
     "DevDetail_Tab_Plugins": "",
     "DevDetail_Tab_Presence": "",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Oturumlar",
+    "DevDetail_Tab_Sessions": "Oturumlar",
     "DevDetail_Tab_Tools": "",
     "DevDetail_Tab_Tools_Internet_Info_Description": "",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Bir hata oluştu",

front/php/templates/language/uk_ua.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "Сповіщення про падіння",
     "DevDetail_Shortcut_Presence": "Присутність",
     "DevDetail_Shortcut_Sessions": "Сеанси",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> Подробиці",
+    "DevDetail_Tab_Details": "Подробиці",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> Події",
+    "DevDetail_Tab_Events": "Події",
     "DevDetail_Tab_EventsTableDate": "Дата",
     "DevDetail_Tab_EventsTableEvent": "Тип події",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -154,10 +154,10 @@
     "DevDetail_Tab_NmapTableState": "Держава",
     "DevDetail_Tab_NmapTableText": "Налаштуйте розклад у <a href=\"/settings.php#NMAP_ACTIVE\">Settings</a>",
     "DevDetail_Tab_NmapTableTime": "час",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> Плагіни",
+    "DevDetail_Tab_Plugins": "Плагіни",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> Присутність",
+    "DevDetail_Tab_Presence": "Присутність",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> Сеанси",
+    "DevDetail_Tab_Sessions": "Сеанси",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> Інструменти",
+    "DevDetail_Tab_Tools": "Інструменти",
     "DevDetail_Tab_Tools_Internet_Info_Description": "Інструмент Інтернет-інформації відображає інформацію про підключення до Інтернету, таку як IP-адреса, місто, країна, код міста та часовий пояс.",
     "DevDetail_Tab_Tools_Internet_Info_Error": "Сталася помилка",
     "DevDetail_Tab_Tools_Internet_Info_Start": "Запустіть Internet Info",

front/php/templates/language/zh_cn.json

@@ -138,8 +138,8 @@
     "DevDetail_Shortcut_DownAlerts": "下线警报",
     "DevDetail_Shortcut_Presence": "存在",
     "DevDetail_Shortcut_Sessions": "会话",
-    "DevDetail_Tab_Details": "<i class=\"fa fa-info-circle\"></i> 详细信息",
+    "DevDetail_Tab_Details": "详细信息",
-    "DevDetail_Tab_Events": "<i class=\"fa fa-bolt\"></i> 事件",
+    "DevDetail_Tab_Events": "事件",
     "DevDetail_Tab_EventsTableDate": "日期",
     "DevDetail_Tab_EventsTableEvent": "事件类型",
     "DevDetail_Tab_EventsTableIP": "IP",
@@ -154,10 +154,10 @@
     "DevDetail_Tab_NmapTableState": "状态",
     "DevDetail_Tab_NmapTableText": "<a href=\"/settings.php#NMAP_ACTIVE\">设置</a>时间表",
     "DevDetail_Tab_NmapTableTime": "时间",
-    "DevDetail_Tab_Plugins": "<i class=\"fa fa-plug\"></i> 插件",
+    "DevDetail_Tab_Plugins": "插件",
-    "DevDetail_Tab_Presence": "<i class=\"fa fa-calendar\"></i> 存在",
+    "DevDetail_Tab_Presence": "存在",
-    "DevDetail_Tab_Sessions": "<i class=\"fa fa-list-ol\"></i> 会话",
+    "DevDetail_Tab_Sessions": "会话",
-    "DevDetail_Tab_Tools": "<i class=\"fa fa-screwdriver-wrench\"></i> 工具",
+    "DevDetail_Tab_Tools": "工具",
     "DevDetail_Tab_Tools_Internet_Info_Description": "互联网信息工具显示有关互联网连接的信息，例如 IP 地址、城市、国家、区号和时区。",
     "DevDetail_Tab_Tools_Internet_Info_Error": "发生了错误",
     "DevDetail_Tab_Tools_Internet_Info_Start": "开始互联网信息",

front/php/templates/timezone.php

@@ -8,6 +8,7 @@ $configFolderPath = dirname(__FILE__)."/../../../config/";
 $config_file = "app.conf";
 $logFolderPath = "/app/log/";
 $log_file = "app_front.log";
+$default_tz = "Europe/Berlin";
 
 
 $fullConfPath = $configFolderPath.$config_file;
@@ -29,7 +30,13 @@ foreach ($config_file_lines as $line)
 
 if($timeZone == "")
 {
-  $timeZone = "Europe/Berlin";
+  $timeZone = $default_tz;
+}
+
+// Validate the timezone
+if (!in_array($timeZone, timezone_identifiers_list())) {
+  error_log("Invalid timezone '$timeZone' in config. Falling back to default: '$default_tz' ");
+  $timeZone = $default_tz;
 }
 
 date_default_timezone_set($timeZone);

front/plugins/plugin_helper.py

@@ -1,5 +1,5 @@
 from time import strftime
-import pytz
+import pytz, all_timezones
 import sys
 import re
 import base64
@@ -35,6 +35,8 @@ def read_config_file():
 
 configFile = read_config_file()
 timeZoneSetting = configFile['TIMEZONE']
+if timeZoneSetting not in all_timezones:
+    timeZoneSetting = const.default_tz
 timeZone = pytz.timezone(timeZoneSetting)
 
 # -------------------------------------------------------------------

server/const.py

@@ -20,7 +20,7 @@ fullDbPath          = applicationPath + dbPath
 vendorsPath         = '/usr/share/arp-scan/ieee-oui.txt'
 vendorsPathNewest   = '/usr/share/arp-scan/ieee-oui_all_filtered.txt'
 
-       
+default_tz          = 'Europe/Berlin'
 
 
 #===============================================================================

server/initialise.py

@@ -1,7 +1,7 @@
 
 import os
 import time
-from pytz import timezone
+from pytz import timezone, all_timezones, UnknownTimeZoneError
 from cron_converter import Cron
 from pathlib import Path
 import datetime
@@ -11,7 +11,7 @@ import re
 
 # Register NetAlertX libraries
 import conf 
-from const import fullConfPath, applicationPath, fullConfFolder
+from const import fullConfPath, applicationPath, fullConfFolder, default_tz
 from helper import fixPermissions, collect_lang_strings, updateSubnets, initOrSetParam, isJsonObject, setting_value_to_python_type, timeNowTZ, get_setting_value, generate_random_string
 from app_state import updateState
 from logger import mylog
@@ -161,7 +161,7 @@ def importConfigs (db, all_plugins):
     conf.DISCOVER_PLUGINS = ccd('DISCOVER_PLUGINS', True , c_d, 'Discover plugins', """{"dataType": "boolean","elements": [{"elementType": "input","elementOptions": [{ "type": "checkbox" }],"transformers": []}]}""", '[]', 'General')
     conf.SCAN_SUBNETS = ccd('SCAN_SUBNETS', ['192.168.1.0/24 --interface=eth1', '192.168.1.0/24 --interface=eth0'] , c_d, 'Subnets to scan', '''{"dataType": "array","elements": [{"elementType": "input","elementOptions": [{"placeholder": "192.168.1.0/24 --interface=eth1"},{"suffix": "_in"},{"cssClasses": "col-sm-10"},{"prefillValue": "null"}],"transformers": []},{"elementType": "button","elementOptions": [{"sourceSuffixes": ["_in"]},{"separator": ""},{"cssClasses": "col-xs-12"},{"onClick": "addList(this, false)"},{"getStringKey": "Gen_Add"}],"transformers": []},{"elementType": "select","elementHasInputValue": 1,"elementOptions": [{"multiple": "true"},{"readonly": "true"},{"editable": "true"}],"transformers": []},{"elementType": "button","elementOptions": [{"sourceSuffixes": []},{"separator": ""},{"cssClasses": "col-xs-6"},{"onClick": "removeAllOptions(this)"},{"getStringKey": "Gen_Remove_All"}],"transformers": []},{"elementType": "button","elementOptions": [{"sourceSuffixes": []},{"separator": ""},{"cssClasses": "col-xs-6"},{"onClick": "removeFromList(this)"},{"getStringKey": "Gen_Remove_Last"}],"transformers": []}]}''', '[]', 'General')    
     conf.LOG_LEVEL = ccd('LOG_LEVEL', 'verbose' , c_d, 'Log verboseness', '{"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]}', "['none', 'minimal', 'verbose', 'debug', 'trace']", 'General')
-    conf.TIMEZONE = ccd('TIMEZONE', 'Europe/Berlin' , c_d, 'Time zone', '{"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [] ,"transformers": []}]}', '[]', 'General')    
+    conf.TIMEZONE = ccd('TIMEZONE', const.default_tz , c_d, 'Time zone', '{"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [] ,"transformers": []}]}', '[]', 'General')    
     conf.PLUGINS_KEEP_HIST = ccd('PLUGINS_KEEP_HIST', 250 , c_d, 'Keep history entries', '{"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type": "number"}] ,"transformers": []}]}', '[]', 'General') 
     conf.REPORT_DASHBOARD_URL = ccd('REPORT_DASHBOARD_URL', 'http://netalertx/' , c_d, 'NetAlertX URL', '{"dataType":"string", "elements": [{"elementType" : "input", "elementOptions" : [] ,"transformers": []}]}', '[]', 'General')
     conf.DAYS_TO_KEEP_EVENTS = ccd('DAYS_TO_KEEP_EVENTS', 90 , c_d, 'Delete events days', '{"dataType":"integer", "elements": [{"elementType" : "input", "elementOptions" : [{"type": "number"}] ,"transformers": []}]}', '[]', 'General')
@@ -177,8 +177,15 @@ def importConfigs (db, all_plugins):
     # UI
     conf.UI_LANG = ccd('UI_LANG', 'English' , c_d, 'Language Interface', '{"dataType":"string", "elements": [{"elementType" : "select", "elementOptions" : [] ,"transformers": []}]}', "['English', 'German', 'Spanish', 'French', 'Norwegian', 'Russian', 'Italian (it_it)', 'Portuguese (pt_br)', 'Polish (pl_pl)', 'Chinese (zh_cn)', 'Turkish (tr_tr)', 'Czech (cs_cz)', 'Arabic (ar_ar)',  'Catalan (ca_ca)', 'Ukrainian (uk_ua)' ]", 'UI') 
     
-    #  Init timezone in case it changed
+    #  Init timezone in case it changed and handle invalid values
-    conf.tz = timezone(conf.TIMEZONE) 
+    try:
+        if conf.TIMEZONE not in all_timezones:
+            raise UnknownTimeZoneError(f"Invalid timezone: {conf.TIMEZONE}")
+        conf.tz = timezone(conf.TIMEZONE)
+    except UnknownTimeZoneError:
+        conf.tz = timezone(const.default_tz)  # Init Default
+        conf.TIMEZONE = ccd('TIMEZONE', conf.tz , c_d, '_KEEP_', '_KEEP_', '[]', 'General')
+        mylog('none', [f"[Config] Invalid timezone '{conf.TIMEZONE}', defaulting to {const.default_tz}."])
 
     # TODO cleanup later ----------------------------------------------------------------------------------
     # init all time values as we have timezone - all this shoudl be moved into plugin/plugin settings