Finish settings-advanced.lp

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

scripts/pi-hole/js/gravity.js

@@ -23,11 +23,12 @@ function eventsource() {
   alInfo.show();
   alSuccess.hide();
 
+  // eslint-disable-next-line compat/compat
   fetch("/api/action/gravity", {
     method: "POST",
   })
     // Retrieve its body as ReadableStream
-  .then((response) => {
+    .then(response => {
       const reader = response.body.getReader();
       return new ReadableStream({
         start(controller) {
@@ -41,23 +42,24 @@ function eventsource() {
                 $("#gravityBtn").prop("disabled", false);
                 return;
               }
+
               // Enqueue the next data chunk into our target stream
               controller.enqueue(value);
               var string = new TextDecoder().decode(value);
               // Remove ${OVER} from the string
               string = string.replaceAll("\r", "\n");
-            console.log(string);
               ta.append(string);
               if (string.indexOf("Pi-hole blocking is") !== -1) {
                 alSuccess.show();
               }
+
               return pump();
             });
           }
         },
       });
     })
-  .catch((err) => console.error(err));
+    .catch(error => console.error(error)); // eslint-disable-line no-console
 }
 
 $("#gravityBtn").on("click", function () {

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

@@ -93,6 +93,8 @@ function generateRow(topic, key, value) {
         '<div class="col-sm-8">' +
         '<input type="text" class="form-control" value="' +
         value.value +
+        '" data-key="' +
+        key +
         '"> ' +
         defaultValueHint +
         addAllowedValues(value.allowed) +
@@ -107,7 +109,9 @@ function generateRow(topic, key, value) {
         (value.value ? " checked" : "") +
         ' id="' +
         key +
-        '-checkbox"><label for="' +
+        '-checkbox" data-key="' +
+        key +
+        '"><label for="' +
         key +
         '-checkbox">Enabled ' +
         defaultValueHint +
@@ -123,7 +127,9 @@ function generateRow(topic, key, value) {
         '<div class="col-sm-8">' +
         '<input type="number" class="form-control" value="' +
         value.value +
-        '"> ' +
+        '" data-key="' +
+        key +
+        '" data-type="float"> ' +
         defaultValueHint +
         "</div>";
 
@@ -136,7 +142,9 @@ function generateRow(topic, key, value) {
         '<div class="col-sm-8">' +
         '<input type="number" step="1" class="form-control" value="' +
         value.value +
-        '"> ' +
+        '" data-key="' +
+        key +
+        '" data-type="integer"> ' +
         defaultValueHint +
         "</div>";
 
@@ -149,7 +157,9 @@ function generateRow(topic, key, value) {
         '<div class="col-sm-8">' +
         '<input type="number" step="1" min="0" class="form-control" value="' +
         value.value +
-        '"> ' +
+        '" data-key="' +
+        key +
+        '" data-type="integer"> ' +
         defaultValueHint +
         "</div>";
 
@@ -162,7 +172,9 @@ function generateRow(topic, key, value) {
         '<div class="col-sm-8">' +
         '<input type="number" step="1" min="0" max="65535" class="form-control" value="' +
         value.value +
-        '"> ' +
+        '" data-key="' +
+        key +
+        '" data-type="integer"> ' +
         defaultValueHint +
         "</div>";
 
@@ -173,7 +185,9 @@ function generateRow(topic, key, value) {
       box +=
         '<label class="col-sm-5 control-label">Values (one item per line)</label>' +
         '<div class="col-sm-7">' +
-        '<textarea class="form-control">' +
+        '<textarea class="form-control" data-key="' +
+        key +
+        '">' +
         value.value.join("\n") +
         "</textarea> " +
         defaultValueHint +
@@ -187,7 +201,9 @@ function generateRow(topic, key, value) {
       box +=
         '<label class="col-sm-4 control-label">Selected Option</label>' +
         '<div class="col-sm-8">' +
-        '<select class="form-control">';
+        '<select class="form-control" data-key="' +
+        key +
+        '">';
       value.allowed.forEach(function (option) {
         box +=
           '<option value="' +
@@ -209,6 +225,22 @@ function generateRow(topic, key, value) {
       break;
     }
 
+    case "password (write-only string)": {
+      box +=
+        '<label class="col-sm-4 control-label">Value (string)</label>' +
+        '<div class="col-sm-8">' +
+        '<input type="password" class="form-control" value="' +
+        value.value +
+        '" data-key="' +
+        key +
+        '"> ' +
+        defaultValueHint +
+        addAllowedValues(value.allowed) +
+        "</div>";
+
+      break;
+    }
+
     default: {
       box += "TYPE " + value.type + " NOT DEFINED";
     }
@@ -260,6 +292,15 @@ function createDynamicConfigTabs() {
       });
       $("#advanced-overlay").hide();
 
+      $("#advanced-content").append(
+        '<div class="col-lg-12 settings-level-1">' +
+          '<button type="button" class="btn btn-primary save-button" id="save"><i class="fa-solid fa-fw fa-floppy-disk"></i>&nbsp;Save & Apply</button>' +
+          "</div>"
+      );
+      $("button[id='save']").on("click", function () {
+        saveSettings();
+      });
+
       applyCheckboxRadioStyle();
     })
     .fail(function (data) {
@@ -267,6 +308,66 @@ function createDynamicConfigTabs() {
     });
 }
 
+function saveSettings() {
+  var settings = {};
+  $("[data-key]").each(function () {
+    var key = $(this).data("key");
+    var value = $(this).val();
+    if ($(this).is(":checkbox")) {
+      value = $(this).is(":checked");
+    }
+
+    if ($(this).is("textarea")) {
+      value = $(this).val();
+      value = value === "" ? [] : value.split("\n");
+    }
+
+    if ($(this).data("type") === "integer") {
+      value = parseInt(value, 10);
+    }
+
+    if ($(this).data("type") === "float") {
+      value = parseFloat(value);
+    }
+
+    // Build deep object
+    // Transform "foo.bar.baz" into {foo: {bar: {baz: value}}}
+    var parts = key.split(".");
+    var obj = {};
+    var tmp = obj;
+    for (var i = 0; i < parts.length - 1; i++) {
+      tmp[parts[i]] = {};
+      tmp = tmp[parts[i]];
+    }
+
+    tmp[parts[parts.length - 1]] = value;
+
+    // Merge deep object into settings
+    $.extend(true, settings, obj);
+  });
+  // Apply changes
+  $.ajax({
+    url: "/api/config",
+    method: "PATCH",
+    data: JSON.stringify({ config: settings }),
+    contentType: "application/json; charset=utf-8",
+  })
+    .done(function () {
+      // Success
+      utils.showAlert(
+        "success",
+        "fa-solid fa-fw fa-floppy-disk",
+        "Successfully saved and applied settings",
+        ""
+      );
+      // Reload page
+      location.reload();
+    })
+    .fail(function (data) {
+      apiFailure(data);
+    });
+}
+
 $(document).ready(function () {
   createDynamicConfigTabs();
 });

scripts/pi-hole/js/settings-dns-records.js

@@ -242,7 +242,7 @@ $(document).ready(function () {
       .done(function (response) {
         utils.enableAll();
         if (response === undefined) {
-          utils.showAlert("success", "far fa-trash-alt", "Successfully added DNS record", "");
+          utils.showAlert("success", "far fa-plus", "Successfully added DNS record", "");
           dnsRecordsTable.ajax.reload(null, false);
         } else {
           utils.showAlert("error", "", "Error while adding DNS record", response.record);
@@ -266,7 +266,7 @@ $(document).ready(function () {
       .done(function (response) {
         utils.enableAll();
         if (response === undefined) {
-          utils.showAlert("success", "far fa-trash-alt", "Successfully added CNAME record", "");
+          utils.showAlert("success", "far fa-plus", "Successfully added CNAME record", "");
           dnsRecordsTable.ajax.reload(null, false);
         } else {
           utils.showAlert("error", "", "Error while adding CNAME record", response.record);

scripts/pi-hole/lua/sidebar.lp

@@ -160,7 +160,7 @@
                         </li>
                         <li class="<? if scriptname == 'settings-advanced.lp' then mg.write(" active") end ?> settings-level-2">
                             <a href="settings-advanced.lp">
-                                <i class="fa-fw menu-icon fa-solid fa-pen-to-square"></i> <span class="text-orange">Advanced</span>
+                                <i class="fa-fw menu-icon fa-solid fa-pen-to-square"></i> <span class="text-green">Advanced</span>
                             </a>
                         </li>
                         <li class="<? if scriptname == 'settings-teleporter.lp' then mg.write(" active") end ?>">

settings-api.lp

@@ -130,6 +130,9 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
             </div>
         </div>
     </div>
+    <div class="col-lg-12 settings-level-1">
+        <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>
 
 <div class="modal fade" id="modal-totp" style="display: none;">

settings-dhcp.lp

@@ -195,7 +195,9 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
                 </div>
             </div>
         </div>
-        <button type="submit" class="btn btn-primary pull-right">Save</button>
+    </div>
+    <div class="col-lg-12 settings-level-1">
+        <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/pi-hole/js/settings-dhcp.js')?>"></script>

settings-dns.lp

@@ -231,9 +231,8 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
             </div>
         </div>
     </div>
-        <div class="col-lg-6 settings-level-1">
-            <button type="submit" class="btn btn-primary pull-right">Save</button>
-        </div>
+    <div class="col-lg-12 settings-level-1">
+        <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/pi-hole/js/settings-dns.js')?>"></script>

style/pi-hole.css

@@ -1103,3 +1103,9 @@ table.dataTable tbody > tr > .selected {
 .totp_token::placeholder {
   opacity: 0.1;
 }
+
+.save-button {
+  position: fixed;
+  bottom: 2%;
+  right: 2%;
+}