From b03f59dfc754e6e145af36cd7461c33ab2c7e03f Mon Sep 17 00:00:00 2001 From: Martin Geno Date: Tue, 9 May 2017 02:12:10 +0200 Subject: [PATCH] [TASK] gui add notification --- webroot/css/main.css | 13 +++---------- webroot/index.html | 21 +++++++++------------ webroot/js/gui.js | 26 ++++++++++++++++---------- webroot/js/notify.js | 38 ++++++++++++++++++++++++++++++++++++++ webroot/js/socket.js | 24 ++++++++++++++++-------- 5 files changed, 82 insertions(+), 40 deletions(-) create mode 100644 webroot/js/notify.js diff --git a/webroot/css/main.css b/webroot/css/main.css index 9e25703..89bead0 100644 --- a/webroot/css/main.css +++ b/webroot/css/main.css @@ -1,11 +1,4 @@ - -.loader { - color: #dc0067; - font-size: 1.8em; - line-height: 2; - margin: 30vh auto; - text-align: center; -} -.loader img { - +.notifications { + position: absolute; + right: 1em; } diff --git a/webroot/index.html b/webroot/index.html index 98f9e9c..638baf1 100644 --- a/webroot/index.html +++ b/webroot/index.html @@ -9,23 +9,20 @@ + -
-

- Lade -
- -
- Karten & Knoten... -

-

- +
+
+ +
+
+ diff --git a/webroot/js/gui.js b/webroot/js/gui.js index afe150c..0c5ae29 100644 --- a/webroot/js/gui.js +++ b/webroot/js/gui.js @@ -1,19 +1,25 @@ var gui = {}; (function(){ + var notify; - gui.enable = function enable(){ + gui.render = function render(){ + var status = document.getElementsByClassName('menu')[0]; + if (status === undefined){ + return; + } + status.classList.remove('orange','red'); + if(socket.readyState !== 1){ + status.classList.add(((socket.readyState===0 || socket.readyState===2)?'orange':(socket.readyState===1)?'':'red')); + } + notify = new Notify(document.getElementsByClassName('notifications')[0]); }; - - gui.render = function render (){ - console.log(store.will()) - } - gui.disable = function disable(err){ - document.querySelector('.loader p.error').innerHTML = err - + '

'; + gui.update = function update(){ + console.log(store.will()); }; - gui.connecting = function connecting(){ - + gui.notify = function notifyWalker(type, text){ + notify.notify(type, text); }; + // gui.render(); })(); diff --git a/webroot/js/notify.js b/webroot/js/notify.js new file mode 100644 index 0000000..06bca98 --- /dev/null +++ b/webroot/js/notify.js @@ -0,0 +1,38 @@ +var messages = []; + +function Notify(container){ + /* + var container = document.createElement('div'); + container.classList.add('messages'); + el.appendChild(container); + */ + if ("Notification" in window) { + Notification.requestPermission(); + } + function renderMsg(msg){ + var msgBox = document.createElement('div'); + msgBox.classList.add("ui",msg.type,"message"); + msgBox.innerHTML = msg.text; + container.appendChild(msgBox); + msgBox.addEventListener('click', function(){ + container.removeChild(msgBox); + if (messages.indexOf(msg) !== -1) { + messages.splice(messages.indexOf(msg), 1); + } + }); + } + self.notify = function(type, text){ + if("Notification" in window && Notification.permission === "granted") { + n = new Notification(text,{body:type,icon:'/img/logo.jpg'}); + return; + } + var msg = {type:type,text:text}; + if(messages.length > 10){ + messages.splice(0, 1); + container.removeChild(container.firstElementChild); + } + messages.push(msg); + renderMsg(msg); + }; + return self; +} diff --git a/webroot/js/socket.js b/webroot/js/socket.js index 33358f3..09bf880 100644 --- a/webroot/js/socket.js +++ b/webroot/js/socket.js @@ -1,14 +1,17 @@ -var socket = {}; +var socket = {readyState:0}; (function(){ function onerror(err) { - gui.disable("Es besteht ein Verbindungsproblem!"); console.warn(err); + if(socket.readyState !== 3){ + gui.notify("error","Es gibt Übertragungsprobleme!"); + gui.render(); + } } function onopen() { - gui.enable(); + gui.render(); } function onmessage(e) { @@ -16,26 +19,31 @@ var socket = {}; if(msg.type === "current") { store.updateReal(msg.node); - gui.render(); - + gui.update(); } else if (msg.type === "to-update") { store.update(msg.node); - gui.render(); + gui.update(); } else { gui.disable(e); } + gui.render(); } function onclose(){ - gui.disable("Es besteht ein Verbindungsproblem!
(Automatische Neuverbindung)"); console.log("socket closed by server"); + gui.notify("warn","Es besteht ein Verbindungsproblem!"); + gui.render(); setTimeout(connect, 5000); } function sendnode(node) { var msg = {node:node}; var string = JSON.stringify(msg); - socket.send(string); + if(socket.send(string)){ + gui.notify("success","Node '"+node.node_id+"' mit neuen Werten wurde gespeichert."); + }else{ + gui.notify("error","Node '"+node.node_id+"' konnte nicht gespeichert werden!"); + } } function connect() {