From 3499828ed71688f706d1a870c6ccaad1a5d703c0 Mon Sep 17 00:00:00 2001 From: Martin Geno Date: Sat, 2 Jul 2016 02:11:17 +0200 Subject: [PATCH] add popup and aliases --- build | 2 +- config.json.example | 6 +-- css/style.css | 40 +++++++++++++++- js/controller/aliases.js | 101 +++++++++++++++++++++++++++++++++++++++ js/controller/frame.js | 2 +- js/controller/map.js | 8 +++- js/controller/nodes.js | 4 +- js/controller/sidebar.js | 45 ++++++++++------- js/helper/storage.js | 8 +++- js/main.js | 15 ++++-- js/menu.js | 25 ++++++---- js/popup.js | 34 +++++++++++++ 12 files changed, 248 insertions(+), 42 deletions(-) create mode 100644 js/controller/aliases.js create mode 100644 js/popup.js 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 = "NodeFreqChannelPowerLocation"; + + 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"); + }; + } + }; + }; +});