settings-level-expert: only toggle the expert elements

Show the basic ones by default. Also, reduce jQuery usage in those functions while at it.

Signed-off-by: XhmikosR <xhmikosr@gmail.com>

scripts/js/footer.js

@@ -642,23 +642,24 @@ $("#pihole-disable-custom").on("click", e => {
 });
 
 function initSettingsLevel() {
-  const elem = $("#expert-settings");
+  // Apply expert settings level
+  applyExpertSettings();
+
+  const expertSettingsElement = document.getElementById("expert-settings");
 
   // Skip init if element is not present (e.g. on login page)
-  if (elem.length === 0) {
-    applyExpertSettings();
-    return;
-  }
+  if (!expertSettingsElement) return;
 
   // Restore settings level from local storage (if available) or default to "false"
-  if (localStorage.getItem("expert_settings") === null) {
+  const storedExpertSettings = localStorage.getItem("expert_settings");
+  if (storedExpertSettings === null) {
     localStorage.setItem("expert_settings", "false");
   }
 
-  elem.prop("checked", localStorage.getItem("expert_settings") === "true");
+  expertSettingsElement.checked = storedExpertSettings === "true";
 
   // Init the settings level toggle
-  elem.bootstrapToggle({
+  $(expertSettingsElement).bootstrapToggle({
     on: "Expert",
     off: "Basic",
     size: "small",
@@ -668,26 +669,23 @@ function initSettingsLevel() {
   });
 
   // Add handler for settings level toggle
-  elem.on("change", function () {
-    localStorage.setItem("expert_settings", $(this).prop("checked") ? "true" : "false");
+  $(expertSettingsElement).on("change", event => {
+    localStorage.setItem("expert_settings", event.currentTarget.checked ? "true" : "false");
     applyExpertSettings();
   });
-
-  // Apply settings level
-  applyExpertSettings();
 }
 
+// Apply expert settings level, this will hide/show elements with the class
+// "settings-level-expert" depending on the current settings level
+// If "expert_settings" is not set, we default to !"true"
 function applyExpertSettings() {
-  // Apply settings level, this will hide/show elements with the class
-  // "settings-level-basic" or "settings-level-expert" depending on the
-  // current settings level
-  // If "expert_settings" is not set, we default to !"true" (basic settings)
+  const expertSettingsNodes = document.querySelectorAll(".settings-level-expert");
+  if (expertSettingsNodes.length === 0) return;
+
   if (localStorage.getItem("expert_settings") === "true") {
-    $(".settings-level-basic").show();
-    $(".settings-level-expert").show();
+    for (const element of expertSettingsNodes) element.classList.remove("d-none");
   } else {
-    $(".settings-level-basic").show();
-    $(".settings-level-expert").hide();
+    for (const element of expertSettingsNodes) element.classList.add("d-none");
 
     // If we left with an empty page (no visible boxes) after switching from
     // Expert to Basic settings, redirect to admin/settings/system instead
@@ -696,9 +694,8 @@ function applyExpertSettings() {
     //    settings page as well, even when the button has "only modified"
     //    functionality there), and
     //  - there are no visible boxes (the page is empty)
-    if ($(".settings-selector").length > 0 && $(".box:visible").length === 0) {
-      const webhome = document.body.dataset.webhome;
-      globalThis.location.href = webhome + "settings/system";
+    if (document.querySelector(".settings-selector") && $(".box:visible").length === 0) {
+      globalThis.location.href = `${document.body.dataset.webhome}settings/system`;
     }
   }
 }

settings-api.lp

@@ -14,7 +14,7 @@ PageTitle = "Web Interface - API Settings"
 mg.include('scripts/lua/settings_header.lp','r')
 ?>
 <div class="row">
-    <div class="col-md-6 settings-level-basic">
+    <div class="col-md-6">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title" data-configkeys="webserver.interface.theme webserver.interface.boxed">Theme settings</h3>
@@ -166,7 +166,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-basic save-button-container">
+    <div class="col-lg-12 save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>

settings-dhcp.lp

@@ -15,7 +15,7 @@ mg.include('scripts/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <!-- DHCP Settings Box -->
-    <div class="col-md-6 settings-level-basic">
+    <div class="col-md-6">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title" data-configkeys="dhcp.active dhcp.start dhcp.end dhcp.router dhcp.ipv6">DHCP Settings</h3>
@@ -221,7 +221,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-basic save-button-container">
+    <div class="col-lg-12 save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>

settings-dns.lp

@@ -234,7 +234,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-basic save-button-container">
+    <div class="col-lg-12 save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>

settings-privacy.lp

@@ -14,7 +14,7 @@ PageTitle = "Privacy Settings"
 mg.include('scripts/lua/settings_header.lp','r')
 ?>
 <div class="row">
-    <div class="col-md-6 settings-level-basic">
+    <div class="col-md-6">
         <div class="row">
             <div class="col-md-12">
                 <div class="box box-warning">
@@ -99,7 +99,7 @@ mg.include('scripts/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-basic save-button-container">
+    <div class="col-lg-12 save-button-container">
         <button type="button" class="btn btn-primary save-button"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>
     </div>
 </div>

style/pi-hole.css

@@ -1251,14 +1251,6 @@ table.dataTable tbody > tr > .selected {
   display: none;
 }
 
-.settings-level-basic {
-  display: none;
-}
-
-.settings-level-expert {
-  display: none;
-}
-
 .main-footer {
   padding-bottom: 0px;
 }
@@ -1497,6 +1489,10 @@ table.dataTable tbody > tr > .selected {
   padding-top: 1rem !important;
 }
 
+.d-none {
+  display: none !important;
+}
+
 .password_background {
   background-image: repeating-linear-gradient(
     45deg,