ffhb/freifunkmanager
ffhb
/
freifunkmanager
mirror of https://github.com/FreifunkBremen/freifunkmanager.git
1
0
Fork 0
Code Issues Releases Wiki Activity

[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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
webroot/css/main.css
View File

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

17
webroot/index.html
View File

@ -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" /> </div>
<br /> <div class="notifications"></div>
Karten &amp; Knoten...
</p>
<p class="error"></p>
<noscript> <noscript>
<strong>JavaScript required</strong> <strong>JavaScript required</strong>
</noscript> </noscript>
</div>
</body> </body>
</html> </html>

28
webroot/js/gui.js
View File

@ -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;
gui.render = function render (){ }
console.log(store.will()) 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;
}

24
webroot/js/socket.js
View File

@ -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() {