diff --git a/build b/build
index b35d866..e43e691 160000
--- a/build
+++ b/build
@@ -1 +1 @@
-Subproject commit b35d8667a611269a4152a322e635b479bc54df6c
+Subproject commit e43e6917c3f958ba7b360146110af268705979a7
diff --git a/config.json.example b/config.json.example
index 3dd8d26..1ad9daf 100644
--- a/config.json.example
+++ b/config.json.example
@@ -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":{
diff --git a/css/style.css b/css/style.css
index 4ca083d..6eaac97 100644
--- a/css/style.css
+++ b/css/style.css
@@ -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;
}
diff --git a/js/controller/aliases.js b/js/controller/aliases.js
new file mode 100644
index 0000000..cc6ae9c
--- /dev/null
+++ b/js/controller/aliases.js
@@ -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 = "
Node | Freq | Channel | Power | Location |
";
+
+ 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();
+ }
+ };
+ };
+});
diff --git a/js/controller/frame.js b/js/controller/frame.js
index 50737e8..770cb4b 100644
--- a/js/controller/frame.js
+++ b/js/controller/frame.js
@@ -3,7 +3,7 @@ define(function(){
var frame = document.createElement("iframe");
frame.src = url;
return function(){
- el.innerHTML = "";
+ el.textContent = "";
el.appendChild(frame);
};
};
diff --git a/js/controller/map.js b/js/controller/map.js
index 09f52ca..b00f235 100644
--- a/js/controller/map.js
+++ b/js/controller/map.js
@@ -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);
}
diff --git a/js/controller/nodes.js b/js/controller/nodes.js
index 146e61b..b53ccc5 100644
--- a/js/controller/nodes.js
+++ b/js/controller/nodes.js
@@ -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";
}
};
};
diff --git a/js/controller/sidebar.js b/js/controller/sidebar.js
index 745e919..cbfddd7 100644
--- a/js/controller/sidebar.js
+++ b/js/controller/sidebar.js
@@ -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");
diff --git a/js/helper/storage.js b/js/helper/storage.js
index 8601c51..041cff1 100644
--- a/js/helper/storage.js
+++ b/js/helper/storage.js
@@ -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];
});
diff --git a/js/main.js b/js/main.js
index 80c28f9..a0a362d 100644
--- a/js/main.js
+++ b/js/main.js
@@ -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)
diff --git a/js/menu.js b/js/menu.js
index a59bf7a..aeb22f9 100644
--- a/js/menu.js
+++ b/js/menu.js
@@ -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);
diff --git a/js/popup.js b/js/popup.js
new file mode 100644
index 0000000..e1ae02b
--- /dev/null
+++ b/js/popup.js
@@ -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");
+ };
+ }
+ };
+ };
+});