add popup and aliases

build

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

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":{

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;
 }

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 = "<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();
+			}
+		};
+	};
+});

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);
 		};
 	};

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];
+				currentNode = (arguments[0])?arguments[0].toLowerCase():null;
-				el.innerHTML = "";
+				el.textContent = "";
 				el.appendChild(sideBarEl);
 				el.appendChild(mapEl);
 			}

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";
 			}
 		};
 	};

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:'-';
+				cellClient24.textContent = (node.statistics !== undefined && node.statistics.clients !== undefined)?node.statistics.clients.wifi24:'-';
-				cellClient5.innerHTML = (node.statistics !== undefined && node.statistics.clients !== undefined)?node.statistics.clients.wifi5:'-';
+				cellClient5.textContent = (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:'-');
+				cellCh24.textContent = (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:'-');
+				cellCh5.textContent = (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:'-');
+				cellTx24.textContent = (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:'-');
+				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");

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){
+					if(data.nodes === undefined || data.nodes[key] === undefined){
-						notifyNew(key,data[key]);
+						notifyNew(key,d[key]);
 					}
 					data.nodes[key] = d[key];
 				});

js/main.js

@@ -1,5 +1,5 @@
-define(["helper/router","helper/storage","menu","controller/nodes","controller/map","controller/frame"],
+define(["helper/router","helper/storage","menu","popup","controller/nodes","controller/aliases","controller/map","controller/frame"],
-function (Router, storage, menu, controllerNodes, controllerMap, controllerFrame) {
+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)

js/menu.js

@@ -7,23 +7,30 @@ define(function(){
 		menu.appendChild(right);
 		el.appendChild(menu);
 
-		var buttonList = document.createElement("i");
+		var buttonNodes = document.createElement("i");
-		buttonList.innerHTML = "";
+		buttonNodes.textContent = "";
-		buttonList.onclick = function () {
+		buttonNodes.onclick = function () {
-			window.location.href = "#list";
+			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);

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");
+				};
+			}
+		};
+	};
+});