[TASK] gui add notification
This commit is contained in:
parent
24248d3673
commit
b03f59dfc7
|
|
@ -1,11 +1,4 @@
|
||||||
|
.notifications {
|
||||||
.loader {
|
position: absolute;
|
||||||
color: #dc0067;
|
right: 1em;
|
||||||
font-size: 1.8em;
|
|
||||||
line-height: 2;
|
|
||||||
margin: 30vh auto;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.loader img {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -9,23 +9,20 @@
|
||||||
<script src="//localhost:35729/livereload.js"></script>
|
<script src="//localhost:35729/livereload.js"></script>
|
||||||
<script src="/js/config.js"></script>
|
<script src="/js/config.js"></script>
|
||||||
<script src="/js/store.js"></script>
|
<script src="/js/store.js"></script>
|
||||||
|
<script src="/js/notify.js"></script>
|
||||||
<script src="/js/gui.js"></script>
|
<script src="/js/gui.js"></script>
|
||||||
<script src="/js/socket.js"></script>
|
<script src="/js/socket.js"></script>
|
||||||
<script src="/js/app.js"></script>
|
<script src="/js/app.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="loader">
|
<div class="ui stackable inverted menu">
|
||||||
<p>
|
<div class="item">
|
||||||
Lade
|
<img src="/img/logo.jpg">
|
||||||
<br />
|
</div>
|
||||||
<img src="/img/logo.jpg" class="spinner" />
|
|
||||||
<br />
|
|
||||||
Karten & Knoten...
|
|
||||||
</p>
|
|
||||||
<p class="error"></p>
|
|
||||||
<noscript>
|
|
||||||
<strong>JavaScript required</strong>
|
|
||||||
</noscript>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div class="notifications"></div>
|
||||||
|
<noscript>
|
||||||
|
<strong>JavaScript required</strong>
|
||||||
|
</noscript>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,25 @@
|
||||||
var gui = {};
|
var gui = {};
|
||||||
|
|
||||||
(function(){
|
(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.update = function update(){
|
||||||
gui.render = function render (){
|
console.log(store.will());
|
||||||
console.log(store.will())
|
|
||||||
}
|
|
||||||
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(){
|
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(){
|
||||||
|
|
||||||
function onerror(err) {
|
function onerror(err) {
|
||||||
gui.disable("Es besteht ein Verbindungsproblem!");
|
|
||||||
console.warn(err);
|
console.warn(err);
|
||||||
|
if(socket.readyState !== 3){
|
||||||
|
gui.notify("error","Es gibt Übertragungsprobleme!");
|
||||||
|
gui.render();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function onopen() {
|
function onopen() {
|
||||||
gui.enable();
|
gui.render();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onmessage(e) {
|
function onmessage(e) {
|
||||||
|
|
@ -16,26 +19,31 @@ var socket = {};
|
||||||
|
|
||||||
if(msg.type === "current") {
|
if(msg.type === "current") {
|
||||||
store.updateReal(msg.node);
|
store.updateReal(msg.node);
|
||||||
gui.render();
|
gui.update();
|
||||||
|
|
||||||
} else if (msg.type === "to-update") {
|
} else if (msg.type === "to-update") {
|
||||||
store.update(msg.node);
|
store.update(msg.node);
|
||||||
gui.render();
|
gui.update();
|
||||||
} else {
|
} else {
|
||||||
gui.disable(e);
|
gui.disable(e);
|
||||||
}
|
}
|
||||||
|
gui.render();
|
||||||
}
|
}
|
||||||
|
|
||||||
function onclose(){
|
function onclose(){
|
||||||
gui.disable("Es besteht ein Verbindungsproblem!<br/> <small>(Automatische Neuverbindung)</small>");
|
|
||||||
console.log("socket closed by server");
|
console.log("socket closed by server");
|
||||||
|
gui.notify("warn","Es besteht ein Verbindungsproblem!");
|
||||||
|
gui.render();
|
||||||
setTimeout(connect, 5000);
|
setTimeout(connect, 5000);
|
||||||
}
|
}
|
||||||
|
|
||||||
function sendnode(node) {
|
function sendnode(node) {
|
||||||
var msg = {node:node};
|
var msg = {node:node};
|
||||||
var string = JSON.stringify(msg);
|
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() {
|
function connect() {
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue