rewrite

config.json.example

@@ -1,8 +1,8 @@
 {
 	"api":"http://localhost:8080/api",
 	"reload":60000,
-	"map":"http://localhost:8080/meshviewer",
+	"meshviewer":"http://localhost:8080/meshviewer",
-	"editmap":{
+	"map":{
 		"icon":{
 			"warn":{"wifi24":20,"wifi5":20},
 			"crit":{"wifi24":30,"wifi5":30}

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('../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?#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);

fonts

@@ -0,0 +1 @@
+bower_components/font-awesome/fonts

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(){
+		}
+	}
+})

js/controller/map.js

@@ -13,9 +13,9 @@ define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet
 
 
 		leaflet.tileLayer(
-			config.editmap.tiles.url,
+			config.map.tiles.url,
-			config.editmap.tiles.option).addTo(map)
+			config.map.tiles.option).addTo(map)
-		map.setView(config.editmap.view,config.editmap.zoom)
+		map.setView(config.map.view,config.map.zoom)
 
 		var geoJsonOption = {
 			pointToLayer: function (feature, latlng){
@@ -23,6 +23,7 @@ define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet
 				return leaflet.circleMarker(latlng, feature.properties)
 			},
 			onEachFeature: function(feature, layer) {
+				if(feature.properties.name.length >0)
 					layer.bindLabel(feature.properties.name)
 			},
 			style: function(feature){
@@ -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+" <div class=\"nodeicon-label\">("+key+")"+
-					"<table><tr><td></td><td>Cl</td><td>Ch</td><td>Tx</td></tr>"+
+					"<table><tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>"+
-					"<tr><td>2.4 Ghz</td><td>"+wifi24+"</td><td>"+ch24+"</td><td>"+tx24+"</td></tr>"+
+					"<tr><td>2.4G</td><td>"+wifi24+"</td><td>"+ch24+"</td><td>"+tx24+"</td></tr>"+
-					"<tr><td>5 Ghz</td><td>"+wifi5+"</td><td>"+ch5+"</td><td>"+tx5+"</td></tr>"+
+					"<tr><td>5G</td><td>"+wifi5+"</td><td>"+ch5+"</td><td>"+tx5+"</td></tr>"+
 					"</table>"+
 					"</div>"
 				)
 				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}))

js/controller/sidebar.js

@@ -32,9 +32,10 @@ define(["helper/lib"],function(){
 
 
 		var table = document.createElement("table")
-		table.innerHTML = "<tr><td></td><td>Cl</td><td>Ch</td><td>Tx</td></tr>"
+		table.classList.add("table")
+		table.innerHTML = "<tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>"
 		var row24 = document.createElement("tr")
-		row24.innerHTML = "<td>2.4 Ghz</td>"
+		row24.innerHTML = "<td class=\"text\">2.4 Ghz</td>"
 		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 = "<td>5 Ghz</td>"
+		row5.innerHTML = "<td class=\"text\">5 Ghz</td>"
 		var cellClient5 = document.createElement("td")
 		row5.appendChild(cellClient5)
 		var cellCh5 = document.createElement("td")

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

js/main.js

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