Merge branch 'devel' into new/nonfatal-dnsmasq-warnings

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

scripts/pi-hole/js/messages.js

@@ -145,6 +145,7 @@ $(function () {
     order: [[0, "asc"]],
     columns: [
       { data: "id", visible: false },
+      { data: null, visible: true, width: "15px" },
       { data: "timestamp", width: "8%", render: renderTimestamp },
       { data: "type", width: "8%" },
       { data: "message", orderable: false, render: renderMessage },
@@ -153,9 +154,17 @@ $(function () {
       { data: "blob3", visible: false },
       { data: "blob4", visible: false },
       { data: "blob5", visible: false },
-      { data: null, width: "80px", orderable: false },
+      { data: null, width: "22px", orderable: false },
     ],
     columnDefs: [
+      {
+        targets: 1,
+        orderable: false,
+        className: "select-checkbox",
+        render: function () {
+          return "";
+        },
+      },
       {
         targets: "_all",
         render: $.fn.dataTable.render.text(),
@@ -163,6 +172,11 @@ $(function () {
     ],
     drawCallback: function () {
       $('button[id^="deleteMessage_"]').on("click", deleteMessage);
+
+      // Hide buttons if all messages were deleted
+      var hasRows = this.api().rows({ filter: "applied" }).data().length > 0;
+      $(".datatable-bt").css("visibility", hasRows ? "visible" : "hidden");
+
       // Remove visible dropdown to prevent orphaning
       $("body > .bootstrap-select.dropdown").remove();
     },
@@ -171,16 +185,63 @@ $(function () {
       var button =
         '<button type="button" class="btn btn-danger btn-xs" id="deleteMessage_' +
         data.id +
+        '" data-del-id="' +
+        data.id +
         '">' +
         '<span class="far fa-trash-alt"></span>' +
         "</button>";
-      $("td:eq(3)", row).html(button);
+      $("td:eq(4)", row).html(button);
     },
+    select: {
+      style: "multi",
+      selector: "td:not(:last-child)",
+      info: false,
+    },
+    buttons: [
+      {
+        text: '<span class="far fa-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt selectAll",
+        action: function () {
+          table.rows({ page: "current" }).select();
+        },
+      },
+      {
+        text: '<span class="far fa-plus-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt selectMore",
+        action: function () {
+          table.rows({ page: "current" }).select();
+        },
+      },
+      {
+        extend: "selectNone",
+        text: '<span class="far fa-check-square"></span>',
+        titleAttr: "Deselect All",
+        className: "btn-sm datatable-bt removeAll",
+      },
+      {
+        text: '<span class="far fa-trash-alt"></span>',
+        titleAttr: "Delete Selected",
+        className: "btn-sm datatable-bt deleteSelected",
+        action: function () {
+          // For each ".selected" row ...
+          var ids = [];
+          $("tr.selected").each(function () {
+            // ... add the row identified by "data-id".
+            ids.push(parseInt($(this).attr("data-id"), 10));
+          });
+          // Delete all selected rows at once
+          delMsg(ids);
+        },
+      },
+    ],
     dom:
-      "<'row'<'col-sm-12'f>>" +
-      "<'row'<'col-sm-4'l><'col-sm-8'p>>" +
+      "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
+      "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
       "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
-      "<'row'<'col-sm-5'i><'col-sm-7'p>>",
+      "<'row'<'col-sm-3'B><'col-sm-9'p>>" +
+      "<'row'<'col-sm-12'i>>",
     lengthMenu: [
       [10, 25, 50, 100, -1],
       [10, 25, 50, 100, "All"],
@@ -201,7 +262,7 @@ $(function () {
       }
 
       // Reset visibility of ID and blob columns
-      var hiddenCols = [0, 4, 5, 6, 7, 8];
+      var hiddenCols = [0, 5, 6, 7, 8, 9];
       for (var key in hiddenCols) {
         if (Object.prototype.hasOwnProperty.call(hiddenCols, key)) {
           data.columns[hiddenCols[key]].visible = false;
@@ -212,42 +273,94 @@ $(function () {
       return data;
     },
   });
+  table.on("init select deselect", function () {
+    changeButtonStates();
+  });
 });
 
+// Show only the appropriate buttons
+function changeButtonStates() {
+  var allRows = table.rows({ filter: "applied" }).data().length;
+  var pageLength = table.page.len();
+  var selectedRows = table.rows(".selected").data().length;
+
+  if (selectedRows === 0) {
+    // Nothing selected
+    $(".selectAll").removeClass("hidden");
+    $(".selectMore").addClass("hidden");
+    $(".removeAll").addClass("hidden");
+    $(".deleteSelected").addClass("hidden");
+  } else if (selectedRows >= pageLength || selectedRows === allRows) {
+    // Whole page is selected (or all available messages were selected)
+    $(".selectAll").addClass("hidden");
+    $(".selectMore").addClass("hidden");
+    $(".removeAll").removeClass("hidden");
+    $(".deleteSelected").removeClass("hidden");
+  } else {
+    // Some rows are selected, but not all
+    $(".selectAll").addClass("hidden");
+    $(".selectMore").removeClass("hidden");
+    $(".removeAll").addClass("hidden");
+    $(".deleteSelected").removeClass("hidden");
+  }
+}
+
+// Remove 'bnt-group' class from container, to avoid grouping
+$.fn.dataTable.Buttons.defaults.dom.container.className = "dt-buttons";
+
 function deleteMessage() {
-  var tr = $(this).closest("tr");
-  var id = tr.attr("data-id");
+  // Passes the button data-del-id attribute as ID
+  var ids = [parseInt($(this).attr("data-del-id"), 10)];
+  delMsg(ids);
+}
+
+function delMsg(ids) {
+  // Check input validity
+  if (!Array.isArray(ids)) return;
+
+  // Exploit prevention: Return early for non-numeric IDs
+  for (var id in ids) {
+    if (Object.hasOwnProperty.call(ids, id) && typeof ids[id] !== "number") return;
+  }
 
   utils.disableAll();
-  utils.showAlert("info", "", "Deleting message with ID " + parseInt(id, 10), "...");
+  var idstring = ids.join(", ");
+  utils.showAlert("info", "", "Deleting messages: " + idstring, "...");
+
   $.ajax({
     url: "scripts/pi-hole/php/message.php",
     method: "post",
     dataType: "json",
-    data: { action: "delete_message", id: id, token: token },
-    success: function (response) {
+    data: { action: "delete_message", id: JSON.stringify(ids), token: token },
+  })
+    .done(function (response) {
       utils.enableAll();
       if (response.success) {
-        utils.showAlert("success", "far fa-trash-alt", "Successfully deleted message # ", id);
-        table.row(tr).remove().draw(false).ajax.reload(null, false);
-      } else {
         utils.showAlert(
-          "error",
-          "",
-          "Error while deleting message with ID " + id,
-          response.message
+          "success",
+          "far fa-trash-alt",
+          "Successfully deleted messages: " + idstring,
+          ""
         );
+        for (var id in ids) {
+          if (Object.hasOwnProperty.call(ids, id)) {
+            table.row(id).remove().draw(false).ajax.reload(null, false);
+          }
+        }
+      } else {
+        utils.showAlert("error", "", "Error while deleting message: " + idstring, response.message);
       }
-    },
-    error: function (jqXHR, exception) {
+
+      // Clear selection after deletion
+      table.rows().deselect();
+      changeButtonStates();
+    })
+    .done(
+      utils.checkMessages // Update icon warnings count
+    )
+    .fail(function (jqXHR, exception) {
       utils.enableAll();
-      utils.showAlert(
-        "error",
-        "",
-        "Error while deleting message with ID " + id,
-        jqXHR.responseText
-      );
+      utils.showAlert("error", "", "Error while deleting message: " + idstring, jqXHR.responseText);
       console.log(exception); // eslint-disable-line no-console
-    },
-  });
+    });
 }