Add settings level and only-changed settings toggle

Signed-off-by: DL6ER <dl6er@dl6er.de>
2025-12-19 18:28:24 +00:00 · 2023-11-29 13:08:47 +01:00
parent 01577e2392
commit ceb1118c0b
13 changed files with 92 additions and 47 deletions
--- a/scripts/pi-hole/js/footer.js
+++ b/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
-  settingsLevel = parseInt(localStorage.getItem("settings-level"), 10);
-  if (isNaN(settingsLevel)) {
-    settingsLevel = 0;
-    localStorage.setItem("settings-level", settingsLevel);
+  const elem = $("#expert-settings");
+
+  // Skip if element is not present (e.g. on login page)
+  if (!elem) return;
+
+  // 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(
-    '<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();
+  // 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) {
+function applyExpertSettings() {
+  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");
--- a/scripts/pi-hole/js/settings-advanced.js
+++ b/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();
 });
--- a/scripts/pi-hole/lua/header.lp
+++ b/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')?>">
--- a/scripts/pi-hole/lua/settings_header.lp
+++ b/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>
--- a/settings-all.lp
+++ b/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>

--- a/settings-api.lp
+++ b/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>
--- a/settings-dhcp.lp
+++ b/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>

--- a/settings-dns.lp
+++ b/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>

--- a/settings-dnsrecords.lp
+++ b/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>
--- a/settings-privacy.lp
+++ b/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>

--- a/settings-system.lp
+++ b/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>
--- a/settings-teleporter.lp
+++ b/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>

--- a/style/pi-hole.css
+++ b/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;
 }