table with inputs + nativ notification

build

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

css/main.css

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

css/popup.css

@@ -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{
+.popup.show{
-	bottom: -50px;
+	bottom: 0px;
+	transition: all 0.5s linear;
 }
 .popup a {
 	float: right;

js/controller/aliases.js

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

js/controller/map.js

@@ -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];

js/controller/nodes.js

@@ -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:'-'));
+			input = document.createElement("input");
-			split1.appendChild(text);
+			input.type = 'number';
-			text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'));
+			input.min = '1';
-			split2.appendChild(text);
+			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:'-'));
+			input = document.createElement("input");
-			split1.appendChild(text);
+			input.type = 'number';
-			text = document.createTextNode((alias && alias.wireless !== undefined && alias.wireless.txpower5)?alias.wireless.txpower5:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'));
+			input.min = '0';
-			split2.appendChild(text);
+			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)

js/controller/sidebar.js

@@ -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.hostname = inHostname.value;
-				alias.location.latitude = pos.lat;
+				alias.location.latitude = position.coords.latitude;
-				alias.location.longitude = pos.lng;
+				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();

js/main.js

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

js/popup.js

@@ -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");
+				var str = "New Node '"+key+"'!";
-				text.textContent = "New Node '"+key+"'!";
+				console.log("notify:",str);
-				window.clearTimeout(timer);
+				if(fallback){
-				timer = window.setTimeout(function(){
+					main.classList.add("show");
-					main.classList.add("hidden");
+					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);
+				}
 			}
 		};
 	};