[TASK] gui add notification

This commit is contained in:
Martin Geno 2017-05-09 02:12:10 +02:00
parent 24248d3673
commit b03f59dfc7
No known key found for this signature in database
GPG Key ID: F0D39A37E925E941
5 changed files with 82 additions and 40 deletions

View File

@ -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;
}

View File

@ -9,23 +9,20 @@
<script src="//localhost:35729/livereload.js"></script>
<script src="/js/config.js"></script>
<script src="/js/store.js"></script>
<script src="/js/notify.js"></script>
<script src="/js/gui.js"></script>
<script src="/js/socket.js"></script>
<script src="/js/app.js"></script>
</head>
<body>
<div class="loader">
<p>
Lade
<br />
<img src="/img/logo.jpg" class="spinner" />
<br />
Karten &amp; Knoten...
</p>
<p class="error"></p>
<div class="ui stackable inverted menu">
<div class="item">
<img src="/img/logo.jpg">
</div>
</div>
<div class="notifications"></div>
<noscript>
<strong>JavaScript required</strong>
</noscript>
</div>
</body>
</html>

View File

@ -1,19 +1,25 @@
var gui = {};
(function(){
var notify;
gui.enable = function enable(){
};
gui.render = function render (){
console.log(store.will())
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'));
}
gui.disable = function disable(err){
document.querySelector('.loader p.error').innerHTML = err
+ '<br /><br /><button onclick="location.reload(true)" class="ui labeled icon button"><i class="bomb icon"></i>Try to reload</button>';
};
gui.connecting = function connecting(){
notify = new Notify(document.getElementsByClassName('notifications')[0]);
};
gui.update = function update(){
console.log(store.will());
};
gui.notify = function notifyWalker(type, text){
notify.notify(type, text);
};
// gui.render();
})();

38
webroot/js/notify.js Normal file
View File

@ -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;
}

View File

@ -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!<br/> <small>(Automatische Neuverbindung)</small>");
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() {