Remove code to update existing toasts. It made the code very complex and was used only in two places

Signed-off-by: yubiuser <github@yubiuser.dev>

Author: yubiuser

scripts/js/groups-common.js

@@ -72,7 +72,12 @@ function processGroupResult(data, type, done, notDone) {
 
   // Loop over data.processed.success and show toasts
   for (const item of data.processed.success) {
-    utils.showAlert("success", "fas fa-pencil-alt", `Successfully ${done} ${type}`, itemLabel(item));
+    utils.showAlert(
+      "success",
+      "fas fa-pencil-alt",
+      `Successfully ${done} ${type}`,
+      itemLabel(item)
+    );
   }
 
   // Loop over errors and display them

scripts/js/messages.js

@@ -10,7 +10,6 @@
 "use strict";
 
 let table;
-const toasts = {};
 
 $(() => {
   const url = document.body.dataset.apiurl + "/info/messages";
@@ -151,7 +150,7 @@ function deleteMessage() {
 function delMsg(id) {
   id = Math.trunc(Number(id));
   utils.disableAll();
-  toasts[id] = utils.showAlert("info", "", "Deleting message...", "ID: " + id, null);
+  utils.showAlert("info", "", "Deleting message...", "ID: " + id);
 
   $.ajax({
     url: document.body.dataset.apiurl + "/info/messages/" + id,
@@ -160,24 +159,12 @@ function delMsg(id) {
     .done(response => {
       utils.enableAll();
       if (response === undefined) {
-        utils.showAlert(
-          "success",
-          "far fa-trash-alt",
-          "Successfully deleted message",
-          "ID: " + id,
-          toasts[id]
-        );
+        utils.showAlert("success", "far fa-trash-alt", "Successfully deleted message", "ID: " + id);
         table.row(id).remove();
 
         table.draw(false).ajax.reload(null, false);
       } else {
-        utils.showAlert(
-          "error",
-          "",
-          "Error while deleting message: " + id,
-          response.message,
-          toasts[id]
-        );
+        utils.showAlert("error", "", "Error while deleting message: " + id, response.message);
       }
 
       // Clear selection after deletion
@@ -189,13 +176,7 @@ function delMsg(id) {
     )
     .fail((jqXHR, exception) => {
       utils.enableAll();
-      utils.showAlert(
-        "error",
-        "",
-        "Error while deleting message: " + id,
-        jqXHR.responseText,
-        toasts[id]
-      );
+      utils.showAlert("error", "", "Error while deleting message: " + id, jqXHR.responseText);
       console.log(exception); // eslint-disable-line no-console
     });
 }

scripts/js/settings-dhcp.js

@@ -10,7 +10,6 @@
 "use strict";
 
 let dhcpLeaesTable = null;
-const toasts = {};
 
 // DHCP leases tooltips
 // Bootstrap 5 has no jQuery-plugin tooltip delegation, so lazily instantiate
@@ -184,7 +183,7 @@ function deleteLease() {
 
 function delLease(ip) {
   utils.disableAll();
-  toasts[ip] = utils.showAlert("info", "", "Deleting lease...", ip, null);
+  utils.showAlert("info", "", "Deleting lease...", ip);
 
   $.ajax({
     url: document.body.dataset.apiurl + "/dhcp/leases/" + encodeURIComponent(ip),
@@ -193,22 +192,10 @@ function delLease(ip) {
     .done(response => {
       utils.enableAll();
       if (response === undefined) {
-        utils.showAlert(
-          "success",
-          "far fa-trash-alt",
-          "Successfully deleted lease",
-          ip,
-          toasts[ip]
-        );
+        utils.showAlert("success", "far fa-trash-alt", "Successfully deleted lease", ip);
         dhcpLeaesTable.ajax.reload(null, false);
       } else {
-        utils.showAlert(
-          "error",
-          "",
-          "Error while deleting lease: " + ip,
-          response.lease,
-          toasts[ip]
-        );
+        utils.showAlert("error", "", "Error while deleting lease: " + ip, response.lease);
       }
 
       // Clear selection after deletion
@@ -217,13 +204,7 @@ function delLease(ip) {
     })
     .fail((jqXHR, exception) => {
       utils.enableAll();
-      utils.showAlert(
-        "error",
-        "",
-        "Error while deleting lease: " + ip,
-        jqXHR.responseText,
-        toasts[ip]
-      );
+      utils.showAlert("error", "", "Error while deleting lease: " + ip, jqXHR.responseText);
       console.log(exception); // eslint-disable-line no-console
     });
 }

scripts/js/utils.js

@@ -102,8 +102,6 @@ function padNumber(num) {
   return ("00" + num).substr(-2, 2);
 }
 
-let showAlertBox = null;
-
 // Gets ToastContainer if it exists, otherwise creates a new one and return it
 function getOrCreateToastContainer() {
   const existing =
@@ -127,6 +125,8 @@ function createToast(alertState) {
   const toast = document.createElement("div");
   toast.className = "toast align-items-center border-0 shadow rounded overflow-hidden";
   toast.dataset.toastType = alertState.type;
+  toast.dataset.bsAutohide = String(alertState.autohide);
+  toast.dataset.bsDelay = String(alertState.delay);
   toast.setAttribute("role", alertState.role);
   toast.setAttribute("aria-live", alertState.live);
   toast.setAttribute("aria-atomic", alertState.ariaAtomic);
@@ -182,7 +182,7 @@ function createToast(alertState) {
   return toast;
 }
 
-function showAlert(type, icon, title, message, toast) {
+function showAlert(type, icon, title, message) {
   // sets all properties of the alertState object based on the type of alert and the provided parameters
   const alertState = {
     title: "&nbsp;<strong>" + escapeHtml(title) + "</strong><br>",
@@ -249,97 +249,17 @@ function showAlert(type, icon, title, message, toast) {
   }
 
   const container = getOrCreateToastContainer();
+  const toastElement = createToast(alertState);
+  const toastInstance = new bootstrap.Toast(toastElement);
 
-  const toastController = {
-    element: createToast(alertState),
-    instance: null,
-    alertState,
-    update(partialState) {
-      this.alertState = { ...this.alertState, ...partialState };
-      this.render();
-      this.show();
-      return this;
-    },
-    render() {
-      const renderedToast = createToast(this.alertState);
-
-      this.element.className = renderedToast.className;
-      this.element.dataset.toastType = renderedToast.dataset.toastType;
-      this.element.setAttribute("role", renderedToast.getAttribute("role"));
-      this.element.setAttribute("aria-live", renderedToast.getAttribute("aria-live"));
-      this.element.setAttribute("aria-atomic", renderedToast.getAttribute("aria-atomic"));
-      this.element.replaceChildren(...renderedToast.childNodes);
-    },
-    ensureInstance() {
-      if (this.instance === null) {
-        this.instance = new bootstrap.Toast(this.element, {
-          autohide: this.alertState.autohide,
-          delay: this.alertState.delay,
-        });
-      }
-
-      return this.instance;
-    },
-    show() {
-      if (!this.element.isConnected) {
-        container.prepend(this.element);
-      }
-
-      this.ensureInstance().show();
-      return this;
-    },
-    hide() {
-      if (this.instance !== null) {
-        this.instance.hide();
-      }
-
-      return this;
-    },
-    dispose() {
-      if (this.instance !== null) {
-        this.instance.dispose();
-        this.instance = null;
-      }
-
-      this.element.remove();
-      if (showAlertBox === this) {
-        showAlertBox = null;
-      }
-
-      return this;
-    },
-  };
-
-  toastController.element.addEventListener("hidden.bs.toast", () => {
-    toastController.element.remove();
-    if (showAlertBox === toastController) {
-      showAlertBox = null;
-    }
+  toastElement.addEventListener("hidden.bs.toast", () => {
+    toastElement.remove();
+    toastInstance.dispose();
   });
 
-  if (toast === null) {
-    // Always create a new toast
-    return toastController.show();
-  }
-
-  if (toast !== undefined) {
-    // Update existing toast
-    return toast.update(alertState);
-  }
-
-  if (type === "info") {
-    // Create a new notification for info boxes
-    showAlertBox = toastController;
-    return toastController.show();
-  }
-
-  if (showAlertBox !== null) {
-    // Update existing notification for other boxes (if available)
-    return showAlertBox.update(alertState);
-  }
-
-  // Create a new notification for other boxes if no previous info box exists
-  return toastController.show();
+  container.prepend(toastElement);
+  toastInstance.show();
+  return toastInstance;
 }
 
 function datetime(date, html, humanReadable) {