Reduce code-duplication by moving the addFromQueryLog() function into utils.js. This also fixes non-visible modals on the long-term query log page.

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

db_queries.php

@@ -123,6 +123,37 @@
     <!-- ./col -->
 </div>
 
+<!-- Alert Modal -->
+<div id="alertModal" class="modal fade" role="dialog" data-backdrop="static" data-keyboard="false">
+    <div class="vertical-alignment-helper">
+        <div class="modal-dialog vertical-align-center">
+            <div class="modal-content">
+                <div class="modal-body text-center">
+                    <span class="fa-stack fa-2x" style="margin-bottom: 10px">
+                        <div class="alProcessing">
+                            <i class="fa-stack-2x alSpinner"></i>
+                        </div>
+                        <div class="alSuccess" style="display: none">
+                            <i class="fa fa-circle fa-stack-2x text-green"></i>
+                            <i class="fa fa-check fa-stack-1x fa-inverse"></i>
+                        </div>
+                        <div class="alFailure" style="display: none">
+                            <i class="fa fa-circle fa-stack-2x text-red"></i>
+                            <i class="fa fa-times fa-stack-1x fa-inverse"></i>
+                        </div>
+                    </span>
+                    <div class="alProcessing">Adding <span id="alDomain"></span> to the <span id="alList"></span>...</div>
+                    <div class="alSuccess text-bold text-green" style="display: none"><span id="alDomain"></span> successfully added to the <span id="alList"></span></div>
+                    <div class="alFailure text-bold text-red" style="display: none">
+                        <span id="alNetErr">Timeout or Network Connection Error!</span>
+                        <span id="alCustomErr"></span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
 <div class="row">
     <div class="col-md-12">
       <div class="box" id="recent-queries">
@@ -162,6 +193,7 @@
 <!-- /.row -->
 <script src="scripts/pi-hole/js/ip-address-sorting.js?v=<?=$cacheVer?>"></script>
 <script src="scripts/vendor/daterangepicker.min.js?v=<?=$cacheVer?>"></script>
+<script src="scripts/pi-hole/js/utils.js?v=<?=$cacheVer?>"></script>
 <script src="scripts/pi-hole/js/db_queries.js?v=<?=$cacheVer?>"></script>
 
 <?php

scripts/pi-hole/js/db_queries.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 */
+/* global moment:false, utils:false */
 
 var start__ = moment().subtract(6, "days");
 var from = moment(start__).utc().valueOf() / 1000;
@@ -73,70 +73,6 @@ $(function () {
 
 var tableApi, statistics;
 
-function add(domain, list) {
-  var token = $("#token").text();
-  var alInfo = $("#alInfo");
-  var alList = $("#alList");
-  var alDomain = $("#alDomain");
-  alDomain.html(domain);
-  var alSuccess = $("#alSuccess");
-  var alFailure = $("#alFailure");
-  var err = $("#err");
-
-  if (list === "white") {
-    alList.html("Whitelist");
-  } else {
-    alList.html("Blacklist");
-  }
-
-  alInfo.show();
-  alSuccess.hide();
-  alFailure.hide();
-  $.ajax({
-    url: "scripts/pi-hole/php/groups.php",
-    method: "post",
-    data: {
-      domain: domain,
-      list: list,
-      token: token,
-      action: "replace_domain",
-      comment: "Added from Long-Term-Data Query Log"
-    },
-    success: function (response) {
-      if (!response.success) {
-        alFailure.show();
-        err.html(response.message);
-        alFailure.delay(10000).fadeOut(2000, function () {
-          alFailure.hide();
-        });
-      } else {
-        alSuccess.show();
-        alSuccess.delay(1000).fadeOut(2000, function () {
-          alSuccess.hide();
-        });
-      }
-
-      alInfo.delay(1000).fadeOut(2000, function () {
-        alInfo.hide();
-        alList.html("");
-        alDomain.html("");
-      });
-    },
-    error: function () {
-      alFailure.show();
-      err.html("");
-      alFailure.delay(10000).fadeOut(2000, function () {
-        alFailure.hide();
-      });
-      alInfo.delay(1000).fadeOut(2000, function () {
-        alInfo.hide();
-        alList.html("");
-        alDomain.html("");
-      });
-    }
-  });
-}
-
 function handleAjaxError(xhr, textStatus) {
   if (textStatus === "timeout") {
     alert("The server took too long to send the data.");
@@ -406,9 +342,9 @@ $(function () {
   $("#all-queries tbody").on("click", "button", function () {
     var data = tableApi.row($(this).parents("tr")).data();
     if ([1, 4, 5, 9, 10, 11].indexOf(data[4]) !== -1) {
-      add(data[2], "white");
+      utils.addFromQueryLog(data[2], "white");
     } else {
-      add(data[2], "black");
+      utils.addFromQueryLog(data[2], "black");
     }
   });
 

scripts/pi-hole/js/queries.js

@@ -25,81 +25,6 @@ var replyTypes = [
 ];
 var colTypes = ["time", "query type", "domain", "client", "status", "reply type"];
 
-function add(domain, list) {
-  var token = $("#token").text();
-  var alertModal = $("#alertModal");
-  var alProcessing = alertModal.find(".alProcessing");
-  var alSuccess = alertModal.find(".alSuccess");
-  var alFailure = alertModal.find(".alFailure");
-  var alNetworkErr = alertModal.find(".alFailure #alNetErr");
-  var alCustomErr = alertModal.find(".alFailure #alCustomErr");
-  var alList = "#alList";
-  var alDomain = "#alDomain";
-
-  // Exit the function here if the Modal is already shown (multiple running interlock)
-  if (alertModal.css("display") !== "none") {
-    return;
-  }
-
-  var listtype = list === "white" ? "Whitelist" : "Blacklist";
-
-  alProcessing.children(alDomain).html(domain);
-  alProcessing.children(alList).html(listtype);
-  alertModal.modal("show");
-
-  // add Domain to List after Modal has faded in
-  alertModal.one("shown.bs.modal", function () {
-    $.ajax({
-      url: "scripts/pi-hole/php/groups.php",
-      method: "post",
-      data: {
-        domain: domain,
-        list: list,
-        token: token,
-        action: "replace_domain",
-        comment: "Added from Query Log"
-      },
-      success: function (response) {
-        alProcessing.hide();
-        if (!response.success) {
-          // Failure
-          alNetworkErr.hide();
-          alCustomErr.html(response.message);
-          alFailure.fadeIn(1000);
-          setTimeout(function () {
-            alertModal.modal("hide");
-          }, 10000);
-        } else {
-          // Success
-          alSuccess.children(alDomain).html(domain);
-          alSuccess.children(alList).html(listtype);
-          alSuccess.fadeIn(1000);
-          setTimeout(function () {
-            alertModal.modal("hide");
-          }, 2000);
-        }
-      },
-      error: function () {
-        // Network Error
-        alProcessing.hide();
-        alNetworkErr.show();
-        alFailure.fadeIn(1000);
-        setTimeout(function () {
-          alertModal.modal("hide");
-        }, 10000);
-      }
-    });
-  });
-
-  // Reset Modal after it has faded out
-  alertModal.one("hidden.bs.modal", function () {
-    alProcessing.show();
-    alSuccess.add(alFailure).hide();
-    alProcessing.add(alSuccess).children(alDomain).html("").end().children(alList).html("");
-    alCustomErr.html("");
-  });
-}
-
 function handleAjaxError(xhr, textStatus) {
   if (textStatus === "timeout") {
     alert("The server took too long to send the data.");
@@ -489,9 +414,9 @@ $(function () {
   $("#all-queries tbody").on("click", "button", function () {
     var data = tableApi.row($(this).parents("tr")).data();
     if (data[4] === "2" || data[4] === "3") {
-      add(data[2], "black");
+      utils.addFromQueryLog(data[2], "black");
     } else {
-      add(data[2], "white");
+      utils.addFromQueryLog(data[2], "white");
     }
   });
 

scripts/pi-hole/js/utils.js

@@ -244,6 +244,81 @@ function getGraphType() {
   return localStorage.getItem("barchart_chkbox") === "false" ? "line" : "bar";
 }
 
+function addFromQueryLog(domain, list) {
+  var token = $("#token").text();
+  var alertModal = $("#alertModal");
+  var alProcessing = alertModal.find(".alProcessing");
+  var alSuccess = alertModal.find(".alSuccess");
+  var alFailure = alertModal.find(".alFailure");
+  var alNetworkErr = alertModal.find(".alFailure #alNetErr");
+  var alCustomErr = alertModal.find(".alFailure #alCustomErr");
+  var alList = "#alList";
+  var alDomain = "#alDomain";
+
+  // Exit the function here if the Modal is already shown (multiple running interlock)
+  if (alertModal.css("display") !== "none") {
+    return;
+  }
+
+  var listtype = list === "white" ? "Whitelist" : "Blacklist";
+
+  alProcessing.children(alDomain).html(domain);
+  alProcessing.children(alList).html(listtype);
+  alertModal.modal("show");
+
+  // add Domain to List after Modal has faded in
+  alertModal.one("shown.bs.modal", function () {
+    $.ajax({
+      url: "scripts/pi-hole/php/groups.php",
+      method: "post",
+      data: {
+        domain: domain,
+        list: list,
+        token: token,
+        action: "replace_domain",
+        comment: "Added from Query Log"
+      },
+      success: function (response) {
+        alProcessing.hide();
+        if (!response.success) {
+          // Failure
+          alNetworkErr.hide();
+          alCustomErr.html(response.message);
+          alFailure.fadeIn(1000);
+          setTimeout(function () {
+            alertModal.modal("hide");
+          }, 10000);
+        } else {
+          // Success
+          alSuccess.children(alDomain).html(domain);
+          alSuccess.children(alList).html(listtype);
+          alSuccess.fadeIn(1000);
+          setTimeout(function () {
+            alertModal.modal("hide");
+          }, 2000);
+        }
+      },
+      error: function () {
+        // Network Error
+        alProcessing.hide();
+        alNetworkErr.show();
+        alFailure.fadeIn(1000);
+        setTimeout(function () {
+          alertModal.modal("hide");
+        }, 8000);
+      }
+    });
+  });
+
+  // Reset Modal after it has faded out
+  alertModal.one("hidden.bs.modal", function () {
+    alProcessing.show();
+    alSuccess.add(alFailure).hide();
+    alProcessing.add(alSuccess).children(alDomain).html("").end().children(alList).html("");
+    alCustomErr.html("");
+  });
+}
+
 window.utils = (function () {
   return {
     escapeHtml: escapeHtml,
@@ -261,6 +336,7 @@ window.utils = (function () {
     stateLoadCallback: stateLoadCallback,
     getGraphType: getGraphType,
     validateMAC: validateMAC,
-    validateHostname: validateHostname
+    validateHostname: validateHostname,
+    addFromQueryLog: addFromQueryLog
   };
 })();