rewrite+build
This commit is contained in:
parent
b39e5d5806
commit
603fff71e3
93
Gruntfile.js
93
Gruntfile.js
|
|
@ -1,45 +1,112 @@
|
|||
'use strict';
|
||||
"use strict";
|
||||
|
||||
module.exports = function (grunt) {
|
||||
// Load grunt tasks automatically, when needed
|
||||
require('jit-grunt')(grunt, {
|
||||
useminPrepare: 'grunt-usemin',
|
||||
require("jit-grunt")(grunt, {
|
||||
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:'*',
|
||||
base:['.']
|
||||
hostname:"*",
|
||||
base:["."]
|
||||
}
|
||||
}
|
||||
},
|
||||
jshint: {
|
||||
files: ['Gruntfile.js', 'js/**/*.js'],
|
||||
files: ["js/**/*.js"],
|
||||
options: {
|
||||
reporter: require('jshint-stylish')
|
||||
reporter: require("jshint-stylish")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
livereload: {
|
||||
files: [
|
||||
'js/**/*.js',
|
||||
'css/**/*.css',
|
||||
"js/**/*.js",
|
||||
"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('default', ['connect:public','open:public','watch']);
|
||||
grunt.registerTask("build",[
|
||||
"jshint",
|
||||
"clean",
|
||||
"copy",
|
||||
"cssmin",
|
||||
"requirejs:compile"
|
||||
]);
|
||||
grunt.registerTask("default", ["connect:public","open:public","watch"]);
|
||||
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
Subproject commit b35d8667a611269a4152a322e635b479bc54df6c
|
||||
|
|
@ -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"
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
48
css/font.css
48
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');
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
20
css/icon.css
20
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;
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<iframe src="<% this.public.config.map %>"/>
|
||||
|
|
@ -1 +0,0 @@
|
|||
<iframe src="<% this.public.config.statistics.all %>"/>
|
||||
BIN
img/logo.png
BIN
img/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 3.1 KiB |
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
define(function(){
|
||||
return function(el,url){
|
||||
var frame = document.createElement("iframe")
|
||||
frame.src = url
|
||||
el.appendChild(frame)
|
||||
console.log("create")
|
||||
var frame = document.createElement("iframe");
|
||||
frame.src = url;
|
||||
return function(){
|
||||
}
|
||||
}
|
||||
})
|
||||
el.innerHTML = "";
|
||||
el.appendChild(frame);
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
define(['leaflet','leaflet.label','controller/sidebar'],function(leaflet,leaflet_label,Sidebar){
|
||||
var data,currentNode
|
||||
define(['leaflet','controller/sidebar','leaflet.label'],function(L,Sidebar){
|
||||
var data,currentNode;
|
||||
return function(el,config){
|
||||
var mapEl = document.createElement("div")
|
||||
mapEl.classList.add("map")
|
||||
var mapEl = document.createElement("div");
|
||||
mapEl.classList.add("map");
|
||||
|
||||
var sideBarEl = document.createElement("div")
|
||||
var bar = Sidebar(sideBarEl,config)
|
||||
var sideBarEl = document.createElement("div");
|
||||
var bar = Sidebar(sideBarEl,config);
|
||||
|
||||
var map = leaflet.map(mapEl,{zoomControl:false}).setView([51.505, -0.09], 13)
|
||||
var layergeojson,layernodes
|
||||
var map = L.map(mapEl,{zoomControl:false}).setView([51.505, -0.09], 13);
|
||||
var layergeojson,layernodes;
|
||||
|
||||
|
||||
|
||||
leaflet.tileLayer(
|
||||
L.tileLayer(
|
||||
config.map.tiles.url,
|
||||
config.map.tiles.option).addTo(map)
|
||||
map.setView(config.map.view,config.map.zoom)
|
||||
config.map.tiles.option).addTo(map);
|
||||
map.setView(config.map.view,config.map.zoom);
|
||||
|
||||
var geoJsonOption = {
|
||||
pointToLayer: function (feature, latlng){
|
||||
feature.properties.radius = 10
|
||||
return leaflet.circleMarker(latlng, feature.properties)
|
||||
feature.properties.radius = 10;
|
||||
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()
|
||||
if(data.geojson !== undefined){
|
||||
layergeojson = leaflet.geoJson(data.geojson,geoJsonOption).addTo(map)
|
||||
map._onResize()
|
||||
layergeojson.clearLayers();
|
||||
if(data.geojson && Object.keys(data.geojson).length > 0){
|
||||
layergeojson = L.geoJson(data.geojson,geoJsonOption).addTo(map);
|
||||
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 m = leaflet.marker([node.nodeinfo.location.latitude,node.nodeinfo.location.longitude],{
|
||||
draggable: true,
|
||||
var node = data.nodes[key];
|
||||
var alias = data.aliases[key];
|
||||
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'
|
||||
if(node.flags !== undefined && !node.flags.online)
|
||||
className += ' offline'
|
||||
var wifi24="-",wifi5="-",ch24="-",ch5="-",tx24="-",tx5="-"
|
||||
if(node.statistics !== undefined && node.statistics.clients !== undefined){
|
||||
wifi24 = node.statistics.clients.wifi24
|
||||
var className = "nodeicon";
|
||||
if(node.flags && !node.flags.online)
|
||||
className += " offline";
|
||||
var wifi24="-",wifi5="-",ch24="-",ch5="-",tx24="-",tx5="-";
|
||||
if(node.statistics && node.statistics.clients){
|
||||
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){
|
||||
ch24 = (node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-'
|
||||
ch5 = (node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'
|
||||
tx24 = (node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-'
|
||||
tx5 = (node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'
|
||||
if(node.nodeinfo.wireless){
|
||||
ch24 = (alias && alias.wireless && alias.wireless.channel24)?alias.wireless.channel24:((node.nodeinfo.wireless.channel24)?node.nodeinfo.wireless.channel24:'-');
|
||||
ch5 = (alias && alias.wireless && alias.wireless.channel5)?alias.wireless.channel5:((node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-');
|
||||
tx24 = (alias && alias.wireless && alias.wireless.txpower24)?alias.wireless.txpower24:((node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-');
|
||||
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'
|
||||
map.setView(m.getLatLng(),config.map.zoom)
|
||||
bar.setSelected(key)
|
||||
className += ' select';
|
||||
map.setView(m.getLatLng(),config.map.zoom);
|
||||
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
|
||||
currentNode = key
|
||||
render()
|
||||
})
|
||||
return m
|
||||
})
|
||||
layernodes = leaflet.featureGroup(nodes).addTo(map)
|
||||
}
|
||||
window.location.href = "#map/"+key;
|
||||
currentNode = key;
|
||||
render();
|
||||
});
|
||||
return m;
|
||||
});
|
||||
layernodes = L.featureGroup(nodes).addTo(map);
|
||||
};
|
||||
|
||||
return {
|
||||
storageNotify: function(d){
|
||||
data = d
|
||||
bar.storageNotify(d)
|
||||
render()
|
||||
data = d;
|
||||
bar.storageNotify(d);
|
||||
render();
|
||||
},
|
||||
controller: function(){
|
||||
currentNode = arguments[0]
|
||||
el.innerHTML = ""
|
||||
el.appendChild(sideBarEl)
|
||||
el.appendChild(mapEl)
|
||||
currentNode = arguments[0];
|
||||
el.innerHTML = "";
|
||||
el.appendChild(sideBarEl);
|
||||
el.appendChild(mapEl);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
sidebar.classList.add("sidebar")
|
||||
sidebar.classList.add("hidden")
|
||||
el.appendChild(sidebar)
|
||||
var close = function(){
|
||||
window.location.href = "#map";
|
||||
nodeid = undefined;
|
||||
render();
|
||||
};
|
||||
|
||||
var controll = document.createElement("div")
|
||||
controll.classList.add("icon")
|
||||
sidebar.appendChild(controll)
|
||||
var sidebar = document.createElement("div");
|
||||
sidebar.classList.add("sidebar");
|
||||
sidebar.classList.add("hidden");
|
||||
el.appendChild(sidebar);
|
||||
|
||||
var close = document.createElement('i')
|
||||
close.innerHTML = "\uf00d"
|
||||
controll.appendChild(close)
|
||||
close.addEventListener("click",function(){
|
||||
window.location.href = "#map"
|
||||
nodeid = undefined
|
||||
render()
|
||||
})
|
||||
var controll = document.createElement("div");
|
||||
controll.classList.add("icon");
|
||||
sidebar.appendChild(controll);
|
||||
|
||||
var content = document.createElement("div")
|
||||
content.classList.add("content")
|
||||
sidebar.appendChild(content)
|
||||
var iconClose = document.createElement('i');
|
||||
iconClose.innerHTML = "\uf00d";
|
||||
controll.appendChild(iconClose);
|
||||
iconClose.addEventListener("click",close);
|
||||
|
||||
var lblNodeid = document.createElement("h4")
|
||||
content.appendChild(lblNodeid)
|
||||
var content = document.createElement("div");
|
||||
content.classList.add("content");
|
||||
sidebar.appendChild(content);
|
||||
|
||||
var lblNodeid = document.createElement("h4");
|
||||
content.appendChild(lblNodeid);
|
||||
|
||||
|
||||
var inHostname = document.createElement("input")
|
||||
content.appendChild(inHostname)
|
||||
var inHostname = document.createElement("input");
|
||||
content.appendChild(inHostname);
|
||||
|
||||
|
||||
var table = document.createElement("table")
|
||||
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 class=\"text\">2.4 Ghz</td>"
|
||||
var cellClient24 = document.createElement("td")
|
||||
row24.appendChild(cellClient24)
|
||||
var cellCh24 = document.createElement("td")
|
||||
row24.appendChild(cellCh24)
|
||||
var cellTx24 = document.createElement("td")
|
||||
row24.appendChild(cellTx24)
|
||||
table.appendChild(row24)
|
||||
var table = document.createElement("table");
|
||||
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 class=\"text\">2.4 Ghz</td>";
|
||||
var cellClient24 = document.createElement("td");
|
||||
row24.appendChild(cellClient24);
|
||||
var cellCh24 = document.createElement("td");
|
||||
row24.appendChild(cellCh24);
|
||||
var cellTx24 = document.createElement("td");
|
||||
row24.appendChild(cellTx24);
|
||||
table.appendChild(row24);
|
||||
|
||||
var row5 = document.createElement("tr")
|
||||
row5.innerHTML = "<td class=\"text\">5 Ghz</td>"
|
||||
var cellClient5 = document.createElement("td")
|
||||
row5.appendChild(cellClient5)
|
||||
var cellCh5 = document.createElement("td")
|
||||
row5.appendChild(cellCh5)
|
||||
var cellTx5 = document.createElement("td")
|
||||
row5.appendChild(cellTx5)
|
||||
table.appendChild(row5)
|
||||
var row5 = document.createElement("tr");
|
||||
row5.innerHTML = "<td class=\"text\">5 Ghz</td>";
|
||||
var cellClient5 = document.createElement("td");
|
||||
row5.appendChild(cellClient5);
|
||||
var cellCh5 = document.createElement("td");
|
||||
row5.appendChild(cellCh5);
|
||||
var cellTx5 = document.createElement("td");
|
||||
row5.appendChild(cellTx5);
|
||||
table.appendChild(row5);
|
||||
|
||||
content.appendChild(table)
|
||||
content.appendChild(table);
|
||||
|
||||
var btnSave = document.createElement("button")
|
||||
var saveIcon = document.createElement('i')
|
||||
saveIcon.classList.add("icon")
|
||||
saveIcon.innerHTML = "\uf0c7"
|
||||
btnSave.appendChild(saveIcon)
|
||||
btnSave.innerHTML += " save"
|
||||
content.appendChild(btnSave)
|
||||
var btnSave = document.createElement("button");
|
||||
var saveIcon = document.createElement('i');
|
||||
saveIcon.classList.add("icon");
|
||||
saveIcon.innerHTML = "\uf0c7";
|
||||
btnSave.appendChild(saveIcon);
|
||||
btnSave.innerHTML += " Save";
|
||||
content.appendChild(btnSave);
|
||||
|
||||
btnSave.addEventListener("click",function(a) {
|
||||
console.log(inHostname.value)
|
||||
})
|
||||
if (navigator.geolocation) {
|
||||
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]
|
||||
sidebar.classList.remove("hidden")
|
||||
lblNodeid.innerHTML = "Nodeid:"+nodeid
|
||||
inHostname.value = (data.aliases[nodeid] !== undefined && data.aliases[nodeid].hostname !==undefined)?data.aliases[nodeid].hostname:node.nodeinfo.hostname
|
||||
var node = data.nodes[nodeid];
|
||||
var alias = data.aliases[nodeid];
|
||||
sidebar.classList.remove("hidden");
|
||||
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:'-'
|
||||
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:'-'
|
||||
cellCh5.innerHTML = (node.nodeinfo.wireless && node.nodeinfo.wireless.channel5)?node.nodeinfo.wireless.channel5:'-'
|
||||
cellTx24.innerHTML = (node.nodeinfo.wireless && node.nodeinfo.wireless.txpower24)?node.nodeinfo.wireless.txpower24:'-'
|
||||
cellTx5.innerHTML = (node.nodeinfo.wireless && node.nodeinfo.wireless.txpower5)?node.nodeinfo.wireless.txpower5:'-'
|
||||
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:'-');
|
||||
|
||||
}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
|
||||
render()
|
||||
data = d;
|
||||
render();
|
||||
},
|
||||
setSelected: function(id){
|
||||
nodeid = id
|
||||
render()
|
||||
setSelected: function(id,m,c){
|
||||
nodeid = id;
|
||||
marker = m;
|
||||
cleanFunction = c;
|
||||
render();
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,31 +20,31 @@ function send(method,url,data) {
|
|||
}
|
||||
}).then(function(data){
|
||||
if(data[0]=='{')
|
||||
return JSON.parse(data)
|
||||
return data
|
||||
return JSON.parse(data);
|
||||
return data;
|
||||
});
|
||||
}
|
||||
function localStorageTest() {
|
||||
var test = 'test'
|
||||
var test = 'test';
|
||||
try {
|
||||
localStorage.setItem(test, test)
|
||||
localStorage.removeItem(test)
|
||||
return true
|
||||
localStorage.setItem(test, test);
|
||||
localStorage.removeItem(test);
|
||||
return true;
|
||||
} catch(e) {
|
||||
return false
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function sshUrl(nodeid){
|
||||
if(internal.nodes[nodeid]){
|
||||
node = internal.nodes[nodeid]
|
||||
ip ='z-'
|
||||
node = internal.nodes[nodeid];
|
||||
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 '';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,7 @@ define(function(){
|
|||
mode: null,
|
||||
root: '/',
|
||||
config: function(options) {
|
||||
this.mode = options && options.mode && options.mode == 'history'
|
||||
&& !!(history.pushState) ? 'history' : 'hash';
|
||||
this.mode = options && options.mode && options.mode == 'history' && !!(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;
|
||||
}
|
||||
};
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,62 +1,68 @@
|
|||
define(["helper/lib","moment"],function(lib,moment){
|
||||
return function(config){
|
||||
var data = {nodes:{},aliases:{},geojson:{}}
|
||||
var notifies = [], notifiesNew = []
|
||||
var data = {nodes:{},aliases:{},geojson:{}};
|
||||
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){
|
||||
data.geojson = d
|
||||
notify()
|
||||
})
|
||||
if(config.map.geojson)
|
||||
send('GET',config.map.geojson).then(function(d){
|
||||
data.geojson = d;
|
||||
notify();
|
||||
});
|
||||
send('GET',config.api+"/aliases").then(function(d){
|
||||
data.aliases = d
|
||||
localStorage.setItem("aliases",JSON.stringify(data.aliases))
|
||||
notify()
|
||||
})
|
||||
data.aliases = d;
|
||||
localStorage.setItem("aliases",JSON.stringify(data.aliases));
|
||||
notify();
|
||||
});
|
||||
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,data[key]);
|
||||
}
|
||||
data.nodes[key] = d[key]
|
||||
})
|
||||
data.lastload = new Date()
|
||||
localStorage.setItem("nodes",JSON.stringify(data.nodes))
|
||||
notify()
|
||||
})
|
||||
}
|
||||
data.nodes[key] = d[key];
|
||||
});
|
||||
data.lastload = new Date();
|
||||
localStorage.setItem("nodes",JSON.stringify(data.nodes));
|
||||
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
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
};
|
||||
});
|
||||
|
|
|
|||
32
js/main.js
32
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)
|
||||
store.refresh()
|
||||
store.autorefresh(config.reload)
|
||||
var store = storage(config);
|
||||
store.refresh();
|
||||
store.autorefresh(config.reload);
|
||||
|
||||
document.title = "eventmanager"
|
||||
document.title = "eventmanager";
|
||||
|
||||
|
||||
menu(document.body,store)
|
||||
el = document.createElement("div")
|
||||
el.classList.add("content")
|
||||
document.body.appendChild(el)
|
||||
menu(document.body,store);
|
||||
el = document.createElement("div");
|
||||
el.classList.add("content");
|
||||
document.body.appendChild(el);
|
||||
|
||||
|
||||
var map = controllerMap(el,config)
|
||||
store.addNotify(map)
|
||||
var map = controllerMap(el,config);
|
||||
store.addNotify(map);
|
||||
|
||||
var nodes = controllerNodes(el,config)
|
||||
store.addNotify(nodes)
|
||||
var nodes = controllerNodes(el,config);
|
||||
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();
|
||||
};
|
||||
});
|
||||
|
|
|
|||
71
js/menu.js
71
js/menu.js
|
|
@ -1,42 +1,51 @@
|
|||
define(function(){
|
||||
return function(el,store){
|
||||
menu = document.createElement("header")
|
||||
menu.classList.add("menu")
|
||||
right = document.createElement("div")
|
||||
right.classList.add("icons")
|
||||
menu.appendChild(right)
|
||||
el.appendChild(menu)
|
||||
menu = document.createElement("header");
|
||||
menu.classList.add("menu");
|
||||
right = document.createElement("div");
|
||||
right.classList.add("icons");
|
||||
menu.appendChild(right);
|
||||
el.appendChild(menu);
|
||||
|
||||
var buttonList = document.createElement("i")
|
||||
buttonList.innerHTML = ""
|
||||
var buttonList = document.createElement("i");
|
||||
buttonList.innerHTML = "";
|
||||
buttonList.onclick = function () {
|
||||
window.location.href = "#list"
|
||||
}
|
||||
right.appendChild(buttonList)
|
||||
window.location.href = "#list";
|
||||
};
|
||||
right.appendChild(buttonList);
|
||||
|
||||
var buttonMap = document.createElement("i")
|
||||
buttonMap.innerHTML = '\uf278'
|
||||
var buttonMap = document.createElement("i");
|
||||
buttonMap.innerHTML = '\uf278';
|
||||
buttonMap.onclick = function () {
|
||||
window.location.href = "#map"
|
||||
}
|
||||
right.appendChild(buttonMap)
|
||||
window.location.href = "#map";
|
||||
};
|
||||
right.appendChild(buttonMap);
|
||||
|
||||
var buttonStatistic = document.createElement("i")
|
||||
buttonStatistic.innerHTML = ""
|
||||
var buttonStatistic = document.createElement("i");
|
||||
buttonStatistic.classList.add("mini");
|
||||
buttonStatistic.innerHTML = "";
|
||||
buttonStatistic.onclick = function () {
|
||||
window.location.href = "#statistics"
|
||||
}
|
||||
right.appendChild(buttonStatistic)
|
||||
window.location.href = "#grafana";
|
||||
};
|
||||
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")
|
||||
buttonRefresh.innerHTML = ""
|
||||
var refreshtime = document.createElement("span")
|
||||
store.setTimeSinceUpdate(refreshtime)
|
||||
buttonRefresh.appendChild(refreshtime)
|
||||
var buttonRefresh = document.createElement("i");
|
||||
buttonRefresh.innerHTML = "";
|
||||
var refreshtime = document.createElement("span");
|
||||
store.setTimeSinceUpdate(refreshtime);
|
||||
buttonRefresh.appendChild(refreshtime);
|
||||
buttonRefresh.onclick = function () {
|
||||
store.refresh()
|
||||
}
|
||||
right.appendChild(buttonRefresh)
|
||||
}
|
||||
})
|
||||
store.refresh();
|
||||
};
|
||||
right.appendChild(buttonRefresh);
|
||||
};
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue