Merge branch 'release/v5.0' into devel

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

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

@@ -5,71 +5,11 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global moment:false */
+/* global utils:false */
 
 var table;
 var groups = [];
-var token = $("#token").text();
-var info = null;
-
-function showAlert(type, icon, title, message) {
-  var opts = {};
-  title = "&nbsp;<strong>" + title + "</strong><br>";
-  switch (type) {
-    case "info":
-      opts = {
-        type: "info",
-        icon: "far fa-clock",
-        title: title,
-        message: message
-      };
-      info = $.notify(opts);
-      break;
-    case "success":
-      opts = {
-        type: "success",
-        icon: icon,
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "warning":
-      opts = {
-        type: "warning",
-        icon: "fas fa-exclamation-triangle",
-        title: title,
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    case "error":
-      opts = {
-        type: "danger",
-        icon: "fas fa-times",
-        title: "&nbsp;<strong>Error, something went wrong!</strong><br>",
-        message: message
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
-
-      break;
-    default:
-  }
-}
+var token = $("#token").html();
 
 function get_groups() {
   $.post(
@@ -83,19 +23,11 @@ function get_groups() {
   );
 }
 
-function datetime(date) {
-  return moment.unix(Math.floor(date)).format("Y-MM-DD HH:mm:ss z");
-}
-
 $(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");
-  });
   // Disable autocorrect in the search box
   var input = document.querySelector("input[type=search]");
   input.setAttribute("autocomplete", "off");
@@ -121,46 +53,56 @@ 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: " +
-        datetime(data.date_added) +
+        utils.datetime(data.date_added) +
         "\nLast modified: " +
-        datetime(data.date_modified) +
+        utils.datetime(data.date_modified) +
         "\nDatabase ID: " +
         data.id;
       $("td:eq(0)", row).html(
-        '<code id="address" title="' + tooltip + '">' + data.address + "</code>"
+        '<code id="address_' +
+          data.id +
+          '" title="' +
+          tooltip +
+          '" class="breakall">' +
+          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('<select id="multiselect" multiple="multiple"></select>');
-      var sel = $("#multiselect", row);
+      $("td:eq(3)", row).append(
+        '<div id="selectHome_' +
+          data.id +
+          '">' +
+          '<select id="multiselect_' +
+          data.id +
+          '" multiple="multiple"></select></div>'
+      );
+      var selectEl = $("#multiselect_" + data.id, row);
       // Add all known groups
       for (var i = 0; i < groups.length; i++) {
         var extra = "";
@@ -168,7 +110,7 @@ function initTable() {
           extra = " (disabled)";
         }
 
-        sel.append(
+        selectEl.append(
           $("<option />")
             .val(groups[i].id)
             .text(groups[i].name + extra)
@@ -176,19 +118,51 @@ function initTable() {
       }
 
       // Select assigned groups
-      sel.val(data.groups);
+      selectEl.val(data.groups);
       // Initialize multiselect
-      sel.multiselect({ includeSelectAllOption: true });
-      sel.on("change", editAdlist);
+      selectEl.multiselect({
+        includeSelectAllOption: true,
+        buttonContainer: '<div id="container_' + data.id + '" class="btn-group"/>',
+        maxHeight: 200,
+        onDropdownShown: function() {
+          var el = $("#container_" + data.id);
+          var top = el[0].getBoundingClientRect().top;
+          var bottom = $(window).height() - top - el.height();
+          if (bottom < 200) {
+            el.addClass("dropup");
+          }
+
+          if (bottom > 200) {
+            el.removeClass("dropup");
+          }
+
+          var offset = el.offset();
+          $("body").append(el);
+          el.css("position", "absolute");
+          el.css("top", offset.top + "px");
+          el.css("left", offset.left + "px");
+        },
+        onDropdownHide: function() {
+          var el = $("#container_" + data.id);
+          var home = $("#selectHome_" + data.id);
+          home.append(el);
+          el.removeAttr("style");
+        }
+      });
+      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="far fa-trash-alt"></span>' +
         "</button>";
       $("td:eq(4)", row).html(button);
     },
+    dom:
+      "<'row'<'col-sm-4'l><'col-sm-8'f>>" +
+      "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
+      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     lengthMenu: [
       [10, 25, 50, 100, -1],
       [10, 25, 50, 100, "All"]
@@ -236,10 +210,11 @@ function addAdlist() {
   var address = $("#new_address").val();
   var comment = $("#new_comment").val();
 
-  showAlert("info", "", "Adding adlist...", address);
+  utils.disableAll();
+  utils.showAlert("info", "", "Adding adlist...", address);
 
   if (address.length === 0) {
-    showAlert("warning", "", "Warning", "Please specify an adlist address");
+    utils.showAlert("warning", "", "Warning", "Please specify an adlist address");
     return;
   }
 
@@ -254,17 +229,19 @@ function addAdlist() {
       token: token
     },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "fas fa-plus", "Successfully added adlist", address);
+        utils.showAlert("success", "fas fa-plus", "Successfully added adlist", address);
         $("#new_address").val("");
         $("#new_comment").val("");
         table.ajax.reload();
       } else {
-        showAlert("error", "", "Error while adding new adlist: ", response.message);
+        utils.showAlert("error", "", "Error while adding new adlist: ", response.message);
       }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while adding new adlist: ", jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while adding new adlist: ", jqXHR.responseText);
       console.log(exception);
     }
   });
@@ -273,29 +250,40 @@ 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;
   }
 
-  showAlert("info", "", "Editing adlist...", address);
+  utils.disableAll();
+  utils.showAlert("info", "", "Editing adlist...", address);
 
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
@@ -310,10 +298,16 @@ function editAdlist() {
       token: token
     },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "fas fa-pencil-alt", "Successfully " + done + " adlist ", address);
+        utils.showAlert(
+          "success",
+          "fas fa-pencil-alt",
+          "Successfully " + done + " adlist ",
+          address
+        );
       } else {
-        showAlert(
+        utils.showAlert(
           "error",
           "",
           "Error while " + not_done + " adlist with ID " + id,
@@ -322,7 +316,8 @@ function editAdlist() {
       }
     },
     error: function(jqXHR, exception) {
-      showAlert(
+      utils.enableAll();
+      utils.showAlert(
         "error",
         "",
         "Error while " + not_done + " adlist with ID " + id,
@@ -334,27 +329,32 @@ 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();
 
-  showAlert("info", "", "Deleting adlist...", address);
+  utils.disableAll();
+  utils.showAlert("info", "", "Deleting adlist...", address);
   $.ajax({
     url: "scripts/pi-hole/php/groups.php",
     method: "post",
     dataType: "json",
     data: { action: "delete_adlist", id: id, token: token },
     success: function(response) {
+      utils.enableAll();
       if (response.success) {
-        showAlert("success", "far fa-trash-alt", "Successfully deleted adlist ", address);
+        utils.showAlert("success", "far fa-trash-alt", "Successfully deleted adlist ", address);
         table
           .row(tr)
           .remove()
           .draw(false);
-      } else showAlert("error", "", "Error while deleting adlist with ID " + id, response.message);
+      } else {
+        utils.showAlert("error", "", "Error while deleting adlist with ID " + id, response.message);
+      }
     },
     error: function(jqXHR, exception) {
-      showAlert("error", "", "Error while deleting adlist with ID " + id, jqXHR.responseText);
+      utils.enableAll();
+      utils.showAlert("error", "", "Error while deleting adlist with ID " + id, jqXHR.responseText);
       console.log(exception);
     }
   });