From 1eca0de2c3f6d0720aa86d084d261629fda7de01 Mon Sep 17 00:00:00 2001 From: Martin Geno Date: Mon, 4 Jul 2016 18:03:22 +0200 Subject: [PATCH] table with inputs + nativ notification --- build | 2 +- css/main.css | 4 ++ css/popup.css | 7 ++-- js/controller/aliases.js | 12 +++--- js/controller/map.js | 7 +++- js/controller/nodes.js | 83 +++++++++++++++++++++++++++++++++------- js/controller/sidebar.js | 24 +++++++----- js/main.js | 2 +- js/popup.js | 77 +++++++++++++++++++++++++++---------- 9 files changed, 161 insertions(+), 57 deletions(-) diff --git a/build b/build index 6a50636..db2dec9 160000 --- a/build +++ b/build @@ -1 +1 @@ -Subproject commit 6a506361fded91e48a5282a63fa0b195084a0f2a +Subproject commit db2dec9637e6836a5fec473ccd8fe3c655990e3c diff --git a/css/main.css b/css/main.css index 3798914..c398844 100644 --- a/css/main.css +++ b/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%; diff --git a/css/popup.css b/css/popup.css index f047618..27f205b 100644 --- a/css/popup.css +++ b/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{ - bottom: -50px; +.popup.show{ + bottom: 0px; + transition: all 0.5s linear; } .popup a { float: right; diff --git a/js/controller/aliases.js b/js/controller/aliases.js index ca46918..ebcc4aa 100644 --- a/js/controller/aliases.js +++ b/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); } diff --git a/js/controller/map.js b/js/controller/map.js index b00f235..ed84466 100644 --- a/js/controller/map.js +++ b/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]; diff --git a/js/controller/nodes.js b/js/controller/nodes.js index 73f4501..bd9c8c5 100644 --- a/js/controller/nodes.js +++ b/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:'-')); - 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) diff --git a/js/controller/sidebar.js b/js/controller/sidebar.js index cbfddd7..6b4d75d 100644 --- a/js/controller/sidebar.js +++ b/js/controller/sidebar.js @@ -79,8 +79,10 @@ define(["helper/lib"],function(){ var setToGps = function(position){ var pos = [position.coords.latitude,position.coords.longitude]; - marker.setLatLng(pos); - marker._map.setView(pos); + 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(alias.location === undefined){ - alias.location = {}; + if(marker){ + if(alias.location === undefined){ + alias.location = {}; + } + pos = marker.getLatLng(); + alias.location.latitude = pos.lat; + alias.location.longitude = pos.lng; } - 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(); diff --git a/js/main.js b/js/main.js index 45e8e51..52c0bd3 100644 --- a/js/main.js +++ b/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({ diff --git a/js/popup.js b/js/popup.js index e1ae02b..ece878c 100644 --- a/js/popup.js +++ b/js/popup.js @@ -1,33 +1,68 @@ 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"); + 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"); + }); + } - main.appendChild(text); + if(fallback){ + var main = document.createElement("div"), + text = document.createElement("span"), + link = document.createElement("a"); + main.classList.add("popup"); - link.textContent = "Edit"; - main.appendChild(link); + main.appendChild(text); - el.appendChild(main); + link.textContent = "Edit"; + main.appendChild(link); - var timer; + 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"); - }; + 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.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); + } } }; };