Add delete button to network table

Signed-off-by: yubiuser <ckoenig@posteo.de>

Fix styling

Signed-off-by: yubiuser <ckoenig@posteo.de>

Fix xo

Signed-off-by: yubiuser <ckoenig@posteo.de>

Use data.id

Signed-off-by: yubiuser <ckoenig@posteo.de>

Sort by last seen

Signed-off-by: yubiuser <ckoenig@posteo.de>

Use data.id instead of data.ip

Signed-off-by: yubiuser <ckoenig@posteo.de>

scripts/pi-hole/js/network.js

@@ -59,6 +59,8 @@ function parseColor(input) {
   }
 }
 
+function deleteNetworkEntry() {}
+
 $(function () {
   tableApi = $("#network-entries").DataTable({
     rowCallback: function (row, data) {
@@ -170,6 +172,16 @@ $(function () {
       if (data.hwaddr.startsWith("ip-")) {
         $("td:eq(1)", row).text("N/A");
       }
+
+      // Add delete button
+      $(row).attr("data-id", data.id);
+      var button =
+        '<button type="button" class="btn btn-danger btn-xs" id="deleteNetworkEntry_' +
+        data.id +
+        '">' +
+        '<span class="far fa-trash-alt"></span>' +
+        "</button>";
+      $("td:eq(8)", row).html(button);
     },
     dom:
       "<'row'<'col-sm-12'f>>" +
@@ -179,8 +191,9 @@ $(function () {
     ajax: { url: API_STRING, error: handleAjaxError, dataSrc: "network" },
     autoWidth: false,
     processing: true,
-    order: [[5, "desc"]],
+    order: [[6, "desc"]],
     columns: [
+      { data: "id", visible: false },
       { data: "ip", type: "ip-address", width: "10%", render: $.fn.dataTable.render.text() },
       { data: "hwaddr", width: "10%", render: $.fn.dataTable.render.text() },
       { data: "interface", width: "4%", render: $.fn.dataTable.render.text() },
@@ -209,7 +222,13 @@ $(function () {
       },
       { data: "numQueries", width: "9%", render: $.fn.dataTable.render.text() },
       { data: "", width: "6%", orderable: false },
+      { data: "", width: "6%", orderable: false },
     ],
+    drawCallback: function () {
+      $('button[id^="deleteNetworkEntry_"]').on("click", deleteNetworkEntry);
+      // Remove visible dropdown to prevent orphaning
+      $("body > .bootstrap-select.dropdown").remove();
+    },
     lengthMenu: [
       [10, 25, 50, 100, -1],
       [10, 25, 50, 100, "All"],
@@ -223,7 +242,7 @@ $(function () {
     },
     columnDefs: [
       {
-        targets: -1,
+        targets: [-1, -2],
         data: null,
         defaultContent: "",
       },