settings revamp

front/help_faq.php

@@ -15,22 +15,29 @@
     <!-- Main content ---------------------------------------------------------- -->
     <section class="content">
       <h4><?php echo lang('HelpFAQ_Cat_General');?></h4>
+
        <div class="panel-group" id="accordion_gen">
         <div class="panel panel-default">
+
           <div class="panel-heading">
             <h4 class="panel-title">
               <a data-toggle="collapse" data-parent="#accordion_gen" href="#collapse100">
               <?php echo lang('HelpFAQ_Cat_General_100_head');?></a>
             </h4>
           </div>
+
           <div id="collapse100" class="panel-collapse collapse" style="font-size: 16px;">
             <div class="panel-body"><?php echo lang('HelpFAQ_Cat_General_100_text_a');?>
               <span class="text-danger help_faq_code"><?php echo date_default_timezone_get(); ?></span><br>
               <?php echo lang('HelpFAQ_Cat_General_100_text_b');?> 
               <span class="text-danger help_faq_code"><?php echo php_ini_loaded_file(); ?></span><br>
-              <?php echo lang('HelpFAQ_Cat_General_100_text_c');?></div>
+              <?php echo lang('HelpFAQ_Cat_General_100_text_c');?>
+            </div>
           </div>
+
         </div>
+
+        
         <div class="panel panel-default">
           <div class="panel-heading">
             <h4 class="panel-title">

front/js/pialert_common.js

@@ -240,6 +240,7 @@ function saveData(functionName, index, value) {
 
 }
 
+
 // -----------------------------------------------------------------------------
 function sleep(milliseconds) {
   const date = Date.now();

front/php/templates/language/en_us.php

@@ -439,10 +439,11 @@ $lang['en_us'] = array(
 'settings_missing_block' => 'You can\'t save your settings without specifying all setting keys. Refresh the page. This is probably caused by a high load on the database.',
 'settings_old' => 'The settings in the DB (shown on this page) are outdated. This is probably caused by a running scan. The settings were saved in the <code>pialert.conf</code> file, but the background process didn\'t have time to import it yet to the DB. You can wait until the settings get refreshed so you don\'t overwrite your old values. Feel free to save your settings either way if you don\'t mind losing the settings between the last save and now. There are also backup files created if you need to compare your settings later.',
 'settings_imported' => 'Last time settings were imported from the pialert.conf file:',
+'settings_expand_all' => 'Expand all',
 
 //General
 'ENABLE_ARPSCAN_name' => 'Enable ARP scan',
-'ENABLE_ARPSCAN_description' => 'Arp-scan is a command-line tool that uses the ARP protocol to discover and fingerprint IP hosts on the local network. An alternative to ARP scan is to enable the <a href="#PIHOLE_ACTIVE"><code>PIHOLE_ACTIVE</code>PiHole integration settings</a>.',
+'ENABLE_ARPSCAN_description' => 'Arp-scan is a command-line tool that uses the ARP protocol to discover and fingerprint IP hosts on the local network. An alternative to ARP scan is to enable the <a onclick="toggleAllSettings()" href="#PIHOLE_ACTIVE"><code>PIHOLE_ACTIVE</code>PiHole integration settings</a>.',
 'SCAN_SUBNETS_name' => 'Subnets to scan',
 'SCAN_SUBNETS_description' => '
 
@@ -566,7 +567,7 @@ the arp-scan will take hours to complete instead of seconds.
 
 // Pholus
 'PHOLUS_ACTIVE_name' => 'Cycle run',
-'PHOLUS_ACTIVE_description' => '<a href="https://github.com/jokob-sk/Pi.Alert/tree/main/pholus" target="_blank" >Pholus</a> is a sniffing tool to discover additional information about the devices on the network, including the device name. If enabled this will execute the scan before every network scan cycle until there are no <code>(unknown)</code> or <code>(name not found)</code> devices. Please be aware it can spam the network with unnecessary traffic. Depends on the <a href="#SCAN_SUBNETS"><code>SCAN_SUBNETS</code> setting</a>. For a scheduled or one-off scan, check the <a href="#PHOLUS_RUN"><code>PHOLUS_RUN</code> setting</a>.',
+'PHOLUS_ACTIVE_description' => '<a href="https://github.com/jokob-sk/Pi.Alert/tree/main/pholus" target="_blank" >Pholus</a> is a sniffing tool to discover additional information about the devices on the network, including the device name. If enabled this will execute the scan before every network scan cycle until there are no <code>(unknown)</code> or <code>(name not found)</code> devices. Please be aware it can spam the network with unnecessary traffic. Depends on the <a onclick="toggleAllSettings()" href="#SCAN_SUBNETS"><code>SCAN_SUBNETS</code> setting</a>. For a scheduled or one-off scan, check the <a href="#PHOLUS_RUN"><code>PHOLUS_RUN</code> setting</a>.',
 'PHOLUS_TIMEOUT_name' => 'Cycle run timeout',
 'PHOLUS_TIMEOUT_description' => 'How long in seconds should Pholus be sniffing on each interface if above condition is fulfilled. The longer you leave it on, the more likely devices would broadcast more info. This timeout adds to the time it takes to perform an arp-scan on your network.',
 'PHOLUS_FORCE_name' => 'Cycle force scan',
@@ -577,7 +578,7 @@ the arp-scan will take hours to complete instead of seconds.
 'PHOLUS_RUN_TIMEOUT_description' => 'The timeout in seconds for the scheduled Pholus scan. Same notes regarding the duration apply as on the <a href="#PHOLUS_TIMEOUT"><code>PHOLUS_TIMEOUT</code> setting</a>. A scheduled scan doesn\'t check if there are <code>(unknown)</code> or <code>(name not found)</code> devices, the scan is executed either way.',
 'PHOLUS_RUN_SCHD_name' => 'Schedule',
 'PHOLUS_RUN_SCHD_description' => 'Only enabled if you select <code>schedule</code> in the <a href="#PHOLUS_RUN"><code>PHOLUS_RUN</code> setting</a>. Make sure you enter the schedule in the correct cron-like format 
-(e.g. validate at <a  href="https://crontab.guru/" target="_blank">crontab.guru</a>). For example entering <code>0 4 * * *</code> will run the scan after 4 am in the <a href="#TIMEZONE"><code>TIMEZONE</code> you set above</a>. Will be run NEXT time the time passes.',
+(e.g. validate at <a  href="https://crontab.guru/" target="_blank">crontab.guru</a>). For example entering <code>0 4 * * *</code> will run the scan after 4 am in the <a onclick="toggleAllSettings()" href="#TIMEZONE"><code>TIMEZONE</code> you set above</a>. Will be run NEXT time the time passes.',
 'PHOLUS_DAYS_DATA_name' => 'Data retention',
 'PHOLUS_DAYS_DATA_description' => 'How many days of Pholus scan entries should be kept (globally, not device specific!). The <a href="/maintenance.php#tab_Logging">pialert_pholus.log</a> file is not touched. Enter <code>0</code> to disable.',
 

front/settings.php

@@ -49,11 +49,11 @@ CommitDB();
     <section class="content-header">
     <?php require 'php/templates/notification.php'; ?>
       <h1 id="pageTitle">
-         <?php echo lang('Navigation_Settings');?>
+         <?php echo lang('Navigation_Settings');?> <a><i id='toggleSettings' onclick="toggleAllSettings()" class="fa fa-angle-double-down"></i> </a>
       </h1>
       <div class="settingsImported"><?php echo lang("settings_imported");?> <span id="lastImportedTime"></span></div>      
     </section>
-    <div class="content">
+    <div class="content " id='accordion_gen'>
    <?php      
 
       $html = "";
@@ -67,160 +67,168 @@ CommitDB();
       }
 
       // create settings groups
+      $isIn = ' in ';
       foreach ($groups as $group) { 
-        $html = $html.'<section class="content box">
+        $html = $html.'<div  class=" box panel panel-default">
-          <h4>'.$group.'</h4>';
+                          <div class="panel-heading">
+                            <a data-toggle="collapse" data-parent="#accordion_gen" href="#'.$group.'">
+                              <h4 class="panel-title">'.$group.'</h4>
+                            </a>
+                          </div>
+                          <div id="'.$group.'" class="panel-collapse collapse '.$isIn.'"> 
+                           <div class="panel-body">';
+        $isIn = ' '; // open the first panel only by default on page load
 
-          // populate settings for each group
+        // populate settings for each group id="collapse100" class="panel-collapse collapse"
-          foreach ($settings as $set) { 
+        foreach ($settings as $set) { 
-            if($set["Group"] == $group)
+          if($set["Group"] == $group)
-            {
+          {
-              $html = $html.
+            $html = $html.
-              '<div class=" row table_row" >
+            '<div  class=" row table_row" > 
-                <div class="table_cell setting_name bold" ><label>';
+              <div class="table_cell setting_name bold" ><label>';
 
-              $html = $html.getString ($set['Code_Name'].'_name', $set['Display_Name']).'</label>';
+            $html = $html.getString ($set['Code_Name'].'_name', $set['Display_Name']).'</label>';
 
-              $html = $html.'<div class="small" ><code>'.$set['Code_Name'].'</code></div>';
+            $html = $html.'<div class="small" ><code>'.$set['Code_Name'].'</code></div>';
 
-              $html = $html.
+            $html = $html.
+            '</div>       
+              <div class="table_cell setting_description" >';               
+
+            $html = $html.getString ($set['Code_Name'].'_description', $set['Description']);
+
+            $html = $html.
               '</div>       
-               <div class="table_cell setting_description" >';               
+            <div class="table_cell setting_input" >';
 
-              $html = $html.getString ($set['Code_Name'].'_description', $set['Description']);
+            // render different input types based on the settings type
+            $input = "";
 
-              $html = $html.
+            // text - textbox
-                '</div>       
+            if($set['Type'] == 'text' ) 
-              <div class="table_cell setting_input" >';
+            {
-
+              $input = '<input class="form-control" onChange="settingsChanged()" input" id="'.$set['Code_Name'].'" value="'.$set['Value'].'"/>';                
-              // render different input types based on the settings type
-              $input = "";
-
-              // text - textbox
-              if($set['Type'] == 'text' ) 
-              {
-                $input = '<input class="form-control" onChange="settingsChanged()" input" id="'.$set['Code_Name'].'" value="'.$set['Value'].'"/>';                
-              } 
-              // password - hidden text
-              elseif ($set['Type'] == 'password')
-              {
-                $input = '<input onChange="settingsChanged()" class="form-control input" id="'.$set['Code_Name'].'" type="password" value="'.$set['Value'].'"/>';
-              }
-              // readonly 
-              elseif ($set['Type'] == 'readonly')
-              {
-                $input = '<input class="form-control input" id="'.$set['Code_Name'].'"  value="'.$set['Value'].'" readonly/>';
-              }
-              // boolean - checkbox
-              elseif ($set['Type'] == 'boolean')
-              {
-                $checked = "";
-                if ($set['Value'] == "True") { $checked = "checked";};
-                $input = '<input onChange="settingsChanged()" class="checkbox" id="'.$set['Code_Name'].'" type="checkbox" value="'.$set['Value'].'" '.$checked.' />';                
-              }
-              // integer - number input
-              elseif ($set['Type'] == 'integer')
-              {
-                $input = '<input onChange="settingsChanged()" class="form-control" id="'.$set['Code_Name'].'" type="number" value="'.$set['Value'].'"/>';                
-              }
-              // selecttext - dropdown
-              elseif ($set['Type'] == 'selecttext')
-              {
-                $input = '<select onChange="settingsChanged()" class="form-control" name="'.$set['Code_Name'].'" id="'.$set['Code_Name'].'">';                 
-                
-                $values = createArray($set['Value']);
-                $options = createArray($set['Options']);
-
-                foreach ($options as $option) {              
-                  $selected = "";
-
-                  if( in_array( $option , $values) == true) {
-                    $selected = "selected";
-                  }
-
-                  $input = $input.'<option value="'.$option.'" '.$selected.'>'.$option.'</option>';
-                }                
-                $input = $input.'</select>';
-              }
-              // selectinteger - dropdown
-              elseif ($set['Type'] == 'selectinteger')
-              {
-                $input = '<select onChange="settingsChanged()" class="form-control" name="'.$set['Code_Name'].'" id="'.$set['Code_Name'].'">';                 
-
-                $values = createArray($set['Value']);
-                $options = createArray($set['Options']);
-
-                foreach ($options as $option) {   
-                  
-                  $selected = "";
-
-                  if( in_array( $option , $values) == true) {
-                    $selected = "selected";
-                  }
-
-                  $input = $input.'<option value="'.$option.'" '.$selected.'>'.$option.'</option>';
-                }                
-                $input = $input.'</select>';
-              }
-              // multiselect
-              elseif ($set['Type'] == 'multiselect')
-              {
-                $input = '<select onChange="settingsChanged()" class="form-control" name="'.$set['Code_Name'].'" id="'.$set['Code_Name'].'" multiple>';  
-
-                $values = createArray($set['Value']);
-                $options = createArray($set['Options']);
-
-                foreach ($options as $option) {                     
-                  $selected = "";
-
-                  if( in_array( $option , $values) == true) {
-                    $selected = "selected";
-                  }
-
-                  $input = $input.'<option value="'.$option.'" '.$selected.'>'.$option.'</option>';
-                }                
-                $input = $input.'</select>';
-              }
-              // multiselect
-              elseif ($set['Type'] == 'subnets')
-              {
-                $input = $input.
-                '<div class="row form-group">
-                  <div class="col-xs-6">
-                    <input class="form-control" id="ipMask" type="text" placeholder="192.168.1.0/24"/>
-                  </div>';
-                // Add interface button
-                $input = $input.
-                  '<div class="col-xs-3">
-                    <input class="form-control " id="ipInterface" type="text" placeholder="eth0" />
-                  </div>
-                  <div class="col-xs-3"><button class="btn btn-primary" onclick="addInterface()" >Add</button></div>
-                 </div>';
-                
-                // list all interfaces as options
-                $input = $input.'<div class="form-group">
-                  <select class="form-control" name="'.$set['Code_Name'].'" id="'.$set['Code_Name'].'" multiple readonly>';
-                  
-                $options = createArray($set['Value']);                
-
-                foreach ($options as $option) {                                       
-
-                  $input = $input.'<option value="'.$option.'" disabled>'.$option.'</option>';
-                }                
-                $input = $input.'</select></div>';
-                // Remove all interfaces button               
-                $input = $input.'<div><button class="btn btn-primary" onclick="removeInterfaces()">Remove all</button></div>';
-                
-              }               
-
-              $html = $html.$input;
-
-              $html = $html.'</div>  
-              </div>';
             } 
-          }
+            // password - hidden text
+            elseif ($set['Type'] == 'password')
+            {
+              $input = '<input onChange="settingsChanged()" class="form-control input" id="'.$set['Code_Name'].'" type="password" value="'.$set['Value'].'"/>';
+            }
+            // readonly 
+            elseif ($set['Type'] == 'readonly')
+            {
+              $input = '<input class="form-control input" id="'.$set['Code_Name'].'"  value="'.$set['Value'].'" readonly/>';
+            }
+            // boolean - checkbox
+            elseif ($set['Type'] == 'boolean')
+            {
+              $checked = "";
+              if ($set['Value'] == "True") { $checked = "checked";};
+              $input = '<input onChange="settingsChanged()" class="checkbox" id="'.$set['Code_Name'].'" type="checkbox" value="'.$set['Value'].'" '.$checked.' />';                
+            }
+            // integer - number input
+            elseif ($set['Type'] == 'integer')
+            {
+              $input = '<input onChange="settingsChanged()" class="form-control" id="'.$set['Code_Name'].'" type="number" value="'.$set['Value'].'"/>';                
+            }
+            // selecttext - dropdown
+            elseif ($set['Type'] == 'selecttext')
+            {
+              $input = '<select onChange="settingsChanged()" class="form-control" name="'.$set['Code_Name'].'" id="'.$set['Code_Name'].'">';                 
               
-        $html = $html.'</section>';
+              $values = createArray($set['Value']);
+              $options = createArray($set['Options']);
+
+              foreach ($options as $option) {              
+                $selected = "";
+
+                if( in_array( $option , $values) == true) {
+                  $selected = "selected";
+                }
+
+                $input = $input.'<option value="'.$option.'" '.$selected.'>'.$option.'</option>';
+              }                
+              $input = $input.'</select>';
+            }
+            // selectinteger - dropdown
+            elseif ($set['Type'] == 'selectinteger')
+            {
+              $input = '<select onChange="settingsChanged()" class="form-control" name="'.$set['Code_Name'].'" id="'.$set['Code_Name'].'">';                 
+
+              $values = createArray($set['Value']);
+              $options = createArray($set['Options']);
+
+              foreach ($options as $option) {   
+                
+                $selected = "";
+
+                if( in_array( $option , $values) == true) {
+                  $selected = "selected";
+                }
+
+                $input = $input.'<option value="'.$option.'" '.$selected.'>'.$option.'</option>';
+              }                
+              $input = $input.'</select>';
+            }
+            // multiselect
+            elseif ($set['Type'] == 'multiselect')
+            {
+              $input = '<select onChange="settingsChanged()" class="form-control" name="'.$set['Code_Name'].'" id="'.$set['Code_Name'].'" multiple>';  
+
+              $values = createArray($set['Value']);
+              $options = createArray($set['Options']);
+
+              foreach ($options as $option) {                     
+                $selected = "";
+
+                if( in_array( $option , $values) == true) {
+                  $selected = "selected";
+                }
+
+                $input = $input.'<option value="'.$option.'" '.$selected.'>'.$option.'</option>';
+              }                
+              $input = $input.'</select>';
+            }
+            // multiselect
+            elseif ($set['Type'] == 'subnets')
+            {
+              $input = $input.
+              '<div class="row form-group">
+                <div class="col-xs-6">
+                  <input class="form-control" id="ipMask" type="text" placeholder="192.168.1.0/24"/>
+                </div>';
+              // Add interface button
+              $input = $input.
+                '<div class="col-xs-3">
+                  <input class="form-control " id="ipInterface" type="text" placeholder="eth0" />
+                </div>
+                <div class="col-xs-3"><button class="btn btn-primary" onclick="addInterface()" >Add</button></div>
+                </div>';
+              
+              // list all interfaces as options
+              $input = $input.'<div class="form-group">
+                <select class="form-control" name="'.$set['Code_Name'].'" id="'.$set['Code_Name'].'" multiple readonly>';
+                
+              $options = createArray($set['Value']);                
+
+              foreach ($options as $option) {                                       
+
+                $input = $input.'<option value="'.$option.'" disabled>'.$option.'</option>';
+              }                
+              $input = $input.'</select></div>';
+              // Remove all interfaces button               
+              $input = $input.'<div><button class="btn btn-primary" onclick="removeInterfaces()">Remove all</button></div>';
+              
+            }               
+
+            $html = $html.$input;
+
+            $html = $html.'</div>  
+            </div>';
+          }
+        }
+
+        $html = $html.'</div></div></div>';
       }
 
       echo $html;
@@ -384,6 +392,36 @@ CommitDB();
   }
   
   
+  // -----------------------------------------------------------------------------
+  function toggleAllSettings()
+  {
+    inStr = ' in';
+    allOpen = true;
+    openIcon = 'fa-angle-double-down';
+    closeIcon = 'fa-angle-double-up';
+
+    $('.panel-collapse').each(function(){
+      if($(this).attr('class').indexOf(inStr) == -1)
+      {
+        allOpen = false;
+      }
+    })
+
+    if(allOpen)
+    {
+      // close all
+      $('.panel-collapse').each(function(){$(this).attr('class', 'panel-collapse collapse  ')})
+      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(closeIcon, openIcon))
+    }
+    else{
+      // open all
+      $('.panel-collapse').each(function(){$(this).attr('class', 'panel-collapse collapse in')})
+      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(openIcon, closeIcon))
+    }
+    
+  }
+
+
 </script>
 
 <script defer>