Add auto-saving to all group management pages.

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

scripts/pi-hole/js/groups-adlists.js

@@ -106,7 +106,6 @@ function initTable() {
       { data: null, width: "80px", orderable: false }
     ],
     drawCallback: function(settings) {
-      $(".editAdlist").on("click", editAdlist);
       $(".deleteAdlist").on("click", deleteAdlist);
     },
     rowCallback: function(row, data) {
@@ -127,20 +126,24 @@ function initTable() {
           (disabled ? "" : " checked") +
           ">"
       );
-      $("#status", row).bootstrapToggle({
+      var status = $("#status", row);
+      status.bootstrapToggle({
         on: "Enabled",
         off: "Disabled",
         size: "small",
         onstyle: "success",
         width: "80px"
       });
+      status.on("change", editAdlist);
 
       $("td:eq(2)", row).html(
         '<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
           data.id +
           '">'
       );
-      $("#comment", row).val(data.comment);
+      var comment = $("#comment", row);
+      comment.val(data.comment);
+      comment.on("change", editAdlist);
 
       $("td:eq(3)", row).empty();
       $("td:eq(3)", row).append(
@@ -163,14 +166,9 @@ function initTable() {
       sel.val(data.groups);
       // Initialize multiselect
       sel.multiselect({ includeSelectAllOption: true });
+      sel.on("change", editAdlist);
 
       let button =
-        '<button class="btn btn-success btn-xs editAdlist" type="button" data-id="' +
-        data.id +
-        '">' +
-        '<span class="glyphicon glyphicon-pencil"></span>' +
-        "</button>" +
-        " &nbsp;" +
         '<button class="btn btn-danger btn-xs deleteAdlist" type="button" data-id="' +
         data.id +
         '">' +
@@ -259,6 +257,7 @@ function addAdlist() {
 }
 
 function editAdlist() {
+  var elem = $(this).attr("id");
   var tr = $(this).closest("tr");
   var id = tr.find("#id").val();
   var status = tr.find("#status").is(":checked") ? 1 : 0;
@@ -266,6 +265,22 @@ function editAdlist() {
   var groups = tr.find("#multiselect").val();
   var address = tr.find("#address").text();
 
+  var done = "edited";
+  var not_done = "editing";
+  if (elem === "status" && status === 1) {
+    done = "enabled";
+    not_done = "enabling";
+  } else if (elem === "status" && status === 0) {
+    done = "disabled";
+    not_done = "disabling";
+  } else if (elem === "comment") {
+    done = "edited comment of";
+    not_done = "editing comment of";
+  } else if (elem === "multiselect") {
+    done = "edited groups of";
+    not_done = "editing groups of";
+  }
+
   showAlert("info", "", "Editing adlist...", address);
 
   $.ajax({
@@ -285,7 +300,7 @@ function editAdlist() {
         showAlert(
           "success",
           "glyphicon glyphicon-pencil",
-          "Successfully edited adlist ",
+          "Successfully " + done + " adlist ",
           address
         );
         table.ajax.reload();
@@ -293,7 +308,7 @@ function editAdlist() {
         showAlert(
           "error",
           "",
-          "Error while editing adlist with ID " + id,
+          "Error while " + not_done + " adlist with ID " + id,
           +response.message
         );
       }
@@ -302,7 +317,7 @@ function editAdlist() {
       showAlert(
         "error",
         "",
-        "Error while editing adlist with ID " + id,
+        "Error while " + not_done + " adlist with ID " + id,
         jqXHR.responseText
       );
       console.log(exception);

scripts/pi-hole/js/groups-clients.js

@@ -132,7 +132,6 @@ function initTable() {
       { data: "name", width: "80px", orderable: false }
     ],
     drawCallback: function(settings) {
-      $(".editClient").on("click", editClient);
       $(".deleteClient").on("click", deleteClient);
     },
     rowCallback: function(row, data) {
@@ -175,14 +174,9 @@ function initTable() {
       sel.val(data.groups);
       // Initialize multiselect
       sel.multiselect({ includeSelectAllOption: true });
+      sel.on("change", editClient);
 
       let button =
-        '<button class="btn btn-success btn-xs editClient" type="button" data-id="' +
-        data.id +
-        '">' +
-        '<span class="glyphicon glyphicon-pencil"></span>' +
-        "</button>" +
-        " &nbsp;" +
         '<button class="btn btn-danger btn-xs deleteClient" type="button" data-id="' +
         data.id +
         '">' +
@@ -267,12 +261,20 @@ function addClient() {
 }
 
 function editClient() {
+  var elem = $(this).attr("id");
   var tr = $(this).closest("tr");
   var id = tr.find("#id").val();
   var groups = tr.find("#multiselect").val();
   var ip = tr.find("#ip").text();
   var name = tr.find("#name").text();
 
+  var done = "edited";
+  var not_done = "editing";
+  if (elem === "multiselect") {
+    done = "edited groups of";
+    not_done = "editing groups of";
+  }
+
   var ip_name = ip;
   if (name.length > 0) {
     ip_name += " (" + name + ")";
@@ -289,14 +291,14 @@ function editClient() {
         showAlert(
           "success",
           "glyphicon glyphicon-plus",
-          "Successfully edited client",
+          "Successfully " + done + " client",
           ip_name
         );
         table.ajax.reload();
       } else {
         showAlert(
           "error",
-          "Error while editing client with ID " + id,
+          "Error while " + not_done + " client with ID " + id,
           response.message
         );
       }
@@ -305,7 +307,7 @@ function editClient() {
       showAlert(
         "error",
         "",
-        "Error while editing client with ID " + id,
+        "Error while " + not_done + " client with ID " + id,
         jqXHR.responseText
       );
       console.log(exception);

scripts/pi-hole/js/groups-domains.js

@@ -107,7 +107,6 @@ function initTable() {
       { data: null, width: "80px", orderable: false }
     ],
     drawCallback: function(settings) {
-      $(".editDomain").on("click", editDomain);
       $(".deleteDomain").on("click", deleteDomain);
     },
     rowCallback: function(row, data) {
@@ -138,6 +137,7 @@ function initTable() {
           ">Regex blacklist</option>" +
           "</select>"
       );
+      $("#type", row).on("change", editDomain);
 
       const disabled = data.enabled === 0;
       $("td:eq(2)", row).html(
@@ -152,6 +152,7 @@ function initTable() {
         onstyle: "success",
         width: "80px"
       });
+      $("#status", row).on("change", editDomain);
 
       $("td:eq(3)", row).html(
         '<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
@@ -159,6 +160,7 @@ function initTable() {
           '">'
       );
       $("#comment", row).val(data.comment);
+      $("#comment", row).on("change", editDomain);
 
       $("td:eq(4)", row).empty();
       $("td:eq(4)", row).append(
@@ -181,14 +183,9 @@ function initTable() {
       sel.val(data.groups);
       // Initialize multiselect
       sel.multiselect({ includeSelectAllOption: true });
+      sel.on("change", editDomain);
 
       let button =
-        '<button class="btn btn-success btn-xs editDomain" type="button" data-id="' +
-        data.id +
-        '">' +
-        '<span class="glyphicon glyphicon-pencil"></span>' +
-        "</button>" +
-        " &nbsp;" +
         '<button class="btn btn-danger btn-xs deleteDomain" type="button" data-id="' +
         data.id +
         '">' +
@@ -278,6 +275,7 @@ function addDomain() {
 }
 
 function editDomain() {
+  var elem = $(this).attr("id");
   var tr = $(this).closest("tr");
   var domain = tr.find("#domain").text();
   var id = tr.find("#id").val();
@@ -286,6 +284,28 @@ function editDomain() {
   var comment = tr.find("#comment").val();
   var groups = tr.find("#multiselect").val();
 
+  var done = "edited";
+  var not_done = "editing";
+  if (elem === "status" && status === 1) {
+    done = "enabled";
+    not_done = "enabling";
+  } else if (elem === "status" && status === 0) {
+    done = "disabled";
+    not_done = "disabling";
+  } else if (elem === "name") {
+    done = "edited name of";
+    not_done = "editing name of";
+  } else if (elem === "comment") {
+    done = "edited comment of";
+    not_done = "editing comment of";
+  } else if (elem === "type") {
+    done = "edited type of";
+    not_done = "editing type of";
+  } else if (elem === "multiselect") {
+    done = "edited groups of";
+    not_done = "editing groups of";
+  }
+
   showAlert("info", "", "Editing domain...", name);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
@@ -305,7 +325,7 @@ function editDomain() {
         showAlert(
           "success",
           "glyphicon glyphicon-pencil",
-          "Successfully edited domain",
+          "Successfully " + done + " domain",
           domain
         );
         table.ajax.reload();
@@ -313,7 +333,7 @@ function editDomain() {
         showAlert(
           "error",
           "",
-          "Error while editing domain with ID " + id,
+          "Error while " + not_done + " domain with ID " + id,
           response.message
         );
     },
@@ -321,7 +341,7 @@ function editDomain() {
       showAlert(
         "error",
         "",
-        "Error while editing domain with ID " + id,
+        "Error while " + not_done + " domain with ID " + id,
         jqXHR.responseText
       );
       console.log(exception);

scripts/pi-hole/js/groups.js

@@ -96,12 +96,15 @@ $(document).ready(function() {
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
-        '<input id="name" title="' + tooltip + '" class="form-control"><input id="id" type="hidden" value="' +
+        '<input id="name" title="' +
+          tooltip +
+          '" class="form-control"><input id="id" type="hidden" value="' +
           data.id +
           '">'
       );
-      $("#name", row).val(data.name);
+      var name = $("#name", row);
-      $("#name", row).on("change", editGroup);
+      name.val(data.name);
+      name.on("change", editGroup);
 
       const disabled = data.enabled === 0;
       $("td:eq(1)", row).html(
@@ -109,14 +112,15 @@ $(document).ready(function() {
           (disabled ? "" : " checked") +
           ">"
       );
-      $("#status", row).bootstrapToggle({
+      var status = $("#status", row);
+      status.bootstrapToggle({
         on: "Enabled",
         off: "Disabled",
         size: "small",
         onstyle: "success",
         width: "80px"
       });
-      $("#status", row).on("change", editGroup);
+      status.on("change", editGroup);
 
       $("td:eq(2)", row).html('<input id="desc" class="form-control">');
       const desc = data.description !== null ? data.description : "";