Fix how Bootstrap-Notfy is used by Pi-hole

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

queries.lp

@@ -194,7 +194,6 @@ mg.include('scripts/pi-hole/lua/header_authenticated.lp','r')
 <script src="<?=pihole.fileversion('scripts/vendor/bootstrap-select.min.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/ip-address-sorting.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/vendor/daterangepicker.min.js')?>"></script>
-<script src="<?=pihole.fileversion('scripts/pi-hole/js/utils.js')?>"></script>
 <script src="<?=pihole.fileversion('scripts/pi-hole/js/queries.js')?>"></script>
 
 <? mg.include('scripts/pi-hole/lua/footer.lp','r')?>

scripts/pi-hole/js/settings-dns-records.js

@@ -246,15 +246,17 @@ function delCNAME(elem) {
 
 $(document).ready(function () {
   $("#btnAdd-host").on("click", function () {
+    utils.disableAll();
     const elem = $("#Hip").val() + " " + $("#Hdomain").val();
     const url = "/api/config/dns/hosts/" + encodeURIComponent(elem);
+    utils.showAlert("info", "", "Adding DNS record...", elem);
     $.ajax({
       url: url,
       method: "PUT",
     })
       .done(function () {
         utils.enableAll();
-        utils.showAlert("success", "far fa-plus", "Successfully added DNS record", "");
+        utils.showAlert("success", "fas fa-plus", "Successfully added DNS record", elem);
         dnsRecordsTable.ajax.reload(null, false);
       })
       .fail(function (data, exception) {
@@ -266,17 +268,19 @@ $(document).ready(function () {
   });
 
   $("#btnAdd-cname").on("click", function () {
+    utils.disableAll();
     var elem = $("#Cdomain").val() + "," + $("#Ctarget").val();
     var ttlVal = parseInt($("#Cttl").val(), 10);
     if (isFinite(ttlVal) && ttlVal >= 0) elem += "," + ttlVal;
     const url = "/api/config/dns/cnameRecords/" + encodeURIComponent(elem);
+    utils.showAlert("info", "", "Adding DNS record...", elem);
     $.ajax({
       url: url,
       method: "PUT",
     })
       .done(function () {
         utils.enableAll();
-        utils.showAlert("success", "far fa-plus", "Successfully added CNAME record", "");
+        utils.showAlert("success", "fas fa-plus", "Successfully added CNAME record", elem);
         dnsRecordsTable.ajax.reload(null, false);
       })
       .fail(function (data, exception) {

scripts/pi-hole/js/utils.js

@@ -83,63 +83,51 @@ function padNumber(num) {
   return ("00" + num).substr(-2, 2);
 }
 
-var info = null;
+var showAlertBox = null;
 function showAlert(type, icon, title, message) {
-  var opts = {};
-  title = "&nbsp;<strong>" + title + "</strong><br>";
+  const options = {
+      title: "&nbsp;<strong>" + title + "</strong><br>",
+      message: message,
+    },
+    settings = {
+      type: type,
+      delay: 5000, // default value
+      mouse_over: "pause",
+    };
   switch (type) {
     case "info":
-      opts = {
-        type: "info",
-        icon: "far fa-clock",
-        title: title,
-        message: message,
-      };
-      info = $.notify(opts);
-      break;
-    case "success":
-      opts = {
-        type: "success",
-        icon: icon,
-        title: title,
-        message: message,
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
+      options.icon = icon !== null && icon.len > 0 ? icon : "far fa-clock";
 
+      break;
+    case "success":
       break;
     case "warning":
-      opts = {
-        type: "warning",
-        icon: "fas fa-exclamation-triangle",
-        title: title,
-        message: message,
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
+      options.icon = "fas fa-exclamation-triangle";
+      settings.delay *= 2;
 
       break;
     case "error":
-      opts = {
-        type: "danger",
-        icon: "fas fa-times",
-        title: "&nbsp;<strong>Error, something went wrong!</strong><br>",
-        message: message,
-      };
-      if (info) {
-        info.update(opts);
-      } else {
-        $.notify(opts);
-      }
+      options.icon = "fas fa-times";
+      options.title = "&nbsp;<strong>Error, something went wrong!</strong><br>";
+      settings.delay *= 2;
 
       break;
     default:
+      // Case not handled, do nothing
+      console.log("Unknown alert type: " + type); // eslint-disable-line no-console
+      return;
+  }
+
+  if (type === "info") {
+    // Create a new notification for info boxes
+    showAlertBox = $.notify(options, settings);
+  } else if (showAlertBox !== null) {
+    // Update existing notification for other boxes (if available)
+    showAlertBox.update(options);
+    showAlertBox.update(settings);
+  } else {
+    // Create a new notification for other boxes if no previous info box exists
+    $.notify(options, settings);
   }
 }