From b39e5d5806671cd1788eb04f7239b8dd84ea32cc Mon Sep 17 00:00:00 2001 From: Martin Geno Date: Fri, 1 Jul 2016 11:16:39 +0200 Subject: [PATCH] rewrite --- config.json.example | 4 ++-- css/style.css | 51 +++++++++++++++++++++++++++++++++++++--- fonts | 1 + js/controller/frame.js | 10 ++++++++ js/controller/map.js | 32 ++++++++++++------------- js/controller/sidebar.js | 7 +++--- js/helper/storage.js | 2 +- js/main.js | 6 +++-- 8 files changed, 86 insertions(+), 27 deletions(-) create mode 120000 fonts create mode 100644 js/controller/frame.js diff --git a/config.json.example b/config.json.example index cee7fbb..ffe9667 100644 --- a/config.json.example +++ b/config.json.example @@ -1,8 +1,8 @@ { "api":"http://localhost:8080/api", "reload":60000, - "map":"http://localhost:8080/meshviewer", - "editmap":{ + "meshviewer":"http://localhost:8080/meshviewer", + "map":{ "icon":{ "warn":{"wifi24":20,"wifi5":20}, "crit":{"wifi24":30,"wifi5":30} diff --git a/css/style.css b/css/style.css index c1da5b7..d56ce0e 100644 --- a/css/style.css +++ b/css/style.css @@ -1,7 +1,7 @@ @font-face { font-family: 'FontAwesome'; - src: url('../bower_components/font-awesome/fonts/fontawesome-webfont.eot?v=4.6.3'); - src: url('../bower_components/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../bower_components/font-awesome/fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../bower_components/font-awesome/fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../bower_components/font-awesome/fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../bower_components/font-awesome/fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); + src: url('../fonts/fontawesome-webfont.eot?v=4.6.3'); + src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } @@ -14,6 +14,38 @@ body{ outline: 0px; background: rgba(0, 0, 0, 0.12); } +button,input{ + color:black; + background-color: lavender; + border:1px solid black; + border-radius: 5px; + padding: 8px; + margin: 5px; + font-size: 14px; +} +table{ + border-collapse: collapse; +} +table.table{ + width: 100%; +} +.table th, .table td{ + padding: 8px; + border-bottom: 1px solid #ddd; +} +.table td{ + text-align: right; +} +.table td.text{ + text-align: left; +} +.table tr:nth-child(even){ + background-color: #f2f2f2; +} +.table th{ + background-color: #dc0067; + color: white; +} .content, .content > .map{ width:100%; height:100%; @@ -25,6 +57,11 @@ header.menu{ right:12px; z-index: 3000; } +.content > iframe{ + width: 100%; + height: 99%; + border: none; +} i.icon{ font: normal normal normal 12px/1 FontAwesome; } @@ -59,7 +96,7 @@ header.menu .icons i span{ cursor: pointer; position: absolute; top: 12px; - right: 12px; + right: 0px; width: 1.6em; z-index: 3000; color: black; @@ -92,6 +129,14 @@ header.menu .icons i span{ font-weight: lighter; } .nodeicon-label table{ + width: 100% +} +.nodeicon-label table td{ + border-top:1px solid #999; + text-align: right; +} +.nodeicon-label table td:first-child{ + text-align: left; } .nodeicon.offline{ background-color: rgba(255,0,0,0.5); diff --git a/fonts b/fonts new file mode 120000 index 0000000..e781622 --- /dev/null +++ b/fonts @@ -0,0 +1 @@ +bower_components/font-awesome/fonts \ No newline at end of file diff --git a/js/controller/frame.js b/js/controller/frame.js new file mode 100644 index 0000000..e997629 --- /dev/null +++ b/js/controller/frame.js @@ -0,0 +1,10 @@ +define(function(){ + return function(el,url){ + var frame = document.createElement("iframe") + frame.src = url + el.appendChild(frame) + console.log("create") + return function(){ + } + } +}) diff --git a/js/controller/map.js b/js/controller/map.js index fc93075..1a304cb 100644 --- a/js/controller/map.js +++ b/js/controller/map.js @@ -13,17 +13,18 @@ define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet leaflet.tileLayer( - config.editmap.tiles.url, - config.editmap.tiles.option).addTo(map) - map.setView(config.editmap.view,config.editmap.zoom) + config.map.tiles.url, + config.map.tiles.option).addTo(map) + map.setView(config.map.view,config.map.zoom) var geoJsonOption = { - pointToLayer: function (feature, latlng){ + pointToLayer: function (feature, latlng){ feature.properties.radius = 10 return leaflet.circleMarker(latlng, feature.properties) }, onEachFeature: function(feature, layer) { - layer.bindLabel(feature.properties.name) + if(feature.properties.name.length >0) + layer.bindLabel(feature.properties.name) }, style: function(feature){ if(feature.geometry.type === "LineString" || feature.geometry.type === "Polygon") @@ -74,19 +75,19 @@ define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet var wifi24="-",wifi5="-",ch24="-",ch5="-",tx24="-",tx5="-" if(node.statistics !== undefined && node.statistics.clients !== undefined){ wifi24 = node.statistics.clients.wifi24 - if(wifi24 < config.editmap.icon.warn.wifi24 && wifi24 > 0) + if(wifi24 < config.map.icon.warn.wifi24 && wifi24 > 0) className += ' client24' - else if(wifi24 < config.editmap.icon.crit.wifi24 && wifi24 >= config.editmap.icon.warn.wifi24) + else if(wifi24 < config.map.icon.crit.wifi24 && wifi24 >= config.map.icon.warn.wifi24) className += ' client24-warn' - else if(wifi24 >= config.editmap.icon.crit.wifi24) + else if(wifi24 >= config.map.icon.crit.wifi24) className += ' client24-crit' wifi5 = node.statistics.clients.wifi5 - if(config.editmap.icon.warn.wifi5 < 20 && wifi5 > 0) + if(config.map.icon.warn.wifi5 < 20 && wifi5 > 0) className += ' client5' - else if(wifi5 < config.editmap.icon.crit.wifi5 && wifi5 >= config.editmap.icon.warn.wifi5) + else if(wifi5 < config.map.icon.crit.wifi5 && wifi5 >= config.map.icon.warn.wifi5) className += ' client5-warn' - else if(wifi5 >= config.editmap.icon.crit.wifi5) + else if(wifi5 >= config.map.icon.crit.wifi5) className += ' client5-crit' } if(node.nodeinfo.wireless !== undefined){ @@ -95,17 +96,16 @@ define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet tx24 = (node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-' tx5 = (node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-' } - m.bindLabel(node.nodeinfo.hostname+"
("+key+")"+ - ""+ - ""+ - ""+ + "
ClChTx
2.4 Ghz"+wifi24+""+ch24+""+tx24+"
5 Ghz"+wifi5+""+ch5+""+tx5+"
"+ + ""+ + ""+ "
ClChTx
2.4G"+wifi24+""+ch24+""+tx24+"
5G"+wifi5+""+ch5+""+tx5+"
"+ "
" ) if(currentNode && currentNode == key){ className += ' select' - map.setView(m.getLatLng(),config.editmap.zoom) + map.setView(m.getLatLng(),config.map.zoom) bar.setSelected(key) } m.setIcon(leaflet.divIcon({className: className})) diff --git a/js/controller/sidebar.js b/js/controller/sidebar.js index 4721258..7982187 100644 --- a/js/controller/sidebar.js +++ b/js/controller/sidebar.js @@ -32,9 +32,10 @@ define(["helper/lib"],function(){ var table = document.createElement("table") - table.innerHTML = "ClChTx" + table.classList.add("table") + table.innerHTML = "ClChTx" var row24 = document.createElement("tr") - row24.innerHTML = "2.4 Ghz" + row24.innerHTML = "2.4 Ghz" var cellClient24 = document.createElement("td") row24.appendChild(cellClient24) var cellCh24 = document.createElement("td") @@ -44,7 +45,7 @@ define(["helper/lib"],function(){ table.appendChild(row24) var row5 = document.createElement("tr") - row5.innerHTML = "5 Ghz" + row5.innerHTML = "5 Ghz" var cellClient5 = document.createElement("td") row5.appendChild(cellClient5) var cellCh5 = document.createElement("td") diff --git a/js/helper/storage.js b/js/helper/storage.js index 487d581..6b38eba 100644 --- a/js/helper/storage.js +++ b/js/helper/storage.js @@ -13,7 +13,7 @@ define(["helper/lib","moment"],function(lib,moment){ } var refresh = function(){ - send('GET',config.editmap.geojson).then(function(d){ + send('GET',config.map.geojson).then(function(d){ data.geojson = d notify() }) diff --git a/js/main.js b/js/main.js index 879ef5b..8f9768a 100644 --- a/js/main.js +++ b/js/main.js @@ -1,5 +1,5 @@ -define(["helper/router","helper/storage","menu","controller/nodes","controller/map"], -function (Router, storage, menu, controllerNodes, controllerMap) { +define(["helper/router","helper/storage","menu","controller/nodes","controller/map","controller/frame"], +function (Router, storage, menu, controllerNodes, controllerMap, controllerFrame) { return function(config){ var store = storage(config) store.refresh() @@ -23,6 +23,8 @@ function (Router, storage, menu, controllerNodes, controllerMap) { Router.config({ mode: 'hash' }) + .add(/statistics/, controllerFrame(el,config.statistics.all)) + .add(/meshviewer/, controllerFrame(el,config.meshviewer)) .add(/list/, nodes.controller) .add(/map\/(.*)/, map.controller) .add(/map/, map.controller)