notice: reworked frontend (bs toasts)

frontend/static/js/utils/noticeUtils.js

@@ -1,28 +1,25 @@
-// timer in milliseconds
-function sleep(ms) {
-    return new Promise(resolve => setTimeout(resolve, ms));
-}
+export function createNotification(text, timer = 3000) {
 
-async function create_popup(text = undefined, timer = undefined) {
-
-	if (text == undefined)
-		text = "notice undefined";
-
-	let popup = document.getElementById("popup");
-	popup.textContent = "Notice: " + text;
-	popup.style.opacity = 0.95;
-	popup.onclick = async () => {
-		popup.style.opacity = 0;
-		return ;
+	if (!createNotification.templateToast) {
+		createNotification.templateToast = new DOMParser().parseFromString(`
+			<div class='toast' role='alert' data-bs-delay='${timer}'>
+				<div class='toast-header'>
+					<strong class='me-auto'>Notification</strong>
+					<button type='button' class='btn-close' data-bs-dismiss='toast'></button>
+				</div>
+				<div class='toast-body'>
+				</div>
+			</div>
+			`, 'text/html')
+			.querySelector('body')
+			.firstChild;
 	}
 
-	if (timer == undefined)
-		timer = 5000;
-	await sleep(timer);
-
-	popup.style.opacity = 0;
-	//popup.style.visibility = "hidden"
+	const toastElement = createNotification.templateToast.cloneNode(true);
+	toastElement.getElementsByClassName('toast-body')[0].innerHTML = text;
+	toastElement.addEventListener('hidden.bs.toast', e => e.target.remove());
+	new bootstrap.Toast(toastElement).show();
 
+	const toastContainer = document.getElementById('toastContainer');
+	toastContainer.insertBefore(toastElement, toastContainer.firstChild);
 }
-
-export {create_popup}