make id names unique, ...* (#1170)

* - remove unneeded code
- fix php notice in log if url parameter 'type' is not set

Signed-off-by: Th3M3 the_me@outlook.de

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

@@ -27,11 +27,6 @@ $(document).ready(function() {
   $("#btnAdd").on("click", addAdlist);
 
   get_groups();
-
-  $("#select").on("change", function() {
-    $("#ip-custom").val("");
-    $("#ip-custom").prop("disabled", $("#select option:selected").val() !== "custom");
-  });
 });
 
 function initTable() {
@@ -51,9 +46,10 @@ function initTable() {
       { data: null, width: "80px", orderable: false }
     ],
     drawCallback: function() {
-      $(".deleteAdlist").on("click", deleteAdlist);
+      $('button[id^="deleteAdlist_"]').on("click", deleteAdlist);
     },
     rowCallback: function(row, data) {
+      $(row).attr("data-id", data.id);
       var tooltip =
         "Added: " +
         utils.datetime(data.date_added) +
@@ -62,39 +58,38 @@ function initTable() {
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
-        '<code id="address" title="' + tooltip + '">' + data.address + "</code>"
+        '<code id="address_' + data.id + '" title="' + tooltip + '">' + data.address + "</code>"
       );
 
       var disabled = data.enabled === 0;
       $("td:eq(1)", row).html(
-        '<input type="checkbox" id="status"' + (disabled ? "" : " checked") + ">"
+        '<input type="checkbox" id="status_' + data.id + '"' + (disabled ? "" : " checked") + ">"
       );
-      var status = $("#status", row);
-      status.bootstrapToggle({
+      var statusEl = $("#status_" + data.id, row);
+      statusEl.bootstrapToggle({
         on: "Enabled",
         off: "Disabled",
         size: "small",
         onstyle: "success",
         width: "80px"
       });
-      status.on("change", editAdlist);
+      statusEl.on("change", editAdlist);
 
-      $("td:eq(2)", row).html(
-        '<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
-          data.id +
-          '">'
-      );
-      var comment = $("#comment", row);
-      comment.val(data.comment);
-      comment.on("change", editAdlist);
+      $("td:eq(2)", row).html('<input id="comment_' + data.id + '" class="form-control">');
+      var commentEl = $("#comment_" + data.id, row);
+      commentEl.val(data.comment);
+      commentEl.on("change", editAdlist);
 
       $("td:eq(3)", row).empty();
       $("td:eq(3)", row).append(
-        '<div id="selectHome' +
+        '<div id="selectHome_' +
           data.id +
-          '"><select id="multiselect" multiple="multiple"></select></div>'
+          '">' +
+          '<select id="multiselect_' +
+          data.id +
+          '" multiple="multiple"></select></div>'
       );
-      var sel = $("#multiselect", row);
+      var selectEl = $("#multiselect_" + data.id, row);
       // Add all known groups
       for (var i = 0; i < groups.length; i++) {
         var extra = "";
@@ -102,7 +97,7 @@ function initTable() {
           extra = " (disabled)";
         }
 
-        sel.append(
+        selectEl.append(
           $("<option />")
             .val(groups[i].id)
             .text(groups[i].name + extra)
@@ -110,14 +105,14 @@ function initTable() {
       }
 
       // Select assigned groups
-      sel.val(data.groups);
+      selectEl.val(data.groups);
       // Initialize multiselect
-      sel.multiselect({
+      selectEl.multiselect({
         includeSelectAllOption: true,
-        buttonContainer: '<div id="container' + data.id + '" class="btn-group"/>',
+        buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
         maxHeight: 200,
         onDropdownShown: function() {
-          var el = $("#container" + data.id);
+          var el = $("#container_" + data.id);
           var top = el[0].getBoundingClientRect().top;
           var bottom = $(window).height() - top - el.height();
           if (bottom < 200) {
@@ -135,16 +130,16 @@ function initTable() {
           el.css("left", offset.left + "px");
         },
         onDropdownHide: function() {
-          var el = $("#container" + data.id);
-          var home = $("#selectHome" + data.id);
+          var el = $("#container_" + data.id);
+          var home = $("#selectHome_" + data.id);
           home.append(el);
           el.removeAttr("style");
         }
       });
-      sel.on("change", editAdlist);
+      selectEl.on("change", editAdlist);
 
       var button =
-        '<button class="btn btn-danger btn-xs deleteAdlist" type="button" data-id="' +
+        '<button class="btn btn-danger btn-xs" type="button" id="deleteAdlist_' +
         data.id +
         '">' +
         '<span class="glyphicon glyphicon-trash"></span>' +
@@ -247,26 +242,36 @@ 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;
-  var comment = tr.find("#comment").val();
-  var groups = tr.find("#multiselect").val();
-  var address = tr.find("#address").text();
+  var id = tr.attr("data-id");
+  var status = tr.find("#status_" + id).is(":checked") ? 1 : 0;
+  var comment = tr.find("#comment_" + id).val();
+  var groups = tr.find("#multiselect_" + id).val();
+  var address = tr.find("#address_" + id).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";
+  switch (elem) {
+    case "status_" + id:
+      if (status === 0) {
+        done = "disabled";
+        not_done = "disabling";
+      } else if (status === 1) {
+        done = "enabled";
+        not_done = "enabling";
+      }
+
+      break;
+    case "comment_" + id:
+      done = "edited comment of";
+      not_done = "editing comment of";
+      break;
+    case "multiselect_" + id:
+      done = "edited groups of";
+      not_done = "editing groups of";
+      break;
+    default:
+      alert("bad element or invalid data-id!");
+      return;
   }
 
   utils.disableAll();
@@ -316,9 +321,9 @@ function editAdlist() {
 }
 
 function deleteAdlist() {
-  var id = $(this).attr("data-id");
   var tr = $(this).closest("tr");
-  var address = tr.find("#address").text();
+  var id = tr.attr("data-id");
+  var address = tr.find("#address_" + id).text();
 
   utils.disableAll();
   utils.showAlert("info", "", "Deleting adlist...", address);

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

@@ -89,9 +89,10 @@ function initTable() {
       { data: "name", width: "80px", orderable: false }
     ],
     drawCallback: function() {
-      $(".deleteClient").on("click", deleteClient);
+      $('button[id^="deleteClient_"]').on("click", deleteClient);
     },
     rowCallback: function(row, data) {
+      $(row).attr("data-id", data.id);
       var tooltip =
         "Added: " +
         utils.datetime(data.date_added) +
@@ -99,33 +100,27 @@ function initTable() {
         utils.datetime(data.date_modified) +
         "\nDatabase ID: " +
         data.id;
-      var ip_name =
-        '<code id="ip" title="' +
-        tooltip +
-        '">' +
-        data.ip +
-        '</code><input id="id" type="hidden" value="' +
-        data.id +
-        '">';
+      var ip_name = '<code id="ip_' + data.id + '" title="' + tooltip + '">' + data.ip + "</code>";
       if (data.name !== null && data.name.length > 0)
-        ip_name += '<br><code id="name" title="' + tooltip + '">' + data.name + "</code>";
+        ip_name +=
+          '<br><code id="name_' + data.id + '" title="' + tooltip + '">' + data.name + "</code>";
       $("td:eq(0)", row).html(ip_name);
 
-      $("td:eq(1)", row).html(
-        '<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
-          data.id +
-          '">'
-      );
-      $("#comment", row).val(data.comment);
-      $("#comment", row).on("change", editClient);
+      $("td:eq(1)", row).html('<input id="comment_' + data.id + '" class="form-control">');
+      var commentEl = $("#comment_" + data.id, row);
+      commentEl.val(data.comment);
+      commentEl.on("change", editClient);
 
       $("td:eq(2)", row).empty();
       $("td:eq(2)", row).append(
-        '<div id="selectHome' +
+        '<div id="selectHome_' +
           data.id +
-          '"><select id="multiselect" multiple="multiple"></select></div>'
+          '">' +
+          '<select id="multiselect_' +
+          data.id +
+          '" multiple="multiple"></select></div>'
       );
-      var sel = $("#multiselect", row);
+      var selectEl = $("#multiselect_" + data.id, row);
       // Add all known groups
       for (var i = 0; i < groups.length; i++) {
         var extra = "";
@@ -133,7 +128,7 @@ function initTable() {
           extra = " (disabled)";
         }
 
-        sel.append(
+        selectEl.append(
           $("<option />")
             .val(groups[i].id)
             .text(groups[i].name + extra)
@@ -141,14 +136,14 @@ function initTable() {
       }
 
       // Select assigned groups
-      sel.val(data.groups);
+      selectEl.val(data.groups);
       // Initialize multiselect
-      sel.multiselect({
+      selectEl.multiselect({
         includeSelectAllOption: true,
-        buttonContainer: '<div id="container' + data.id + '" class="btn-group"/>',
+        buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
         maxHeight: 200,
         onDropdownShown: function() {
-          var el = $("#container" + data.id);
+          var el = $("#container_" + data.id);
           var top = el[0].getBoundingClientRect().top;
           var bottom = $(window).height() - top - el.height();
           if (bottom < 200) {
@@ -172,10 +167,10 @@ function initTable() {
           el.removeAttr("style");
         }
       });
-      sel.on("change", editClient);
+      selectEl.on("change", editClient);
 
       var button =
-        '<button class="btn btn-danger btn-xs deleteClient" type="button" data-id="' +
+        '<button class="btn btn-danger btn-xs" type="button" id="deleteClient_' +
         data.id +
         '">' +
         '<span class="glyphicon glyphicon-trash"></span>' +
@@ -271,20 +266,26 @@ 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 comment = tr.find("#comment").val();
+  var id = tr.attr("data-id");
+  var groups = tr.find("#multiselect_" + id).val();
+  var ip = tr.find("#ip_" + id).text();
+  var name = tr.find("#name_" + id).text();
+  var comment = tr.find("#comment_" + id).val();
 
   var done = "edited";
   var not_done = "editing";
-  if (elem === "multiselect") {
-    done = "edited groups of";
-    not_done = "editing groups of";
-  } else if (elem === "comment") {
-    done = "edited comment of";
-    not_done = "editing comment of";
+  switch (elem) {
+    case "multiselect_" + id:
+      done = "edited groups of";
+      not_done = "editing groups of";
+      break;
+    case "comment_" + id:
+      done = "edited comment of";
+      not_done = "editing comment of";
+      break;
+    default:
+      alert("bad element or invalid data-id!");
+      return;
   }
 
   var ip_name = ip;
@@ -336,10 +337,10 @@ function editClient() {
 }
 
 function deleteClient() {
-  var id = $(this).attr("data-id");
   var tr = $(this).closest("tr");
-  var ip = tr.find("#ip").text();
-  var name = tr.find("#name").text();
+  var id = tr.attr("data-id");
+  var ip = tr.find("#ip_" + id).text();
+  var name = tr.find("#name_" + id).text();
 
   var ip_name = ip;
   if (name.length > 0) {

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

@@ -40,11 +40,6 @@ $(document).ready(function() {
   $("#btnAdd").on("click", addDomain);
 
   get_groups();
-
-  $("#select").on("change", function() {
-    $("#ip-custom").val("");
-    $("#ip-custom").prop("disabled", $("#select option:selected").val() !== "custom");
-  });
 });
 
 function initTable() {
@@ -65,9 +60,10 @@ function initTable() {
       { data: null, width: "80px", orderable: false }
     ],
     drawCallback: function() {
-      $(".deleteDomain").on("click", deleteDomain);
+      $('button[id^="deleteDomain_"]').on("click", deleteDomain);
     },
     rowCallback: function(row, data) {
+      $(row).attr("data-id", data.id);
       var tooltip =
         "Added: " +
         utils.datetime(data.date_added) +
@@ -76,7 +72,13 @@ function initTable() {
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
-        '<code id="domain" title="' + tooltip + '" class="breakall">' + data.domain + "</code>"
+        '<code id="domain_' +
+          data.id +
+          '" title="' +
+          tooltip +
+          '" class="breakall">' +
+          data.domain +
+          "</code>"
       );
 
       var whitelist_options = "";
@@ -102,43 +104,47 @@ function initTable() {
       }
 
       $("td:eq(1)", row).html(
-        '<select id="type" class="form-control">' +
+        '<select id="type_' +
+          data.id +
+          '" class="form-control">' +
           whitelist_options +
           blacklist_options +
           "</select>"
       );
-      $("#type", row).on("change", editDomain);
+      var typeEl = $("#type_" + data.id, row);
+      typeEl.on("change", editDomain);
 
       var disabled = data.enabled === 0;
       $("td:eq(2)", row).html(
-        '<input type="checkbox" id="status"' + (disabled ? "" : " checked") + ">"
+        '<input type="checkbox" id="status_' + data.id + '"' + (disabled ? "" : " checked") + ">"
       );
-      $("#status", row).bootstrapToggle({
+      var statusEl = $("#status_" + data.id, row);
+      statusEl.bootstrapToggle({
         on: "Enabled",
         off: "Disabled",
         size: "small",
         onstyle: "success",
         width: "80px"
       });
-      $("#status", row).on("change", editDomain);
+      statusEl.on("change", editDomain);
 
-      $("td:eq(3)", row).html(
-        '<input id="comment" class="form-control"><input id="id" type="hidden" value="' +
-          data.id +
-          '">'
-      );
-      $("#comment", row).val(data.comment);
-      $("#comment", row).on("change", editDomain);
+      $("td:eq(3)", row).html('<input id="comment_' + data.id + '" class="form-control">');
+      var commentEl = $("#comment_" + data.id, row);
+      commentEl.val(data.comment);
+      commentEl.on("change", editDomain);
 
       // Show group assignment field only if in full domain management mode
       if (table.column(5).visible()) {
         $("td:eq(4)", row).empty();
         $("td:eq(4)", row).append(
-          '<div id="selectHome' +
+          '<div id="selectHome_' +
             data.id +
-            '"><select id="multiselect" multiple="multiple"></select></div>'
+            '">' +
+            '<select id="multiselect_' +
+            data.id +
+            '" multiple="multiple"></select></div>'
         );
-        var sel = $("#multiselect", row);
+        var selectEl = $("#multiselect_" + data.id, row);
         // Add all known groups
         for (var i = 0; i < groups.length; i++) {
           var extra = "";
@@ -146,7 +152,7 @@ function initTable() {
             extra = " (disabled)";
           }
 
-          sel.append(
+          selectEl.append(
             $("<option />")
               .val(groups[i].id)
               .text(groups[i].name + extra)
@@ -154,14 +160,14 @@ function initTable() {
         }
 
         // Select assigned groups
-        sel.val(data.groups);
+        selectEl.val(data.groups);
         // Initialize multiselect
-        sel.multiselect({
+        selectEl.multiselect({
           includeSelectAllOption: true,
-          buttonContainer: '<div id="container' + data.id + '" class="btn-group"/>',
+          buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
           maxHeight: 200,
           onDropdownShown: function() {
-            var el = $("#container" + data.id);
+            var el = $("#container_" + data.id);
             var top = el[0].getBoundingClientRect().top;
             var bottom = $(window).height() - top - el.height();
             if (bottom < 200) {
@@ -179,16 +185,16 @@ function initTable() {
             el.css("left", offset.left + "px");
           },
           onDropdownHide: function() {
-            var el = $("#container" + data.id);
-            var home = $("#selectHome" + data.id);
+            var el = $("#container_" + data.id);
+            var home = $("#selectHome_" + data.id);
             home.append(el);
             el.removeAttr("style");
           }
         });
-        sel.on("change", editDomain);
+        selectEl.on("change", editDomain);
       }
 
-      // Highlight row
+      // Highlight row (if url parameter "domainid=" is used)
       if ("domainid" in GETDict && data.id === parseInt(GETDict.domainid)) {
         $(row)
           .find("td")
@@ -196,7 +202,7 @@ function initTable() {
       }
 
       var button =
-        '<button class="btn btn-danger btn-xs deleteDomain" type="button" data-id="' +
+        '<button class="btn btn-danger btn-xs" type="button" id="deleteDomain_' +
         data.id +
         '">' +
         '<span class="glyphicon glyphicon-trash"></span>' +
@@ -313,33 +319,45 @@ 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();
-  var type = tr.find("#type").val();
-  var status = tr.find("#status").is(":checked") ? 1 : 0;
-  var comment = tr.find("#comment").val();
-  var groups = tr.find("#multiselect").val();
+  var id = tr.attr("data-id");
+  var domain = tr.find("#domain_" + id).text();
+  var type = tr.find("#type_" + id).val();
+  var status = tr.find("#status_" + id).is(":checked") ? 1 : 0;
+  var comment = tr.find("#comment_" + id).val();
+  var groups = tr.find("#multiselect_" + id).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";
+  switch (elem) {
+    case "status_" + id:
+      if (status === 0) {
+        done = "disabled";
+        not_done = "disabling";
+      } else if (status === 1) {
+        done = "enabled";
+        not_done = "enabling";
+      }
+
+      break;
+    case "name_" + id:
+      done = "edited name of";
+      not_done = "editing name of";
+      break;
+    case "comment_" + id:
+      done = "edited comment of";
+      not_done = "editing comment of";
+      break;
+    case "type_" + id:
+      done = "edited type of";
+      not_done = "editing type of";
+      break;
+    case "multiselect_" + id:
+      done = "edited groups of";
+      not_done = "editing groups of";
+      break;
+    default:
+      alert("bad element or invalid data-id!");
+      return;
   }
 
   utils.disableAll();
@@ -388,9 +406,9 @@ function editDomain() {
 }
 
 function deleteDomain() {
-  var id = $(this).attr("data-id");
   var tr = $(this).closest("tr");
-  var domain = tr.find("#domain").text();
+  var id = tr.attr("data-id");
+  var domain = tr.find("#domain_" + id).text();
 
   utils.disableAll();
   utils.showAlert("info", "", "Deleting domain...", domain);

scripts/pi-hole/js/groups.js

@@ -28,9 +28,10 @@ $(document).ready(function() {
       { data: null, width: "60px", orderable: false }
     ],
     drawCallback: function() {
-      $(".deleteGroup").on("click", deleteGroup);
+      $('button[id^="deleteGroup_"]').on("click", deleteGroup);
     },
     rowCallback: function(row, data) {
+      $(row).attr("data-id", data.id);
       var tooltip =
         "Added: " +
         utils.datetime(data.date_added) +
@@ -39,40 +40,36 @@ $(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="' +
-          data.id +
-          '">'
+        '<input id="name_' + data.id + '" title="' + tooltip + '" class="form-control">'
       );
-      var name = $("#name", row);
-      name.val(data.name);
-      name.on("change", editGroup);
+      var nameEl = $("#name_" + data.id, row);
+      nameEl.val(data.name);
+      nameEl.on("change", editGroup);
 
       var disabled = data.enabled === 0;
       $("td:eq(1)", row).html(
-        '<input type="checkbox" id="status"' + (disabled ? "" : " checked") + ">"
+        '<input type="checkbox" id="status_' + data.id + '"' + (disabled ? "" : " checked") + ">"
       );
-      var status = $("#status", row);
-      status.bootstrapToggle({
+      var statusEl = $("#status_" + data.id, row);
+      statusEl.bootstrapToggle({
         on: "Enabled",
         off: "Disabled",
         size: "small",
         onstyle: "success",
         width: "80px"
       });
-      status.on("change", editGroup);
+      statusEl.on("change", editGroup);
 
-      $("td:eq(2)", row).html('<input id="desc" class="form-control">');
+      $("td:eq(2)", row).html('<input id="desc_' + data.id + '" class="form-control">');
       var desc = data.description !== null ? data.description : "";
-      $("#desc", row).val(desc);
-      $("#desc", row).on("change", editGroup);
+      var descEl = $("#desc_" + data.id, row);
+      descEl.val(desc);
+      descEl.on("change", editGroup);
 
       $("td:eq(3)", row).empty();
       if (data.id !== 0) {
         var button =
-          " &nbsp;" +
-          '<button class="btn btn-danger btn-xs deleteGroup" type="button" data-id="' +
+          '<button class="btn btn-danger btn-xs" type="button" id="deleteGroup_' +
           data.id +
           '">' +
           '<span class="glyphicon glyphicon-trash"></span>' +
@@ -166,25 +163,35 @@ function addGroup() {
 function editGroup() {
   var elem = $(this).attr("id");
   var tr = $(this).closest("tr");
-  var id = tr.find("#id").val();
-  var name = tr.find("#name").val();
-  var status = tr.find("#status").is(":checked") ? 1 : 0;
-  var desc = tr.find("#desc").val();
+  var id = tr.attr("data-id");
+  var name = tr.find("#name_" + id).val();
+  var status = tr.find("#status_" + id).is(":checked") ? 1 : 0;
+  var desc = tr.find("#desc_" + id).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 === "desc") {
-    done = "edited description of";
-    not_done = "editing description of";
+  switch (elem) {
+    case "status_" + id:
+      if (status === 0) {
+        done = "disabled";
+        not_done = "disabling";
+      } else if (status === 1) {
+        done = "enabled";
+        not_done = "enabling";
+      }
+
+      break;
+    case "name_" + id:
+      done = "edited name of";
+      not_done = "editing name of";
+      break;
+    case "desc_" + id:
+      done = "edited description of";
+      not_done = "editing description of";
+      break;
+    default:
+      alert("bad element or invalid data-id!");
+      return;
   }
 
   utils.disableAll();
@@ -233,9 +240,9 @@ function editGroup() {
 }
 
 function deleteGroup() {
-  var id = $(this).attr("data-id");
   var tr = $(this).closest("tr");
-  var name = tr.find("#name").val();
+  var id = tr.attr("data-id");
+  var name = tr.find("#name_" + id).val();
 
   utils.disableAll();
   utils.showAlert("info", "", "Deleting group...", name);