clickable settings cards ⚙

jokob-sk · Jan 7, 2024 · 5207162 · 5207162
1 parent 8eecc54
commit 5207162
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 38 deletions.
diff --git a/front/js/settings_utils.js b/front/js/settings_utils.js
@@ -80,26 +80,64 @@
 
       });
 
-      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>
             `
     });
 
     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
@@ -279,7 +279,8 @@ function initSettingsPage(settingsData, pluginsData){
         </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 @@ function handleLoadingDialog()
 
   }
 
-
-
-  // -----------------------------------------------------------------------------
-  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()