settings rewrite to JS + CSS fixes

front/css/pialert.css

@@ -761,21 +761,26 @@ height: 50px;
     margin-bottom: 6px;
 }
 
-
+/* AdminLTE overrides */
 #networkTree .box
 {
-    padding:2px;
+    border-top:1px;
-    margin:2px;
+    border-top-color:grey;
+    padding:0px;
+    margin:0px;
+    align-items:center;
+    border-radius:20px;
+    width:180px;
+    display:flex;
+    flex-direction:column;
+    justify-content:center;
 }
 #networkTree .netNodeText
-{
+{ 
-    top: 2px;
-    margin: 2px;    
     position: absolute;
 }
 #networkTree .netPort
 {
-    width: 10px;;
     float:left;
     display:inline;  
 }
@@ -784,8 +789,7 @@ height: 50px;
     margin-left: 16px;
     /* border: solid;
     border-color:#606060;     */
-    position: relative;
+    position: relative;    
-    font-size: 0.75em;
 }
 #networkTree .netIcon
 {

front/network.php

@@ -609,7 +609,7 @@
 
   // --------------------------------------------------------------------------- 
   var myTree;
-  var treeAreaHeight = 600;
+  var treeAreaHeight = 800;
   var emSize;
   var nodeHeight;
 
@@ -617,9 +617,10 @@
   {    
     // calculate the font size of the leaf nodes to fit everything into the tree area
     leafNodesCount == 0 ? 1 : leafNodesCount;
-    emSize = ((600/(20*leafNodesCount)).toFixed(2));        
+    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))
 
     $("#networkTree").attr('style', `height:${treeAreaHeight}px; width:${$('.content-header').width()}px`)
@@ -632,7 +633,7 @@
 
         // 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>" : "";
+        devicePort = (!emptyArr.includes(nodeData.data.port )) ?  "<div class='netPort ' style=width:"+emSize*2.5+"em; >"+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;
@@ -643,13 +644,7 @@
 
         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;\
-                                 border-radius:5px;'\
                           >\
                           <div class='netNodeText '>\
                             <strong>" + devicePort + deviceIcon +
@@ -660,7 +655,7 @@
         },
 
       onNodeClick:  nodeData =>  { 
-          // console.log(this)  
+          console.log(this)  
         },
       mainAxisNodeSpacing: 'auto',
       // mainAxisNodeSpacing: 3,

front/php/server/util.php

@@ -269,57 +269,53 @@ function saveSettings()
   }
   
   // go thru the groups and prepare settings to write to file
-  foreach($groups as $group)
+  foreach ($groups as $group) {
-  {
+    $txt .= "\n\n# " . $group;
-    $txt = $txt."\n\n# ".$group;
+    $txt .= "\n#---------------------------\n";
-    $txt = $txt."\n#---------------------------\n" ;
-    
-    
-    foreach($decodedSettings as $setting)
-    {
-      
-      if($group == $setting[0])
-      {                   
 
+    foreach ($decodedSettings as $setting) {
+        $settingGroup = $setting[0];
+        $settingKey = $setting[1];
+        $settingType = $setting[2]; 
+        $settingValue = $setting[3];
 
-        if($setting[2] == 'text' or $setting[2] == 'password' or $setting[2] == 'readonly' or $setting[2] == 'text.select')
+        if ($group == $settingGroup) {
-        {
+            if ($settingType == 'text' || $settingType == 'password' || $settingType == 'readonly' || $settingType == 'text.select') {
-          $val = encode_single_quotes($setting[3]);
+                $val = encode_single_quotes($settingValue);
-          $txt = $txt.$setting[1]."='".$val."'\n" ; 
+                $txt .= $settingKey . "='" . $val . "'\n";
-        } elseif($setting[2] == 'integer' or $setting[2] == 'integer.select')
+            } elseif ($settingType == 'integer' || $settingType == 'integer.select') {
-        {
+                $txt .= $settingKey . "=" . $settingValue . "\n";
-          $txt = $txt.$setting[1]."=".$setting[3]."\n" ; 
+            } elseif ($settingType == 'boolean' || $settingType == 'integer.checkbox') {
-        } elseif($setting[2] == 'boolean' || $setting[2] == 'integer.checkbox')
+
-        {
+                if ($settingValue === true || $settingValue === 1 || strtolower($settingValue) === 'true') {
-          $val = "False";
+                    $val = "True";
-          if($setting[3] == 'true' || $setting[3] == '1' || $setting[3] == 1 || $setting[3] == 'True')
+                } else {
-          {
+                    $val = "False";
-            $val = "True";
+                }
-          }
+
-          $txt = $txt.$setting[1]."=".$val."\n" ; 
+                $txt .= $settingKey . "=" . $val . "\n";
-        }elseif($setting[2] == 'text.multiselect' or $setting[2] == 'subnets' or $setting[2] == 'list')
+            } elseif ($settingType == 'text.multiselect' || $settingType == 'subnets' || $settingType == 'list') {
-        {
+                $temp = '[';
-          $temp = '[';         
+
-          
+                if (count($setting) > 3 && is_array($settingValue) == true) {
-          if (count($setting) > 3 && is_array( $setting[3]) == True){
+                    foreach ($settingValue as $val) {
-            foreach($setting[3] as $val)
+                        $temp .= "'" . encode_single_quotes($val) . "',";
-            {
+                    }
-              $temp = $temp."'". encode_single_quotes($val)."',";
+
+                    $temp = substr_replace($temp, "", -1); // remove last comma ','
+                }
+
+                $temp .= ']'; // close brackets
+                $txt .= $settingKey . "=" . $temp . "\n";
+            } elseif ($settingType == 'json') {
+                $txt .= $settingKey . "=" . $settingValue . "\n";
             }
-
+        }
-            $temp = substr_replace($temp, "", -1); // remove last comma ','
-          }
-
-          $temp = $temp.']';  // close brackets 
-          $txt = $txt.$setting[1]."=".$temp."\n" ; 
-        } elseif($setting[2] == 'json')
-        {
-          $txt = $txt.$setting[1]."=".$setting[3]."\n" ; 
-        }            
-      }
     }
   }
 
+
+
   $txt = $txt."\n\n";
   $txt = $txt."#-------------------IMPORTANT INFO-------------------#\n";
   $txt = $txt."#   This file is ingested by a python script, so if  #\n";