From 5207162d0ad80fbb4cfaeb64730148e108d2ac03 Mon Sep 17 00:00:00 2001
From: Jokob-sk <jokob.sk@gmail.com>
Date: Sun, 7 Jan 2024 11:40:09 +1100
Subject: [PATCH] =?UTF-8?q?clickable=20settings=20cards=20=E2=9A=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 front/js/settings_utils.js | 50 +++++++++++++++++++++++++++++++++-----
 front/settings.php         | 34 ++------------------------
 2 files changed, 46 insertions(+), 38 deletions(-)

diff --git a/front/js/settings_utils.js b/front/js/settings_utils.js
index f98298b1..5bb17329 100755
--- a/front/js/settings_utils.js
+++ b/front/js/settings_utils.js
@@ -80,19 +80,22 @@
 
       });
 
-      html += `
-            
+      html += `            
               <div class="col-sm-4 ">
                 <div class="small-box bg-green " >
                 <div class="inner ">
+                  <a href="#${prefix}_header" onclick="toggleAllSettings('open')">
                     <h5 class="card-title">
-                      ${getString(prefix+"_display_name")}
+                      <b>${getString(prefix+"_display_name")}</b>
                     </h5>
-                    ${includeSettings_html}
+                  </a>
+                  ${includeSettings_html}
                 </div>
-                <div class="icon"> ${getString(prefix+"_icon")} </div> 
-                  
+                  <a href="#${prefix}_header" onclick="toggleAllSettings('open')">
+                    <div class="icon"> ${getString(prefix+"_icon")} </div> 
+                  </a>  
                 </div>
+                
               </div>
             `
     });
@@ -100,6 +103,41 @@
     return html;    
   }
 
+
+  // -----------------------------------------------------------------------------
+  // Open or close all settings
+  // -----------------------------------------------------------------------------
+  function toggleAllSettings(openOrClose = '')
+  {
+    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 == false || openOrClose == 'open')
+    {
+      // open all
+      $('div[data-myid="collapsible"]').each(function(){$(this).attr('class', 'panel-collapse collapse in')})
+      $('div[data-myid="collapsible"]').each(function(){$(this).attr('style', 'height:inherit')})
+      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(openIcon, closeIcon))
+      
+    }
+    else{
+      // close all
+      $('div[data-myid="collapsible"]').each(function(){$(this).attr('class', 'panel-collapse collapse  ')})      
+      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(closeIcon, openIcon))
+    }
+    
+  }
+
+
   // -------------------------------------------------------------------
   // Checks if all schedules are the same
   function schedulesAreSynchronized(prefixesOfEnabledPlugins, pluginsData)
diff --git a/front/settings.php b/front/settings.php
index 0f126195..2ab9360c 100755
--- a/front/settings.php
+++ b/front/settings.php
@@ -279,7 +279,8 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
         </div>
       `;
 
-      headerHtml = `<div class="box box-solid box-primary panel panel-default">
+      // Plugin HEADER
+      headerHtml = `<div class="box box-solid box-primary panel panel-default" id="${group}_header">
                   <a data-toggle="collapse" data-parent="#accordion_gen" href="#${group}">
                     <div class="panel-heading">
                       <h4 class="panel-title">
@@ -789,37 +790,6 @@ while ($row = $result -> fetchArray (SQLITE3_ASSOC)) {
 
   }
   
-  
-  
-  // -----------------------------------------------------------------------------
-  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
-      $('div[data-myid="collapsible"]').each(function(){$(this).attr('class', 'panel-collapse collapse  ')})      
-      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(closeIcon, openIcon))
-    }
-    else{
-      // open all
-      $('div[data-myid="collapsible"]').each(function(){$(this).attr('class', 'panel-collapse collapse in')})
-      $('div[data-myid="collapsible"]').each(function(){$(this).attr('style', 'height:inherit')})
-      $('#toggleSettings').attr('class', $('#toggleSettings').attr('class').replace(openIcon, closeIcon))
-    }
-    
-  }
 
   getData()