Allow bulk deletion of warnings

- add Datatables extension Select (CSS and js); - add Datatables extension Buttons (CSS and js); - allow selection of multiple warnings; - new button to invert selection; - new button to delete all selected warnings; - new CSS to format the new items; - Fix: update icon count after warning deletion; - Fix: remove triangle icon after delete last warning; - change menu Donate icon. Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
pi-hole · Feb 25, 2022 · 6db37c1 · 6db37c1
1 parent e4d293a
commit 6db37c1
Show file tree

Hide file tree

Showing 12 changed files with 261 additions and 32 deletions.
diff --git a/messages.php b/messages.php
@@ -23,6 +23,7 @@
                     <thead>
                     <tr>
                         <th>ID</th>
+                        <th>&nbsp;</th>
                         <th>Time</th>
                         <th>Type</th>
                         <th>Message</th>
@@ -31,7 +32,7 @@
                         <th>Data3</th>
                         <th>Data4</th>
                         <th>Data5</th>
-                        <th>Action</th>
+                        <th>&nbsp;</th>
                     </tr>
                     </thead>
                 </table>

diff --git a/scripts/pi-hole/js/footer.js b/scripts/pi-hole/js/footer.js
@@ -5,6 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
+/* global utils:false */
 //The following functions allow us to display time until pi-hole is enabled after disabling.
 //Works between all pages
 
@@ -101,21 +102,6 @@ function piholeChange(action, duration) {
   }
 }
 
-function checkMessages() {
-  $.getJSON("api_db.php?status", function (data) {
-    if ("message_count" in data && data.message_count > 0) {
-      var title =
-        data.message_count > 1
-          ? "There are " + data.message_count + " warnings. Click for further details."
-          : "There is one warning. Click for further details.";
-
-      $("#pihole-diagnosis").prop("title", title);
-      $("#pihole-diagnosis-count").text(data.message_count);
-      $("#pihole-diagnosis").removeClass("hidden");
-    }
-  });
-}
-
 function testCookies() {
   if (navigator.cookieEnabled) {
     return true;
@@ -235,9 +221,9 @@ $(function () {
   initCPUtemp();
 
   // Run check immediately after page loading ...
-  checkMessages();
+  utils.checkMessages();
   // ... and once again with five seconds delay
-  setTimeout(checkMessages, 5000);
+  setTimeout(utils.checkMessages, 5000);
 });
 
 // Handle Enable/Disable

diff --git a/scripts/pi-hole/js/messages.js b/scripts/pi-hole/js/messages.js
@@ -142,6 +142,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 },
@@ -150,9 +151,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(),
@@ -168,14 +177,44 @@ $(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: "Invert Selection",
+        className: "btn-sm",
+        action: function () {
+          var selected = table.rows({ selected: true });
+          var deselected = table.rows({ selected: false });
+          selected.deselect();
+          deselected.select();
+        },
+      },
+      {
+        text: "Delete Selected",
+        className: "btn-sm",
+        action: function () {
+          // For each ".selected" row ...
+          $("tr.selected").each(function () {
+            // ... delete the row identified by "data-id".
+            delMsg($(this).attr("data-id"));
+          });
+        },
+      },
+    ],
     dom:
-      "<'row'<'col-sm-12'f>>" +
-      "<'row'<'col-sm-4'l><'col-sm-8'p>>" +
+      "<'row'<'col-sm-6'B><'col-sm-6'f>>" +
+      "<'row'<'col-sm-3'l><'col-sm-9'p>>" +
       "<'row'<'col-sm-12'<'table-responsive'tr>>>" +
       "<'row'<'col-sm-5'i><'col-sm-7'p>>",
     lengthMenu: [
@@ -198,7 +237,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;
@@ -211,18 +250,28 @@ $(function () {
   });
 });
 
+// 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
+  delMsg($(this).attr("data-del-id"));
+}
+
+function delMsg(id) {
+  // Finding out which <tr> should be deleted, based on ID
+  var tr = $("tr[data-id='" + id + "']");
 
   utils.disableAll();
   utils.showAlert("info", "", "Deleting message with ID " + parseInt(id, 10), "...");
+
   $.ajax({
     url: "scripts/pi-hole/php/message.php",
     method: "post",
     dataType: "json",
     data: { action: "delete_message", id: id, token: token },
-    success: function (response) {
+  })
+    .done(function (response) {
       utils.enableAll();
       if (response.success) {
         utils.showAlert("success", "far fa-trash-alt", "Successfully deleted message # ", id);
@@ -235,8 +284,11 @@ function deleteMessage() {
           response.message
         );
       }
-    },
-    error: function (jqXHR, exception) {
+    })
+    .done(
+      utils.checkMessages // Update icon warnings count
+    )
+    .fail(function (jqXHR, exception) {
       utils.enableAll();
       utils.showAlert(
         "error",
@@ -245,6 +297,5 @@ function deleteMessage() {
         jqXHR.responseText
       );
       console.log(exception); // eslint-disable-line no-console
-    },
-  });
+    });
 }
diff --git a/scripts/pi-hole/js/utils.js b/scripts/pi-hole/js/utils.js
@@ -360,6 +360,23 @@ function colorBar(percentage, total, cssClass) {
   return '<div class="progress progress-sm" title="' + title + '"> ' + bar + " </div>";
 }
 
+function checkMessages() {
+  $.getJSON("api_db.php?status", function (data) {
+    if ("message_count" in data && data.message_count > 0) {
+      var title =
+        data.message_count > 1
+          ? "There are " + data.message_count + " warnings. Click for further details."
+          : "There is one warning. Click for further details.";
+
+      $("#pihole-diagnosis").prop("title", title);
+      $("#pihole-diagnosis-count").text(data.message_count);
+      $("#pihole-diagnosis").removeClass("hidden");
+    } else {
+      $("#pihole-diagnosis").addClass("hidden");
+    }
+  });
+}
+
 window.utils = (function () {
   return {
     escapeHtml: escapeHtml,
@@ -382,5 +399,6 @@ window.utils = (function () {
     addFromQueryLog: addFromQueryLog,
     addTD: addTD,
     colorBar: colorBar,
+    checkMessages: checkMessages,
   };
 })();
diff --git a/scripts/pi-hole/php/header.php b/scripts/pi-hole/php/header.php
@@ -204,6 +204,7 @@ function pidofFTL()
     <link rel="stylesheet" href="style/vendor/SourceSansPro/SourceSansPro.css?v=<?=$cacheVer?>">
     <link rel="stylesheet" href="style/vendor/bootstrap/css/bootstrap.min.css?v=<?=$cacheVer?>">
     <link rel="stylesheet" href="style/vendor/datatables.min.css?v=<?=$cacheVer?>">
+    <link rel="stylesheet" href="style/vendor/datatables_extensions.min.css?v=<?=$cacheVer?>">
     <link rel="stylesheet" href="style/vendor/daterangepicker.min.css?v=<?=$cacheVer?>">
     <link rel="stylesheet" href="style/vendor/AdminLTE.min.css?v=<?=$cacheVer?>">
     <link rel="stylesheet" href="style/vendor/select2.min.css?v=<?=$cacheVer?>">
@@ -223,6 +224,8 @@ function pidofFTL()
     <script src="scripts/vendor/bootstrap-notify.min.js?v=<?=$cacheVer?>"></script>
     <script src="scripts/vendor/select2.min.js?v=<?=$cacheVer?>"></script>
     <script src="scripts/vendor/datatables.min.js?v=<?=$cacheVer?>"></script>
+    <script src="scripts/vendor/datatables.select.min.js?v=<?=$cacheVer?>"></script>
+    <script src="scripts/vendor/datatables.buttons.min.js?v=<?=$cacheVer?>"></script>
     <script src="scripts/vendor/moment.min.js?v=<?=$cacheVer?>"></script>
     <script src="scripts/vendor/Chart.min.js?v=<?=$cacheVer?>"></script>
     <script src="style/vendor/font-awesome/js/all.min.js?v=<?=$cacheVer?>"></script>
@@ -642,7 +645,7 @@ function pidofFTL()
                 <!-- Donate -->
                 <li>
                     <a href="https://pi-hole.net/donate/" rel="noopener" target="_blank">
-                        <i class="fab fa-fw menu-icon fa-paypal"></i> <span>Donate</span>
+                        <i class="fab fa-fw menu-icon fas fa-donate"></i> <span>Donate</span>
                     </a>
                 </li>
                  <!-- Docs -->