[TASK] gui add notification
This commit is contained in:
parent
24248d3673
commit
b03f59dfc7
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 & 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>
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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() {
|
||||
|
|
|
|||
Loading…
Reference in New Issue