Add settings level and only-changed settings toggle

Signed-off-by: DL6ER <dl6er@dl6er.de>

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)
@@ -188,6 +186,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);
@@ -646,36 +646,44 @@ $("#pihole-disable-custom").on("click", function (e) {
 });
 
 function initSettingsLevel() {
-  // Restore settings level from local storage (if available) or default to 0
+  const elem = $("#expert-settings");
-  settingsLevel = parseInt(localStorage.getItem("settings-level"), 10);
+
-  if (isNaN(settingsLevel)) {
+  // Skip if element is not present (e.g. on login page)
-    settingsLevel = 0;
+  if (!elem) return;
-    localStorage.setItem("settings-level", settingsLevel);
+
+  // Restore settings level from local storage (if available) or default to "false"
+  if (localStorage.getItem("expert_settings") === null) {
+    localStorage.setItem("expert_settings", "false");
   }
 
-  // Set the settings level
+  elem.prop("checked", localStorage.getItem("expert_settings") === "true");
 
-  $("#settings-level").append(
+  // Init the settings level toggle
-    '<option value="0"' + (settingsLevel === 0 ? " selected" : "") + ">Basic</option>"
+  elem.bootstrapToggle({
-  );
+    on: "Expert",
-  $("#settings-level").append(
+    off: "Basic",
-    '<option value="1"' + (settingsLevel === 1 ? " selected" : "") + ">Advanced</option>"
+    size: "small",
-  );
+    offstyle: "success",
-  $("#settings-level").append(
+    onstyle: "danger",
-    '<option value="2"' + (settingsLevel === 2 ? " selected" : "") + ">Expert</option>"
+    width: "80px",
-  );
+  });
-  applySettingsLevel();
+
+  // 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() {
+function applyExpertSettings() {
-  if (settingsLevel === 2) {
+  if (localStorage.getItem("expert_settings") === "true") {
     $(".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();
   } else {
     $(".settings-level-0").show();
     $(".settings-level-1").hide();
@@ -683,13 +691,6 @@ function applySettingsLevel() {
   }
 }
 
-$("#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,7 +38,11 @@ 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>'
@@ -332,12 +336,52 @@ 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: "Only modified settings",
+    off: "Show all settings",
+    onstyle: "warning",
+    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();
+  }
+}
+
 $(document).ready(function () {
   createDynamicConfigTabs();
+  initOnlyChanged();
 });

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>
-<?
+    <div class="settings-selector">
-if scriptname ~= 'settings/all' then
+<? if scriptname ~= 'settings/all' then
     -- Show the level selector, except in All Settings page
 ?>
-    <div class="settings-selector">
+        <input type="checkbox" id="expert-settings">
-        Settings level: <select id="settings-level" class="form-control input-sm"></select>
+<? else ?>
+        <input type="checkbox" id="only-changed">
+<? end ?>
     </div>
-<?
-end
-?>
 </div>

settings-all.lp

@@ -22,6 +22,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
         <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

@@ -254,6 +254,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

@@ -204,6 +204,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
         <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>
 

settings-dns.lp

@@ -262,6 +262,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
         <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-dns.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings.js')?>"></script>
 

settings-dnsrecords.lp

@@ -107,6 +107,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
         </div>
     </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/pi-hole/js/settings-dns-records.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/ip-address-sorting.js')?>"></script>

settings-privacy.lp

@@ -108,6 +108,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/pi-hole/js/settings-privacy.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings.js')?>"></script>
 

settings-system.lp

@@ -303,6 +303,7 @@ mg.include('scripts/pi-hole/lua/settings_header.lp','r')
         </div>
     </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/pi-hole/js/charts.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings-system.js')?>"></script>

settings-teleporter.lp

@@ -91,6 +91,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/pi-hole/js/settings-teleporter.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/settings.js')?>"></script>
 

style/pi-hole.css

@@ -914,13 +914,6 @@ body:not(.lcars) .filter_types [class*="icheck-"] > input:first-child:checked +
   font-size: 18px;
 }
 
-/* Global settings level selector */
-#settings-level {
-  display: inline-block;
-  width: auto;
-  min-width: 90px;
-}
-
 .navbar-nav {
   height: 50px;
 }