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

add popup and aliases

This commit is contained in:
Martin Geno 2016-07-02 02:11:17 +02:00
parent 603fff71e3
commit 3499828ed7
12 changed files with 248 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
build

@ -1 +1 @@
Subproject commit b35d8667a611269a4152a322e635b479bc54df6c
Subproject commit e43e6917c3f958ba7b360146110af268705979a7

6
config.json.example
View File

@ -1,7 +1,7 @@
{
"api":"http://localhost:8080/api",
"api":"http://ffhb.h.sum7.de/api",
"reload":60000,
"meshviewer":"http://localhost:8080/meshviewer",
"meshviewer":"http://ffhb.h.sum7.de/meshviewer",
"map":{
"icon":{
"warn":{"wifi24":20,"wifi5":20},
@ -9,7 +9,7 @@
},
"view":[53.0702,8.815],
"zoom":16,
"geojson":"http://localhost:8080/data/meshviewer.geojson",
"geojson":"http://ffhb.h.sum7.de/data/meshviewer.geojson",
"tiles":{
"url":"https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg",
"option":{

40
css/style.css
View File

@ -6,13 +6,20 @@
font-style: normal;
}
a {
color: orange;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}
body{
margin: 0px;
padding: 0px;
border: 0px;
outline: 0px;
background: rgba(0, 0, 0, 0.12);
background-color: #f2f2f2;
font-family: Verdana,sans-serif;
}
button,input{
color:black;
@ -40,12 +47,23 @@ table.table{
text-align: left;
}
.table tr:nth-child(even){
background-color: #f2f2f2;
background-color: rgba(242, 242, 242, 0.4);;
}
.table th{
background-color: #dc0067;
background:-webkit-gradient(linear, left top, left bottom, from(#dc0067), to(#dc0050));
background:-moz-linear-gradient(top, #dc0067, #dc0050);
color: white;
}
.table small{
display: block;
}
.table i.icon{
margin-right: 15px;
}
.table td.split span{
display: block;
}
.content, .content > .map{
width:100%;
height:100%;
@ -62,6 +80,24 @@ header.menu{
height: 99%;
border: none;
}
.popup {
position: fixed;
border-radius: 5px 5px 0px 0px;
background-color: grey;
color: white;
bottom: 0px;
width: 70%;
left:15%;
height: 32px;
padding: 10px;
z-index: 3500;
}
.popup.hidden{
bottom: -50px;
}
.popup a {
float: right;
}
i.icon{
font: normal normal normal 12px/1 FontAwesome;
}

101
js/controller/aliases.js Normal file
View File

@ -0,0 +1,101 @@
define(function(){
var data;
return function(el,map){
var title = document.createElement("h1"),
table = document.createElement("table"),
thead = document.createElement("thead"),
tbody = document.createElement("tbody");
title.textContent = "Undone Changes";
table.appendChild(thead);
table.appendChild(tbody);
table.classList.add("table");
thead.innerHTML = "<tr><th>Node</th><th>Freq</th><th>Channel</th><th>Power</th><th>Location</th></tr>";
var row = function(nodeid,alias,node){
var icon,td,
tr = document.createElement("tr");
//Node
td = document.createElement("td");
td.classList.add("text");
if(alias.hostname && alias.hostname != node.nodeinfo.hostname){
icon = document.createElement("i");
icon.classList.add("icon");
icon.textContent = "\uf096";
td.appendChild(icon);
}
td.appendChild(document.createTextNode((alias.hostname)?alias.hostname:node.nodeinfo.hostname));
var textNodeID = document.createElement("small");
textNodeID.textContent = nodeid;
td.appendChild(textNodeID);
tr.appendChild(td);
td = document.createElement("td");
td.classList.add("split");
var freq24 = document.createTextNode("2.4 Ghz");
var freq5 = document.createTextNode("5 Ghz");
td.appendChild(freq24);
td.appendChild(freq5);
tr.appendChild(td);
td = document.createElement("td");
td.classList.add("split");
var ch24 = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-'));
var ch5 = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'));
td.appendChild(ch24);
td.appendChild(ch5);
tr.appendChild(td);
td = document.createElement("td");
tr.appendChild(td);
//Location
td = document.createElement("td");
if(alias.location !== undefined &&
node.nodeinfo.location !== undefined &&
node.nodeinfo.location.latitude != alias.location.latitude &&
node.nodeinfo.location.longitude != alias.location.longitude
){
td.classList.add("text");
icon = document.createElement("i");
icon.classList.add("icon");
icon.textContent = "\uf096";
td.appendChild(icon);
}
td.classList.add("text");
icon = document.createElement("i");
icon.classList.add("icon");
icon.textContent = "\uf124";
icon.onclick = function () {
window.location.href = "#map/"+nodeid;
map.render(nodeid);
};
td.appendChild(icon);
tr.appendChild(td);
tbody.appendChild(tr);
};
var render = function() {
tbody.textContent = "";
if(data !== undefined)
Object.keys(data.aliases).map(function(key){
row(key,data.aliases[key],data.nodes[key]);
});
};
return {
storageNotify: function(d){
data = d;
render();
},
controller: function(){
el.textContent = "";
el.appendChild(title);
el.appendChild(table);
render();
}
};
};
});

2
js/controller/frame.js
View File

@ -3,7 +3,7 @@ define(function(){
var frame = document.createElement("iframe");
frame.src = url;
return function(){
el.innerHTML = "";
el.textContent = "";
el.appendChild(frame);
};
};

8
js/controller/map.js
View File

@ -128,14 +128,18 @@ define(['leaflet','controller/sidebar','leaflet.label'],function(L,Sidebar){
};
return {
render: function(nodeid){
currentNode = nodeid;
render();
},
storageNotify: function(d){
data = d;
bar.storageNotify(d);
render();
},
controller: function(){
currentNode = arguments[0];
el.innerHTML = "";
currentNode = (arguments[0])?arguments[0].toLowerCase():null;
el.textContent = "";
el.appendChild(sideBarEl);
el.appendChild(mapEl);
}

4
js/controller/nodes.js
View File

@ -1,12 +1,12 @@
define(function(){
var data;
return function(el,config){
return function(el){
return {
storageNotify: function(d){
data = d;
},
controller: function(){
el.innerHTML = "Not implemented";
el.textContent = "Not implemented";
}
};
};

45
js/controller/sidebar.js
View File

@ -20,9 +20,9 @@ define(["helper/lib"],function(){
sidebar.appendChild(controll);
var iconClose = document.createElement('i');
iconClose.innerHTML = "\uf00d";
iconClose.textContent = "\uf00d";
controll.appendChild(iconClose);
iconClose.addEventListener("click",close);
iconClose.onclick = close;
var content = document.createElement("div");
content.classList.add("content");
@ -64,16 +64,16 @@ define(["helper/lib"],function(){
var btnSave = document.createElement("button");
var saveIcon = document.createElement('i');
saveIcon.classList.add("icon");
saveIcon.innerHTML = "\uf0c7";
saveIcon.textContent = "\uf0c7";
btnSave.appendChild(saveIcon);
btnSave.innerHTML += " Save";
btnSave.appendChild(document.createTextNode(" Save"));
content.appendChild(btnSave);
if (navigator.geolocation) {
var btnGps = document.createElement("button");
var gpsIcon = document.createElement('i');
gpsIcon.classList.add("icon");
gpsIcon.innerHTML = "\uf124";
gpsIcon.textContent = "\uf124";
btnGps.appendChild(gpsIcon);
content.appendChild(btnGps);
@ -81,13 +81,26 @@ define(["helper/lib"],function(){
var pos = [position.coords.latitude,position.coords.longitude];
marker.setLatLng(pos);
marker._map.setView(pos);
if(data.aliases[nodeid] === undefined)
data.aliases[nodeid] = {};
alias = data.aliases[nodeid];
if(alias.location === undefined){
alias.location = {};
}
pos = marker.getLatLng();
alias.location.latitude = pos.lat;
alias.location.longitude = pos.lng;
send('POST',config.api+'/aliases/alias/'+nodeid,alias).then(function(){
close();
});
};
btnGps.addEventListener("click",function() {
btnGps.onclick = function() {
navigator.geolocation.getCurrentPosition(setToGps);
});
};
}
btnSave.addEventListener("click",function() {
btnSave.onclick = function() {
if(data.aliases[nodeid] === undefined)
data.aliases[nodeid] = {};
alias = data.aliases[nodeid];
@ -101,22 +114,22 @@ define(["helper/lib"],function(){
send('POST',config.api+'/aliases/alias/'+nodeid,alias).then(function(){
close();
});
});
};
var render = function(){
if(nodeid !== undefined){
var node = data.nodes[nodeid];
var alias = data.aliases[nodeid];
sidebar.classList.remove("hidden");
lblNodeid.innerHTML = "Nodeid:"+nodeid;
lblNodeid.textContent = "Nodeid:"+nodeid;
inHostname.value = ((alias && alias.hostname)?alias.hostname:node.nodeinfo.hostname);
cellClient24.innerHTML = (node.statistics !== undefined && node.statistics.clients !== undefined)?node.statistics.clients.wifi24:'-';
cellClient5.innerHTML = (node.statistics !== undefined && node.statistics.clients !== undefined)?node.statistics.clients.wifi5:'-';
cellCh24.innerHTML = (alias && alias.wireless && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-');
cellCh5.innerHTML = (alias && alias.wireless && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-');
cellTx24.innerHTML = (alias && alias.wireless && alias.wireless.txpower24)?alias.wireless.txpower24:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-');
cellTx5.innerHTML = (alias && alias.wireless && alias.wireless.txpower5)?alias.wireless.txpower5:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-');
cellClient24.textContent = (node.statistics !== undefined && node.statistics.clients !== undefined)?node.statistics.clients.wifi24:'-';
cellClient5.textContent = (node.statistics !== undefined && node.statistics.clients !== undefined)?node.statistics.clients.wifi5:'-';
cellCh24.textContent = (alias && alias.wireless && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-');
cellCh5.textContent = (alias && alias.wireless && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-');
cellTx24.textContent = (alias && alias.wireless && alias.wireless.txpower24)?alias.wireless.txpower24:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-');
cellTx5.textContent = (alias && alias.wireless && alias.wireless.txpower5)?alias.wireless.txpower5:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-');
}else{
sidebar.classList.add("hidden");

8
js/helper/storage.js
View File

@ -5,7 +5,11 @@ define(["helper/lib","moment"],function(lib,moment){
if(localStorageTest()){
data.nodes = JSON.parse(localStorage.getItem("nodes"));
if(!data.nodes)
data.nodes = {};
data.aliases = JSON.parse(localStorage.getItem("aliases"));
if(!data.aliases)
data.aliases = {};
}
var notify = function(){
@ -30,8 +34,8 @@ define(["helper/lib","moment"],function(lib,moment){
});
send('GET',config.api+"/nodes").then(function(d){
Object.keys(d).map(function(key){
if(data.nodes === undefined && data.nodes[key] === undefined){
notifyNew(key,data[key]);
if(data.nodes === undefined || data.nodes[key] === undefined){
notifyNew(key,d[key]);
}
data.nodes[key] = d[key];
});

15
js/main.js
View File

@ -1,5 +1,5 @@
define(["helper/router","helper/storage","menu","controller/nodes","controller/map","controller/frame"],
function (Router, storage, menu, controllerNodes, controllerMap, controllerFrame) {
define(["helper/router","helper/storage","menu","popup","controller/nodes","controller/aliases","controller/map","controller/frame"],
function (Router, storage, menu, popup, controllerNodes, controllerAliases, controllerMap, controllerFrame) {
return function(config){
var store = storage(config);
store.refresh();
@ -17,7 +17,13 @@ function (Router, storage, menu, controllerNodes, controllerMap, controllerFrame
var map = controllerMap(el,config);
store.addNotify(map);
var nodes = controllerNodes(el,config);
var aliases = controllerAliases(el,map);
store.addNotify(aliases);
var popupInstance = popup(document.body,map);
store.addNotifyNew(popupInstance);
var nodes = controllerNodes(el);
store.addNotify(nodes);
Router.config({
@ -25,7 +31,8 @@ function (Router, storage, menu, controllerNodes, controllerMap, controllerFrame
})
.add(/grafana/, controllerFrame(el,config.grafana.all))
.add(/meshviewer/, controllerFrame(el,config.meshviewer))
.add(/list/, nodes.controller)
.add(/aliases/, aliases.controller)
.add(/nodes/, nodes.controller)
.add(/map\/(.*)/, map.controller)
.add(/map/, map.controller)
.add(nodes.controller)

25
js/menu.js
View File

@ -7,23 +7,30 @@ define(function(){
menu.appendChild(right);
el.appendChild(menu);
var buttonList = document.createElement("i");
buttonList.innerHTML = "";
buttonList.onclick = function () {
window.location.href = "#list";
var buttonNodes = document.createElement("i");
buttonNodes.textContent = "";
buttonNodes.onclick = function () {
window.location.href = "#nodes";
};
right.appendChild(buttonList);
right.appendChild(buttonNodes);
var buttonMap = document.createElement("i");
buttonMap.innerHTML = '\uf278';
buttonMap.textContent = '\uf278';
buttonMap.onclick = function () {
window.location.href = "#map";
};
right.appendChild(buttonMap);
var buttonAliases = document.createElement("i");
buttonAliases.textContent = "\uf0ec";
buttonAliases.onclick = function () {
window.location.href = "#aliases";
};
right.appendChild(buttonAliases);
var buttonStatistic = document.createElement("i");
buttonStatistic.classList.add("mini");
buttonStatistic.innerHTML = "";
buttonStatistic.textContent = "";
buttonStatistic.onclick = function () {
window.location.href = "#grafana";
};
@ -31,7 +38,7 @@ define(function(){
var buttonMeshviewer = document.createElement("i");
buttonMeshviewer.classList.add("mini");
buttonMeshviewer.innerHTML = '\uf279';
buttonMeshviewer.textContent = '\uf279';
buttonMeshviewer.onclick = function () {
window.location.href = "#meshviewer";
};
@ -39,7 +46,7 @@ define(function(){
var buttonRefresh = document.createElement("i");
buttonRefresh.innerHTML = "";
buttonRefresh.textContent = "";
var refreshtime = document.createElement("span");
store.setTimeSinceUpdate(refreshtime);
buttonRefresh.appendChild(refreshtime);

34
js/popup.js Normal file
View File

@ -0,0 +1,34 @@
define(function(){
return function(el,controller){
var main = document.createElement("div"),
text = document.createElement("span"),
link = document.createElement("a");
main.classList.add("popup");
main.classList.add("hidden");
main.appendChild(text);
link.textContent = "Edit";
main.appendChild(link);
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");
}, 5000);
link.onclick = function(){
window.location.href = "#map/"+key;
controller.render(key);
main.classList.add("hidden");
};
}
};
};
});