From c11deeb57f203e774a4fb1d89d3bbb5becf5cf6e Mon Sep 17 00:00:00 2001
From: jokob-sk <jokob-sk@gmail.com>
Date: Thu, 25 Apr 2024 18:05:16 +1000
Subject: [PATCH] =?UTF-8?q?Settings=20filter=20v0.3=20=F0=9F=94=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/css/app.css          | 26 +++++++++++++++++----
 front/js/settings_utils.js |  9 +++++++
 front/settings.php         | 48 +++++++++++++++++++++-----------------
 3 files changed, 58 insertions(+), 25 deletions(-)

diff --git a/front/css/app.css b/front/css/app.css
index bd58431a..89fa275d 100755
--- a/front/css/app.css
+++ b/front/css/app.css
@@ -910,27 +910,45 @@ input[readonly] {
 .settings-sticky-bottom-section {
     position: fixed;
     z-index: 999;
-    background-color: #2d2d2d;
-    opacity: 0.8;
+    background-color: #5B5B66;
+    /* opacity: 0.8; */
     bottom: 30px;
     border-radius: 5px;
+    margin:1px;
+    border-width: 1px;
+    border-style: solid;
+    border-color: inherit;
+    width: 87%;
   }
 
   .settings-sticky-bottom-section:hover {
-
-    opacity: 1;
+    border-color: #000;
   }
 
 .clear-filter
 {
     opacity: 0.5;
     cursor: pointer;
+    width: 14px;
+    position: absolute;
+    right: -6px;
+    top: 6px;
+
 }
 
 .clear-filter:hover
 {
     opacity: 1;
 }
+
+.saveSettingsWrapper button
+{
+    width:70%;
+    margin-top:20px;
+    margin-left:15%;
+    margin-bottom:20px;
+}
+
 /* ----------------------------------------------------------------- */
 /*                    Devices page                                   */
 /* ----------------------------------------------------------------- */
diff --git a/front/js/settings_utils.js b/front/js/settings_utils.js
index d3b7f73c..82f1c3d5 100755
--- a/front/js/settings_utils.js
+++ b/front/js/settings_utils.js
@@ -260,6 +260,12 @@ function initListInteractionOptions(selectorId) {
 // -------------------------------------------------------------------
 // Function to filter rows based on input text
 function filterRows(inputText) {
+
+  if(!inputText)
+  {
+    inputText = ''
+  }
+
   $('.table_row').each(function() {
     // Check if the row id ends with '__metadata'
     var idAttribute = $(this).attr('id');
@@ -283,6 +289,9 @@ setTimeout(() => {
   // Event listener for input change
   $('#settingsSearch').on('input', function() {
     var searchText = $(this).val();
+    // hide the setting overview dashboard
+    $('#settingsOverview').collapse('hide');
+
     filterRows(searchText);
   });
 
diff --git a/front/settings.php b/front/settings.php
index 0350a7bc..19bfd972 100755
--- a/front/settings.php
+++ b/front/settings.php
@@ -92,14 +92,19 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
     </section>
     <section class="content-header">
 
-    <div id="settingsOverview" class ="bg-white color-palette box panel panel-default col-sm-12 box-default box-info" > 
+    <div  class ="bg-white color-palette box panel panel-default col-sm-12 box-default box-info panel panel-default panel-title" > 
       <!-- Settings imported time -->
 
-      <div class ="settings-group col-sm-12">
-            <i class="<?= lang("settings_enabled_icon");?>"></i>  <?= lang("settings_enabled");?>       
-          </div>        
-          <div class =" col-sm-12" id=""></div>
-
+      
+      <a data-toggle="collapse" href="#settingsOverview">
+        <div class ="settings-group col-sm-12 panel-heading panel-title">
+            <i class="<?= lang("settings_enabled_icon");?>"></i>  <?= lang("settings_enabled");?>  
+        </div>     
+      </a>  
+        <div id="settingsOverview" class="panel-collapse collapse in"> 
+          <div class="panel-body"></div>
+        <div class =" col-sm-12" id=""></div>
+      </div>
     </section>
 
 
@@ -147,26 +152,27 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
     <!-- /.content -->
 
 
-      <section class=" settings-sticky-bottom-section col-sm-12">
-        <div class="col-sm-5 settingsSearchWrap form-group has-success bg-white color-palette ">
-          <div class ="col-sm-12">
+      <section class=" settings-sticky-bottom-section  col-sm-10">
+        <div class="col-sm-8 settingsSearchWrap form-group has-success bg-white color-palette ">
+          <div class ="col-sm-8">
             <i class="fa-solid fa-filter"></i> <?= lang("Gen_Filter");?>  
           </div>
-          <div class ="col-sm-12">
-            <div class ="col-sm-11">
-              <input type="text" id="settingsSearch" class="form-control input-sm col-sm-7" placeholder="Filter Settings...">
-            </div>
-            <div class ="col-sm-1 clear-filter">
-              <i class="fa-solid fa-circle-xmark" onclick="$('#settingsSearch').val('')"></i>
-            </div>
+            <div class ="col-sm-12">
+
+              <input type="text" id="settingsSearch" class="form-control input-sm col-sm-12" placeholder="Filter Settings...">
+              <div class="clear-filter ">
+                <i class="fa-solid fa-circle-xmark" onclick="$('#settingsSearch').val('');filterRows();$('#settingsSearch').focus()"></i>
+              </div>
+
+            
           </div>
           
         </div>
 
-        <div class="col-sm-5">
-            <button type="button" class="center top-margin  btn btn-primary btn-default pa-btn bg-green" id="save" onclick="saveSettings()"><?= lang('DevDetail_button_Save');?></button>
-          </div>
-          <div id="result"></div>
+        <div class="col-sm-4 saveSettingsWrapper">
+            <button type="button" class="   btn btn-primary btn-default pa-btn bg-green" id="save" onclick="saveSettings()"><?= lang('DevDetail_button_Save');?></button>
+        </div>
+        <div id="result"></div>
     </section>
 </div>
 
@@ -260,7 +266,7 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
       index++;
     });
 
-    $('#settingsOverview').append(overviewSections_html);
+    $('#settingsOverview .panel-body').append(overviewSections_html);
 
     // Display warning 
     if(schedulesAreSynchronized(enabledDeviceScanners, pluginsData) == false)