From 61526fdc89281122323fcc80a28114cec3cdeb8e Mon Sep 17 00:00:00 2001
From: krateng <git.noreply@krateng.ch>
Date: Sun, 17 Apr 2022 19:30:27 +0200
Subject: [PATCH] Added basic notification system to web interface

---
 maloja/web/jinja/abstracts/base.jinja |  4 +++
 maloja/web/static/css/maloja.css      | 23 ++++++++++++++++++
 maloja/web/static/js/notifications.js | 35 +++++++++++++++++++++++++++
 3 files changed, 62 insertions(+)
 create mode 100644 maloja/web/static/js/notifications.js

diff --git a/maloja/web/jinja/abstracts/base.jinja b/maloja/web/jinja/abstracts/base.jinja
index 8e1645c..aa9cf33 100644
--- a/maloja/web/jinja/abstracts/base.jinja
+++ b/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">
diff --git a/maloja/web/static/css/maloja.css b/maloja/web/static/css/maloja.css
index 3056671..badbeb9 100644
--- a/maloja/web/static/css/maloja.css
+++ b/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 {
diff --git a/maloja/web/static/js/notifications.js b/maloja/web/static/js/notifications.js
new file mode 100644
index 0000000..5dae55e
--- /dev/null
+++ b/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);
+}