Created app.toast module for showing toast|messages to user

web/src/app/css/app.css

@@ -226,3 +226,16 @@ main {
 .item .bigname {
 	font-size: 1.5em;
 }
+
+
+#toast-container {
+	display: flex;
+	position: fixed;
+	top: 0;
+	width: 100%;
+	height: 100%;
+}
+
+#toasts {
+	margin: auto;
+}

web/src/app/js/app.js

@@ -284,6 +284,94 @@ app.overlay = {
 	},
 }
 
+app.toast = {
+	info: async function(text, millis) {
+		return await app.toast._all('info', text, false, millis) },
+	infoConfirm: async function(text) {
+		return await app.toast._all('info', text, true) },
+
+	warn: async function(text, millis) {
+		return await app.toast._all('warn', text, false, millis) },
+	warnConfirm: async function(text) {
+		return await app.toast._all('warn', text, true) },
+
+	error: async function(text, millis) {
+		return await app.toast._all('error', text, false, millis) },
+	errorConfirm: async function(text) {
+		return await app.toast._all('error', text, true) },
+
+	_all: async function(type, text, confirmIt, millis) {
+		millis = millis || 3000;
+		if (confirmIt) millis = 1000 * 1000;
+		const id = 'toast-confirm-'+uuidv4();
+		await app.template.loadMany([`toast.${type}`, 'toast.confirm']);
+		var tpl = app.template.get(`toast.${type}`);
+		tpl = tpl.replaceAll('{confirmTemplate}', confirmIt ? '{t:toast.confirm}' : '');
+		app.toast._show(text, { id, millis, type, template: tpl });
+
+		var result = false;
+		if (confirmIt) {
+			var i = 0;
+			const secs = millis / 100;
+			while (i < secs) {
+				if (app.toast.confirms[id] !== undefined)
+					break;
+				await sleep(100);
+				i++;
+			}
+			result = app.toast.confirms[id] === 1;
+			delete app.toast.confirms[id];
+		} else result = true;
+		return result;
+	},
+	dismiss: function(id) {
+		app.toast.confirms[id] = 0;
+		app.toast.remove(id);
+	},
+	accept: function(id) {
+		app.toast.confirms[id] = 1;
+		app.toast.remove(id);
+	},
+	confirms: {},
+	remove: function(id) {
+		const elem = document.getElementById(id);
+		if (elem !== null) elem.remove();
+		if (app.toast._currentType !== null) {
+			const container = document.getElementById('toast-container');
+			container.classList.remove(app.toast._currentType);
+		}
+	},
+	_currentType: null,
+	_show: function(text, options) {
+		options = options || {};
+		var container = document.getElementById('toast-container');
+		if (container === null) {
+			container = document.createElement('div');
+			container.id = 'toast-container';
+			container.className = 'height-mobile';
+			document.body.appendChild(container);
+		}
+		var toasts = document.getElementById('toasts');
+		if (toasts === null) {
+			toasts = document.createElement('div');
+			toasts.id = 'toasts';
+			container.appendChild(toasts);
+		}
+		app.toast._currentType = options.type || null;
+		if (app.toast._currentType !== null)
+			container.classList.add(app.toast._currentType);
+
+		const id = options.id || 'toast-'+uuidv4();
+		const template = options.template
+			|| '<div id="{.id}">{.text}</div>';
+		const data = { id, text };
+		const tplfilled = app.template.fill(data, template);
+		toasts.innerHTML += tplfilled;
+		setTimeout(function() { app.toast.remove(id) },
+			options.millis || 3000);
+	},
+}
+
 function scriptPageHandler(modname, cfg) {
 	cfg['callback'] = function(args) {
 		app.script(modname, function(ok) {

web/src/app/js/templates/toast/confirm.html

@@ -0,0 +1,8 @@
+<div style="flex">
+	<div>
+		<a onclick="app.toast.dismiss('{.id}')">NO</a>
+	</div>
+	<div>
+		<a onclick="app.toast.accept('{.id}')">YES</a>
+	</div>
+</div>

web/src/app/js/templates/toast/error.html

@@ -0,0 +1,3 @@
+<div id="{.id}">
+	<div>{.text}</div>
+</div>

web/src/app/js/templates/toast/info.html

@@ -0,0 +1,4 @@
+<div id="{.id}" style="background: blue">
+	<div>{.text}</div>
+	{confirmTemplate}
+</div>

web/src/app/js/templates/toast/warn.html

@@ -0,0 +1,3 @@
+<div id="{.id}">
+	<div>{.text}</div>
+</div>