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

table with inputs + nativ notification

This commit is contained in:
Martin Geno 2016-07-04 18:03:22 +02:00
parent 81fa43a3af
commit 1eca0de2c3
9 changed files with 161 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build

@ -1 +1 @@
Subproject commit 6a506361fded91e48a5282a63fa0b195084a0f2a
Subproject commit db2dec9637e6836a5fec473ccd8fe3c655990e3c

4
css/main.css
View File

@ -31,6 +31,10 @@ button,input{
font-size: 14px;
}
input:invalid {
border: 3px solid red;
}
.content, .content > .map{
width:100%;
height:100%;

7
css/popup.css
View File

@ -3,15 +3,16 @@
border-radius: 5px 5px 0px 0px;
background-color: grey;
color: white;
bottom: 0px;
bottom: -55px;
width: 70%;
left:15%;
height: 32px;
padding: 10px;
z-index: 3500;
}
.popup.hidden{
bottom: -50px;
.popup.show{
bottom: 0px;
transition: all 0.5s linear;
}
.popup a {
float: right;

12
js/controller/aliases.js
View File

@ -54,14 +54,14 @@ define(["tablesort", "tablesort.numeric"],function(){
if(alias && alias.wireless !== undefined && alias.wireless.channel24 &&
node.nodeinfo.wireless && node.nodeinfo.wireless.channel24 &&
alias.wireless.channel24 != node.nodeinfo.wireless.channel24){
toChangeIcon(text);
toChangeIcon(split1);
}
split1.appendChild(text);
text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'));
if(alias && alias.wireless !== undefined && alias.wireless.channel5 &&
node.nodeinfo.wireless && node.nodeinfo.wireless.channel5 &&
alias.wireless.channel5 != node.nodeinfo.wireless.channel5){
toChangeIcon(text);
toChangeIcon(split2);
}
split2.appendChild(text);
td.appendChild(split1);
@ -77,14 +77,14 @@ define(["tablesort", "tablesort.numeric"],function(){
if(alias && alias.wireless !== undefined && alias.wireless.txpower24 &&
node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24 &&
alias.wireless.txpower24 != node.nodeinfo.wireless.txpower24){
toChangeIcon(text);
toChangeIcon(split1);
}
split1.appendChild(text);
text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.txpower5)?alias.wireless.txpower5:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'));
if(alias && alias.wireless !== undefined && alias.wireless.txpower5 &&
node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5 &&
alias.wireless.txpower5 != node.nodeinfo.wireless.txpower5){
toChangeIcon(text);
toChangeIcon(split2);
}
split2.appendChild(text);
td.appendChild(split1);
@ -94,9 +94,9 @@ define(["tablesort", "tablesort.numeric"],function(){
//Location
td = document.createElement("td");
if(alias.location !== undefined &&
node.nodeinfo.location !== undefined &&
((node.nodeinfo.location !== undefined &&
node.nodeinfo.location.latitude != alias.location.latitude &&
node.nodeinfo.location.longitude != alias.location.longitude
node.nodeinfo.location.longitude != alias.location.longitude) || node.nodeinfo.location === undefined)
){
toChangeIcon(td);
}

7
js/controller/map.js
View File

@ -60,7 +60,12 @@ define(['leaflet','controller/sidebar','leaflet.label'],function(L,Sidebar){
}
var nodes = Object.keys(data.nodes).filter(function(key){
return data.nodes[key].nodeinfo && data.nodes[key].nodeinfo.location;
if((data.nodes[key].nodeinfo && data.nodes[key].nodeinfo.location) ||
(data.aliases[key] && data.aliases[key].location))
return true;
if(currentNode && currentNode == key)
bar.setSelected(key,null,function(){});
return false;
}).map(function(key){
var node = data.nodes[key];
var alias = data.aliases[key];

83
js/controller/nodes.js
View File

@ -1,11 +1,40 @@
define(["moment","tablesort", "tablesort.numeric"],function(moment){
var data;
return function(el,map){
return function(el,config,popup,map){
var changeEvent = function(nodeid,attr,attr2){
return function (e){
var input = e.which || e.keyCode;
if (input === 13){ // 13 is enter
if(e.target.validity.valid) {
var value = e.target.value || e.srcElement.value || '';
if(data.aliases[nodeid] === undefined){
data.aliases[nodeid] = {};
}
if(attr2 === undefined|| attr2 === null){
data.aliases[nodeid][attr] = value;
}else{
if(data.aliases[nodeid][attr] === undefined){
data.aliases[nodeid][attr] = {};
}
if(attr == "wireless")
value = parseInt(value);
data.aliases[nodeid][attr][attr2] = value;
}
send('POST',config.api+'/aliases/alias/'+nodeid,data.aliases[nodeid]).then(function(){
popup.saved(nodeid);
render();
});
}else{
console.log("invalid value");
}
}
};
};
var title = document.createElement("h1"),
table = document.createElement("table"),
thead = document.createElement("thead"),
tbody = document.createElement("tbody"),
sort;
sort, input;
title.textContent = "Nodes";
table.appendChild(thead);
table.appendChild(tbody);
@ -21,7 +50,7 @@ define(["moment","tablesort", "tablesort.numeric"],function(moment){
};
var row = function(nodeid,node,alias){
var icon,td,split1,split2,text,
var icon,td,split1,split2,text,input,
tr = document.createElement("tr");
td = document.createElement("td");
@ -40,7 +69,11 @@ define(["moment","tablesort", "tablesort.numeric"],function(moment){
//Node
td = document.createElement("td");
td.classList.add("text");
td.appendChild(document.createTextNode((alias && alias.hostname)?alias.hostname:node.nodeinfo.hostname));
input = document.createElement("input");
input.pattern = pattern="[A-Za-z0-9-_]{3,32}";
input.value = (alias && alias.hostname)?alias.hostname:node.nodeinfo.hostname;
input.addEventListener('keypress', changeEvent(nodeid,'hostname'));
td.appendChild(input);
text = document.createElement("small");
text.textContent = nodeid;
td.appendChild(text);
@ -69,11 +102,9 @@ define(["moment","tablesort", "tablesort.numeric"],function(moment){
split1 = document.createElement("span");
var wifi24 =(node.statistics && node.statistics.clients.wifi24)?node.statistics.clients.wifi24:0;
split1.textContent = wifi24;
split2 = document.createElement("span");
var wifi5 = (node.statistics && node.statistics.clients.wifi5)?node.statistics.clients.wifi5:0;
split2.textContent = wifi5;
td.setAttribute("data-sort",wifi24+wifi5);
td.appendChild(split1);
td.appendChild(split2);
@ -83,10 +114,20 @@ define(["moment","tablesort", "tablesort.numeric"],function(moment){
td.classList.add("split");
split1 = document.createElement("span");
split2 = document.createElement("span");
text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-'));
split1.appendChild(text);
text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'));
split2.appendChild(text);
input = document.createElement("input");
input.type = 'number';
input.min = '1';
input.max = '13';
input.value = (alias && alias.wireless !== undefined && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'');
input.addEventListener('keypress', changeEvent(nodeid,'wireless','channel24'));
split1.appendChild(input);
input = document.createElement("input");
input.type = 'number';
input.min = '36';
input.max = '160';
input.value = (alias && alias.wireless !== undefined && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'');
input.addEventListener('keypress', changeEvent(nodeid,'wireless','channel5'));
split2.appendChild(input);
td.appendChild(split1);
td.appendChild(split2);
tr.appendChild(td);
@ -95,10 +136,18 @@ define(["moment","tablesort", "tablesort.numeric"],function(moment){
td.classList.add("split");
split1 = document.createElement("span");
split2 = document.createElement("span");
text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.txpower24)?alias.wireless.txpower24:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-'));
split1.appendChild(text);
text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.txpower5)?alias.wireless.txpower5:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'));
split2.appendChild(text);
input = document.createElement("input");
input.type = 'number';
input.min = '0';
input.value = (alias && alias.wireless !== undefined && alias.wireless.txpower24)?alias.wireless.txpower24:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'');
input.addEventListener('keypress', changeEvent(nodeid,'wireless','txpower24'));
split1.appendChild(input);
input = document.createElement("input");
input.type = 'number';
input.min = '0';
input.value = (alias && alias.wireless !== undefined && alias.wireless.txpower5)?alias.wireless.txpower5:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'');
input.addEventListener('keypress', changeEvent(nodeid,'wireless','txpower5'));
split2.appendChild(input);
td.appendChild(split1);
td.appendChild(split2);
tr.appendChild(td);
@ -113,6 +162,12 @@ define(["moment","tablesort", "tablesort.numeric"],function(moment){
map.render(nodeid);
};
td.appendChild(icon);
if(alias && (alias.hostname || alias.wireless)){
icon = document.createElement("i");
icon.classList.add("icon");
icon.textContent = "\uf096";
td.appendChild(icon);
}
tr.appendChild(td);
tbody.appendChild(tr);
if(sort === undefined)

10
js/controller/sidebar.js
View File

@ -79,8 +79,10 @@ define(["helper/lib"],function(){
var setToGps = function(position){
var pos = [position.coords.latitude,position.coords.longitude];
if(marker){
marker.setLatLng(pos);
marker._map.setView(pos);
}
if(data.aliases[nodeid] === undefined)
data.aliases[nodeid] = {};
@ -88,9 +90,9 @@ define(["helper/lib"],function(){
if(alias.location === undefined){
alias.location = {};
}
pos = marker.getLatLng();
alias.location.latitude = pos.lat;
alias.location.longitude = pos.lng;
alias.hostname = inHostname.value;
alias.location.latitude = position.coords.latitude;
alias.location.longitude = position.coords.longitude;
send('POST',config.api+'/aliases/alias/'+nodeid,alias).then(function(){
close();
});
@ -104,12 +106,14 @@ define(["helper/lib"],function(){
if(data.aliases[nodeid] === undefined)
data.aliases[nodeid] = {};
alias = data.aliases[nodeid];
if(marker){
if(alias.location === undefined){
alias.location = {};
}
pos = marker.getLatLng();
alias.location.latitude = pos.lat;
alias.location.longitude = pos.lng;
}
alias.hostname = inHostname.value;
send('POST',config.api+'/aliases/alias/'+nodeid,alias).then(function(){
close();

2
js/main.js
View File

@ -23,7 +23,7 @@ function (Router, storage, menu, popup, controllerNodes, controllerAliases, cont
var popupInstance = popup(document.body,map);
store.addNotifyNew(popupInstance);
var nodes = controllerNodes(el,map);
var nodes = controllerNodes(el,config,popupInstance,map);
store.addNotify(nodes);
Router.config({

51
js/popup.js
View File

@ -1,10 +1,20 @@
define(function(){
return function(el,controller){
var fallback = true;
if (!("Notification" in window)){
} else if(Notification.permission === 'granted') {
fallback = false;
} else if(Notification.permission !== 'denied') {
Notification.requestPermission(function (permission) {
fallback = (permission !== "granted");
});
}
if(fallback){
var main = document.createElement("div"),
text = document.createElement("span"),
link = document.createElement("a");
main.classList.add("popup");
main.classList.add("hidden");
main.appendChild(text);
@ -14,20 +24,45 @@ define(function(){
el.appendChild(main);
var timer;
}
return {
storageNotifyNew: function(key,data){
main.classList.remove("hidden");
text.textContent = "New Node '"+key+"'!";
window.clearTimeout(timer);
timer = window.setTimeout(function(){
main.classList.add("hidden");
var str = "New Node '"+key+"'!";
console.log("notify:",str);
if(fallback){
main.classList.add("show");
text.textContent = str;
clearTimeout(timer);
timer = setTimeout(function(){
main.classList.remove("show");
}, 5000);
link.onclick = function(){
window.location.href = "#map/"+key;
controller.render(key);
main.classList.add("hidden");
main.classList.remove("show");
};
}else{
var notification = new Notification(str);
notification.onclick = function(){
window.location.href = "#map/"+key;
controller.render(key);
};
}
},
saved: function(key){
var str = "Node '"+key+"' saved!";
console.log("notify:",str);
if(fallback){
main.classList.add("show");
text.textContent = str;
clearTimeout(timer);
timer = setTimeout(function(){
main.classList.remove("show");
}, 500);
link.style = "display:none;";
}else{
var notification = new Notification(str);
}
}
};
};