Tweak settings level and add changed-only toggle

scripts/pi-hole/js/footer.js

@@ -10,8 +10,6 @@
 //The following functions allow us to display time until pi-hole is enabled after disabling.
 //Works between all pages
 
-var settingsLevel = 0;
-
 const REFRESH_INTERVAL = {
   logs: 500, // 0.5 sec (logs page)
   summary: 1000, // 1 sec (dashboard)
@@ -190,6 +188,8 @@ function applyCheckboxRadioStyle() {
   var sel = $("input[type='radio'],input[type='checkbox']")
     .not("#selSec")
     .not("#selMin")
+    .not("#expert-settings")
+    .not("#only-changed")
     .not("[id^=status_]");
   sel.parent().removeClass();
   sel.parent().addClass("icheck-" + iCheckStyle);
@@ -648,50 +648,62 @@ $("#pihole-disable-custom").on("click", function (e) {
 });
 
 function initSettingsLevel() {
-  // Restore settings level from local storage (if available) or default to 0
-  settingsLevel = parseInt(localStorage.getItem("settings-level"), 10);
-  if (isNaN(settingsLevel)) {
-    settingsLevel = 0;
-    localStorage.setItem("settings-level", settingsLevel);
+  const elem = $("#expert-settings");
+
+  // Skip init if element is not present (e.g. on login page)
+  if (elem.length === 0) {
+    applyExpertSettings();
+    return;
   }
 
-  // Set the settings level
+  // Restore settings level from local storage (if available) or default to "false"
+  if (localStorage.getItem("expert_settings") === null) {
+    localStorage.setItem("expert_settings", "false");
+  }
 
-  $("#settings-level").append(
-    '<option value="0"' + (settingsLevel === 0 ? " selected" : "") + ">Basic</option>"
-  );
-  $("#settings-level").append(
-    '<option value="1"' + (settingsLevel === 1 ? " selected" : "") + ">Advanced</option>"
-  );
-  $("#settings-level").append(
-    '<option value="2"' + (settingsLevel === 2 ? " selected" : "") + ">Expert</option>"
-  );
-  applySettingsLevel();
+  elem.prop("checked", localStorage.getItem("expert_settings") === "true");
+
+  // Init the settings level toggle
+  elem.bootstrapToggle({
+    on: "Expert",
+    off: "Basic",
+    size: "small",
+    offstyle: "success",
+    onstyle: "danger",
+    width: "80px",
+  });
+
+  // Add handler for settings level toggle
+  elem.on("change", function () {
+    localStorage.setItem("expert_settings", $(this).prop("checked") ? "true" : "false");
+    applyExpertSettings();
+    addAdvancedInfo();
+  });
+
+  // Apply settings level
+  applyExpertSettings();
 }
 
-function applySettingsLevel() {
-  if (settingsLevel === 2) {
-    $(".settings-level-0").show();
-    $(".settings-level-1").show();
-    $(".settings-level-2").show();
-  } else if (settingsLevel === 1) {
-    $(".settings-level-0").show();
-    $(".settings-level-1").show();
-    $(".settings-level-2").hide();
+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)
+  if (localStorage.getItem("expert_settings") === "true") {
+    $(".settings-level-basic").show();
+    $(".settings-level-expert").show();
   } else {
-    $(".settings-level-0").show();
-    $(".settings-level-1").hide();
-    $(".settings-level-2").hide();
+    $(".settings-level-basic").show();
+    $(".settings-level-expert").hide();
+
+    // If we left with an empty page (no visible boxes) after switching from
+    // Expert to Basic settings, redirect to admin/settings/system instead
+    if ($(".box:visible").length === 0) {
+      window.location.href = "/admin/settings/system";
+    }
   }
 }
 
-$("#settings-level").on("change", function () {
-  settingsLevel = parseInt($(this).val(), 10);
-  localStorage.setItem("settings-level", settingsLevel);
-  applySettingsLevel();
-  addAdvancedInfo();
-});
-
 function addAdvancedInfo() {
   const advancedInfoSource = $("#advanced-info-data");
   const advancedInfoTarget = $("#advanced-info");

scripts/pi-hole/js/settings-advanced.js

@@ -38,14 +38,15 @@ function generateRow(topic, key, value) {
   var box =
     '<div class="box">' +
     '<div class="box-header">' +
-    '<h3 class="box-title">' +
+    '<h3 class="box-title" data-key="' +
+    key +
+    '" data-modified="' +
+    (value.modified ? "true" : "false") +
+    '">' +
     key +
     (value.modified
       ? '&nbsp;&nbsp;<i class="far fa-edit text-light-blue" title="Modified from default"></i>'
       : "") +
-    (value.flags.advanced
-      ? '&nbsp;&nbsp;<i class="fas fa-cogs text-yellow" title="Expert-level setting"></i>'
-      : "") +
     (value.flags.restart_dnsmasq
       ? '&nbsp;&nbsp;<i class="fas fa-redo text-orange" title="Setting requires FTL restart on change"></i>'
       : "") +
@@ -327,12 +328,68 @@ function createDynamicConfigTabs() {
       });
 
       applyCheckboxRadioStyle();
+      applyOnlyChanged();
     })
     .fail(function (data) {
       apiFailure(data);
     });
 }
 
+function initOnlyChanged() {
+  const elem = $("#only-changed");
+
+  // Restore settings level from local storage (if available) or default to "false"
+  if (localStorage.getItem("only-changed") === null) {
+    localStorage.setItem("only-changed", "false");
+  }
+
+  elem.prop("checked", localStorage.getItem("only-changed") === "true");
+
+  elem.bootstrapToggle({
+    on: "Modified settings",
+    off: "All settings",
+    onstyle: "primary",
+    offstyle: "success",
+    size: "small",
+    width: "180px",
+  });
+
+  elem.on("change", function () {
+    localStorage.setItem("only-changed", $(this).prop("checked") ? "true" : "false");
+    applyOnlyChanged();
+  });
+
+  elem.bootstrapToggle(localStorage.getItem("only-changed") === "true" ? "on" : "off");
+  elem.trigger("change");
+}
+
+function applyOnlyChanged() {
+  if (localStorage.getItem("only-changed") === "true") {
+    // Hide all boxes that have a data-key attribute
+    $(".box-title[data-key]").not("[data-modified='true']").closest(".box").hide();
+  } else {
+    // Show all boxes that have a data-key attribute
+    $(".box-title[data-key]").closest(".box").show();
+  }
+
+  // Hide group headers on the all settings page after toggling to show only
+  // modified settings if there are no modified settings within that group. This
+  // prevents empty boxes when only-changed is enabled by hiding all boxes if
+  // the box does not have at least one visible box as a child
+  $(".box-title:not([data-key])").each(function () {
+    const box = $(this).closest(".box");
+    if (
+      box.find(".box-title[data-key]:visible").length === 0 &&
+      localStorage.getItem("only-changed") === "true"
+    ) {
+      box.hide();
+    } else {
+      box.show();
+    }
+  });
+}
+
 $(document).ready(function () {
   createDynamicConfigTabs();
+  initOnlyChanged();
 });

scripts/pi-hole/js/settings.js

@@ -41,7 +41,7 @@ function setConfigValues(topic, key, value) {
 
   if (value.flags.advanced && envTitle.find(".advanced-warning").length === 0) {
     envTitle.append(
-      `<span class="advanced-warning">&nbsp;&nbsp;<i class="fas fa-wrench" title="This is an advanced level setting"></i></span>`
+      `<span class="advanced-warning">&nbsp;&nbsp;<i class="fas fa-wrench" title="Expert level setting"></i></span>`
     );
   }
 

scripts/pi-hole/lua/header.lp

@@ -95,12 +95,12 @@ if startsWith(scriptname, 'groups') then
     -- Group management styles
 ?>
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/bootstrap-select.min.css')?>">
-    <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/bootstrap-toggle.min.css')?>">
 <? end ?>
 <? if is_authenticated then ?>
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/datatables.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/datatables_extensions.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/daterangepicker.min.css')?>">
+    <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/bootstrap-toggle.min.css')?>">
 <? end ?>
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/select2.min.css')?>">
     <link rel="stylesheet" href="<?=pihole.fileversion('style/vendor/AdminLTE.min.css')?>">

scripts/pi-hole/lua/settings_header.lp

@@ -1,14 +1,13 @@
 <!-- Title -->
 <div class="page-header flex-header">
     <h1><?= PageTitle ?></h1>
-<?
-if scriptname ~= 'settings/all' then
+    <div class="settings-selector">
+<? if scriptname ~= 'settings/all' then
     -- Show the level selector, except in All Settings page
 ?>
-    <div class="settings-selector">
-        Settings level: <select id="settings-level" class="form-control input-sm"></select>
+        <input type="checkbox" id="expert-settings">
+<? else ?>
+        <input type="checkbox" id="only-changed">
+<? end ?>
     </div>
-<?
-end
-?>
 </div>

scripts/pi-hole/lua/sidebar.lp

@@ -163,12 +163,12 @@
                                 <i class="fa-fw menu-icon fa-solid fa-file-export"></i> <span>Teleporter</span>
                             </a>
                         </li>
-                        <li class="<? if scriptname == 'settings/dnsrecords' then ?> active<? end ?> settings-level-1">
+                        <li class="<? if scriptname == 'settings/dnsrecords' then ?> active<? end ?> settings-level-expert">
                             <a href="<?=webhome?>settings/dnsrecords">
                                 <i class="fa-fw menu-icon fa-solid fa-address-book"></i> <span>Local DNS Records</span>
                             </a>
                         </li>
-                        <li class="<? if scriptname == 'settings/all' then ?> active<? end ?> settings-level-2">
+                        <li class="<? if scriptname == 'settings/all' then ?> active<? end ?> settings-level-expert">
                             <a href="<?=webhome?>settings/all">
                                 <i class="fa-fw menu-icon fa-solid fa-pen-to-square"></i> <span>All settings</span>
                             </a>

settings-all.lp

@@ -13,15 +13,16 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
 PageTitle = "All Settings"
 mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
-<div class="row settings-level-2" id="advanced-content">
+<div class="row settings-level-expert" id="advanced-content">
     <!-- dynamically filled with content -->
     <div class="overlay" id="advanced-overlay">
         <i class="fa fa-sync fa-spin"></i>
     </div>
-    <div class="col-lg-12 settings-level-2 save-button-container">
+    <div class="col-lg-12 settings-level-expert 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>
+<script src="<?=pihole.fileversion('scripts/vendor/bootstrap-toggle.min.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings-advanced.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings.js')?>"></script>
 

settings-api.lp

@@ -14,9 +14,9 @@ PageTitle = "Web Interface - API Settings"
 mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
-    <div class="col-md-6 settings-level-0">
+    <div class="col-md-6 settings-level-basic">
         <div class="row">
-            <div class="col-md-12 settings-level-1">
+            <div class="col-md-12 settings-level-expert">
                 <div class="box box-warning">
                     <div class="box-header with-border">
                         <h3 class="box-title" data-configkeys="webserver.api.excludeDomains webserver.api.excludeClients">Exclusions</h3>
@@ -42,7 +42,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
                     </div>
                 </div>
             </div>
-            <div class="col-md-12 settings-level-0">
+            <div class="col-md-12 settings-level-basic">
                 <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>
@@ -94,7 +94,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
             </div>
         </div>
     </div>-->
-    <div class="col-md-6 settings-level-1">
+    <div class="col-md-6 settings-level-expert">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title" data-configkeys="webserver.api.localAPIauth webserver.api.prettyJSON webserver.api.allow_destructive webserver.api.temp.limit webserver.api.temp.unit">Advanced Settings</h3>
@@ -151,7 +151,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-md-12 settings-level-2">
+    <div class="col-md-12 settings-level-expert">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title">Currently active sessions</h3>
@@ -182,7 +182,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-0 save-button-container">
+    <div class="col-lg-12 settings-level-basic 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>
@@ -259,6 +259,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
     </div>
 </div>
 
+<script src="<?=pihole.fileversion('scripts/vendor/bootstrap-toggle.min.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/vendor/jquery.confirm.min.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/vendor/qrious.min.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings-api.js')?>"></script>

settings-dhcp.lp

@@ -15,7 +15,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
 ?>
 <div class="row">
     <!-- DHCP Settings Box -->
-    <div class="col-md-6 settings-level-0">
+    <div class="col-md-6 settings-level-basic">
         <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>
@@ -82,7 +82,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-md-6 settings-level-1">
+    <div class="col-md-6 settings-level-expert">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title" data-configkeys="dhcp.leaseTime dhcp.rapidCommit dhcp.multiDNS">Advanced DHCP Settings</h3>
@@ -147,7 +147,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-md-12 settings-level-2">
+    <div class="col-md-12 settings-level-expert">
         <div class="box box-warning">
             <div class="box-header with-border">
                 <h3 class="box-title" data-configkeys="dhcp.hosts">Static DHCP configuration</h3>
@@ -203,10 +203,11 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
             </div>
         </div>
     </div>
-    <div class="col-lg-12 settings-level-0 save-button-container">
+    <div class="col-lg-12 settings-level-basic 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>
+<script src="<?=pihole.fileversion('scripts/vendor/bootstrap-toggle.min.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings-dhcp.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings.js')?>"></script>