From 6288112044f76a7beeb7666ae1169e0e1f1d4f7c Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Thu, 24 Feb 2022 17:18:57 -0300
Subject: [PATCH 1/9] 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 select all;
- new button to delete all selected warnings;
- add icons for the buttons;
- hide buttons if all messages were deleted;
- update CSS themes to format the new items;
- Fix: update icon count after warning deletion;
- Fix: remove triangle icon after delete last warning;

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 messages.php                               |  3 +-
 scripts/pi-hole/js/footer.js               | 20 +----
 scripts/pi-hole/js/messages.js             | 88 ++++++++++++++++++----
 scripts/pi-hole/js/utils.js                | 18 +++++
 scripts/pi-hole/php/header.php             |  3 +
 scripts/vendor/datatables.buttons.min.js   | 51 +++++++++++++
 scripts/vendor/datatables.select.min.js    | 45 +++++++++++
 style/pi-hole.css                          | 53 +++++++++++++
 style/themes/default-dark.css              |  4 +
 style/themes/default-darker.css            |  1 +
 style/themes/default-light.css             | 16 ++++
 style/themes/lcars.css                     | 18 ++++-
 style/vendor/datatables_extensions.min.css | 15 ++++
 13 files changed, 302 insertions(+), 33 deletions(-)
 create mode 100644 scripts/vendor/datatables.buttons.min.js
 create mode 100644 scripts/vendor/datatables.select.min.js
 create mode 100644 style/vendor/datatables_extensions.min.css

diff --git a/messages.php b/messages.php
index 9fce17c5..d6c6b15a 100644
--- 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
index 5e386622..b8ac4238 100644
--- 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
index f95777f6..8bae1e78 100644
--- 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(),
@@ -160,6 +169,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();
     },
@@ -168,16 +182,50 @@ $(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-check-square"></span>',
+        titleAttr: "Select All",
+        className: "btn-sm datatable-bt",
+        action: function () {
+          table
+            .rows({
+              page: "current",
+            })
+            .select();
+        },
+      },
+      {
+        text: '<span class="far fa-trash-alt"></span>',
+        titleAttr: "Delete Selected",
+        className: "btn-sm datatable-bt",
+        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'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"],
@@ -198,7 +246,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,21 +259,31 @@ $(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);
+        utils.showAlert("success", "far fa-trash-alt", "Successfully deleted message # " + id, "");
         table.row(tr).remove().draw(false).ajax.reload(null, false);
       } else {
         utils.showAlert(
@@ -235,8 +293,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 +306,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
index b9e1a573..cf1b6968 100644
--- 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
index d8ad253b..195174eb 100644
--- a/scripts/pi-hole/php/header.php
+++ b/scripts/pi-hole/php/header.php
@@ -204,6 +204,7 @@
     <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 @@
     <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>
diff --git a/scripts/vendor/datatables.buttons.min.js b/scripts/vendor/datatables.buttons.min.js
new file mode 100644
index 00000000..9dfe24e5
--- /dev/null
+++ b/scripts/vendor/datatables.buttons.min.js
@@ -0,0 +1,51 @@
+/*!
+ Buttons for DataTables 1.7.1
+ ©2016-2021 SpryMedia Ltd - datatables.net/license
+*/
+(function(e){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(y){return e(y,window,document)}):"object"===typeof exports?module.exports=function(y,w){y||(y=window);w&&w.fn.dataTable||(w=require("datatables.net")(y,w).$);return e(w,y,y.document)}:e(jQuery,window,document)})(function(e,y,w,r){function B(a,b,c){e.fn.animate?a.stop().fadeIn(b,c):(a.css("display","block"),c&&c.call(a))}function C(a,b,c){e.fn.animate?a.stop().fadeOut(b,c):(a.css("display","none"),c&&c.call(a))}
+function E(a,b){a=new q.Api(a);b=b?b:a.init().buttons||q.defaults.buttons;return(new t(a,b)).container()}var q=e.fn.dataTable,I=0,J=0,x=q.ext.buttons,t=function(a,b){if(!(this instanceof t))return function(c){return(new t(c,a)).container()};"undefined"===typeof b&&(b={});!0===b&&(b={});Array.isArray(b)&&(b={buttons:b});this.c=e.extend(!0,{},t.defaults,b);b.buttons&&(this.c.buttons=b.buttons);this.s={dt:new q.Api(a),buttons:[],listenKeys:"",namespace:"dtb"+I++};this.dom={container:e("<"+this.c.dom.container.tag+
+"/>").addClass(this.c.dom.container.className)};this._constructor()};e.extend(t.prototype,{action:function(a,b){a=this._nodeToButton(a);if(b===r)return a.conf.action;a.conf.action=b;return this},active:function(a,b){var c=this._nodeToButton(a);a=this.c.dom.button.active;c=e(c.node);if(b===r)return c.hasClass(a);c.toggleClass(a,b===r?!0:b);return this},add:function(a,b){var c=this.s.buttons;if("string"===typeof b){b=b.split("-");var d=this.s;c=0;for(var f=b.length-1;c<f;c++)d=d.buttons[1*b[c]];c=d.buttons;
+b=1*b[b.length-1]}this._expandButton(c,a,d!==r,b);this._draw();return this},container:function(){return this.dom.container},disable:function(a){a=this._nodeToButton(a);e(a.node).addClass(this.c.dom.button.disabled).attr("disabled",!0);return this},destroy:function(){e("body").off("keyup."+this.s.namespace);var a=this.s.buttons.slice(),b;var c=0;for(b=a.length;c<b;c++)this.remove(a[c].node);this.dom.container.remove();a=this.s.dt.settings()[0];c=0;for(b=a.length;c<b;c++)if(a.inst===this){a.splice(c,
+1);break}return this},enable:function(a,b){if(!1===b)return this.disable(a);a=this._nodeToButton(a);e(a.node).removeClass(this.c.dom.button.disabled).removeAttr("disabled");return this},name:function(){return this.c.name},node:function(a){if(!a)return this.dom.container;a=this._nodeToButton(a);return e(a.node)},processing:function(a,b){var c=this.s.dt,d=this._nodeToButton(a);if(b===r)return e(d.node).hasClass("processing");e(d.node).toggleClass("processing",b);e(c.table().node()).triggerHandler("buttons-processing.dt",
+[b,c.button(a),c,e(a),d.conf]);return this},remove:function(a){var b=this._nodeToButton(a),c=this._nodeToHost(a),d=this.s.dt;if(b.buttons.length)for(var f=b.buttons.length-1;0<=f;f--)this.remove(b.buttons[f].node);b.conf.destroy&&b.conf.destroy.call(d.button(a),d,e(a),b.conf);this._removeKey(b.conf);e(b.node).remove();a=e.inArray(b,c);c.splice(a,1);return this},text:function(a,b){var c=this._nodeToButton(a);a=this.c.dom.collection.buttonLiner;a=c.inCollection&&a&&a.tag?a.tag:this.c.dom.buttonLiner.tag;
+var d=this.s.dt,f=e(c.node),h=function(m){return"function"===typeof m?m(d,f,c.conf):m};if(b===r)return h(c.conf.text);c.conf.text=b;a?f.children(a).html(h(b)):f.html(h(b));return this},_constructor:function(){var a=this,b=this.s.dt,c=b.settings()[0],d=this.c.buttons;c._buttons||(c._buttons=[]);c._buttons.push({inst:this,name:this.c.name});for(var f=0,h=d.length;f<h;f++)this.add(d[f]);b.on("destroy",function(m,g){g===c&&a.destroy()});e("body").on("keyup."+this.s.namespace,function(m){if(!w.activeElement||
+w.activeElement===w.body){var g=String.fromCharCode(m.keyCode).toLowerCase();-1!==a.s.listenKeys.toLowerCase().indexOf(g)&&a._keypress(g,m)}})},_addKey:function(a){a.key&&(this.s.listenKeys+=e.isPlainObject(a.key)?a.key.key:a.key)},_draw:function(a,b){a||(a=this.dom.container,b=this.s.buttons);a.children().detach();for(var c=0,d=b.length;c<d;c++)a.append(b[c].inserter),a.append(" "),b[c].buttons&&b[c].buttons.length&&this._draw(b[c].collection,b[c].buttons)},_expandButton:function(a,b,c,d){var f=
+this.s.dt,h=0;b=Array.isArray(b)?b:[b];for(var m=0,g=b.length;m<g;m++){var n=this._resolveExtends(b[m]);if(n)if(Array.isArray(n))this._expandButton(a,n,c,d);else{var k=this._buildButton(n,c);k&&(d!==r&&null!==d?(a.splice(d,0,k),d++):a.push(k),k.conf.buttons&&(k.collection=e("<"+this.c.dom.collection.tag+"/>"),k.conf._collection=k.collection,this._expandButton(k.buttons,k.conf.buttons,!0,d)),n.init&&n.init.call(f.button(k.node),f,e(k.node),n),h++)}}},_buildButton:function(a,b){var c=this.c.dom.button,
+d=this.c.dom.buttonLiner,f=this.c.dom.collection,h=this.s.dt,m=function(p){return"function"===typeof p?p(h,k,a):p};b&&f.button&&(c=f.button);b&&f.buttonLiner&&(d=f.buttonLiner);if(a.available&&!a.available(h,a))return!1;var g=function(p,l,v,u){u.action.call(l.button(v),p,l,v,u);e(l.table().node()).triggerHandler("buttons-action.dt",[l.button(v),l,v,u])};f=a.tag||c.tag;var n=a.clickBlurs===r?!0:a.clickBlurs,k=e("<"+f+"/>").addClass(c.className).attr("tabindex",this.s.dt.settings()[0].iTabIndex).attr("aria-controls",
+this.s.dt.table().node().id).on("click.dtb",function(p){p.preventDefault();!k.hasClass(c.disabled)&&a.action&&g(p,h,k,a);n&&k.trigger("blur")}).on("keyup.dtb",function(p){13===p.keyCode&&!k.hasClass(c.disabled)&&a.action&&g(p,h,k,a)});"a"===f.toLowerCase()&&k.attr("href","#");"button"===f.toLowerCase()&&k.attr("type","button");d.tag?(f=e("<"+d.tag+"/>").html(m(a.text)).addClass(d.className),"a"===d.tag.toLowerCase()&&f.attr("href","#"),k.append(f)):k.html(m(a.text));!1===a.enabled&&k.addClass(c.disabled);
+a.className&&k.addClass(a.className);a.titleAttr&&k.attr("title",m(a.titleAttr));a.attr&&k.attr(a.attr);a.namespace||(a.namespace=".dt-button-"+J++);d=(d=this.c.dom.buttonContainer)&&d.tag?e("<"+d.tag+"/>").addClass(d.className).append(k):k;this._addKey(a);this.c.buttonCreated&&(d=this.c.buttonCreated(a,d));return{conf:a,node:k.get(0),inserter:d,buttons:[],inCollection:b,collection:null}},_nodeToButton:function(a,b){b||(b=this.s.buttons);for(var c=0,d=b.length;c<d;c++){if(b[c].node===a)return b[c];
+if(b[c].buttons.length){var f=this._nodeToButton(a,b[c].buttons);if(f)return f}}},_nodeToHost:function(a,b){b||(b=this.s.buttons);for(var c=0,d=b.length;c<d;c++){if(b[c].node===a)return b;if(b[c].buttons.length){var f=this._nodeToHost(a,b[c].buttons);if(f)return f}}},_keypress:function(a,b){if(!b._buttonsHandled){var c=function(d){for(var f=0,h=d.length;f<h;f++){var m=d[f].conf,g=d[f].node;m.key&&(m.key===a?(b._buttonsHandled=!0,e(g).click()):!e.isPlainObject(m.key)||m.key.key!==a||m.key.shiftKey&&
+!b.shiftKey||m.key.altKey&&!b.altKey||m.key.ctrlKey&&!b.ctrlKey||m.key.metaKey&&!b.metaKey||(b._buttonsHandled=!0,e(g).click()));d[f].buttons.length&&c(d[f].buttons)}};c(this.s.buttons)}},_removeKey:function(a){if(a.key){var b=e.isPlainObject(a.key)?a.key.key:a.key;a=this.s.listenKeys.split("");b=e.inArray(b,a);a.splice(b,1);this.s.listenKeys=a.join("")}},_resolveExtends:function(a){var b=this.s.dt,c,d=function(g){for(var n=0;!e.isPlainObject(g)&&!Array.isArray(g);){if(g===r)return;if("function"===
+typeof g){if(g=g(b,a),!g)return!1}else if("string"===typeof g){if(!x[g])throw"Unknown button type: "+g;g=x[g]}n++;if(30<n)throw"Buttons: Too many iterations";}return Array.isArray(g)?g:e.extend({},g)};for(a=d(a);a&&a.extend;){if(!x[a.extend])throw"Cannot extend unknown button type: "+a.extend;var f=d(x[a.extend]);if(Array.isArray(f))return f;if(!f)return!1;var h=f.className;a=e.extend({},f,a);h&&a.className!==h&&(a.className=h+" "+a.className);var m=a.postfixButtons;if(m){a.buttons||(a.buttons=[]);
+h=0;for(c=m.length;h<c;h++)a.buttons.push(m[h]);a.postfixButtons=null}if(m=a.prefixButtons){a.buttons||(a.buttons=[]);h=0;for(c=m.length;h<c;h++)a.buttons.splice(h,0,m[h]);a.prefixButtons=null}a.extend=f.extend}return a},_popover:function(a,b,c){var d=this.c,f=e.extend({align:"button-left",autoClose:!1,background:!0,backgroundClassName:"dt-button-background",contentClassName:d.dom.collection.className,collectionLayout:"",collectionTitle:"",dropup:!1,fade:400,rightAlignClassName:"dt-button-right",
+tag:d.dom.collection.tag},c),h=b.node(),m=function(){C(e(".dt-button-collection"),f.fade,function(){e(this).detach()});e(b.buttons('[aria-haspopup="true"][aria-expanded="true"]').nodes()).attr("aria-expanded","false");e("div.dt-button-background").off("click.dtb-collection");t.background(!1,f.backgroundClassName,f.fade,h);e("body").off(".dtb-collection");b.off("buttons-action.b-internal")};!1===a&&m();c=e(b.buttons('[aria-haspopup="true"][aria-expanded="true"]').nodes());c.length&&(h=c.eq(0),m());
+c=e("<div/>").addClass("dt-button-collection").addClass(f.collectionLayout).css("display","none");a=e(a).addClass(f.contentClassName).attr("role","menu").appendTo(c);h.attr("aria-expanded","true");h.parents("body")[0]!==w.body&&(h=w.body.lastChild);f.collectionTitle&&c.prepend('<div class="dt-button-collection-title">'+f.collectionTitle+"</div>");B(c.insertAfter(h),f.fade);d=e(b.table().container());var g=c.css("position");"dt-container"===f.align&&(h=h.parent(),c.css("width",d.width()));if("absolute"===
+g){var n=h.position();g=e(b.node()).position();c.css({top:g.top+h.outerHeight(),left:n.left});n=c.outerHeight();var k=d.offset().top+d.height();k=g.top+h.outerHeight()+n-k;var p=g.top-n,l=d.offset().top;g=g.top-n-5;(k>l-p||f.dropup)&&-g<l&&c.css("top",g);g=d.offset().left;d=d.width();d=g+d;n=c.offset().left;k=c.width();k=n+k;p=h.offset().left;l=h.outerWidth();var v=p+l;c.hasClass(f.rightAlignClassName)||c.hasClass(f.leftAlignClassName)||"dt-container"===f.align?(l=0,c.hasClass(f.rightAlignClassName)?
+(l=v-k,g>n+l&&(g-=n+l,d-=k+l,l=g>d?l+d:l+g)):(l=g-n,d<k+l&&(g-=n+l,d-=k+l,l=g>d?l+d:l+g))):(d=h.offset().top,l=0,l="button-right"===f.align?v-k:p-n);c.css("left",c.position().left+l)}else d=c.height()/2,d>e(y).height()/2&&(d=e(y).height()/2),c.css("marginTop",-1*d);f.background&&t.background(!0,f.backgroundClassName,f.fade,h);e("div.dt-button-background").on("click.dtb-collection",function(){});e("body").on("click.dtb-collection",function(u){var z=e.fn.addBack?"addBack":"andSelf",F=e(u.target).parent()[0];
+(!e(u.target).parents()[z]().filter(a).length&&!e(F).hasClass("dt-buttons")||e(u.target).hasClass("dt-button-background"))&&m()}).on("keyup.dtb-collection",function(u){27===u.keyCode&&m()});f.autoClose&&setTimeout(function(){b.on("buttons-action.b-internal",function(u,z,F,K){K[0]!==h[0]&&m()})},0);e(c).trigger("buttons-popover.dt")}});t.background=function(a,b,c,d){c===r&&(c=400);d||(d=w.body);a?B(e("<div/>").addClass(b).css("display","none").insertAfter(d),c):C(e("div."+b),c,function(){e(this).removeClass(b).remove()})};
+t.instanceSelector=function(a,b){if(a===r||null===a)return e.map(b,function(h){return h.inst});var c=[],d=e.map(b,function(h){return h.name}),f=function(h){if(Array.isArray(h))for(var m=0,g=h.length;m<g;m++)f(h[m]);else"string"===typeof h?-1!==h.indexOf(",")?f(h.split(",")):(h=e.inArray(h.trim(),d),-1!==h&&c.push(b[h].inst)):"number"===typeof h&&c.push(b[h].inst)};f(a);return c};t.buttonSelector=function(a,b){for(var c=[],d=function(g,n,k){for(var p,l,v=0,u=n.length;v<u;v++)if(p=n[v])l=k!==r?k+v:
+v+"",g.push({node:p.node,name:p.conf.name,idx:l}),p.buttons&&d(g,p.buttons,l+"-")},f=function(g,n){var k,p=[];d(p,n.s.buttons);var l=e.map(p,function(v){return v.node});if(Array.isArray(g)||g instanceof e)for(l=0,k=g.length;l<k;l++)f(g[l],n);else if(null===g||g===r||"*"===g)for(l=0,k=p.length;l<k;l++)c.push({inst:n,node:p[l].node});else if("number"===typeof g)c.push({inst:n,node:n.s.buttons[g].node});else if("string"===typeof g)if(-1!==g.indexOf(","))for(p=g.split(","),l=0,k=p.length;l<k;l++)f(p[l].trim(),
+n);else if(g.match(/^\d+(\-\d+)*$/))l=e.map(p,function(v){return v.idx}),c.push({inst:n,node:p[e.inArray(g,l)].node});else if(-1!==g.indexOf(":name"))for(g=g.replace(":name",""),l=0,k=p.length;l<k;l++)p[l].name===g&&c.push({inst:n,node:p[l].node});else e(l).filter(g).each(function(){c.push({inst:n,node:this})});else"object"===typeof g&&g.nodeName&&(p=e.inArray(g,l),-1!==p&&c.push({inst:n,node:l[p]}))},h=0,m=a.length;h<m;h++)f(b,a[h]);return c};t.stripData=function(a,b){if("string"!==typeof a)return a;
+a=a.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,"");a=a.replace(/<!\-\-.*?\-\->/g,"");if(!b||b.stripHtml)a=a.replace(/<[^>]*>/g,"");if(!b||b.trim)a=a.replace(/^\s+|\s+$/g,"");if(!b||b.stripNewlines)a=a.replace(/\n/g," ");if(!b||b.decodeEntities)G.innerHTML=a,a=G.value;return a};t.defaults={buttons:["copy","excel","csv","pdf","print"],name:"main",tabIndex:0,dom:{container:{tag:"div",className:"dt-buttons"},collection:{tag:"div",className:""},button:{tag:"button",className:"dt-button",
+active:"active",disabled:"disabled"},buttonLiner:{tag:"span",className:""}}};t.version="1.7.1";e.extend(x,{collection:{text:function(a){return a.i18n("buttons.collection","Collection")},className:"buttons-collection",init:function(a,b,c){b.attr("aria-expanded",!1)},action:function(a,b,c,d){a.stopPropagation();d._collection.parents("body").length?this.popover(!1,d):this.popover(d._collection,d)},attr:{"aria-haspopup":!0}},copy:function(a,b){if(x.copyHtml5)return"copyHtml5"},csv:function(a,b){if(x.csvHtml5&&
+x.csvHtml5.available(a,b))return"csvHtml5"},excel:function(a,b){if(x.excelHtml5&&x.excelHtml5.available(a,b))return"excelHtml5"},pdf:function(a,b){if(x.pdfHtml5&&x.pdfHtml5.available(a,b))return"pdfHtml5"},pageLength:function(a){a=a.settings()[0].aLengthMenu;var b=[],c=[];if(Array.isArray(a[0]))b=a[0],c=a[1];else for(var d=0;d<a.length;d++){var f=a[d];e.isPlainObject(f)?(b.push(f.value),c.push(f.label)):(b.push(f),c.push(f))}return{extend:"collection",text:function(h){return h.i18n("buttons.pageLength",
+{"-1":"Show all rows",_:"Show %d rows"},h.page.len())},className:"buttons-page-length",autoClose:!0,buttons:e.map(b,function(h,m){return{text:c[m],className:"button-page-length",action:function(g,n){n.page.len(h).draw()},init:function(g,n,k){var p=this;n=function(){p.active(g.page.len()===h)};g.on("length.dt"+k.namespace,n);n()},destroy:function(g,n,k){g.off("length.dt"+k.namespace)}}}),init:function(h,m,g){var n=this;h.on("length.dt"+g.namespace,function(){n.text(g.text)})},destroy:function(h,m,
+g){h.off("length.dt"+g.namespace)}}}});q.Api.register("buttons()",function(a,b){b===r&&(b=a,a=r);this.selector.buttonGroup=a;var c=this.iterator(!0,"table",function(d){if(d._buttons)return t.buttonSelector(t.instanceSelector(a,d._buttons),b)},!0);c._groupSelector=a;return c});q.Api.register("button()",function(a,b){a=this.buttons(a,b);1<a.length&&a.splice(1,a.length);return a});q.Api.registerPlural("buttons().active()","button().active()",function(a){return a===r?this.map(function(b){return b.inst.active(b.node)}):
+this.each(function(b){b.inst.active(b.node,a)})});q.Api.registerPlural("buttons().action()","button().action()",function(a){return a===r?this.map(function(b){return b.inst.action(b.node)}):this.each(function(b){b.inst.action(b.node,a)})});q.Api.register(["buttons().enable()","button().enable()"],function(a){return this.each(function(b){b.inst.enable(b.node,a)})});q.Api.register(["buttons().disable()","button().disable()"],function(){return this.each(function(a){a.inst.disable(a.node)})});q.Api.registerPlural("buttons().nodes()",
+"button().node()",function(){var a=e();e(this.each(function(b){a=a.add(b.inst.node(b.node))}));return a});q.Api.registerPlural("buttons().processing()","button().processing()",function(a){return a===r?this.map(function(b){return b.inst.processing(b.node)}):this.each(function(b){b.inst.processing(b.node,a)})});q.Api.registerPlural("buttons().text()","button().text()",function(a){return a===r?this.map(function(b){return b.inst.text(b.node)}):this.each(function(b){b.inst.text(b.node,a)})});q.Api.registerPlural("buttons().trigger()",
+"button().trigger()",function(){return this.each(function(a){a.inst.node(a.node).trigger("click")})});q.Api.register("button().popover()",function(a,b){return this.map(function(c){return c.inst._popover(a,this.button(this[0].node),b)})});q.Api.register("buttons().containers()",function(){var a=e(),b=this._groupSelector;this.iterator(!0,"table",function(c){if(c._buttons){c=t.instanceSelector(b,c._buttons);for(var d=0,f=c.length;d<f;d++)a=a.add(c[d].container())}});return a});q.Api.register("buttons().container()",
+function(){return this.containers().eq(0)});q.Api.register("button().add()",function(a,b){var c=this.context;c.length&&(c=t.instanceSelector(this._groupSelector,c[0]._buttons),c.length&&c[0].add(b,a));return this.button(this._groupSelector,a)});q.Api.register("buttons().destroy()",function(){this.pluck("inst").unique().each(function(a){a.destroy()});return this});q.Api.registerPlural("buttons().remove()","buttons().remove()",function(){this.each(function(a){a.inst.remove(a.node)});return this});var A;
+q.Api.register("buttons.info()",function(a,b,c){var d=this;if(!1===a)return this.off("destroy.btn-info"),C(e("#datatables_buttons_info"),400,function(){e(this).remove()}),clearTimeout(A),A=null,this;A&&clearTimeout(A);e("#datatables_buttons_info").length&&e("#datatables_buttons_info").remove();a=a?"<h2>"+a+"</h2>":"";B(e('<div id="datatables_buttons_info" class="dt-button-info"/>').html(a).append(e("<div/>")["string"===typeof b?"html":"append"](b)).css("display","none").appendTo("body"));c!==r&&0!==
+c&&(A=setTimeout(function(){d.buttons.info(!1)},c));this.on("destroy.btn-info",function(){d.buttons.info(!1)});return this});q.Api.register("buttons.exportData()",function(a){if(this.context.length)return L(new q.Api(this.context[0]),a)});q.Api.register("buttons.exportInfo()",function(a){a||(a={});var b=a;var c="*"===b.filename&&"*"!==b.title&&b.title!==r&&null!==b.title&&""!==b.title?b.title:b.filename;"function"===typeof c&&(c=c());c===r||null===c?c=null:(-1!==c.indexOf("*")&&(c=c.replace("*",e("head > title").text()).trim()),
+c=c.replace(/[^a-zA-Z0-9_\u00A1-\uFFFF\.,\-_ !\(\)]/g,""),(b=D(b.extension))||(b=""),c+=b);b=D(a.title);b=null===b?null:-1!==b.indexOf("*")?b.replace("*",e("head > title").text()||"Exported data"):b;return{filename:c,title:b,messageTop:H(this,a.message||a.messageTop,"top"),messageBottom:H(this,a.messageBottom,"bottom")}});var D=function(a){return null===a||a===r?null:"function"===typeof a?a():a},H=function(a,b,c){b=D(b);if(null===b)return null;a=e("caption",a.table().container()).eq(0);return"*"===
+b?a.css("caption-side")!==c?null:a.length?a.text():"":b},G=e("<textarea/>")[0],L=function(a,b){var c=e.extend(!0,{},{rows:null,columns:"",modifier:{search:"applied",order:"applied"},orthogonal:"display",stripHtml:!0,stripNewlines:!0,decodeEntities:!0,trim:!0,format:{header:function(u){return t.stripData(u,c)},footer:function(u){return t.stripData(u,c)},body:function(u){return t.stripData(u,c)}},customizeData:null},b);b=a.columns(c.columns).indexes().map(function(u){var z=a.column(u).header();return c.format.header(z.innerHTML,
+u,z)}).toArray();var d=a.table().footer()?a.columns(c.columns).indexes().map(function(u){var z=a.column(u).footer();return c.format.footer(z?z.innerHTML:"",u,z)}).toArray():null,f=e.extend({},c.modifier);a.select&&"function"===typeof a.select.info&&f.selected===r&&a.rows(c.rows,e.extend({selected:!0},f)).any()&&e.extend(f,{selected:!0});f=a.rows(c.rows,f).indexes().toArray();var h=a.cells(f,c.columns);f=h.render(c.orthogonal).toArray();h=h.nodes().toArray();for(var m=b.length,g=[],n=0,k=0,p=0<m?f.length/
+m:0;k<p;k++){for(var l=[m],v=0;v<m;v++)l[v]=c.format.body(f[n],k,v,h[n]),n++;g[k]=l}b={header:b,footer:d,body:g};c.customizeData&&c.customizeData(b);return b};e.fn.dataTable.Buttons=t;e.fn.DataTable.Buttons=t;e(w).on("init.dt plugin-init.dt",function(a,b){"dt"===a.namespace&&(a=b.oInit.buttons||q.defaults.buttons)&&!b._buttons&&(new t(b,a)).container()});q.ext.feature.push({fnInit:E,cFeature:"B"});q.ext.features&&q.ext.features.register("buttons",E);return t});
+
+
+/*!
+ Bootstrap integration for DataTables' Buttons
+ ©2016 SpryMedia Ltd - datatables.net/license
+*/
+(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net-bs","datatables.net-buttons"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);b&&b.fn.dataTable||(b=require("datatables.net-bs")(a,b).$);b.fn.dataTable.Buttons||require("datatables.net-buttons")(a,b);return c(b,a,a.document)}:c(jQuery,window,document)})(function(c,a,b,e){a=c.fn.dataTable;c.extend(!0,a.Buttons.defaults,{dom:{container:{className:"dt-buttons btn-group"},
+button:{className:"btn btn-default"},collection:{tag:"ul",className:"dropdown-menu",button:{tag:"li",className:"dt-button",active:"active",disabled:"disabled"},buttonLiner:{tag:"a",className:""}}}});a.ext.buttons.collection.text=function(d){return d.i18n("buttons.collection",'Collection <span class="caret"/>')};return a.Buttons});
diff --git a/scripts/vendor/datatables.select.min.js b/scripts/vendor/datatables.select.min.js
new file mode 100644
index 00000000..de01dcf5
--- /dev/null
+++ b/scripts/vendor/datatables.select.min.js
@@ -0,0 +1,45 @@
+/*!
+   Copyright 2015-2019 SpryMedia Ltd.
+
+ This source file is free software, available under the following license:
+   MIT license - http://datatables.net/license/mit
+
+ This source file is distributed in the hope that it will be useful, but
+ WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY
+ or FITNESS FOR A PARTICULAR PURPOSE. See the license files for details.
+
+ For details please refer to: http://www.datatables.net/extensions/select
+ Select for DataTables 1.3.1
+ 2015-2019 SpryMedia Ltd - datatables.net/license/mit
+*/
+(function(f){"function"===typeof define&&define.amd?define(["jquery","datatables.net"],function(k){return f(k,window,document)}):"object"===typeof exports?module.exports=function(k,p){k||(k=window);p&&p.fn.dataTable||(p=require("datatables.net")(k,p).$);return f(p,k,k.document)}:f(jQuery,window,document)})(function(f,k,p,h){function z(a,b,c){var d=function(c,b){if(c>b){var d=b;b=c;c=d}var e=!1;return a.columns(":visible").indexes().filter(function(a){a===c&&(e=!0);return a===b?(e=!1,!0):e})};var e=
+function(c,b){var d=a.rows({search:"applied"}).indexes();if(d.indexOf(c)>d.indexOf(b)){var e=b;b=c;c=e}var f=!1;return d.filter(function(a){a===c&&(f=!0);return a===b?(f=!1,!0):f})};a.cells({selected:!0}).any()||c?(d=d(c.column,b.column),c=e(c.row,b.row)):(d=d(0,b.column),c=e(0,b.row));c=a.cells(c,d).flatten();a.cells(b,{selected:!0}).any()?a.cells(c).deselect():a.cells(c).select()}function v(a){var b=a.settings()[0]._select.selector;f(a.table().container()).off("mousedown.dtSelect",b).off("mouseup.dtSelect",
+b).off("click.dtSelect",b);f("body").off("click.dtSelect"+a.table().node().id.replace(/[^a-zA-Z0-9\-_]/g,"-"))}function A(a){var b=f(a.table().container()),c=a.settings()[0],d=c._select.selector,e;b.on("mousedown.dtSelect",d,function(a){if(a.shiftKey||a.metaKey||a.ctrlKey)b.css("-moz-user-select","none").one("selectstart.dtSelect",d,function(){return!1});k.getSelection&&(e=k.getSelection())}).on("mouseup.dtSelect",d,function(){b.css("-moz-user-select","")}).on("click.dtSelect",d,function(c){var b=
+a.select.items();if(e){var d=k.getSelection();if((!d.anchorNode||f(d.anchorNode).closest("table")[0]===a.table().node())&&d!==e)return}d=a.settings()[0];var l=f.trim(a.settings()[0].oClasses.sWrapper).replace(/ +/g,".");if(f(c.target).closest("div."+l)[0]==a.table().container()&&(l=a.cell(f(c.target).closest("td, th")),l.any())){var g=f.Event("user-select.dt");m(a,g,[b,l,c]);g.isDefaultPrevented()||(g=l.index(),"row"===b?(b=g.row,w(c,a,d,"row",b)):"column"===b?(b=l.index().column,w(c,a,d,"column",
+b)):"cell"===b&&(b=l.index(),w(c,a,d,"cell",b)),d._select_lastCell=g)}});f("body").on("click.dtSelect"+a.table().node().id.replace(/[^a-zA-Z0-9\-_]/g,"-"),function(b){!c._select.blurable||f(b.target).parents().filter(a.table().container()).length||0===f(b.target).parents("html").length||f(b.target).parents("div.DTE").length||r(c,!0)})}function m(a,b,c,d){if(!d||a.flatten().length)"string"===typeof b&&(b+=".dt"),c.unshift(a),f(a.table().node()).trigger(b,c)}function B(a){var b=a.settings()[0];if(b._select.info&&
+b.aanFeatures.i&&"api"!==a.select.style()){var c=a.rows({selected:!0}).flatten().length,d=a.columns({selected:!0}).flatten().length,e=a.cells({selected:!0}).flatten().length,l=function(b,c,d){b.append(f('<span class="select-item"/>').append(a.i18n("select."+c+"s",{_:"%d "+c+"s selected",0:"",1:"1 "+c+" selected"},d)))};f.each(b.aanFeatures.i,function(b,a){a=f(a);b=f('<span class="select-info"/>');l(b,"row",c);l(b,"column",d);l(b,"cell",e);var g=a.children("span.select-info");g.length&&g.remove();
+""!==b.text()&&a.append(b)})}}function D(a){var b=new g.Api(a);a.aoRowCreatedCallback.push({fn:function(b,d,e){d=a.aoData[e];d._select_selected&&f(b).addClass(a._select.className);b=0;for(e=a.aoColumns.length;b<e;b++)(a.aoColumns[b]._select_selected||d._selected_cells&&d._selected_cells[b])&&f(d.anCells[b]).addClass(a._select.className)},sName:"select-deferRender"});b.on("preXhr.dt.dtSelect",function(){var a=b.rows({selected:!0}).ids(!0).filter(function(b){return b!==h}),d=b.cells({selected:!0}).eq(0).map(function(a){var c=
+b.row(a.row).id(!0);return c?{row:c,column:a.column}:h}).filter(function(b){return b!==h});b.one("draw.dt.dtSelect",function(){b.rows(a).select();d.any()&&d.each(function(a){b.cells(a.row,a.column).select()})})});b.on("draw.dtSelect.dt select.dtSelect.dt deselect.dtSelect.dt info.dt",function(){B(b)});b.on("destroy.dtSelect",function(){v(b);b.off(".dtSelect")})}function C(a,b,c,d){var e=a[b+"s"]({search:"applied"}).indexes();d=f.inArray(d,e);var g=f.inArray(c,e);if(a[b+"s"]({selected:!0}).any()||
+-1!==d){if(d>g){var u=g;g=d;d=u}e.splice(g+1,e.length);e.splice(0,d)}else e.splice(f.inArray(c,e)+1,e.length);a[b](c,{selected:!0}).any()?(e.splice(f.inArray(c,e),1),a[b+"s"](e).deselect()):a[b+"s"](e).select()}function r(a,b){if(b||"single"===a._select.style)a=new g.Api(a),a.rows({selected:!0}).deselect(),a.columns({selected:!0}).deselect(),a.cells({selected:!0}).deselect()}function w(a,b,c,d,e){var f=b.select.style(),g=b.select.toggleable(),h=b[d](e,{selected:!0}).any();if(!h||g)"os"===f?a.ctrlKey||
+a.metaKey?b[d](e).select(!h):a.shiftKey?"cell"===d?z(b,e,c._select_lastCell||null):C(b,d,e,c._select_lastCell?c._select_lastCell[d]:null):(a=b[d+"s"]({selected:!0}),h&&1===a.flatten().length?b[d](e).deselect():(a.deselect(),b[d](e).select())):"multi+shift"==f?a.shiftKey?"cell"===d?z(b,e,c._select_lastCell||null):C(b,d,e,c._select_lastCell?c._select_lastCell[d]:null):b[d](e).select(!h):b[d](e).select(!h)}function t(a,b){return function(c){return c.i18n("buttons."+a,b)}}function x(a){a=a._eventNamespace;
+return"draw.dt.DT"+a+" select.dt.DT"+a+" deselect.dt.DT"+a}function E(a,b){return-1!==f.inArray("rows",b.limitTo)&&a.rows({selected:!0}).any()||-1!==f.inArray("columns",b.limitTo)&&a.columns({selected:!0}).any()||-1!==f.inArray("cells",b.limitTo)&&a.cells({selected:!0}).any()?!0:!1}var g=f.fn.dataTable;g.select={};g.select.version="1.3.1";g.select.init=function(a){var b=a.settings()[0],c=b.oInit.select,d=g.defaults.select;c=c===h?d:c;d="row";var e="api",l=!1,u=!0,k=!0,m="td, th",p="selected",n=!1;
+b._select={};!0===c?(e="os",n=!0):"string"===typeof c?(e=c,n=!0):f.isPlainObject(c)&&(c.blurable!==h&&(l=c.blurable),c.toggleable!==h&&(u=c.toggleable),c.info!==h&&(k=c.info),c.items!==h&&(d=c.items),e=c.style!==h?c.style:"os",n=!0,c.selector!==h&&(m=c.selector),c.className!==h&&(p=c.className));a.select.selector(m);a.select.items(d);a.select.style(e);a.select.blurable(l);a.select.toggleable(u);a.select.info(k);b._select.className=p;f.fn.dataTable.ext.order["select-checkbox"]=function(b,a){return this.api().column(a,
+{order:"index"}).nodes().map(function(a){return"row"===b._select.items?f(a).parent().hasClass(b._select.className):"cell"===b._select.items?f(a).hasClass(b._select.className):!1})};!n&&f(a.table().node()).hasClass("selectable")&&a.select.style("os")};f.each([{type:"row",prop:"aoData"},{type:"column",prop:"aoColumns"}],function(a,b){g.ext.selector[b.type].push(function(a,d,e){d=d.selected;var c=[];if(!0!==d&&!1!==d)return e;for(var f=0,g=e.length;f<g;f++){var h=a[b.prop][e[f]];(!0===d&&!0===h._select_selected||
+!1===d&&!h._select_selected)&&c.push(e[f])}return c})});g.ext.selector.cell.push(function(a,b,c){b=b.selected;var d=[];if(b===h)return c;for(var e=0,f=c.length;e<f;e++){var g=a.aoData[c[e].row];(!0===b&&g._selected_cells&&!0===g._selected_cells[c[e].column]||!(!1!==b||g._selected_cells&&g._selected_cells[c[e].column]))&&d.push(c[e])}return d});var n=g.Api.register,q=g.Api.registerPlural;n("select()",function(){return this.iterator("table",function(a){g.select.init(new g.Api(a))})});n("select.blurable()",
+function(a){return a===h?this.context[0]._select.blurable:this.iterator("table",function(b){b._select.blurable=a})});n("select.toggleable()",function(a){return a===h?this.context[0]._select.toggleable:this.iterator("table",function(b){b._select.toggleable=a})});n("select.info()",function(a){return B===h?this.context[0]._select.info:this.iterator("table",function(b){b._select.info=a})});n("select.items()",function(a){return a===h?this.context[0]._select.items:this.iterator("table",function(b){b._select.items=
+a;m(new g.Api(b),"selectItems",[a])})});n("select.style()",function(a){return a===h?this.context[0]._select.style:this.iterator("table",function(b){b._select.style=a;b._select_init||D(b);var c=new g.Api(b);v(c);"api"!==a&&A(c);m(new g.Api(b),"selectStyle",[a])})});n("select.selector()",function(a){return a===h?this.context[0]._select.selector:this.iterator("table",function(b){v(new g.Api(b));b._select.selector=a;"api"!==b._select.style&&A(new g.Api(b))})});q("rows().select()","row().select()",function(a){var b=
+this;if(!1===a)return this.deselect();this.iterator("row",function(b,a){r(b);b.aoData[a]._select_selected=!0;f(b.aoData[a].nTr).addClass(b._select.className)});this.iterator("table",function(a,d){m(b,"select",["row",b[d]],!0)});return this});q("columns().select()","column().select()",function(a){var b=this;if(!1===a)return this.deselect();this.iterator("column",function(b,a){r(b);b.aoColumns[a]._select_selected=!0;a=(new g.Api(b)).column(a);f(a.header()).addClass(b._select.className);f(a.footer()).addClass(b._select.className);
+a.nodes().to$().addClass(b._select.className)});this.iterator("table",function(a,d){m(b,"select",["column",b[d]],!0)});return this});q("cells().select()","cell().select()",function(a){var b=this;if(!1===a)return this.deselect();this.iterator("cell",function(b,a,e){r(b);a=b.aoData[a];a._selected_cells===h&&(a._selected_cells=[]);a._selected_cells[e]=!0;a.anCells&&f(a.anCells[e]).addClass(b._select.className)});this.iterator("table",function(a,d){m(b,"select",["cell",b[d]],!0)});return this});q("rows().deselect()",
+"row().deselect()",function(){var a=this;this.iterator("row",function(a,c){a.aoData[c]._select_selected=!1;f(a.aoData[c].nTr).removeClass(a._select.className)});this.iterator("table",function(b,c){m(a,"deselect",["row",a[c]],!0)});return this});q("columns().deselect()","column().deselect()",function(){var a=this;this.iterator("column",function(a,c){a.aoColumns[c]._select_selected=!1;var b=new g.Api(a),e=b.column(c);f(e.header()).removeClass(a._select.className);f(e.footer()).removeClass(a._select.className);
+b.cells(null,c).indexes().each(function(b){var c=a.aoData[b.row],d=c._selected_cells;!c.anCells||d&&d[b.column]||f(c.anCells[b.column]).removeClass(a._select.className)})});this.iterator("table",function(b,c){m(a,"deselect",["column",a[c]],!0)});return this});q("cells().deselect()","cell().deselect()",function(){var a=this;this.iterator("cell",function(a,c,d){c=a.aoData[c];c._selected_cells[d]=!1;c.anCells&&!a.aoColumns[d]._select_selected&&f(c.anCells[d]).removeClass(a._select.className)});this.iterator("table",
+function(b,c){m(a,"deselect",["cell",a[c]],!0)});return this});var y=0;f.extend(g.ext.buttons,{selected:{text:t("selected","Selected"),className:"buttons-selected",limitTo:["rows","columns","cells"],init:function(a,b,c){var d=this;c._eventNamespace=".select"+y++;a.on(x(c),function(){d.enable(E(a,c))});this.disable()},destroy:function(a,b,c){a.off(c._eventNamespace)}},selectedSingle:{text:t("selectedSingle","Selected single"),className:"buttons-selected-single",init:function(a,b,c){var d=this;c._eventNamespace=
+".select"+y++;a.on(x(c),function(){var b=a.rows({selected:!0}).flatten().length+a.columns({selected:!0}).flatten().length+a.cells({selected:!0}).flatten().length;d.enable(1===b)});this.disable()},destroy:function(a,b,c){a.off(c._eventNamespace)}},selectAll:{text:t("selectAll","Select all"),className:"buttons-select-all",action:function(){this[this.select.items()+"s"]().select()}},selectNone:{text:t("selectNone","Deselect all"),className:"buttons-select-none",action:function(){r(this.settings()[0],
+!0)},init:function(a,b,c){var d=this;c._eventNamespace=".select"+y++;a.on(x(c),function(){var b=a.rows({selected:!0}).flatten().length+a.columns({selected:!0}).flatten().length+a.cells({selected:!0}).flatten().length;d.enable(0<b)});this.disable()},destroy:function(a,b,c){a.off(c._eventNamespace)}}});f.each(["Row","Column","Cell"],function(a,b){var c=b.toLowerCase();g.ext.buttons["select"+b+"s"]={text:t("select"+b+"s","Select "+c+"s"),className:"buttons-select-"+c+"s",action:function(){this.select.items(c)},
+init:function(a){var b=this;a.on("selectItems.dt.DT",function(a,d,e){b.active(e===c)})}}});f(p).on("preInit.dt.dtSelect",function(a,b){"dt"===a.namespace&&g.select.init(new g.Api(b))});return g.select});
+
+/*!
+ Bootstrap 3 styling wrapper for Select
+ ©2018 SpryMedia Ltd - datatables.net/license
+*/
+(function(c){"function"===typeof define&&define.amd?define(["jquery","datatables.net-bs","datatables.net-select"],function(a){return c(a,window,document)}):"object"===typeof exports?module.exports=function(a,b){a||(a=window);b&&b.fn.dataTable||(b=require("datatables.net-bs")(a,b).$);b.fn.dataTable.select||require("datatables.net-select")(a,b);return c(b,a,a.document)}:c(jQuery,window,document)})(function(c,a,b,d){return c.fn.dataTable});
+
diff --git a/style/pi-hole.css b/style/pi-hole.css
index cd12d19c..0b7e148f 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -645,3 +645,56 @@ td.details-control {
 .menu-icon {
   margin-right: 0.5em;
 }
+
+/* Datatables Select - bgcolor */
+:root {
+  --datatable-bgcolor: #e0e8ee;
+}
+
+div.dt-buttons {
+  margin: 2px 0 5px;
+}
+@media screen and (max-width: 767px) {
+  div.dt-buttons {
+    margin-bottom: 5px;
+    float: none;
+    text-align: center;
+  }
+}
+
+/* Datatables Select - checkbox outline */
+table.dataTable tbody td.select-checkbox::before,
+table.dataTable tbody th.select-checkbox::before {
+  border-color: currentColor;
+  border-radius: 2px;
+  border-width: 2px;
+  width: 13px;
+  height: 13px;
+}
+
+table.dataTable tr.selected td.select-checkbox::after,
+table.dataTable tr.selected th.select-checkbox::after {
+  color: currentColor;
+  content: "";
+  text-shadow: none;
+  border-bottom: 2px solid currentColor;
+  border-right: 2px solid currentColor;
+  width: 4px;
+  height: 8px;
+  transform: rotate(45deg) translate(7px, 3px);
+}
+
+.datatable-bt {
+  padding: 3px 8px;
+}
+
+.datatable-bt span {
+  font-size: 17px;
+}
+
+/* Datatables Select - selected row bgcolor */
+table.dataTable tbody > tr.selected,
+table.dataTable tbody > tr > .selected {
+  background: none;
+  background-image: linear-gradient(var(--datatable-bgcolor), var(--datatable-bgcolor));
+}
diff --git a/style/themes/default-dark.css b/style/themes/default-dark.css
index f84782b2..a6373908 100644
--- a/style/themes/default-dark.css
+++ b/style/themes/default-dark.css
@@ -8,6 +8,10 @@
 *  The colors used in this theme has been inspired by
 *  https://github.com/anvyst/adminlte-skin-midnight */
 
+:root {
+  --datatable-bgcolor: rgba(64, 76, 88, 0.8);
+}
+
 body {
   background-color: #353c42;
   color: #bec5cb;
diff --git a/style/themes/default-darker.css b/style/themes/default-darker.css
index 72203fd3..f31f3d09 100644
--- a/style/themes/default-darker.css
+++ b/style/themes/default-darker.css
@@ -99,6 +99,7 @@ select:-webkit-autofill {
   --darkreader-neutral-text: #d8d4cf;
   --darkreader-selection-background: #004daa;
   --darkreader-selection-text: #e8e6e3;
+  --datatable-bgcolor: rgb(35, 47, 52);
 }
 
 /* Modified CSS */
diff --git a/style/themes/default-light.css b/style/themes/default-light.css
index 72b37836..52125863 100644
--- a/style/themes/default-light.css
+++ b/style/themes/default-light.css
@@ -239,3 +239,19 @@ td.highlight {
 .iradio_minimal-blue {
   margin-right: 8px;
 }
+
+.datatable-bt,
+.datatable-bt:active,
+.datatable-bt:active:focus,
+.datatable-bt:focus {
+  background: #fff;
+  border-color: #ddd;
+  color: #345;
+}
+
+.datatable-bt:hover,
+.datatable-bt:active:hover {
+  background: #337ab7;
+  border-color: #337ab7;
+  color: #fff;
+}
diff --git a/style/themes/lcars.css b/style/themes/lcars.css
index b9cd419e..2e3b99f2 100644
--- a/style/themes/lcars.css
+++ b/style/themes/lcars.css
@@ -10,6 +10,7 @@
   --net-recent-color: #055;
   --net-old-color: #125;
   --net-older-color: #1c2228;
+  --datatable-bgcolor: var(--net-old-color);
 }
 
 .sidebar-collapse {
@@ -1226,7 +1227,6 @@ table.dataTable thead .sorting_desc_disabled:after {
 #ad-frequency table td:last-child,
 #ad-frequency table th:last-child {
   width: 130px !important;
-  width: auto;
 }
 
 #domain-frequency table td:first-child,
@@ -1768,6 +1768,22 @@ table.dataTable {
   border: none;
 }
 
+/*** datatables Select: row, checkbox and button ***/
+table.dataTable tbody > tr.selected td,
+table.dataTable tbody > tr > .selected td {
+  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.5);
+}
+
+.select-checkbox {
+  min-width: 8px;
+}
+
+.datatable-bt {
+  border-radius: 6px;
+  padding: 3px 10px;
+}
+
+/*** icheckbox ***/
 .icheckbox_minimal-blue {
   margin-right: 10px;
 }
diff --git a/style/vendor/datatables_extensions.min.css b/style/vendor/datatables_extensions.min.css
new file mode 100644
index 00000000..0cf8902e
--- /dev/null
+++ b/style/vendor/datatables_extensions.min.css
@@ -0,0 +1,15 @@
+/*
+* Datatables Select 1.3.1
+* https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css
+*/
+
+table.dataTable tbody>tr.selected,table.dataTable tbody>tr>.selected{background-color:#B0BED9}table.dataTable.stripe tbody>tr.odd.selected,table.dataTable.stripe tbody>tr.odd>.selected,table.dataTable.display tbody>tr.odd.selected,table.dataTable.display tbody>tr.odd>.selected{background-color:#acbad4}table.dataTable.hover tbody>tr.selected:hover,table.dataTable.hover tbody>tr>.selected:hover,table.dataTable.display tbody>tr.selected:hover,table.dataTable.display tbody>tr>.selected:hover{background-color:#aab7d1}table.dataTable.order-column tbody>tr.selected>.sorting_1,table.dataTable.order-column tbody>tr.selected>.sorting_2,table.dataTable.order-column tbody>tr.selected>.sorting_3,table.dataTable.order-column tbody>tr>.selected,table.dataTable.display tbody>tr.selected>.sorting_1,table.dataTable.display tbody>tr.selected>.sorting_2,table.dataTable.display tbody>tr.selected>.sorting_3,table.dataTable.display tbody>tr>.selected{background-color:#acbad5}table.dataTable.display tbody>tr.odd.selected>.sorting_1,table.dataTable.order-column.stripe tbody>tr.odd.selected>.sorting_1{background-color:#a6b4cd}table.dataTable.display tbody>tr.odd.selected>.sorting_2,table.dataTable.order-column.stripe tbody>tr.odd.selected>.sorting_2{background-color:#a8b5cf}table.dataTable.display tbody>tr.odd.selected>.sorting_3,table.dataTable.order-column.stripe tbody>tr.odd.selected>.sorting_3{background-color:#a9b7d1}table.dataTable.display tbody>tr.even.selected>.sorting_1,table.dataTable.order-column.stripe tbody>tr.even.selected>.sorting_1{background-color:#acbad5}table.dataTable.display tbody>tr.even.selected>.sorting_2,table.dataTable.order-column.stripe tbody>tr.even.selected>.sorting_2{background-color:#aebcd6}table.dataTable.display tbody>tr.even.selected>.sorting_3,table.dataTable.order-column.stripe tbody>tr.even.selected>.sorting_3{background-color:#afbdd8}table.dataTable.display tbody>tr.odd>.selected,table.dataTable.order-column.stripe tbody>tr.odd>.selected{background-color:#a6b4cd}table.dataTable.display tbody>tr.even>.selected,table.dataTable.order-column.stripe tbody>tr.even>.selected{background-color:#acbad5}table.dataTable.display tbody>tr.selected:hover>.sorting_1,table.dataTable.order-column.hover tbody>tr.selected:hover>.sorting_1{background-color:#a2aec7}table.dataTable.display tbody>tr.selected:hover>.sorting_2,table.dataTable.order-column.hover tbody>tr.selected:hover>.sorting_2{background-color:#a3b0c9}table.dataTable.display tbody>tr.selected:hover>.sorting_3,table.dataTable.order-column.hover tbody>tr.selected:hover>.sorting_3{background-color:#a5b2cb}table.dataTable.display tbody>tr:hover>.selected,table.dataTable.display tbody>tr>.selected:hover,table.dataTable.order-column.hover tbody>tr:hover>.selected,table.dataTable.order-column.hover tbody>tr>.selected:hover{background-color:#a2aec7}table.dataTable tbody td.select-checkbox,table.dataTable tbody th.select-checkbox{position:relative}table.dataTable tbody td.select-checkbox:before,table.dataTable tbody td.select-checkbox:after,table.dataTable tbody th.select-checkbox:before,table.dataTable tbody th.select-checkbox:after{display:block;position:absolute;top:1.2em;left:50%;width:12px;height:12px;box-sizing:border-box}table.dataTable tbody td.select-checkbox:before,table.dataTable tbody th.select-checkbox:before{content:' ';margin-top:-6px;margin-left:-6px;border:1px solid black;border-radius:3px}table.dataTable tr.selected td.select-checkbox:after,table.dataTable tr.selected th.select-checkbox:after{content:'\2714';margin-top:-11px;margin-left:-4px;text-align:center;text-shadow:1px 1px #B0BED9, -1px -1px #B0BED9, 1px -1px #B0BED9, -1px 1px #B0BED9}div.dataTables_wrapper span.select-info,div.dataTables_wrapper span.select-item{margin-left:0.5em}@media screen and (max-width: 640px){div.dataTables_wrapper span.select-info,div.dataTables_wrapper span.select-item{margin-left:0;display:block}}
+
+
+/*
+* Datatables Buttons 1.7.1
+* https://cdn.datatables.net/buttons/1.7.1/css/buttons.dataTables.min.css
+*/
+
+@keyframes dtb-spinner{100%{transform:rotate(360deg)}}@-o-keyframes dtb-spinner{100%{-o-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes dtb-spinner{100%{-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dtb-spinner{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-moz-keyframes dtb-spinner{100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}div.dt-button-info{position:fixed;top:50%;left:50%;width:400px;margin-top:-100px;margin-left:-200px;background-color:white;border:2px solid #111;box-shadow:3px 3px 8px rgba(0, 0, 0, 0.3);border-radius:3px;text-align:center;z-index:21}div.dt-button-info h2{padding:.5em;margin:0;font-weight:normal;border-bottom:1px solid #ddd;background-color:#f3f3f3}div.dt-button-info>div{padding:1em}div.dt-button-collection-title{text-align:center;padding:.3em 0 .5em;font-size:.9em}div.dt-button-collection-title:empty{display:none}button.dt-button,div.dt-button,a.dt-button,input.dt-button{position:relative;display:inline-block;box-sizing:border-box;margin-right:.333em;margin-bottom:.333em;padding:.5em 1em;border:1px solid rgba(0, 0, 0, 0.3);border-radius:2px;cursor:pointer;font-size:.88em;line-height:1.6em;color:black;white-space:nowrap;overflow:hidden;background-color:rgba(0, 0, 0, 0.1);background:-webkit-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-moz-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-ms-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-o-linear-gradient(top, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:linear-gradient(to bottom, rgba(230, 230, 230, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(230, 230, 230, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)");-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;outline:none;text-overflow:ellipsis}button.dt-button.disabled,div.dt-button.disabled,a.dt-button.disabled,input.dt-button.disabled{cursor:default;opacity:.4}button.dt-button:active:not(.disabled),button.dt-button.active:not(.disabled),div.dt-button:active:not(.disabled),div.dt-button.active:not(.disabled),a.dt-button:active:not(.disabled),a.dt-button.active:not(.disabled),input.dt-button:active:not(.disabled),input.dt-button.active:not(.disabled){background-color:rgba(0, 0, 0, 0.1);background:-webkit-linear-gradient(top, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-moz-linear-gradient(top, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-ms-linear-gradient(top, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-o-linear-gradient(top, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:linear-gradient(to bottom, rgba(179, 179, 179, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(179, 179, 179, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)");box-shadow:inset 1px 1px 3px #999}button.dt-button:active:not(.disabled):hover:not(.disabled),button.dt-button.active:not(.disabled):hover:not(.disabled),div.dt-button:active:not(.disabled):hover:not(.disabled),div.dt-button.active:not(.disabled):hover:not(.disabled),a.dt-button:active:not(.disabled):hover:not(.disabled),a.dt-button.active:not(.disabled):hover:not(.disabled),input.dt-button:active:not(.disabled):hover:not(.disabled),input.dt-button.active:not(.disabled):hover:not(.disabled){box-shadow:inset 1px 1px 3px #999;background-color:rgba(0, 0, 0, 0.1);background:-webkit-linear-gradient(top, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-moz-linear-gradient(top, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-ms-linear-gradient(top, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-o-linear-gradient(top, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:linear-gradient(to bottom, rgba(128, 128, 128, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(128, 128, 128, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)")}button.dt-button:hover,div.dt-button:hover,a.dt-button:hover,input.dt-button:hover{text-decoration:none}button.dt-button:hover:not(.disabled),div.dt-button:hover:not(.disabled),a.dt-button:hover:not(.disabled),input.dt-button:hover:not(.disabled){border:1px solid #666;background-color:rgba(0, 0, 0, 0.1);background:-webkit-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-moz-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-ms-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:-o-linear-gradient(top, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);background:linear-gradient(to bottom, rgba(153, 153, 153, 0.1) 0%, rgba(0, 0, 0, 0.1) 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="rgba(153, 153, 153, 0.1)", EndColorStr="rgba(0, 0, 0, 0.1)")}button.dt-button:focus:not(.disabled),div.dt-button:focus:not(.disabled),a.dt-button:focus:not(.disabled),input.dt-button:focus:not(.disabled){border:1px solid #426c9e;text-shadow:0 1px 0 #c4def1;outline:none;background-color:#79ace9;background:-webkit-linear-gradient(top, #d1e2f7 0%, #79ace9 100%);background:-moz-linear-gradient(top, #d1e2f7 0%, #79ace9 100%);background:-ms-linear-gradient(top, #d1e2f7 0%, #79ace9 100%);background:-o-linear-gradient(top, #d1e2f7 0%, #79ace9 100%);background:linear-gradient(to bottom, #d1e2f7 0%, #79ace9 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#d1e2f7", EndColorStr="#79ace9")}.dt-button embed{outline:none}div.dt-buttons{position:relative;float:left}div.dt-buttons.buttons-right{float:right}div.dataTables_layout_cell div.dt-buttons{float:none}div.dataTables_layout_cell div.dt-buttons.buttons-right{float:none}div.dt-button-collection{position:absolute;top:0;left:0;width:150px;margin-top:3px;padding:8px 8px 4px 8px;border:1px solid #ccc;border:1px solid rgba(0, 0, 0, 0.4);background-color:white;overflow:hidden;z-index:2002;border-radius:5px;box-shadow:3px 3px 5px rgba(0, 0, 0, 0.3);box-sizing:border-box}div.dt-button-collection button.dt-button,div.dt-button-collection div.dt-button,div.dt-button-collection a.dt-button{position:relative;left:0;right:0;width:100%;display:block;float:none;margin-bottom:4px;margin-right:0}div.dt-button-collection button.dt-button:active:not(.disabled),div.dt-button-collection button.dt-button.active:not(.disabled),div.dt-button-collection div.dt-button:active:not(.disabled),div.dt-button-collection div.dt-button.active:not(.disabled),div.dt-button-collection a.dt-button:active:not(.disabled),div.dt-button-collection a.dt-button.active:not(.disabled){background-color:#dadada;background:-webkit-linear-gradient(top, #f0f0f0 0%, #dadada 100%);background:-moz-linear-gradient(top, #f0f0f0 0%, #dadada 100%);background:-ms-linear-gradient(top, #f0f0f0 0%, #dadada 100%);background:-o-linear-gradient(top, #f0f0f0 0%, #dadada 100%);background:linear-gradient(to bottom, #f0f0f0 0%, #dadada 100%);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr="#f0f0f0", EndColorStr="#dadada");box-shadow:inset 1px 1px 3px #666}div.dt-button-collection.fixed{position:fixed;top:50%;left:50%;margin-left:-75px;border-radius:0}div.dt-button-collection.fixed.two-column{margin-left:-200px}div.dt-button-collection.fixed.three-column{margin-left:-225px}div.dt-button-collection.fixed.four-column{margin-left:-300px}div.dt-button-collection>:last-child{display:block !important;-webkit-column-gap:8px;-moz-column-gap:8px;-ms-column-gap:8px;-o-column-gap:8px;column-gap:8px}div.dt-button-collection>:last-child>*{-webkit-column-break-inside:avoid;break-inside:avoid}div.dt-button-collection.two-column{width:400px}div.dt-button-collection.two-column>:last-child{padding-bottom:1px;-webkit-column-count:2;-moz-column-count:2;-ms-column-count:2;-o-column-count:2;column-count:2}div.dt-button-collection.three-column{width:450px}div.dt-button-collection.three-column>:last-child{padding-bottom:1px;-webkit-column-count:3;-moz-column-count:3;-ms-column-count:3;-o-column-count:3;column-count:3}div.dt-button-collection.four-column{width:600px}div.dt-button-collection.four-column>:last-child{padding-bottom:1px;-webkit-column-count:4;-moz-column-count:4;-ms-column-count:4;-o-column-count:4;column-count:4}div.dt-button-collection .dt-button{border-radius:0}div.dt-button-background{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0, 0, 0, 0.7);background:-ms-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);background:-moz-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);background:-o-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);background:-webkit-gradient(radial, center center, 0, center center, 497, color-stop(0, rgba(0, 0, 0, 0.3)), color-stop(1, rgba(0, 0, 0, 0.7)));background:-webkit-radial-gradient(center, ellipse farthest-corner, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);background:radial-gradient(ellipse farthest-corner at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.7) 100%);z-index:2001}@media screen and (max-width: 640px){div.dt-buttons{float:none !important;text-align:center}}button.dt-button.processing,div.dt-button.processing,a.dt-button.processing{color:rgba(0, 0, 0, 0.2)}button.dt-button.processing:after,div.dt-button.processing:after,a.dt-button.processing:after{position:absolute;top:50%;left:50%;width:16px;height:16px;margin:-8px 0 0 -8px;box-sizing:border-box;display:block;content:" ";border:2px solid #282828;border-radius:50%;border-left-color:transparent;border-right-color:transparent;animation:dtb-spinner 1500ms infinite linear;-o-animation:dtb-spinner 1500ms infinite linear;-ms-animation:dtb-spinner 1500ms infinite linear;-webkit-animation:dtb-spinner 1500ms infinite linear;-moz-animation:dtb-spinner 1500ms infinite linear}
+

From d59afde5743766b23f2db04b45e6166bc3529b86 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Sun, 27 Feb 2022 15:14:26 +0100
Subject: [PATCH 2/9] Add ability to batch-delete messages

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/messages.js  | 54 +++++++++++++++++++++------------
 scripts/pi-hole/php/message.php | 16 +++++-----
 2 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/scripts/pi-hole/js/messages.js b/scripts/pi-hole/js/messages.js
index 8bae1e78..67f79f54 100644
--- a/scripts/pi-hole/js/messages.js
+++ b/scripts/pi-hole/js/messages.js
@@ -213,10 +213,13 @@ $(function () {
         className: "btn-sm datatable-bt",
         action: function () {
           // For each ".selected" row ...
+          var ids = [];
           $("tr.selected").each(function () {
-            // ... delete the row identified by "data-id".
-            delMsg($(this).attr("data-id"));
+            // ... add the row identified by "data-id".
+            ids.push(parseInt($(this).attr("data-id"), 10));
           });
+          // Delete all selected rows at once
+          delMsg(ids);
         },
       },
     ],
@@ -264,34 +267,50 @@ $.fn.dataTable.Buttons.defaults.dom.container.className = "dt-buttons";
 
 function deleteMessage() {
   // Passes the button data-del-id attribute as ID
-  delMsg($(this).attr("data-del-id"));
+  var ids = [parseInt($(this).attr("data-del-id"), 10)];
+  delMsg(ids);
 }
 
-function delMsg(id) {
+function delMsg(ids) {
+  // Check input validity
+  if (!Array.isArray(ids)) return;
+
   // Finding out which <tr> should be deleted, based on ID
-  var tr = $("tr[data-id='" + id + "']");
+  var trs = [];
+  for (var id in ids) {
+    if (Object.hasOwnProperty.call(ids, id)) {
+      // Exploit prevention: Return early for non-numeric IDs
+      if (typeof ids[id] !== "number") return;
+      trs.push(ids[id]);
+    }
+  }
 
   utils.disableAll();
-  utils.showAlert("info", "", "Deleting message with ID " + parseInt(id, 10), "...");
+  var idstring = JSON.stringify(ids);
+  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 },
+    data: { action: "delete_message", id: idstring, 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 tr in trs) {
+          if (Object.hasOwnProperty.call(trs, tr)) {
+            table.row(tr).remove().draw(false).ajax.reload(null, false);
+          }
+        }
+      } else {
+        utils.showAlert("error", "", "Error while deleting message: " + idstring, response.message);
       }
     })
     .done(
@@ -299,12 +318,7 @@ function delMsg(id) {
     )
     .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
     });
 }
diff --git a/scripts/pi-hole/php/message.php b/scripts/pi-hole/php/message.php
index 9a653a0e..ae6c78b1 100644
--- a/scripts/pi-hole/php/message.php
+++ b/scripts/pi-hole/php/message.php
@@ -42,19 +42,21 @@ function JSON_error($message = null)
     echo json_encode($response);
 }
 
+// Delete message identified by IDs
 if ($_POST['action'] == 'delete_message' && isset($_POST['id'])) {
-// Delete message identified by ID
     try {
-
-        $stmt = $db->prepare('DELETE FROM message WHERE id=:id');
+        $ids = json_decode($_POST['id']);
+        // Explot prevention: Ensure all entries in the ID array are integers
+        foreach($ids as $value) {
+            if (!is_numeric($value)) {
+                throw new Exception('Invalid payload: id');
+            }
+        }
+        $stmt = $db->prepare('DELETE FROM message WHERE id IN ('.implode(",",$ids).')');
         if (!$stmt) {
             throw new Exception('While preparing message statement: ' . $db->lastErrorMsg());
         }
 
-        if (!$stmt->bindValue(':id', intval($_POST['id']), SQLITE3_INTEGER)) {
-            throw new Exception('While binding id to message statement: ' . $db->lastErrorMsg());
-        }
-
         if (!$stmt->execute()) {
             throw new Exception('While executing message statement: ' . $db->lastErrorMsg());
         }

From 60122713a88779da149c2436f43a93303c4cb495 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Sun, 27 Feb 2022 16:29:50 +0100
Subject: [PATCH 3/9] Be more explicit in API error reporting

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/message.php | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/scripts/pi-hole/php/message.php b/scripts/pi-hole/php/message.php
index ae6c78b1..e48bf832 100644
--- a/scripts/pi-hole/php/message.php
+++ b/scripts/pi-hole/php/message.php
@@ -45,22 +45,20 @@ function JSON_error($message = null)
 // Delete message identified by IDs
 if ($_POST['action'] == 'delete_message' && isset($_POST['id'])) {
     try {
+        if(!is_array($_POST['id']))
+            throw new Exception('Invalid payload: id is not an array');
         $ids = json_decode($_POST['id']);
         // Explot prevention: Ensure all entries in the ID array are integers
         foreach($ids as $value) {
-            if (!is_numeric($value)) {
-                throw new Exception('Invalid payload: id');
-            }
+            if (!is_numeric($value))
+                throw new Exception('Invalid payload: id contains non-numeric entries');
         }
         $stmt = $db->prepare('DELETE FROM message WHERE id IN ('.implode(",",$ids).')');
-        if (!$stmt) {
+        if (!$stmt)
             throw new Exception('While preparing message statement: ' . $db->lastErrorMsg());
-        }
 
-        if (!$stmt->execute()) {
+        if (!$stmt->execute())
             throw new Exception('While executing message statement: ' . $db->lastErrorMsg());
-        }
-
 
         $reload = true;
         JSON_success();

From 0dd9b304acf34b64be7613f7708c105d1e027091 Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Sun, 27 Feb 2022 18:25:53 +0100
Subject: [PATCH 4/9] Check decoded string for array

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/php/message.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/pi-hole/php/message.php b/scripts/pi-hole/php/message.php
index e48bf832..c903e2b0 100644
--- a/scripts/pi-hole/php/message.php
+++ b/scripts/pi-hole/php/message.php
@@ -45,9 +45,9 @@ function JSON_error($message = null)
 // Delete message identified by IDs
 if ($_POST['action'] == 'delete_message' && isset($_POST['id'])) {
     try {
-        if(!is_array($_POST['id']))
-            throw new Exception('Invalid payload: id is not an array');
         $ids = json_decode($_POST['id']);
+        if(!is_array($ids))
+            throw new Exception('Invalid payload: id is not an array');
         // Explot prevention: Ensure all entries in the ID array are integers
         foreach($ids as $value) {
             if (!is_numeric($value))

From e614da59467757ad67d78a9c28c26b0543c95ebd Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Sun, 27 Feb 2022 21:09:26 +0100
Subject: [PATCH 5/9] Simplify code by removing duplication of array

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 scripts/pi-hole/js/messages.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/scripts/pi-hole/js/messages.js b/scripts/pi-hole/js/messages.js
index 67f79f54..dd3eb3f3 100644
--- a/scripts/pi-hole/js/messages.js
+++ b/scripts/pi-hole/js/messages.js
@@ -275,14 +275,9 @@ function delMsg(ids) {
   // Check input validity
   if (!Array.isArray(ids)) return;
 
-  // Finding out which <tr> should be deleted, based on ID
-  var trs = [];
+  // Exploit prevention: Return early for non-numeric IDs
   for (var id in ids) {
-    if (Object.hasOwnProperty.call(ids, id)) {
-      // Exploit prevention: Return early for non-numeric IDs
-      if (typeof ids[id] !== "number") return;
-      trs.push(ids[id]);
-    }
+    if (Object.hasOwnProperty.call(ids, id) && typeof ids[id] !== "number") return;
   }
 
   utils.disableAll();
@@ -304,9 +299,9 @@ function delMsg(ids) {
           "Successfully deleted messages: " + idstring,
           ""
         );
-        for (var tr in trs) {
-          if (Object.hasOwnProperty.call(trs, tr)) {
-            table.row(tr).remove().draw(false).ajax.reload(null, false);
+        for (var id in ids) {
+          if (Object.hasOwnProperty.call(ids, id)) {
+            table.row(id).remove().draw(false).ajax.reload(null, false);
           }
         }
       } else {

From bc2647e983ae8c67888c255b3a44c2310e7814e0 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 28 Feb 2022 21:07:58 -0300
Subject: [PATCH 6/9] New Select/Deselect All button

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/messages.js | 60 +++++++++++++++++++++++++++++-----
 1 file changed, 52 insertions(+), 8 deletions(-)

diff --git a/scripts/pi-hole/js/messages.js b/scripts/pi-hole/js/messages.js
index dd3eb3f3..149dbe97 100644
--- a/scripts/pi-hole/js/messages.js
+++ b/scripts/pi-hole/js/messages.js
@@ -196,21 +196,31 @@ $(function () {
     },
     buttons: [
       {
-        text: '<span class="far fa-check-square"></span>',
+        text: '<span class="far fa-square"></span>',
         titleAttr: "Select All",
-        className: "btn-sm datatable-bt",
+        className: "btn-sm datatable-bt selectAll",
         action: function () {
-          table
-            .rows({
-              page: "current",
-            })
-            .select();
+          table.rows({ page: "current" }).select();
         },
       },
+      {
+        text: '<span class="far fa-minus-square"></span>',
+        titleAttr: "Select More",
+        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",
+        className: "btn-sm datatable-bt deleteSelected",
         action: function () {
           // For each ".selected" row ...
           var ids = [];
@@ -260,8 +270,38 @@ $(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";
 
@@ -307,6 +347,10 @@ function delMsg(ids) {
       } else {
         utils.showAlert("error", "", "Error while deleting message: " + idstring, response.message);
       }
+
+      // Clear selection after deletion
+      table.rows().deselect();
+      changeButtonStates();
     })
     .done(
       utils.checkMessages // Update icon warnings count

From 1a42659d1e0c4252fecb1b8c63038f3c4961838a Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Mon, 28 Feb 2022 23:21:36 -0300
Subject: [PATCH 7/9] Fix horizontal scrollbar for long warning messages

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 style/pi-hole.css | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/style/pi-hole.css b/style/pi-hole.css
index 0b7e148f..a9e33184 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -698,3 +698,8 @@ table.dataTable tbody > tr > .selected {
   background: none;
   background-image: linear-gradient(var(--datatable-bgcolor), var(--datatable-bgcolor));
 }
+
+#messagesTable pre {
+  word-break: break-word;
+  white-space: pre-wrap;
+}

From 0467cb1f66019f8a261d65655269f2265f540a28 Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Tue, 1 Mar 2022 00:05:12 -0300
Subject: [PATCH 8/9] Remove array brackets from output

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/messages.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/pi-hole/js/messages.js b/scripts/pi-hole/js/messages.js
index 149dbe97..f11dbd22 100644
--- a/scripts/pi-hole/js/messages.js
+++ b/scripts/pi-hole/js/messages.js
@@ -321,14 +321,14 @@ function delMsg(ids) {
   }
 
   utils.disableAll();
-  var idstring = JSON.stringify(ids);
+  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: idstring, token: token },
+    data: { action: "delete_message", id: JSON.stringify(ids), token: token },
   })
     .done(function (response) {
       utils.enableAll();

From e37575985d7c9cf967d20a0ff1957b7b8a074aad Mon Sep 17 00:00:00 2001
From: RD WebDesign <github@rdwebdesign.com.br>
Date: Tue, 1 Mar 2022 15:18:02 -0300
Subject: [PATCH 9/9] Addressing reviewer recommendations

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>
---
 scripts/pi-hole/js/messages.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/pi-hole/js/messages.js b/scripts/pi-hole/js/messages.js
index f11dbd22..0a889467 100644
--- a/scripts/pi-hole/js/messages.js
+++ b/scripts/pi-hole/js/messages.js
@@ -204,8 +204,8 @@ $(function () {
         },
       },
       {
-        text: '<span class="far fa-minus-square"></span>',
-        titleAttr: "Select More",
+        text: '<span class="far fa-plus-square"></span>',
+        titleAttr: "Select All",
         className: "btn-sm datatable-bt selectMore",
         action: function () {
           table.rows({ page: "current" }).select();