Added basic notification system to web interface

maloja/web/jinja/abstracts/base.jinja

@@ -18,6 +18,7 @@
 		<script src="/search.js"></script>
 		<script src="/neopolitan.js"></script>
 		<script src="/upload.js"></script>
+		<script src="/notifications.js"></script>
 
 		<link rel="preload" href="/static/ttf/Ubuntu-Regular.ttf" as="font" type="font/woff2" crossorigin />
 
@@ -49,6 +50,9 @@
 			{% endblock %}
 		{% endblock %}
 
+		<div id="notification_area">
+
+		</div>
 
 
 		<div class="footer">

maloja/web/static/css/maloja.css

@@ -185,6 +185,29 @@ div.searchresults table.searchresults_tracks td span:nth-child(1) {
 }
 
 
+/**
+Notifications
+**/
+
+div#notification_area {
+	position: fixed;
+	width:420px;
+	bottom:40px;
+	right:20px;
+}
+div#notification_area div.notification {
+	background-color:white;
+	width:400px;
+	height:100px;
+	margin-bottom:7px;
+	padding:9px;
+	opacity:0.4;
+}
+div#notification_area div.notification:hover {
+	opacity:0.95;
+}
+
+
 @media (max-width: 1000px) {
 
 	div.footer {

maloja/web/static/js/notifications.js

@@ -0,0 +1,35 @@
+// JS for feedback to the user whenever any XHTTP action is taken
+
+const colors = {
+	'warning':'red',
+	'info':'green'
+}
+
+const notification_template = info => `
+	<div class="notification" style="background-color:${colors[type]};">
+		<b>${info.title}</b><br/>
+		<span>${info.body}</span>
+
+	</div>
+`
+
+function htmlToElement(html) {
+	template = document.createElement('template');
+	html = html.trim();
+	template.innerHTML = html;
+   	return template.content.firstChild;
+}
+
+function notify(title,msg,type='info',reload=false) {
+	info = {
+		'title':title,
+		'body':msg,
+		'type':type
+	}
+
+	var element = htmlToElement(notification_template(info));
+
+	document.getElementById('notification_area').append(element);
+
+	setTimeout(function(e){e.remove();},7000,element);
+}