Remove the old Alert Modal with and use showAlert() function

Signed-off-by: RD WebDesign <github@rdwebdesign.com.br>

queries.lp

@@ -9,40 +9,6 @@
 
 mg.include('scripts/lua/header_authenticated.lp','r')
 ?>
-<!-- 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 class="modal-footer">
-                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
 <div class="row">
     <div class="col-md-12">
         <div class="box box-info collapsed-box box-solid">

scripts/js/utils.js

@@ -391,98 +391,62 @@ function stateLoadCallback(itemName) {
 }
 
 function addFromQueryLog(domain, list) {
-  const alertModal = $("#alertModal");
-  const alProcessing = alertModal.find(".alProcessing");
-  const alSuccess = alertModal.find(".alSuccess");
-  const alFailure = alertModal.find(".alFailure");
-  const alNetworkErr = alertModal.find(".alFailure #alNetErr");
-  const alCustomErr = alertModal.find(".alFailure #alCustomErr");
-  const alList = "#alList";
-  const alDomain = "#alDomain";
-
-  // Exit the function here if the Modal is already shown (multiple running interlock)
-  if (alertModal.css("display") !== "none") {
-    return;
-  }
-
   const listtype = list === "allow" ? "Allowlist" : "Denylist";
 
-  alProcessing.children(alDomain).text(domain);
-  alProcessing.children(alList).text(listtype);
-  alertModal.modal("show");
+  disableAll();
+  showAlert("info", "", "Adding from Query Log", `Adding ${domain} to the ${listtype}...`);
 
-  // add Domain to List after Modal has faded in
-  alertModal.one("shown.bs.modal", () => {
-    $.ajax({
-      url: document.body.dataset.apiurl + "/domains/" + list + "/exact",
-      method: "post",
-      dataType: "json",
-      processData: false,
-      contentType: "application/json; charset=utf-8",
-      data: JSON.stringify({
-        domain,
-        comment: "Added from Query Log",
-        type: list,
-        kind: "exact",
-      }),
-      success(response) {
-        alProcessing.hide();
-        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(() => {
-            alertModal.modal("hide");
-          }, 2000);
-        } else {
-          // Failure
-          alNetworkErr.hide();
-          alCustomErr.html(response.message);
-          alFailure.fadeIn(1000);
-          setTimeout(() => {
-            alertModal.modal("hide");
-          }, 10_000);
-        }
-      },
-      error(xhr) {
-        alProcessing.hide();
-        // A duplicate domain (or any other database error) comes back as an
-        // HTTP error carrying a JSON body - show its message instead of the
-        // generic network error, e.g. "The item is already present"
-        let apiError = xhr.responseJSON && xhr.responseJSON.error;
-        if (!apiError && xhr.responseText) {
-          try {
-            apiError = JSON.parse(xhr.responseText).error;
-          } catch {
-            // Not a JSON response, treat as a genuine network error
-          }
+  $.ajax({
+    url: document.body.dataset.apiurl + "/domains/" + list + "/exact",
+    method: "post",
+    dataType: "json",
+    processData: false,
+    contentType: "application/json; charset=utf-8",
+    data: JSON.stringify({
+      domain,
+      comment: "Added from Query Log",
+      type: list,
+      kind: "exact",
+    }),
+    success(response) {
+      enableAll();
+      if ("domains" in response && response.domains.length > 0) {
+        // Success
+        showAlert(
+          "success",
+          "fas fa-plus",
+          "Added from Query Log",
+          `${domain} successfully added to the ${listtype}`
+        );
+
+        // Update domains counter in the menu
+        updateFtlInfo();
+      } else {
+        // Failure
+        showAlert("error", "", `Failure adding ${listtype}`, response.message);
+      }
+    },
+    error(xhr) {
+      // A duplicate domain (or any other database error) comes back as an
+      // HTTP error carrying a JSON body - show its message instead of the
+      // generic network error, e.g. "The item is already present"
+      let apiError = xhr.responseJSON && xhr.responseJSON.error;
+      if (!apiError && xhr.responseText) {
+        try {
+          apiError = JSON.parse(xhr.responseText).error;
+        } catch {
+          // Not a JSON response, treat as a genuine network error
         }
+      }
 
-        if (apiError) {
-          alNetworkErr.hide();
-          alCustomErr.text(apiError.hint || apiError.message);
-        } else {
-          alNetworkErr.show();
-          alCustomErr.text("");
-        }
+      let errorMsg = "Timeout or Network Connection Error!";
+      if (apiError) {
+        errorMsg = apiError.hint || apiError.message;
+      }
 
-        alFailure.fadeIn(1000);
-        setTimeout(() => {
-          alertModal.modal("hide");
-        }, 8000);
-      },
-    });
-  });
-
-  // Reset Modal after it has faded out
-  alertModal.one("hidden.bs.modal", () => {
-    alProcessing.show();
-    alSuccess.add(alFailure).hide();
-    alProcessing.add(alSuccess).children(alDomain).html("").end().children(alList).html("");
-    alCustomErr.html("");
+      enableAll();
+      showAlert("error", "", `Failure adding ${listtype}`, errorMsg);
+    },
   });
 }