rewrite+build

Gruntfile.js

@@ -1,45 +1,112 @@
-'use strict';
+"use strict";
+
 module.exports = function (grunt) {
 	// Load grunt tasks automatically, when needed
-	require('jit-grunt')(grunt, {
+	require("jit-grunt")(grunt, {
-			useminPrepare: 'grunt-usemin',
+			useminPrepare: "grunt-usemin",
 		});
-	require('time-grunt')(grunt);
+	require("time-grunt")(grunt);
 
 	grunt.initConfig({
 		open: {
 			public: {
-				url: 'http://localhost:8080'
+				url: "http://localhost:8080"
 			}
 		},
 		connect:{
 			public:{
 				options:{
 					port:8080,
-					hostname:'*',
+					hostname:"*",
-					base:['.']
+					base:["."]
 				}
 			}
 		},
 		jshint: {
-			files: ['Gruntfile.js', 'js/**/*.js'],
+			files: ["js/**/*.js"],
 			options: {
-				reporter: require('jshint-stylish')
+				reporter: require("jshint-stylish")
 			}
 		},
 		watch: {
 			livereload: {
 				files: [
-					'js/**/*.js',
+					"js/**/*.js",
-					'css/**/*.css',
+					"css/**/*.css",
 				],
 				options: {
 					livereload: true
 				}
 			}
+		},
+		clean: {
+			build: {
+				files: [{
+					dot: true,
+					src: [
+						"build/*",
+						"!build/.git*",
+					]
+				}]
+			}
+		},
+		copy: {
+			html: {
+				options: {
+					process: function (content) {
+						return content.replace("#revision#", grunt.option("gitRevision"))
+					}
+				},
+				src: ["*.html"],
+				expand: true,
+				cwd: "html/",
+				dest: "build/"
+			},
+			font: {
+				src: ["fonts/*"],
+				dest: "build/"
+			},
+			favicon: {
+				src: ["favicon*"],
+				dest: "build/"
+			},
+			config: {
+				src: [ "config*.example" ],
+				expand: true,
+				dest: "build/"
+			}
+		},
+		cssmin: {
+			target: {
+				files: {
+					"build/css/style.css": [ "bower_components/leaflet/dist/leaflet.css",
+																"bower_components/Leaflet.label/dist/leaflet.label.css",
+																"css/**/*.css"
+															]
+				}
+			}
+		},
+		requirejs: {
+			compile: {
+				options: {
+					baseUrl: "js",
+					name: "../node_modules/almond/almond",
+					mainConfigFile: "js/app.js",
+					include: "app",
+					wrap: true,
+					optimize: "uglify",
+					out: "build/app.js"
+				}
+			}
 		}
 	});
-
+	grunt.registerTask("build",[
-	grunt.registerTask('default', ['connect:public','open:public','watch']);
+		"jshint",
+		"clean",
+		"copy",
+		"cssmin",
+		"requirejs:compile"
+	]);
+	grunt.registerTask("default", ["connect:public","open:public","watch"]);
 
 };

bower.json

@@ -17,7 +17,6 @@
   ],
   "dependencies": {
     "tablesort": "https://github.com/tristen/tablesort.git#v3.0.2",
-    "dialog-polyfill": "^0.4.3",
     "Leaflet.label": "~0.2.1",
     "leaflet": "~0.7.3",
     "moment": "~2.9.0",

build

@@ -0,0 +1 @@
+Subproject commit b35d8667a611269a4152a322e635b479bc54df6c

config.json.example

@@ -9,7 +9,7 @@
 		},
 		"view":[53.0702,8.815],
 		"zoom":16,
-		"geojson":"/data/meshviewer.geojson",
+		"geojson":"http://localhost:8080/data/meshviewer.geojson",
 		"tiles":{
 			"url":"https://otile{s}-s.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.jpg",
 			"option":{
@@ -20,7 +20,7 @@
 			}
 		}
 	},
-	"statistics":{
+	"grafana":{
 		"one":"http://ffhb.h.sum7.de:8080/dashboard-solo/file/Short.json?panelId=1&fullscreen&var-interval_group=60s&theme=light&from=1466165052000&var-title={{NODEID}}&var-node={{NODEID}}",
 		"all":"http://ffhb.h.sum7.de:8080/dashboard-solo/file/Short.json?panelId=1&fullscreen&var-interval_group=60s&theme=light&from=1466165052000&var-title=All"
 	}

css/font.css

@@ -1,48 +0,0 @@
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 100;
-  src: local('Roboto Thin'), local('Roboto-Thin'), url(Robort_Thin.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 300;
-  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v15/zN7GBFwfMP4uA6AR0HCoLQ.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v15/RxZJdnzeo3R5zSexge8UUaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Roboto Bold'), local('Roboto-Bold'), url(https://fonts.gstatic.com/s/roboto/v15/d-6IYplOFocCacKzxwXSOKCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Roboto Black'), local('Roboto-Black'), url(https://fonts.gstatic.com/s/roboto/v15/mnpfi9pxYH-Go5UiibESIqCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 400;
-  src: local('Roboto Italic'), local('Roboto-Italic'), url(https://fonts.gstatic.com/s/roboto/v15/W4wDsBUluyw0tK3tykhXEfesZW2xOQ-xsNqO47m55DA.ttf) format('truetype');
-}
-@font-face {
-  font-family: 'Roboto';
-  font-style: italic;
-  font-weight: 700;
-  src: local('Roboto Bold Italic'), local('Roboto-BoldItalic'), url(https://fonts.gstatic.com/s/roboto/v15/t6Nd4cfPRhZP44Q5QAjcC50EAVxt0G0biEntp43Qt6E.ttf) format('truetype');
-}

css/icon.css

@@ -1,20 +0,0 @@
-@font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Material Icons'), local('MaterialIcons-Regular'), url(icon-font.woff2) format('woff2');
-}
-
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-}

css/style.css

@@ -78,6 +78,11 @@ header.menu .icons i{
 	box-shadow: 0 1px 3px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);
 	font: normal normal normal 24px/1 FontAwesome;
 }
+header.menu .icons i.mini{
+	width: 22px;
+	height: 22px;
+	font-size: 16px;
+}
 header.menu .icons i span{
 	font-size: 12px;
 	position: relative;

html/index.html

@@ -4,10 +4,9 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no">
 		<link rel="stylesheet" href="css/style.css">
+		<link rel="icon" href="favicon.ico" type="image/x-icon"/>
+		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
 		<script src="app.js"></script>
-		<script>
-			console.log("Version: #revision#")
-		</script>
 	</head>
 	<body>
 	</body>

html/map.html

@@ -1 +0,0 @@
-<iframe src="<% this.public.config.map %>"/>

html/statistics.html

@@ -1 +0,0 @@
-<iframe src="<% this.public.config.statistics.all %>"/>

index.html

@@ -4,8 +4,10 @@
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no">
 		<link rel="stylesheet" href="bower_components/leaflet/dist/leaflet.css">
-    <link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
+		<link rel="stylesheet" href="bower_components/Leaflet.label/dist/leaflet.label.css">
 		<link rel="stylesheet" href="css/style.css">
+		<link rel="icon" href="favicon.ico" type="image/x-icon"/>
+		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
 		<script src="bower_components/requirejs/require.js" data-main="js/app"></script>
 		<script src="//localhost:35729/livereload.js"></script>
 	</head>

js/app.js

@@ -7,7 +7,7 @@ require.config({
 	},
 	shim: {
 	}
-})
+});
 require(["main", "helper/lib"], function (main) {
-	send("GET","config.json").then(main)
+	send("GET","config.json").then(main);
-})
+});

js/controller/frame.js

@@ -1,10 +1,10 @@
 define(function(){
 	return function(el,url){
-		var frame = document.createElement("iframe")
+		var frame = document.createElement("iframe");
-		frame.src = url
+		frame.src = url;
-		el.appendChild(frame)
-		console.log("create")
 		return function(){
-		}
+			el.innerHTML = "";
-	}
+			el.appendChild(frame);
-})
+		};
+	};
+});

js/controller/map.js

@@ -1,30 +1,30 @@
-define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet_label,Sidebar){
+define(['leaflet','controller/sidebar','leaflet.label'],function(L,Sidebar){
-	var data,currentNode
+	var data,currentNode;
 	return function(el,config){
-		var mapEl = document.createElement("div")
+		var mapEl = document.createElement("div");
-		mapEl.classList.add("map")
+		mapEl.classList.add("map");
 
-		var sideBarEl = document.createElement("div")
+		var sideBarEl = document.createElement("div");
-		var bar = Sidebar(sideBarEl,config)
+		var bar = Sidebar(sideBarEl,config);
 
-		var map = leaflet.map(mapEl,{zoomControl:false}).setView([51.505, -0.09], 13)
+		var map = L.map(mapEl,{zoomControl:false}).setView([51.505, -0.09], 13);
-		var layergeojson,layernodes
+		var layergeojson,layernodes;
 
 
 
-		leaflet.tileLayer(
+		L.tileLayer(
 			config.map.tiles.url,
-			config.map.tiles.option).addTo(map)
+			config.map.tiles.option).addTo(map);
-		map.setView(config.map.view,config.map.zoom)
+		map.setView(config.map.view,config.map.zoom);
 
 		var geoJsonOption = {
 			pointToLayer: function (feature, latlng){
-				feature.properties.radius = 10
+				feature.properties.radius = 10;
-				return leaflet.circleMarker(latlng, feature.properties)
+				return L.circleMarker(latlng, feature.properties);
 			},
 			onEachFeature: function(feature, layer) {
 				if(feature.properties.name.length >0)
-					layer.bindLabel(feature.properties.name)
+					layer.bindLabel(feature.properties.name);
 			},
 			style: function(feature){
 				if(feature.geometry.type === "LineString" || feature.geometry.type === "Polygon")
@@ -35,102 +35,110 @@ define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet
 						stroke: true,
 						weight: feature.properties["stroke-width"],
 						lineCap: "round",
-						lineJoin: "round"}
+						lineJoin: "round"};
 				return {
 					color: feature.properties["marker-color"],
 					fillColor: feature.properties["marker-color"],
 					fillOpacity: 0.2,
 					weight: 2,
 					stroke: true
-				}
+				};
 			}
-		}
+		};
 
-		nodeIcon = leaflet.divIcon({className: 'nodeicon'})
+		nodeIcon = L.divIcon({className: "nodeicon"});
 
 
 		render = function(){
-			console.log("render")
 			if(layernodes)
-				layernodes.clearLayers()
+				layernodes.clearLayers();
 			if(layergeojson)
-				layergeojson.clearLayers()
+				layergeojson.clearLayers();
-			if(data.geojson !== undefined){
+			if(data.geojson && Object.keys(data.geojson).length > 0){
-				layergeojson = leaflet.geoJson(data.geojson,geoJsonOption).addTo(map)
+				layergeojson = L.geoJson(data.geojson,geoJsonOption).addTo(map);
-				map._onResize()
+				map._onResize();
 			}
 
 			var nodes = Object.keys(data.nodes).filter(function(key){
-				return data.nodes[key].nodeinfo !== undefined && data.nodes[key].nodeinfo.location !== undefined
+				return data.nodes[key].nodeinfo && data.nodes[key].nodeinfo.location;
 			}).map(function(key){
-				node = data.nodes[key]
+				var node = data.nodes[key];
-				var m = leaflet.marker([node.nodeinfo.location.latitude,node.nodeinfo.location.longitude],{
+				var alias = data.aliases[key];
-					draggable: true,
+				if(alias && alias.location)
+					pos = [alias.location.latitude,alias.location.longitude];
+				else
+					pos = [node.nodeinfo.location.latitude,node.nodeinfo.location.longitude];
+
+				var m = L.marker(pos,{
 					icon: nodeIcon
-				})
+				});
 
-				var className = 'nodeicon'
+				var className = "nodeicon";
-				if(node.flags !== undefined && !node.flags.online)
+				if(node.flags && !node.flags.online)
-					className += ' offline'
+					className += " offline";
-				var wifi24="-",wifi5="-",ch24="-",ch5="-",tx24="-",tx5="-"
+				var wifi24="-",wifi5="-",ch24="-",ch5="-",tx24="-",tx5="-";
-				if(node.statistics !== undefined && node.statistics.clients !== undefined){
+				if(node.statistics && node.statistics.clients){
-					wifi24 = node.statistics.clients.wifi24
+					wifi24 = node.statistics.clients.wifi24;
 					if(wifi24 < config.map.icon.warn.wifi24 && wifi24 > 0)
-						className += ' client24'
+						className += " client24";
 					else if(wifi24 < config.map.icon.crit.wifi24 && wifi24 >= config.map.icon.warn.wifi24)
-						className += ' client24-warn'
+						className += ' client24-warn';
 					else if(wifi24 >= config.map.icon.crit.wifi24)
-						className += ' client24-crit'
+						className += ' client24-crit';
 
-					wifi5 = node.statistics.clients.wifi5
+					wifi5 = node.statistics.clients.wifi5;
 					if(config.map.icon.warn.wifi5 < 20 && wifi5 > 0)
-						className += ' client5'
+						className += ' client5';
 					else if(wifi5 < config.map.icon.crit.wifi5 && wifi5 >= config.map.icon.warn.wifi5)
-						className += ' client5-warn'
+						className += ' client5-warn';
 					else if(wifi5 >= config.map.icon.crit.wifi5)
-						className += ' client5-crit'
+						className += ' client5-crit';
 				}
-				if(node.nodeinfo.wireless !== undefined){
+				if(node.nodeinfo.wireless){
-					ch24 = (node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-'
+					ch24 = (alias && alias.wireless && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-');
-					ch5 = (node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'
+					ch5 = (alias && alias.wireless && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-');
-					tx24 = (node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-'
+					tx24 = (alias && alias.wireless && alias.wireless.txpower24)?alias.wireless.txpower24:((node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-');
-					tx5 = (node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'
+					tx5 = (alias && alias.wireless && alias.wireless.txpower5)?alias.wireless.txpower5:((node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-');
 				}
-				m.bindLabel(node.nodeinfo.hostname+" <div class=\"nodeicon-label\">("+key+")"+
+				m.bindLabel(((alias && alias.hostname)?alias.hostname:node.nodeinfo.hostname)+" <div class=\"nodeicon-label\">("+key+")"+
 					"<table><tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>"+
 					"<tr><td>2.4G</td><td>"+wifi24+"</td><td>"+ch24+"</td><td>"+tx24+"</td></tr>"+
 					"<tr><td>5G</td><td>"+wifi5+"</td><td>"+ch5+"</td><td>"+tx5+"</td></tr>"+
 					"</table>"+
 					"</div>"
-				)
+				);
 				if(currentNode && currentNode == key){
-					className += ' select'
+					className += ' select';
-					map.setView(m.getLatLng(),config.map.zoom)
+					map.setView(m.getLatLng(),config.map.zoom);
-					bar.setSelected(key)
+					m.options.draggable = true;
+					bar.setSelected(key,m,function(){
+						m.dragging.disable();
+						m._icon.classList.remove("select");
+					});
 				}
-				m.setIcon(leaflet.divIcon({className: className}))
+				m.setIcon(L.divIcon({className: className}));
 				m.on("click", function(){
-					window.location.href = "#map/"+key
+					window.location.href = "#map/"+key;
-					currentNode = key
+					currentNode = key;
-					render()
+					render();
-				})
+				});
-				return m
+				return m;
-			})
+			});
-			layernodes = leaflet.featureGroup(nodes).addTo(map)
+			layernodes = L.featureGroup(nodes).addTo(map);
-		}
+		};
 
 		return {
 			storageNotify: function(d){
-				data = d
+				data = d;
-				bar.storageNotify(d)
+				bar.storageNotify(d);
-				render()
+				render();
 			},
 			controller: function(){
-				currentNode = arguments[0]
+				currentNode = arguments[0];
-				el.innerHTML = ""
+				el.innerHTML = "";
-				el.appendChild(sideBarEl)
+				el.appendChild(sideBarEl);
-				el.appendChild(mapEl)
+				el.appendChild(mapEl);
 			}
-		}
+		};
-	}
+	};
-})
+});

js/controller/nodes.js

@@ -1,13 +1,13 @@
 define(function(){
-	var data
+	var data;
 	return function(el,config){
 		return {
 			storageNotify: function(d){
-				data = d
+				data = d;
 			},
 			controller: function(){
-				el.innerHTML = "Not implemented"
+				el.innerHTML = "Not implemented";
 			}
-		}
+		};
-	}
+	};
-})
+});

js/controller/sidebar.js

@@ -1,100 +1,143 @@
 define(["helper/lib"],function(){
-	var data,nodeid,current
+	var data,
+		nodeid,
+		cleanFunction,
+		marker;
 	return function(el,config){
-		var sidebar = document.createElement("div")
+		var close = function(){
-		sidebar.classList.add("sidebar")
+			window.location.href = "#map";
-		sidebar.classList.add("hidden")
+			nodeid = undefined;
-		el.appendChild(sidebar)
+			render();
+		};
 
-		var controll = document.createElement("div")
+		var sidebar = document.createElement("div");
-		controll.classList.add("icon")
+		sidebar.classList.add("sidebar");
-		sidebar.appendChild(controll)
+		sidebar.classList.add("hidden");
+		el.appendChild(sidebar);
 
-		var close = document.createElement('i')
+		var controll = document.createElement("div");
-		close.innerHTML = "\uf00d"
+		controll.classList.add("icon");
-		controll.appendChild(close)
+		sidebar.appendChild(controll);
-		close.addEventListener("click",function(){
-			window.location.href = "#map"
-			nodeid = undefined
-			render()
-		})
 
-		var content = document.createElement("div")
+		var iconClose = document.createElement('i');
-		content.classList.add("content")
+		iconClose.innerHTML = "\uf00d";
-		sidebar.appendChild(content)
+		controll.appendChild(iconClose);
+		iconClose.addEventListener("click",close);
 
-		var lblNodeid = document.createElement("h4")
+		var content = document.createElement("div");
-		content.appendChild(lblNodeid)
+		content.classList.add("content");
+		sidebar.appendChild(content);
+
+		var lblNodeid = document.createElement("h4");
+		content.appendChild(lblNodeid);
 
 
-		var inHostname = document.createElement("input")
+		var inHostname = document.createElement("input");
-		content.appendChild(inHostname)
+		content.appendChild(inHostname);
 
 
-		var table = document.createElement("table")
+		var table = document.createElement("table");
-		table.classList.add("table")
+		table.classList.add("table");
-		table.innerHTML = "<tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>"
+		table.innerHTML = "<tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>";
-		var row24 = document.createElement("tr")
+		var row24 = document.createElement("tr");
-		row24.innerHTML = "<td class=\"text\">2.4 Ghz</td>"
+		row24.innerHTML = "<td class=\"text\">2.4 Ghz</td>";
-		var cellClient24 = document.createElement("td")
+		var cellClient24 = document.createElement("td");
-		row24.appendChild(cellClient24)
+		row24.appendChild(cellClient24);
-		var cellCh24 = document.createElement("td")
+		var cellCh24 = document.createElement("td");
-		row24.appendChild(cellCh24)
+		row24.appendChild(cellCh24);
-		var cellTx24 = document.createElement("td")
+		var cellTx24 = document.createElement("td");
-		row24.appendChild(cellTx24)
+		row24.appendChild(cellTx24);
-		table.appendChild(row24)
+		table.appendChild(row24);
 
-		var row5 = document.createElement("tr")
+		var row5 = document.createElement("tr");
-		row5.innerHTML = "<td class=\"text\">5 Ghz</td>"
+		row5.innerHTML = "<td class=\"text\">5 Ghz</td>";
-		var cellClient5 = document.createElement("td")
+		var cellClient5 = document.createElement("td");
-		row5.appendChild(cellClient5)
+		row5.appendChild(cellClient5);
-		var cellCh5 = document.createElement("td")
+		var cellCh5 = document.createElement("td");
-		row5.appendChild(cellCh5)
+		row5.appendChild(cellCh5);
-		var cellTx5 = document.createElement("td")
+		var cellTx5 = document.createElement("td");
-		row5.appendChild(cellTx5)
+		row5.appendChild(cellTx5);
-		table.appendChild(row5)
+		table.appendChild(row5);
 
-		content.appendChild(table)
+		content.appendChild(table);
 
-		var btnSave = document.createElement("button")
+		var btnSave = document.createElement("button");
-		var saveIcon = document.createElement('i')
+		var saveIcon = document.createElement('i');
-		saveIcon.classList.add("icon")
+		saveIcon.classList.add("icon");
-		saveIcon.innerHTML = "\uf0c7"
+		saveIcon.innerHTML = "\uf0c7";
-		btnSave.appendChild(saveIcon)
+		btnSave.appendChild(saveIcon);
-		btnSave.innerHTML += " save"
+		btnSave.innerHTML += " Save";
-		content.appendChild(btnSave)
+		content.appendChild(btnSave);
 
-		btnSave.addEventListener("click",function(a) {
+		if (navigator.geolocation) {
-			console.log(inHostname.value)
+			var btnGps = document.createElement("button");
-		})
+			var gpsIcon = document.createElement('i');
+			gpsIcon.classList.add("icon");
+			gpsIcon.innerHTML = "\uf124";
+			btnGps.appendChild(gpsIcon);
+			content.appendChild(btnGps);
+
+			var setToGps = function(position){
+				var pos = [position.coords.latitude,position.coords.longitude];
+				marker.setLatLng(pos);
+				marker._map.setView(pos);
+			};
+			btnGps.addEventListener("click",function() {
+				navigator.geolocation.getCurrentPosition(setToGps);
+			});
+		}
+
+		btnSave.addEventListener("click",function() {
+			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;
+			alias.hostname = inHostname.value;
+			send('POST',config.api+'/aliases/alias/'+nodeid,alias).then(function(){
+				close();
+			});
+		});
 
 		var render = function(){
 			if(nodeid !== undefined){
-				node = data.nodes[nodeid]
+				var node = data.nodes[nodeid];
-				sidebar.classList.remove("hidden")
+				var alias = data.aliases[nodeid];
-				lblNodeid.innerHTML = "Nodeid:"+nodeid
+				sidebar.classList.remove("hidden");
-				inHostname.value = (data.aliases[nodeid] !== undefined && data.aliases[nodeid].hostname !==undefined)?data.aliases[nodeid].hostname:node.nodeinfo.hostname
+				lblNodeid.innerHTML = "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:'-'
+				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:'-'
+				cellClient5.innerHTML = (node.statistics !== undefined && node.statistics.clients !== undefined)?node.statistics.clients.wifi5:'-';
-				cellCh24.innerHTML = (node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-'
+				cellCh24.innerHTML = (alias && alias.wireless && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-');
-				cellCh5.innerHTML = (node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'
+				cellCh5.innerHTML = (alias && alias.wireless && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-');
-				cellTx24.innerHTML = (node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-'
+				cellTx24.innerHTML = (alias && alias.wireless && alias.wireless.txpower24)?alias.wireless.txpower24:((node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-');
-				cellTx5.innerHTML = (node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'
+				cellTx5.innerHTML = (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")
+				sidebar.classList.add("hidden");
+				if(cleanFunction !== undefined){
+					cleanFunction();
+					cleanFunction = undefined;
+				}
+					//marker.options.icon.options
 			}
-		}
+		};
 		return {
 			storageNotify: function(d){
-				data = d
+				data = d;
-				render()
+				render();
 			},
-			setSelected: function(id){
+			setSelected: function(id,m,c){
-				nodeid = id
+				nodeid = id;
-				render()
+				marker = m;
+				cleanFunction = c;
+				render();
 			}
-		}
+		};
-	}
+	};
-})
+});

js/helper/lib.js

@@ -20,31 +20,31 @@ function send(method,url,data) {
 		}
 	}).then(function(data){
 		if(data[0]=='{')
-			return JSON.parse(data)
+			return JSON.parse(data);
-		return data
+		return data;
 	});
 }
 function localStorageTest() {
-	var test = 'test'
+	var test = 'test';
 	try {
-		localStorage.setItem(test, test)
+		localStorage.setItem(test, test);
-		localStorage.removeItem(test)
+		localStorage.removeItem(test);
-		return true
+		return true;
 	} catch(e) {
-		return false
+		return false;
 	}
 }
 
 
 function sshUrl(nodeid){
 	if(internal.nodes[nodeid]){
-		node = internal.nodes[nodeid]
+		node = internal.nodes[nodeid];
-		ip ='z-'
+		ip ='z-';
 		for(var i=0;i<node.nodeinfo.network.addresses.length;i++){
 				if(ip[0]> node.nodeinfo.network.addresses[i][0])
-					ip = node.nodeinfo.network.addresses[i]
+					ip = node.nodeinfo.network.addresses[i];
 		}
-		return '<a href="ssh://root@['+ip+']">SSH</a>'
+		return '<a href="ssh://root@['+ip+']">SSH</a>';
 	}
-	return ''
+	return '';
 }

js/helper/router.js

@@ -4,8 +4,7 @@ define(function(){
 		mode: null,
 		root: '/',
 		config: function(options) {
-			this.mode = options && options.mode && options.mode == 'history'
+			this.mode = options && options.mode && options.mode == 'history' && !!(history.pushState) ? 'history' : 'hash';
-						&& !!(history.pushState) ? 'history' : 'hash';
 			this.root = options && options.root ? '/' + this.clearSlashes(options.root) + '/' : '/';
 			return this;
 		},
@@ -33,7 +32,9 @@ define(function(){
 			return this;
 		},
 		remove: function(param) {
-			for(var i=0, r; i<this.routes.length, r = this.routes[i]; i++) {
+			var r;
+			for(var i=0; i<this.routes.length; i++) {
+				r = this.routes[i];
 				if(r.handler === param || r.re.toString() === param.toString()) {
 					this.routes.splice(i, 1);
 					return this;
@@ -67,7 +68,7 @@ define(function(){
 					current = self.getFragment();
 					self.check(current);
 				}
-			}
+			};
 			clearInterval(this.interval);
 			this.interval = setInterval(fn, 50);
 			return this;
@@ -82,4 +83,4 @@ define(function(){
 			return this;
 		}
 	};
-})
+});

js/helper/storage.js

@@ -1,62 +1,68 @@
 define(["helper/lib","moment"],function(lib,moment){
 	return function(config){
-		var data = {nodes:{},aliases:{},geojson:{}}
+		var data = {nodes:{},aliases:{},geojson:{}};
-		var notifies = [], notifiesNew = []
+		var notifies = [], notifiesNew = [];
+
+		if(localStorageTest()){
+			data.nodes = JSON.parse(localStorage.getItem("nodes"));
+			data.aliases = JSON.parse(localStorage.getItem("aliases"));
+		}
 
 		var notify =  function(){
 			for(var i=0; i<notifies.length;i++)
-				notifies[i].storageNotify(data)
+				notifies[i].storageNotify(data);
-		}
+		};
 		var notifyNew = function(key,data){
 			for(var i=0; i<notifiesNew.length;i++)
-				notifiesNew[i].storageNotifyNew(key,data)
+				notifiesNew[i].storageNotifyNew(key,data);
-		}
+		};
 
 		var refresh = function(){
-			send('GET',config.map.geojson).then(function(d){
+			if(config.map.geojson)
-					data.geojson = d
+				send('GET',config.map.geojson).then(function(d){
-					notify()
+						data.geojson = d;
-			})
+						notify();
+				});
 			send('GET',config.api+"/aliases").then(function(d){
-					data.aliases = d
+				data.aliases = d;
-				localStorage.setItem("aliases",JSON.stringify(data.aliases))
+				localStorage.setItem("aliases",JSON.stringify(data.aliases));
-				notify()
+				notify();
-			})
+			});
 			send('GET',config.api+"/nodes").then(function(d){
 				Object.keys(d).map(function(key){
-					if(data.nodes == undefined && data.nodes[key]== undefined){
+					if(data.nodes === undefined && data.nodes[key] === undefined){
-						notifyNew(key,data[key])
+						notifyNew(key,data[key]);
 					}
-						data.nodes[key] = d[key]
+					data.nodes[key] = d[key];
-				})
+				});
-				data.lastload = new Date()
+				data.lastload = new Date();
-				localStorage.setItem("nodes",JSON.stringify(data.nodes))
+				localStorage.setItem("nodes",JSON.stringify(data.nodes));
-				notify()
+				notify();
-			})
+			});
-		}
+		};
 
 		return {
 			setTimeSinceUpdate:function(str){
-				var interval
+				var interval;
 				clearInterval(interval);
 				interval = setInterval(function(){
-					str.innerHTML = moment().diff(data.lastload,"seconds")+" sec"
+					str.innerHTML = moment().diff(data.lastload,"seconds")+" sec";
 				}, 100);
 			},
 			addNotify: function(handler){
-				notifies.push(handler)
+				notifies.push(handler);
 			},
 			addNotifyNew: function(handler){
-				notifiesNew.push(handler)
+				notifiesNew.push(handler);
 			},
 			autorefresh: function(timer){
-				var interval
+				var interval;
 				clearInterval(interval);
 				interval = setInterval(function(){
-					refresh()
+					refresh();
 				}, timer);
 			},
 			refresh: refresh
-		}
+		};
-	}
+	};
-})
+});

js/main.js

@@ -1,34 +1,34 @@
 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)
+		var store = storage(config);
-		store.refresh()
+		store.refresh();
-		store.autorefresh(config.reload)
+		store.autorefresh(config.reload);
 
-		document.title = "eventmanager"
+		document.title = "eventmanager";
 
 
-		menu(document.body,store)
+		menu(document.body,store);
-		el = document.createElement("div")
+		el = document.createElement("div");
-		el.classList.add("content")
+		el.classList.add("content");
-		document.body.appendChild(el)
+		document.body.appendChild(el);
 
 
-		var map = controllerMap(el,config)
+		var map = controllerMap(el,config);
-		store.addNotify(map)
+		store.addNotify(map);
 
-		var nodes = controllerNodes(el,config)
+		var nodes = controllerNodes(el,config);
-		store.addNotify(nodes)
+		store.addNotify(nodes);
 
 		Router.config({
 			mode: 'hash'
 		})
-		.add(/statistics/, controllerFrame(el,config.statistics.all))
+		.add(/grafana/, controllerFrame(el,config.grafana.all))
 		.add(/meshviewer/, controllerFrame(el,config.meshviewer))
 		.add(/list/, nodes.controller)
 		.add(/map\/(.*)/, map.controller)
 		.add(/map/, map.controller)
 		.add(nodes.controller)
-		.check().listen()
+		.check().listen();
-		}
+	};
-})
+});

js/menu.js

@@ -1,42 +1,51 @@
 define(function(){
 	return function(el,store){
-		menu = document.createElement("header")
+		menu = document.createElement("header");
-		menu.classList.add("menu")
+		menu.classList.add("menu");
-		right = document.createElement("div")
+		right = document.createElement("div");
-		right.classList.add("icons")
+		right.classList.add("icons");
-		menu.appendChild(right)
+		menu.appendChild(right);
-		el.appendChild(menu)
+		el.appendChild(menu);
 
-		var buttonList = document.createElement("i")
+		var buttonList = document.createElement("i");
-		buttonList.innerHTML = ""
+		buttonList.innerHTML = "";
 		buttonList.onclick = function () {
-			window.location.href = "#list"
+			window.location.href = "#list";
-		}
+		};
-		right.appendChild(buttonList)
+		right.appendChild(buttonList);
 
-		var buttonMap = document.createElement("i")
+		var buttonMap = document.createElement("i");
-		buttonMap.innerHTML = '\uf278'
+		buttonMap.innerHTML = '\uf278';
 		buttonMap.onclick = function () {
-			window.location.href = "#map"
+			window.location.href = "#map";
-		}
+		};
-		right.appendChild(buttonMap)
+		right.appendChild(buttonMap);
 
-		var buttonStatistic = document.createElement("i")
+		var buttonStatistic = document.createElement("i");
-		buttonStatistic.innerHTML = ""
+		buttonStatistic.classList.add("mini");
+		buttonStatistic.innerHTML = "";
 		buttonStatistic.onclick = function () {
-			window.location.href = "#statistics"
+			window.location.href = "#grafana";
-		}
+		};
-		right.appendChild(buttonStatistic)
+		right.appendChild(buttonStatistic);
+
+		var buttonMeshviewer = document.createElement("i");
+		buttonMeshviewer.classList.add("mini");
+		buttonMeshviewer.innerHTML = '\uf279';
+		buttonMeshviewer.onclick = function () {
+			window.location.href = "#meshviewer";
+		};
+		right.appendChild(buttonMeshviewer);
 
 
-		var buttonRefresh = document.createElement("i")
+		var buttonRefresh = document.createElement("i");
-		buttonRefresh.innerHTML = ""
+		buttonRefresh.innerHTML = "";
-		var refreshtime = document.createElement("span")
+		var refreshtime = document.createElement("span");
-		store.setTimeSinceUpdate(refreshtime)
+		store.setTimeSinceUpdate(refreshtime);
-		buttonRefresh.appendChild(refreshtime)
+		buttonRefresh.appendChild(refreshtime);
 		buttonRefresh.onclick = function () {
-			store.refresh()
+			store.refresh();
-		}
+		};
-		right.appendChild(buttonRefresh)
+		right.appendChild(buttonRefresh);
-	}
+	};
-})
+});

package.json

@@ -1,16 +1,19 @@
 {
   "name": "eventmanager",
   "version": "1.0.0",
-  "description": "",
+  "description": "Eventmanager for respond-collector",
   "main": "Gruntfile.js",
   "dependencies": {
+    "almond": "^0.3.2",
     "grunt": "^1.0.1",
-    "grunt-bower-install-simple": "^1.2.3",
+    "grunt-contrib-clean": "^1.0.0",
     "grunt-contrib-connect": "^1.0.2",
+    "grunt-contrib-copy": "^1.0.0",
+    "grunt-contrib-cssmin": "^1.0.1",
     "grunt-contrib-jshint": "^1.0.0",
+    "grunt-contrib-requirejs": "^1.0.0",
     "grunt-contrib-uglify": "^1.0.1",
     "grunt-contrib-watch": "^1.0.0",
-    "grunt-eslint": "^18.1.0",
     "grunt-open": "^0.2.3",
     "jit-grunt": "^0.10.0",
     "jshint-stylish": "^2.2.0",