Implement new API's endpoints for the buttons on the Query Log and actually show them

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

queries.lp

@@ -165,6 +165,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
                             <th>Type</th>
                             <th>Domain</th>
                             <th>Client</th>
+                            <th></th>
                         </tr>
                     </thead>
                     <tfoot>
@@ -174,6 +175,7 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
                             <th>Type</th>
                             <th>Domain</th>
                             <th>Client</th>
+                            <th></th>
                         </tr>
                     </tfoot>
                 </table>

scripts/pi-hole/js/queries.js

@@ -515,8 +515,9 @@ $(function () {
       },
       { data: "status", width: "1%" },
       { data: "type", width: "5%" },
-      { data: "domain", width: "50%" },
+      { data: "domain", width: "45%" },
-      { data: "client.ip", width: "34%", type: "ip-address", render: $.fn.dataTable.render.text() },
+      { data: "client.ip", width: "29%", type: "ip-address", render: $.fn.dataTable.render.text() },
+      { data: null, width: "10%", sortable: false, searchable: false },
     ],
     lengthMenu: [
       [10, 25, 50, 100, -1],
@@ -565,19 +566,29 @@ $(function () {
       } else {
         $("td:eq(4)", row).text(data.client.ip);
       }
+
+      if (querystatus.buttontext !== false) {
+        $("td:eq(5)", row).html(querystatus.buttontext);
+      }
     },
   });
 
-  $("#all-queries tbody").on("click", "button", function () {
+  // Add event listener for adding domains to the allow-/blocklist
-    var tr = $(this).parents("tr");
+  $("#all-queries tbody").on("click", "button", function (event) {
-    var permitted = tr[0].classList.contains("text-green");
+    var button = $(this);
-    var blocked = tr[0].classList.contains("text-red");
+    var tr = button.parents("tr");
+    var allowButton = button[0].classList.contains("text-green");
+    var denyButton = button[0].classList.contains("text-red");
     var data = table.row(tr).data();
-    if (permitted) {
+    if (denyButton) {
       utils.addFromQueryLog(data.domain, "deny");
-    } else if (blocked) {
+    } else if (allowButton) {
       utils.addFromQueryLog(data.domain, "allow");
     }
+    // else: no (colorful) button, so nothing to do
+
+    // Prevent tr click even tto be triggered for row from opening/closing
+    event.stopPropagation();
   });
 
   // Add event listener for opening and closing details
@@ -585,7 +596,7 @@ $(function () {
     var tr = $(this);
     var row = table.row(tr);
 
-    if(window.getSelection().toString().length > 0) {
+    if (window.getSelection().toString().length > 0) {
       // This event was triggered by a selection, so don't open the row
       return;
     }

scripts/pi-hole/js/utils.js

@@ -5,7 +5,7 @@
  *  This file is copyright under the latest version of the EUPL.
  *  Please see LICENSE file for your rights under this license. */
 
-/* global moment:false, apiFailure: false */
+/* global moment:false, apiFailure: false, updateFtlInfo: false */
 
 $(function () {
   // CSRF protection for AJAX requests, this has to be configured globally
@@ -289,7 +289,6 @@ function getGraphType() {
 }
 
 function addFromQueryLog(domain, list) {
-  var token = $("#token").text();
   var alertModal = $("#alertModal");
   var alProcessing = alertModal.find(".alProcessing");
   var alSuccess = alertModal.find(".alSuccess");
@@ -304,7 +303,7 @@ function addFromQueryLog(domain, list) {
     return;
   }
 
-  var listtype = list === "white" ? "Whitelist" : "Blacklist";
+  var listtype = list === "allow" ? "Allowlist" : "Denylist";
 
   alProcessing.children(alDomain).text(domain);
   alProcessing.children(alList).text(listtype);
@@ -313,22 +312,24 @@ function addFromQueryLog(domain, list) {
   // add Domain to List after Modal has faded in
   alertModal.one("shown.bs.modal", function () {
     $.ajax({
-      url: "scripts/pi-hole/php/groups.php",
+      url: "/api/domains/" + list + "/exact",
       method: "post",
-      data: {
+      dataType: "json",
+      data: JSON.stringify({
         domain: domain,
-        list: list,
-        token: token,
-        action: "replace_domain",
         comment: "Added from Query Log",
-      },
+        type: list,
+        kind: "exact",
+      }),
       success: function (response) {
         alProcessing.hide();
-        if (response.success) {
+        if ("domains" in response && response.domains.length > 0) {
           // Success
           alSuccess.children(alDomain).text(domain);
           alSuccess.children(alList).text(listtype);
           alSuccess.fadeIn(1000);
+          // Update domains counter in the menu
+          updateFtlInfo();
           setTimeout(function () {
             alertModal.modal("hide");
           }, 2000);