From e98e46e1a269649574fdd256fdc6a5d358f3f5fe Mon Sep 17 00:00:00 2001
From: grey <pnh@thegreydiamond.de>
Date: Wed, 17 May 2023 17:46:51 +0200
Subject: [PATCH] Improved UI Toast Tooling

---
 src/frontend/partials/controls.eta.html |  8 ++-
 src/frontend/partials/head.eta.html     |  1 +
 static/js/editCategory.js               | 35 ++-----------
 static/js/editStorages.js               | 69 +++----------------------
 static/js/formHandler.js                | 23 ++-------
 static/js/normalizeToast.js             |  1 +
 static/js/toastHandler.js               | 27 ++++++++++
 7 files changed, 52 insertions(+), 112 deletions(-)
 create mode 100644 static/js/toastHandler.js

diff --git a/src/frontend/partials/controls.eta.html b/src/frontend/partials/controls.eta.html
index c6e1cdb..94ac86a 100644
--- a/src/frontend/partials/controls.eta.html
+++ b/src/frontend/partials/controls.eta.html
@@ -34,7 +34,13 @@
 		</div>
 	</div>
 </header>
-<div class="toast-container position-fixed bottom-0 end-0 p-3">
+<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="masterToast" style="z-index: 2000">
+	<div class="d-flex">
+		<div class="toast-body">Hello, world! This is a toast message.</div>
+		<button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
+	</div>
+</div>
+<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toastMainController">
 	<div class="toast" role="alert" aria-live="assertive" aria-atomic="true" id="generalToast" style="z-index: 2000">
 		<div class="d-flex">
 			<div class="toast-body">Hello, world! This is a toast message.</div>
diff --git a/src/frontend/partials/head.eta.html b/src/frontend/partials/head.eta.html
index 4c6df7d..6a178b1 100644
--- a/src/frontend/partials/head.eta.html
+++ b/src/frontend/partials/head.eta.html
@@ -13,6 +13,7 @@
 
 		<script src="/js/normalizeToast.js"></script>
 		<script src="/static/jquery/dist/jquery.min.js"></script>
+		<script src="/js/toastHandler.js"></script>
 		<link href="/static/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
 		<link href="/static/bootstrap-icons/font/bootstrap-icons.css" rel="stylesheet" />
 		<link href="/css/dashboard.css" rel="stylesheet" />
diff --git a/static/js/editCategory.js b/static/js/editCategory.js
index 23abf22..a51973e 100644
--- a/static/js/editCategory.js
+++ b/static/js/editCategory.js
@@ -20,13 +20,7 @@ function getDataForEdit(name) {
 			$('.loader-overlay').removeClass('active');
 			// Close the modal
 			$('.modal').modal('hide');
-			normalizeToast()
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.');
-			setTimeout(() => {
-				window.location.reload();
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.', "text-bg-danger") 
 		}
 	});
 }
@@ -53,10 +47,7 @@ function deleteEntry(id) {
 		data: { id: id },
 		success: function (data) {
 			$('#staticBackdrop').modal('hide');
-			$('#generalToast').removeClass('text-bg-primary');
-			$('#generalToast').addClass('text-bg-success');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Category deleted successfully.');
+			createNewToast('<i class="bi bi-check2"></i> Category deleted successfully.', "text-bg-success") 
 			confetti({
 				spread: 360,
 				ticks: 100,
@@ -72,24 +63,12 @@ function deleteEntry(id) {
 					}
 				}
 			});
-			setTimeout(() => {
-				$('#generalToast').toast('hide');
-				$('#generalToast').removeClass('text-bg-success');
-				$('#generalToast').addClass('text-bg-primary');
-				window.location.reload();
-			}, 2000);
 		},
 		error: function (data) {
 			// hide the staticBackdrop modal
 			$('#staticBackdrop').modal('hide');
-			normalizeToast()
 
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
-			setTimeout(() => {
-				$('#generalToast').toast('hide');
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false) 
 		}
 	});
 }
@@ -118,13 +97,7 @@ function preFillDeleteModal(name) {
 			document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
 
 			$('#staticBackdrop').modal('hide');
-			normalizeToast()
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.');
-			setTimeout(() => {
-				window.location.reload();
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The category does no longer exist.', "text-bg-danger") 
 		}
 	});
 }
diff --git a/static/js/editStorages.js b/static/js/editStorages.js
index 984f9e8..7663992 100644
--- a/static/js/editStorages.js
+++ b/static/js/editStorages.js
@@ -88,14 +88,7 @@ function preFillDeleteModal(id) {
 			document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
 
 			$('#staticBackdrop').modal('hide');
-			normalizeToast()
-
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storageUnit does no longer exist.');
-			setTimeout(() => {
-				window.location.reload();
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storageUnit does no longer exist.', "text-bg-danger") 
 		}
 	});
 }
@@ -125,14 +118,7 @@ function preFillDeleteModalLoc(id) {
 			document.getElementById('deleteNamePlaceholder').innerText = 'Deleted';
 
 			$('#staticBackdrop').modal('hide');
-			normalizeToast()
-
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage location does no longer exist.');
-			setTimeout(() => {
-				window.location.reload();
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage location does no longer exist.', "text-bg-danger") 
 		}
 	});
 }
@@ -145,11 +131,8 @@ function deleteEntry(id) {
 		data: { id: id },
 		success: function (data) {
 			$('#staticBackdrop').modal('hide');
-			normalizeToast()
+			createNewToast('<i class="bi bi-check2"></i> Storage Unit deleted successfully.', "text-bg-success") 
 
-			$('#generalToast').addClass('text-bg-success');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Storage Unit deleted successfully.');
 			confetti({
 				spread: 360,
 				ticks: 100,
@@ -165,21 +148,11 @@ function deleteEntry(id) {
 					}
 				}
 			});
-			setTimeout(() => {
-				$('#generalToast').toast('hide');
-				window.location.reload();
-			}, 2000);
 		},
 		error: function (data) {
 			// hide the staticBackdrop modal
 			$('#staticBackdrop').modal('hide');
-			normalizeToast()
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
-			setTimeout(() => {
-				$('#generalToast').toast('hide');
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false) 
 		}
 	});
 }
@@ -193,11 +166,7 @@ function deleteEntryLoc(id) {
 		data: { id: id },
 		success: function (data) {
 			$('#staticBackdrop').modal('hide');
-			normalizeToast()
-
-			$('#generalToast').addClass('text-bg-success');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Storage Unit deleted successfully.');
+			createNewToast('<i class="bi bi-check2"></i> Storage Unit deleted successfully.', "text-bg-success") 
 			confetti({
 				spread: 360,
 				ticks: 100,
@@ -213,21 +182,11 @@ function deleteEntryLoc(id) {
 					}
 				}
 			});
-			setTimeout(() => {
-				$('#generalToast').toast('hide');
-				window.location.reload();
-			}, 2000);
 		},
 		error: function (data) {
 			// hide the staticBackdrop modal
 			$('#staticBackdrop').modal('hide');
-			normalizeToast()
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
-			setTimeout(() => {
-				$('#generalToast').toast('hide');
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false) 
 		}
 	});
 }
@@ -266,13 +225,7 @@ function getDataForEdit(id) {
 			$('.loader-overlay').removeClass('active');
 			// Close the modal
 			$('.modal').modal('hide');
-			normalizeToast()
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.');
-			setTimeout(() => {
-				window.location.reload();
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.', "text-bg-danger") 
 		}
 	});
 }
@@ -311,13 +264,7 @@ function getDataForEditLoc(id) {
 			$('.loader-overlay').removeClass('active');
 			// Close the modal
 			$('.modal').modal('hide');
-			normalizeToast()
-			$('#generalToast').addClass('text-bg-danger');
-			$('#generalToast').toast('show');
-			$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.');
-			setTimeout(() => {
-				window.location.reload();
-			}, 3000);
+			createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. The storage unit does no longer exist.', "text-bg-danger") 
 		}
 	});
 }
diff --git a/static/js/formHandler.js b/static/js/formHandler.js
index 1a91c03..c55155f 100644
--- a/static/js/formHandler.js
+++ b/static/js/formHandler.js
@@ -24,15 +24,8 @@ $('.frontendForm').each(function() {
 				$('.modal').modal('hide');
 				// Clear all fields
 				form.find('input, textarea').val('');
-				
-				normalizeToast()
-				$('#generalToast').addClass('text-bg-success');
-				$('#generalToast').toast('show');
-				$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-check2"></i> Changes saved successfully.');
-				setTimeout(() => {
-					$('#generalToast').toast('hide');;
-					window.location.reload();
-				}, 1500);
+				// Create toast
+				createNewToast('<i class="bi bi-check2"></i> Changes saved successfully.', "text-bg-success") 
 			},
 			error: function(data) {
 				console.log('error');
@@ -40,19 +33,11 @@ $('.frontendForm').each(function() {
 				$('.loader-overlay').removeClass('loaderActive');
 
 				// Check for response code 409
-				normalizeToast()
-				$('#generalToast').addClass('text-bg-danger');
-				$('#generalToast').toast('show');
-
-
 				if (data.status == 409) {
-					$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.');
+					createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> The element you tried to create already exists.', "text-bg-danger", 3000, false) 
 				}else {
-					$('#generalToast').children('.d-flex').children('.toast-body').html('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.');
+					createNewToast('<i class="bi bi-exclamation-triangle-fill"></i> Something went wrong. Please try again later.', "text-bg-danger", 3000, false) 
 				}
-				setTimeout(() => {
-					$('#generalToast').toast('hide');
-				}, 3000);
 			}
 		});
 	})
diff --git a/static/js/normalizeToast.js b/static/js/normalizeToast.js
index 351d2b8..17fd9b5 100644
--- a/static/js/normalizeToast.js
+++ b/static/js/normalizeToast.js
@@ -1,4 +1,5 @@
 function normalizeToast(){
+	console.warn("Something is using the deprecated function normalizeToast(). Please use createNewToast() instead.")
 	$('#generalToast').removeClass('text-bg-primary');
 	$('#generalToast').removeClass('text-bg-success');
 	$('#generalToast').removeClass('text-bg-danger');
diff --git a/static/js/toastHandler.js b/static/js/toastHandler.js
new file mode 100644
index 0000000..9f8571f
--- /dev/null
+++ b/static/js/toastHandler.js
@@ -0,0 +1,27 @@
+const currentToasts = [];
+
+function createNewToast(message, colorSelector, autoHideTime = 3000, autoReload = true){
+	const targetContainer = document.getElementById('toastMainController');
+	const masterToast = document.getElementById('masterToast');
+	const newToast = masterToast.cloneNode(true);
+	newToast.classList.add(colorSelector)
+	newToast.id = `toast-${currentToasts.length}`;
+	console.log(newToast.childNodes[1]);
+	newToast.childNodes[1].childNodes[1].innerHTML = message;
+	targetContainer.appendChild(newToast);
+	currentToasts.push(newToast);
+	$(newToast).toast('show');
+	setTimeout(() => {
+		destroyToast(newToast.id);
+		if(autoReload){
+			location.reload();
+		}
+	}, autoHideTime);
+}
+
+function destroyToast(id){
+	const targetContainer = document.getElementById('toastMainController');
+	const targetToast = document.getElementById(id);
+	targetContainer.removeChild(targetToast);
+	currentToasts.splice(currentToasts.indexOf(targetToast), 1);
+}
\ No newline at end of file