eslint all (with some exludes)
This commit is contained in:
parent
d3fcd7f232
commit
a4045b50a6
|
|
@ -0,0 +1,35 @@
|
|||
{
|
||||
extends: eslint:all,
|
||||
rules: {
|
||||
no-tabs: [off],
|
||||
indent: [error, tab],
|
||||
quotes: [error, single],
|
||||
padded-blocks: [error, { blocks: never }],
|
||||
no-console: [error, { allow: [log, warn, error] }],
|
||||
func-style: [error, declaration],
|
||||
object-curly-newline: off,
|
||||
wrap-iife: [error, inside],
|
||||
object-shorthand: ["error", "always", { "avoidQuotes": true }],
|
||||
require-jsdoc: [off],
|
||||
max-statements: [off],
|
||||
no-magic-numbers: ["error", { "ignore": [0,1,-1] }],
|
||||
sort-vars: [off],
|
||||
max-len: [off],
|
||||
id-length: [error, { exceptions: ["i"] }],
|
||||
no-ternary: [off]
|
||||
|
||||
},
|
||||
env: {
|
||||
es6: true
|
||||
},
|
||||
globals: {
|
||||
L: true,
|
||||
moment: true,
|
||||
Navigo: true,
|
||||
document: true,
|
||||
window: true,
|
||||
location: true,
|
||||
navigator: true,
|
||||
console: true,
|
||||
}
|
||||
}
|
||||
|
|
@ -28,7 +28,6 @@
|
|||
<body>
|
||||
<header>
|
||||
<nav>
|
||||
|
||||
<ul>
|
||||
<li class="logo"><img src="/img/logo.jpg"></li>
|
||||
<li class="item-1"><a href="#/list">List</a></li>
|
||||
|
|
|
|||
|
|
@ -1,60 +1,88 @@
|
|||
/* exported config */
|
||||
|
||||
var config = {
|
||||
title: 'FreifunkManager - Breminale',
|
||||
backend: 'ws://'+location.host+'/websocket',
|
||||
map: {
|
||||
view: {bound: [53.07093, 8.79464], zoom: 17},
|
||||
maxZoom: 20,
|
||||
tileLayer: 'https://tiles.bremen.freifunk.net/{z}/{x}/{y}.png',
|
||||
/* heatmap settings
|
||||
/* eslint no-magic-numbers: "off"*/
|
||||
/* eslint sort-keys: "off"*/
|
||||
|
||||
const config = {
|
||||
'title': 'FreifunkManager - Breminale',
|
||||
'backend': `ws://${location.host}/websocket`,
|
||||
'map': {
|
||||
'view': {
|
||||
'bound': [53.07093, 8.79464],
|
||||
'zoom': 17
|
||||
},
|
||||
'maxZoom': 20,
|
||||
'tileLayer': 'https://tiles.bremen.freifunk.net/{z}/{x}/{y}.png',
|
||||
|
||||
/* Heatmap settings
|
||||
size: in meters (default: 30km)
|
||||
opacity: in percent/100 (default: 1)
|
||||
gradientTexture: url-to-texture-image (default: false)
|
||||
alphaRange: change transparency in heatmap (default: 1)
|
||||
autoresize: resize heatmap when map size changes (default: false)
|
||||
*/
|
||||
heatmap: {
|
||||
wifi24: {size: 230, opacity: 0.5, alphaRange: 1},
|
||||
wifi5: {size: 230, opacity: 0.5, alphaRange: 1}
|
||||
'heatmap': {
|
||||
'wifi24': {
|
||||
'size': 230,
|
||||
'opacity': 0.5,
|
||||
'alphaRange': 1
|
||||
},
|
||||
icon:{
|
||||
warn:{wifi24:20,wifi5:20},
|
||||
crit:{wifi24:30,wifi5:30}
|
||||
'wifi5': {
|
||||
'size': 230,
|
||||
'opacity': 0.5,
|
||||
'alphaRange': 1
|
||||
}
|
||||
},
|
||||
geojson: {
|
||||
url: 'http://events.ffhb.de/data/ground.geojson',
|
||||
pointToLayer: function (feature, latlng){
|
||||
'icon': {
|
||||
'warn': {
|
||||
'wifi24': 20,
|
||||
'wifi5': 20
|
||||
},
|
||||
'crit': {
|
||||
'wifi24': 30,
|
||||
'wifi5': 30
|
||||
}
|
||||
},
|
||||
'geojson': {
|
||||
'url': 'http://events.ffhb.de/data/ground.geojson',
|
||||
'pointToLayer': function pointToLayer (feature, latlng) {
|
||||
'use strict';
|
||||
|
||||
feature.properties.radius = 10;
|
||||
|
||||
return L.circleMarker(latlng, feature.properties);
|
||||
},
|
||||
onEachFeature: function(feature, layer) {
|
||||
'onEachFeature': function onEachFeature (feature, layer) {
|
||||
'use strict';
|
||||
|
||||
if (feature.properties.name.length > 0) {
|
||||
layer.bindTooltip(feature.properties.name);
|
||||
}
|
||||
},
|
||||
style: function(feature){
|
||||
'style': function style (feature) {
|
||||
'use strict';
|
||||
|
||||
if (feature.geometry.type === 'LineString' || feature.geometry.type === 'Polygon') {
|
||||
return {
|
||||
color: feature.properties.stroke,
|
||||
opacity:feature.properties['stroke-opacity'],
|
||||
fillColor: feature.properties.fill,
|
||||
fillOpacity:feature.properties['fill-opacity'],
|
||||
stroke: true,
|
||||
weight: feature.properties['stroke-width'],
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round'
|
||||
'color': feature.properties.stroke,
|
||||
'opacity': feature.properties['stroke-opacity'],
|
||||
'fillColor': feature.properties.fill,
|
||||
'fillOpacity': feature.properties['fill-opacity'],
|
||||
'stroke': true,
|
||||
'weight': feature.properties['stroke-width'],
|
||||
'lineCap': 'round',
|
||||
'lineJoin': 'round'
|
||||
};
|
||||
}
|
||||
return {
|
||||
color: feature.properties['marker-color'],
|
||||
fillColor: feature.properties['marker-color'],
|
||||
fillOpacity: 0.2,
|
||||
weight: 2,
|
||||
stroke: true
|
||||
};
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
return {
|
||||
'color': feature.properties['marker-color'],
|
||||
'fillColor': feature.properties['marker-color'],
|
||||
'fillOpacity': 0.2,
|
||||
'weight': 2,
|
||||
'stroke': true
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,16 +1,22 @@
|
|||
/* exported domlin */
|
||||
|
||||
var domlib = {};
|
||||
(function(){
|
||||
domlib.newAt = function(at,eltype) {
|
||||
var el = document.createElement(eltype);
|
||||
const domlib = {};
|
||||
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
domlib.newAt = function newAt (at, eltype) {
|
||||
const el = document.createElement(eltype);
|
||||
|
||||
at.appendChild(el);
|
||||
|
||||
return el;
|
||||
};
|
||||
domlib.removeChildren = function(el) {
|
||||
if(el)
|
||||
domlib.removeChildren = function removeChildren (el) {
|
||||
if (el) {
|
||||
while (el.firstChild) {
|
||||
el.removeChild(el.firstChild);
|
||||
}
|
||||
}
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,73 +1,99 @@
|
|||
/* exported gui,router */
|
||||
/* globals socket,notify,domlib,guiList,guiMap,guiStats,guiNode */
|
||||
var gui = {};
|
||||
var router = new Navigo(null, true, '#');
|
||||
|
||||
(function(){
|
||||
var currentView = {bind:function(){},render:function(){}};
|
||||
const gui = {},
|
||||
router = new Navigo(null, true, '#');
|
||||
|
||||
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
const GUI_RENDER_DEBOUNCER_TIME = 100;
|
||||
|
||||
let currentView = {
|
||||
'bind': function bind () {
|
||||
console.warn('Do not run dummies');
|
||||
},
|
||||
// eslint-disable-next-line func-name-matching
|
||||
'render': function renderDummy () {
|
||||
console.warn('DO not run dummies');
|
||||
}
|
||||
};
|
||||
|
||||
function renderView () {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
const status = document.getElementsByClassName('status')[0];
|
||||
|
||||
if (!status) {
|
||||
console.log('unable to render, render later');
|
||||
window.setTimeout(renderView, GUI_RENDER_DEBOUNCER_TIME);
|
||||
|
||||
function render() {
|
||||
var status = document.getElementsByClassName('status')[0];
|
||||
if (status === undefined){
|
||||
console.log("unable to render, render later");
|
||||
window.setTimeout(render,100);
|
||||
return;
|
||||
}
|
||||
status.classList.remove('connecting', 'offline');
|
||||
if (socket.readyState !== 1) {
|
||||
status.classList.add(((socket.readyState===0 || socket.readyState===2)?'connecting':(socket.readyState===1)?'':'offline'));
|
||||
let statusClass = 'offline';
|
||||
|
||||
// eslint-disable-next-line no-magic-numbers
|
||||
if (socket.readyState === 0 || socket.readyState === 2) {
|
||||
statusClass = 'connecting';
|
||||
}
|
||||
status.classList.add(statusClass);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
notify.bind(document.getElementsByClassName('notifications')[0]);
|
||||
|
||||
currentView.render();
|
||||
router.resolve();
|
||||
}
|
||||
|
||||
function setView(c){
|
||||
currentView = c;
|
||||
var main = document.querySelector('main');
|
||||
function setView (toView) {
|
||||
currentView = toView;
|
||||
const main = document.querySelector('main');
|
||||
|
||||
domlib.removeChildren(main);
|
||||
currentView.bind(main);
|
||||
currentView.render();
|
||||
}
|
||||
|
||||
router.on({
|
||||
'/list': function () {
|
||||
'/list': function routerList () {
|
||||
setView(guiList);
|
||||
},
|
||||
'/map':function(){
|
||||
'/map': function routerMap () {
|
||||
setView(guiMap);
|
||||
},
|
||||
'/statistics':function(){
|
||||
setView(guiStats);
|
||||
},
|
||||
'/n/:nodeID': {
|
||||
as: 'node',
|
||||
uses: function (params) {
|
||||
guiNode.setNodeID(params['nodeID'].toLowerCase());
|
||||
'as': 'node',
|
||||
// eslint-disable-next-line func-name-matching
|
||||
'uses': function routerNode (params) {
|
||||
guiNode.setNodeID(params.nodeID.toLowerCase());
|
||||
setView(guiNode);
|
||||
}
|
||||
},
|
||||
'/statistics': function routerStats () {
|
||||
setView(guiStats);
|
||||
}
|
||||
});
|
||||
router.on(function () {
|
||||
router.on(() => {
|
||||
router.navigate('/list');
|
||||
});
|
||||
|
||||
gui.render = function () {
|
||||
var timeout;
|
||||
gui.render = function render () {
|
||||
let timeout = false;
|
||||
|
||||
function reset () {
|
||||
timeout = null;
|
||||
}
|
||||
|
||||
if (timeout) {
|
||||
console("skip rendering, because to often");
|
||||
console('skip rendering, because to often');
|
||||
window.clearTimeout(timeout);
|
||||
} else {
|
||||
render();
|
||||
renderView();
|
||||
}
|
||||
timeout = window.setTimeout(reset, 100);
|
||||
timeout = window.setTimeout(reset, GUI_RENDER_DEBOUNCER_TIME);
|
||||
};
|
||||
|
||||
window.onload = gui.render;
|
||||
|
|
|
|||
|
|
@ -1,52 +1,62 @@
|
|||
/* exported guiList */
|
||||
/* global domlib,store,router */
|
||||
|
||||
var guiList = {};
|
||||
const guiList = {};
|
||||
|
||||
(function(){
|
||||
var view = guiList;
|
||||
var container, el;
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
var tbody;
|
||||
var sortReverse = false;
|
||||
var sortIndex;
|
||||
const view = guiList;
|
||||
|
||||
var hostnameFilter, nodeidFilter;
|
||||
let container = null,
|
||||
el = null,
|
||||
tbody = null,
|
||||
sortReverse = false,
|
||||
sortIndex = null,
|
||||
hostnameFilter = null,
|
||||
nodeidFilter = null;
|
||||
|
||||
// eslint-disable-next-line id-length
|
||||
function sort (a, b) {
|
||||
function sortNumber(a,b){
|
||||
return a - b;
|
||||
function sortNumber (aNum, bNum) {
|
||||
return aNum - bNum;
|
||||
}
|
||||
if(sortIndex === undefined)
|
||||
if (!sortIndex) {
|
||||
return a.node_id.localeCompare(b.node_id);
|
||||
}
|
||||
switch (sortIndex.innerHTML) {
|
||||
case "Lastseen":
|
||||
case 'Lastseen':
|
||||
return a.lastseen - b.lastseen;
|
||||
case "CurPower":
|
||||
case 'CurPower':
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return a._wireless.txpower24 - b._wireless.txpower24;
|
||||
case "Power":
|
||||
case 'Power':
|
||||
return a.wireless.txpower24 - b.wireless.txpower24;
|
||||
case "CurChannel":
|
||||
case 'CurChannel':
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
return a._wireless.channel24 - b._wireless.channel24;
|
||||
case "Channel":
|
||||
case 'Channel':
|
||||
return a.wireless.channel24 - b.wireless.channel24;
|
||||
case "Clients":
|
||||
case 'Clients':
|
||||
return a.statistics.clients.wifi24 - b.statistics.clients.wifi24;
|
||||
case "ChanUtil":
|
||||
var aMax = a.statistics.wireless.map(function(d){
|
||||
return d.ChanUtil;
|
||||
}).sort(sortNumber);
|
||||
|
||||
var bMax = b.statistics.wireless.map(function(d){
|
||||
return d.ChanUtil;
|
||||
}).sort(sortNumber);
|
||||
// eslint-disable-next-line no-case-declarations
|
||||
case 'ChanUtil':
|
||||
// eslint-disable-next-line id-length
|
||||
let aMax = a.statistics.wireless.map((d) =>
|
||||
d.ChanUtil
|
||||
).sort(sortNumber),
|
||||
// eslint-disable-next-line id-length
|
||||
bMax = b.statistics.wireless.map((d) =>
|
||||
d.ChanUtil
|
||||
).sort(sortNumber);
|
||||
|
||||
if (!sortReverse) {
|
||||
aMax = aMax.reverse();
|
||||
bMax = bMax.reverse();
|
||||
}
|
||||
|
||||
return bMax[0] - aMax[0];
|
||||
case "Hostname":
|
||||
case 'Hostname':
|
||||
return a.hostname.localeCompare(b.hostname);
|
||||
default:
|
||||
return a.node_id.localeCompare(b.node_id);
|
||||
|
|
@ -54,57 +64,66 @@ var guiList = {};
|
|||
}
|
||||
|
||||
function renderRow (node) {
|
||||
var tr = document.createElement('tr');
|
||||
var startdate = new Date();
|
||||
const startdate = new Date(),
|
||||
tr = document.createElement('tr'),
|
||||
lastseen = domlib.newAt(tr, 'td'),
|
||||
nodeID = domlib.newAt(tr, 'td'),
|
||||
hostname = domlib.newAt(tr, 'td'),
|
||||
freq = domlib.newAt(tr, 'td'),
|
||||
curchannel = domlib.newAt(tr, 'td'),
|
||||
channel = domlib.newAt(tr, 'td'),
|
||||
curpower = domlib.newAt(tr, 'td'),
|
||||
power = domlib.newAt(tr, 'td'),
|
||||
client = domlib.newAt(tr, 'td'),
|
||||
chanUtil = domlib.newAt(tr, 'td'),
|
||||
option = domlib.newAt(tr, 'td'),
|
||||
edit = domlib.newAt(option, 'div');
|
||||
|
||||
startdate.setMinutes(startdate.getMinutes() - 1);
|
||||
if(new Date(node.lastseen) < startdate)
|
||||
if (new Date(node.lastseen) < startdate) {
|
||||
tr.classList.add('offline');
|
||||
}
|
||||
|
||||
domlib.newAt(tr,'td').innerHTML = moment(node.lastseen).fromNow(true);
|
||||
domlib.newAt(tr,'td').innerHTML = node.node_id;
|
||||
lastseen.innerHTML = moment(node.lastseen).fromNow(true);
|
||||
|
||||
domlib.newAt(tr,'td').innerHTML = node.hostname;
|
||||
nodeID.innerHTML = node.node_id;
|
||||
|
||||
hostname.innerHTML = node.hostname;
|
||||
|
||||
var freq = domlib.newAt(tr,'td');
|
||||
domlib.newAt(freq, 'span').innerHTML = '2.4 Ghz';
|
||||
domlib.newAt(freq, 'span').innerHTML = '5 Ghz';
|
||||
|
||||
var curchannel = domlib.newAt(tr,'td');
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
domlib.newAt(curchannel, 'span').innerHTML = node._wireless.channel24 || '-';
|
||||
domlib.newAt(curchannel, 'span').innerHTML = node._wireless.channel5 || '-';
|
||||
/* eslint-enable no-underscore-dangle */
|
||||
|
||||
var channel = domlib.newAt(tr,'td');
|
||||
domlib.newAt(channel, 'span').innerHTML = node.wireless.channel24 || '-';
|
||||
domlib.newAt(channel, 'span').innerHTML = node.wireless.channel5 || '-';
|
||||
|
||||
var curpower = domlib.newAt(tr,'td');
|
||||
/* eslint-disable no-underscore-dangle */
|
||||
domlib.newAt(curpower, 'span').innerHTML = node._wireless.txpower24 || '-';
|
||||
domlib.newAt(curpower, 'span').innerHTML = node._wireless.txpower5 || '-';
|
||||
/* eslint-enable no-underscore-dangle */
|
||||
|
||||
var power = domlib.newAt(tr,'td');
|
||||
domlib.newAt(power, 'span').innerHTML = node.wireless.txpower24 || '-';
|
||||
domlib.newAt(power, 'span').innerHTML = node.wireless.txpower5 || '-';
|
||||
|
||||
var client = domlib.newAt(tr,'td');
|
||||
domlib.newAt(client, 'span').innerHTML = node.statistics.clients.wifi24;
|
||||
domlib.newAt(client, 'span').innerHTML = node.statistics.clients.wifi5;
|
||||
|
||||
var chanUtil = domlib.newAt(tr,'td');
|
||||
var chanUtil24 = node.statistics.wireless.filter(function(d){
|
||||
return d.frequency < 5000;
|
||||
})[0] || {};
|
||||
var chanUtil5 = node.statistics.wireless.filter(function(d){
|
||||
return d.frequency > 5000;
|
||||
})[0] || {};
|
||||
/* eslint-disable id-length, no-magic-numbers,one-var */
|
||||
const chanUtil24 = node.statistics.wireless.filter((d) => d.frequency < 5000)[0] || {},
|
||||
chanUtil5 = node.statistics.wireless.filter((d) => d.frequency > 5000)[0] || {};
|
||||
/* eslint-enable id-length, no-magic-numbers,one-var */
|
||||
|
||||
domlib.newAt(chanUtil, 'span').innerHTML = chanUtil24.ChanUtil || '-';
|
||||
domlib.newAt(chanUtil, 'span').innerHTML = chanUtil5.ChanUtil || '-';
|
||||
|
||||
var option = domlib.newAt(tr,'td');
|
||||
var edit = domlib.newAt(option,'div');
|
||||
edit.classList.add('btn');
|
||||
edit.innerHTML = 'Edit';
|
||||
edit.addEventListener('click',function(){
|
||||
router.navigate(router.generate('node', { nodeID: node.node_id }));
|
||||
edit.addEventListener('click', () => {
|
||||
router.navigate(router.generate('node', {'nodeID': node.node_id}));
|
||||
});
|
||||
|
||||
return tr;
|
||||
|
|
@ -112,125 +131,145 @@ var guiList = {};
|
|||
|
||||
function update () {
|
||||
domlib.removeChildren(tbody);
|
||||
var nodes = store.getNodes();
|
||||
let nodes = store.getNodes();
|
||||
|
||||
if(hostnameFilter && hostnameFilter.value != "")
|
||||
nodes = nodes.filter(function(d){
|
||||
return d.hostname.toLowerCase().indexOf(hostnameFilter.value) > -1;
|
||||
});
|
||||
if(nodeidFilter && nodeidFilter.value != "")
|
||||
nodes = nodes.filter(function(d){
|
||||
return d.node_id.indexOf(nodeidFilter.value) > -1;
|
||||
});
|
||||
if (hostnameFilter && hostnameFilter.value !== '') {
|
||||
// eslint-disable-next-line id-length
|
||||
nodes = nodes.filter((d) => d.hostname.toLowerCase().indexOf(hostnameFilter.value) > -1);
|
||||
}
|
||||
if (nodeidFilter && nodeidFilter.value !== '') {
|
||||
// eslint-disable-next-line id-length
|
||||
nodes = nodes.filter((d) => d.node_id.indexOf(nodeidFilter.value) > -1);
|
||||
}
|
||||
|
||||
nodes = nodes.sort(sort);
|
||||
|
||||
if(sortReverse)
|
||||
if (sortReverse) {
|
||||
nodes = nodes.reverse();
|
||||
}
|
||||
|
||||
for (let i = 0; i < nodes.length; i += 1) {
|
||||
const row = renderRow(nodes[i]);
|
||||
|
||||
for(var i=0; i<nodes.length; i++){
|
||||
var row = renderRow(nodes[i]);
|
||||
tbody.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
function sortTable (head) {
|
||||
if(sortIndex)
|
||||
sortIndex.classList.remove("sort-up","sort-down");
|
||||
sortReverse = head === sortIndex ? !sortReverse : false;
|
||||
if (sortIndex) {
|
||||
sortIndex.classList.remove('sort-up', 'sort-down');
|
||||
}
|
||||
sortReverse = head === sortIndex
|
||||
? !sortReverse
|
||||
: false;
|
||||
sortIndex = head;
|
||||
sortIndex.classList.add(sortReverse ? 'sort-up' : 'sort-down');
|
||||
|
||||
sortIndex.classList.add(sortReverse
|
||||
? 'sort-up'
|
||||
: 'sort-down');
|
||||
|
||||
update();
|
||||
}
|
||||
|
||||
view.bind = function(el) {
|
||||
container = el;
|
||||
view.bind = function bind (bindEl) {
|
||||
container = bindEl;
|
||||
};
|
||||
|
||||
view.render = function(){
|
||||
if (container === undefined){
|
||||
view.render = function render () {
|
||||
if (!container) {
|
||||
return;
|
||||
} else if (el !== undefined){
|
||||
} else if (el) {
|
||||
container.appendChild(el);
|
||||
update();
|
||||
|
||||
return;
|
||||
}
|
||||
console.log("generate new view for list");
|
||||
console.log('generate new view for list');
|
||||
el = domlib.newAt(container, 'div');
|
||||
|
||||
var table = domlib.newAt(el,'table');
|
||||
var thead = domlib.newAt(table,'thead');
|
||||
const table = domlib.newAt(el, 'table'),
|
||||
thead = domlib.newAt(table, 'thead');
|
||||
|
||||
tbody = domlib.newAt(table, 'tbody');
|
||||
|
||||
var tr = domlib.newAt(thead,'tr');
|
||||
// eslint-disable-next-line one-var
|
||||
const tr = domlib.newAt(thead, 'tr'),
|
||||
cell1 = domlib.newAt(tr, 'th'),
|
||||
cell2 = domlib.newAt(tr, 'th'),
|
||||
cell3 = domlib.newAt(tr, 'th'),
|
||||
cell4 = domlib.newAt(tr, 'th'),
|
||||
cell5 = domlib.newAt(tr, 'th'),
|
||||
cell6 = domlib.newAt(tr, 'th'),
|
||||
cell7 = domlib.newAt(tr, 'th'),
|
||||
cell8 = domlib.newAt(tr, 'th'),
|
||||
cell9 = domlib.newAt(tr, 'th'),
|
||||
cell10 = domlib.newAt(tr, 'th'),
|
||||
cell11 = domlib.newAt(tr, 'th');
|
||||
|
||||
var cell1 = domlib.newAt(tr,'th');
|
||||
cell1.innerHTML = "Lastseen";
|
||||
cell1.addEventListener('click', function(){
|
||||
cell1.innerHTML = 'Lastseen';
|
||||
cell1.addEventListener('click', () => {
|
||||
sortTable(cell1);
|
||||
});
|
||||
|
||||
var cell2 = domlib.newAt(tr,'th');
|
||||
cell2.classList.add('sortable');
|
||||
nodeidFilter = domlib.newAt(cell2, 'input');
|
||||
nodeidFilter.setAttribute("placeholder","NodeID");
|
||||
nodeidFilter.setAttribute("size","9");
|
||||
nodeidFilter.setAttribute('placeholder', 'NodeID');
|
||||
nodeidFilter.setAttribute('size', '9');
|
||||
nodeidFilter.addEventListener('keyup', update);
|
||||
cell2.addEventListener('dblclick', function(){
|
||||
cell2.addEventListener('dblclick', () => {
|
||||
sortTable(cell2);
|
||||
});
|
||||
|
||||
var cell3 = domlib.newAt(tr,'th');
|
||||
|
||||
cell3.classList.add('sortable');
|
||||
hostnameFilter = domlib.newAt(cell3, 'input');
|
||||
hostnameFilter.setAttribute("placeholder","Hostname");
|
||||
hostnameFilter.setAttribute('placeholder', 'Hostname');
|
||||
hostnameFilter.addEventListener('keyup', update);
|
||||
cell3.addEventListener('dblclick', function(){
|
||||
cell3.addEventListener('dblclick', () => {
|
||||
sortTable(cell3);
|
||||
});
|
||||
|
||||
domlib.newAt(tr,'th').innerHTML = 'Freq';
|
||||
cell4.innerHTML = 'Freq';
|
||||
|
||||
var cell4 = domlib.newAt(tr,'th');
|
||||
cell4.innerHTML = "CurChannel";
|
||||
cell4.classList.add('sortable');
|
||||
cell4.addEventListener('click', function(){
|
||||
|
||||
cell5.innerHTML = 'CurChannel';
|
||||
cell5.classList.add('sortable');
|
||||
cell5.addEventListener('click', () => {
|
||||
sortTable(cell4);
|
||||
});
|
||||
var cell5 = domlib.newAt(tr,'th');
|
||||
cell5.innerHTML = "Channel";
|
||||
cell5.classList.add('sortable');
|
||||
cell5.addEventListener('click', function(){
|
||||
|
||||
|
||||
cell6.innerHTML = 'Channel';
|
||||
cell6.classList.add('sortable');
|
||||
cell6.addEventListener('click', () => {
|
||||
sortTable(cell5);
|
||||
});
|
||||
|
||||
var cell6 = domlib.newAt(tr,'th');
|
||||
cell6.innerHTML = "CurPower";
|
||||
cell6.classList.add('sortable');
|
||||
cell6.addEventListener('click', function(){
|
||||
cell7.innerHTML = 'CurPower';
|
||||
cell7.classList.add('sortable');
|
||||
cell7.addEventListener('click', () => {
|
||||
sortTable(cell6);
|
||||
});
|
||||
var cell7 = domlib.newAt(tr,'th');
|
||||
cell7.innerHTML = "Power";
|
||||
cell7.classList.add('sortable');
|
||||
cell7.addEventListener('click', function(){
|
||||
|
||||
cell8.innerHTML = 'Power';
|
||||
cell8.classList.add('sortable');
|
||||
cell8.addEventListener('click', () => {
|
||||
sortTable(cell7);
|
||||
});
|
||||
|
||||
var cell8 = domlib.newAt(tr,'th');
|
||||
cell8.innerHTML = "Clients";
|
||||
cell8.classList.add('sortable');
|
||||
cell8.addEventListener('click', function(){
|
||||
|
||||
cell9.innerHTML = 'Clients';
|
||||
cell9.classList.add('sortable');
|
||||
cell9.addEventListener('click', () => {
|
||||
sortTable(cell8);
|
||||
});
|
||||
var cell9 = domlib.newAt(tr,'th');
|
||||
cell9.innerHTML = "ChanUtil";
|
||||
cell9.classList.add('sortable');
|
||||
cell9.addEventListener('click', function(){
|
||||
|
||||
cell10.innerHTML = 'ChanUtil';
|
||||
cell10.classList.add('sortable');
|
||||
cell10.addEventListener('click', () => {
|
||||
sortTable(cell9);
|
||||
});
|
||||
domlib.newAt(tr,'th').innerHTML = "Option";
|
||||
cell11.innerHTML = 'Option';
|
||||
|
||||
table.classList.add('nodes');
|
||||
|
||||
|
|
|
|||
|
|
@ -1,32 +1,50 @@
|
|||
/* exported guiMap */
|
||||
/* global config,store,domlib,socket */
|
||||
|
||||
var guiMap = {};
|
||||
const guiMap = {};
|
||||
|
||||
(function(){
|
||||
var view = guiMap;
|
||||
var container, el;
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
var geoJsonLayer, nodeLayer, clientLayer24, clientLayer5;//, draggingNodeID;
|
||||
const view = guiMap,
|
||||
WINDOW_HEIGHT_MENU = 50;
|
||||
|
||||
let container = null,
|
||||
el = null,
|
||||
|
||||
geoJsonLayer = null,
|
||||
nodeLayer = null,
|
||||
clientLayer24 = null,
|
||||
clientLayer5 = null;
|
||||
// , draggingNodeID=null;
|
||||
|
||||
function addNode (node) {
|
||||
/*
|
||||
https://github.com/Leaflet/Leaflet/issues/4484
|
||||
/* eslint-disable-line https://github.com/Leaflet/Leaflet/issues/4484
|
||||
if(node.node_id === draggingNodeID){
|
||||
return
|
||||
}
|
||||
*/
|
||||
if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
|
||||
|
||||
if (!node.location || !node.location.latitude || !node.location.longitude) {
|
||||
return;
|
||||
}
|
||||
var className = 'node';
|
||||
var startdate = new Date();
|
||||
let className = 'node',
|
||||
wifi24 = '-',
|
||||
wifi5 = '-';
|
||||
const startdate = new Date(),
|
||||
ch24 = node.wireless.channel24 || '-',
|
||||
ch5 = node.wireless.channel5 || '-',
|
||||
tx24 = node.wireless.txpower24 || '-',
|
||||
tx5 = node.wireless.txpower5 || '-';
|
||||
|
||||
startdate.setMinutes(startdate.getMinutes() - 1);
|
||||
if (new Date(node.lastseen) < startdate) {
|
||||
className += ' offline';
|
||||
}
|
||||
var wifi24='-',wifi5='-',ch24='-',ch5='-',tx24='-',tx5='-';
|
||||
|
||||
|
||||
if (node.statistics && node.statistics.clients) {
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
wifi24 = node.statistics.clients.wifi24;
|
||||
|
||||
if (wifi24 < config.map.icon.warn.wifi24 && wifi24 > 0) {
|
||||
|
|
@ -36,9 +54,10 @@ var guiMap = {};
|
|||
} else if (wifi24 >= config.map.icon.crit.wifi24) {
|
||||
className += ' client24-crit';
|
||||
}
|
||||
|
||||
// eslint-disable-next-line prefer-destructuring
|
||||
wifi5 = node.statistics.clients.wifi5;
|
||||
if(config.map.icon.warn.wifi5 < 20 && wifi5 > 0){
|
||||
|
||||
if (wifi5 < config.map.icon.warn.wifi5 && wifi5 > 0) {
|
||||
className += ' client5';
|
||||
} else if (wifi5 < config.map.icon.crit.wifi5 && wifi5 >= config.map.icon.warn.wifi5) {
|
||||
className += ' client5-warn';
|
||||
|
|
@ -47,26 +66,30 @@ var guiMap = {};
|
|||
}
|
||||
}
|
||||
|
||||
var nodemarker = L.marker([node.location.latitude, node.location.longitude], {
|
||||
icon: L.divIcon({className: className}),
|
||||
draggable: true
|
||||
// eslint-disable-next-line one-var
|
||||
const nodemarker = L.marker([node.location.latitude, node.location.longitude], {
|
||||
'draggable': true,
|
||||
'icon': L.divIcon({'className': className})
|
||||
});
|
||||
nodemarker.bindTooltip(node.hostname+' <div class=\'nodeicon-label\'>('+node.node_id+')'+
|
||||
|
||||
nodemarker.bindTooltip(`${node.hostname} <div class='nodeicon-label'>(${node.node_id})` +
|
||||
'<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>'+
|
||||
`<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>'
|
||||
);
|
||||
|
||||
/*
|
||||
nodemarker.on('dragstart',function(){
|
||||
Nodemarker.on('dragstart',function(){
|
||||
draggingNodeID = node.node_id;
|
||||
})
|
||||
*/
|
||||
nodemarker.on('dragend',function(){
|
||||
// draggingNodeID = undefined;
|
||||
var pos = nodemarker.getLatLng();
|
||||
nodemarker.on('dragend', () => {
|
||||
// DraggingNodeID = undefined;
|
||||
const pos = nodemarker.getLatLng();
|
||||
|
||||
node.location = {
|
||||
'latitude': pos.lat,
|
||||
'longitude': pos.lng
|
||||
|
|
@ -80,66 +103,71 @@ var guiMap = {};
|
|||
geoJsonLayer.refresh();
|
||||
nodeLayer.clearLayers();
|
||||
|
||||
var nodes = store.getNodes();
|
||||
for(var i=0; i<nodes.length; i++){
|
||||
const nodes = store.getNodes();
|
||||
|
||||
for (let i = 0; i < nodes.length; i += 1) {
|
||||
addNode(nodes[i]);
|
||||
}
|
||||
|
||||
var clientData24 = nodes.map(function(node){
|
||||
if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
|
||||
return;
|
||||
}
|
||||
return [node.location.latitude,node.location.longitude,node.statistics.clients.wifi24 * 2 || 0];
|
||||
});
|
||||
clientLayer24.setData(clientData24);
|
||||
var clientData5 = nodes.map(function(node){
|
||||
if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
|
||||
return;
|
||||
}
|
||||
return [node.location.latitude,node.location.longitude,node.statistics.clients.wifi5 || 0];
|
||||
});
|
||||
clientLayer5.setData(clientData5);
|
||||
|
||||
clientLayer24.setData(nodes.map((node) => {
|
||||
if (!node.location || !node.location.latitude || !node.location.longitude) {
|
||||
return null;
|
||||
}
|
||||
|
||||
view.bind = function(el) {
|
||||
container = el;
|
||||
return [node.location.latitude, node.location.longitude, node.statistics.clients.wifi24 || 0];
|
||||
}));
|
||||
|
||||
clientLayer5.setData(nodes.map((node) => {
|
||||
if (!node.location || !node.location.latitude || !node.location.longitude) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return [node.location.latitude, node.location.longitude, node.statistics.clients.wifi5 || 0];
|
||||
}));
|
||||
}
|
||||
|
||||
view.bind = function bind (bindEl) {
|
||||
container = bindEl;
|
||||
};
|
||||
|
||||
view.render = function render () {
|
||||
if (container === undefined){
|
||||
if (!container) {
|
||||
return;
|
||||
} else if (el !== undefined){
|
||||
} else if (el) {
|
||||
container.appendChild(el);
|
||||
update();
|
||||
|
||||
return;
|
||||
}
|
||||
console.log("generate new view for map");
|
||||
console.log('generate new view for map');
|
||||
el = domlib.newAt(container, 'div');
|
||||
|
||||
el.style.height = (window.innerHeight - 50 )+"px";
|
||||
el.style.height = `${window.innerHeight - WINDOW_HEIGHT_MENU}px`;
|
||||
|
||||
var map = L.map(el).setView(config.map.view.bound, config.map.view.zoom);
|
||||
const map = L.map(el).setView(config.map.view.bound, config.map.view.zoom),
|
||||
layerControl = L.control.layers().addTo(map);
|
||||
|
||||
L.tileLayer(config.map.tileLayer, {
|
||||
maxZoom: config.map.maxZoom,
|
||||
'maxZoom': config.map.maxZoom
|
||||
}).addTo(map);
|
||||
|
||||
var layerControl = L.control.layers().addTo(map);
|
||||
|
||||
|
||||
geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson);
|
||||
|
||||
nodeLayer = L.layerGroup();
|
||||
/* eslint-disable new-cap */
|
||||
clientLayer24 = new L.webGLHeatmap(config.map.heatmap.wifi24);
|
||||
clientLayer5 = new L.webGLHeatmap(config.map.heatmap.wifi5);
|
||||
/* eslint-enable new-cap */
|
||||
layerControl.addOverlay(geoJsonLayer, 'geojson');
|
||||
layerControl.addOverlay(nodeLayer, 'Nodes');
|
||||
layerControl.addOverlay(clientLayer24, 'Clients 2.4 Ghz');
|
||||
layerControl.addOverlay(clientLayer5, 'Clients 5 Ghz');
|
||||
nodeLayer.addTo(map);
|
||||
|
||||
window.addEventListener("resize",function(){
|
||||
el.style.height = (window.innerHeight - 50 )+"px";
|
||||
window.addEventListener('resize', () => {
|
||||
el.style.height = `${window.innerHeight - WINDOW_HEIGHT_MENU}px`;
|
||||
map.invalidateSize();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,58 @@
|
|||
/* exported guiNode */
|
||||
/* globals store, socket, domlib, config,notify */
|
||||
var guiNode = {};
|
||||
|
||||
(function(){
|
||||
var view = guiNode;
|
||||
var container, el;
|
||||
const guiNode = {};
|
||||
|
||||
var titleName,titleID,ago;
|
||||
var marker, map, geoJsonLayer;
|
||||
var btnGPS, editLocationGPS, storePosition;
|
||||
var current_node_id, editing = false;
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
const view = guiNode;
|
||||
|
||||
let container = null,
|
||||
el = null,
|
||||
|
||||
titleName = null,
|
||||
titleID = null,
|
||||
ago = null,
|
||||
|
||||
marker = null,
|
||||
map = null,
|
||||
geoJsonLayer = null,
|
||||
btnGPS = null,
|
||||
|
||||
editLocationGPS = null,
|
||||
storePosition = null,
|
||||
currentNodeID = null,
|
||||
editing = false;
|
||||
|
||||
function updatePosition (lat, lng) {
|
||||
if(!lat || !lng) {
|
||||
lat = storePosition.latitude || false;
|
||||
lng = storePosition.longitude || false;
|
||||
if(!lat || !lng)
|
||||
const node = store.getNode(currentNodeID),
|
||||
newLat = lat || storePosition.latitude || false,
|
||||
newlng = lng || storePosition.longitude || false;
|
||||
|
||||
if (!newLat || !newlng) {
|
||||
return;
|
||||
}
|
||||
var node = store.getNode(current_node_id);
|
||||
node.location = {latitude:lat,longitude:lng};
|
||||
|
||||
node.location = {
|
||||
'latitude': newLat,
|
||||
'longitude': newlng
|
||||
};
|
||||
socket.sendnode(node);
|
||||
}
|
||||
|
||||
function update () {
|
||||
geoJsonLayer.refresh();
|
||||
titleID.innerHTML = current_node_id;
|
||||
var node = store.getNode(current_node_id);
|
||||
if(node === undefined){
|
||||
console.log("node not found: "+current_node_id);
|
||||
titleID.innerHTML = currentNodeID;
|
||||
const node = store.getNode(currentNodeID),
|
||||
startdate = new Date();
|
||||
|
||||
if (!node) {
|
||||
console.log(`node not found: ${currentNodeID}`);
|
||||
|
||||
return;
|
||||
}
|
||||
var startdate = new Date();
|
||||
|
||||
startdate.setMinutes(startdate.getMinutes() - 1);
|
||||
if (new Date(node.lastseen) < startdate) {
|
||||
ago.classList.add('offline');
|
||||
|
|
@ -40,103 +61,119 @@ var guiNode = {};
|
|||
ago.classList.remove('offline');
|
||||
ago.classList.add('online');
|
||||
}
|
||||
ago.innerHTML = moment(node.lastseen).fromNow() + ' ('+node.lastseen+')';
|
||||
if(editLocationGPS || editing || node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
|
||||
ago.innerHTML = `${moment(node.lastseen).fromNow()} (${node.lastseen})`;
|
||||
if (editLocationGPS || editing || !node.location || !node.location.latitude || !node.location.longitude) {
|
||||
return;
|
||||
}
|
||||
titleName.innerHTML = node.hostname;
|
||||
var latlng = [node.location.latitude,node.location.longitude];
|
||||
// eslint-disable-next-line one-var
|
||||
const latlng = [node.location.latitude, node.location.longitude];
|
||||
|
||||
map.setView(latlng);
|
||||
marker.setLatLng(latlng);
|
||||
marker.setOpacity(1);
|
||||
}
|
||||
|
||||
view.setNodeID = function (nodeID){
|
||||
current_node_id = nodeID;
|
||||
view.setNodeID = function setNodeID (nodeID) {
|
||||
currentNodeID = nodeID;
|
||||
};
|
||||
|
||||
view.bind = function(el) {
|
||||
container = el;
|
||||
view.bind = function bind (bindEl) {
|
||||
container = bindEl;
|
||||
};
|
||||
|
||||
view.render = function render () {
|
||||
if (container === undefined){
|
||||
if (!container) {
|
||||
return;
|
||||
} else if (el !== undefined){
|
||||
} else if (el) {
|
||||
container.appendChild(el);
|
||||
update();
|
||||
|
||||
return;
|
||||
}
|
||||
console.log("generate new view for node");
|
||||
console.log('generate new view for node');
|
||||
el = domlib.newAt(container, 'div');
|
||||
|
||||
var title = domlib.newAt(el,'h1');
|
||||
const title = domlib.newAt(el, 'h1'),
|
||||
lastseen = domlib.newAt(el, 'p'),
|
||||
mapEl = domlib.newAt(el, 'div');
|
||||
|
||||
titleName = domlib.newAt(title, 'span');
|
||||
title.appendChild(document.createTextNode(" - "));
|
||||
title.appendChild(document.createTextNode(' - '));
|
||||
titleID = domlib.newAt(title, 'i');
|
||||
|
||||
var lastseen = domlib.newAt(el,'p');
|
||||
domlib.newAt(lastseen,'span').innerHTML = "Lastseen: ";
|
||||
|
||||
domlib.newAt(lastseen, 'span').innerHTML = 'Lastseen: ';
|
||||
ago = domlib.newAt(lastseen, 'span');
|
||||
|
||||
var mapEl = domlib.newAt(el,'div');
|
||||
|
||||
mapEl.style.height = '300px';
|
||||
map = L.map(mapEl).setView(config.map.view.bound, config.map.view.zoom);
|
||||
|
||||
L.tileLayer(config.map.tileLayer, {
|
||||
maxZoom: config.map.maxZoom,
|
||||
'maxZoom': config.map.maxZoom
|
||||
}).addTo(map);
|
||||
geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson).addTo(map);
|
||||
|
||||
marker = L.marker(config.map.view.bound,{draggable:true,opacity:0.5}).addTo(map);
|
||||
marker.on('dragstart', function(){
|
||||
geoJsonLayer = L.geoJson.ajax(config.map.geojson.url,
|
||||
config.map.geojson);
|
||||
geoJsonLayer.addTo(map);
|
||||
|
||||
marker = L.marker(config.map.view.bound, {'draggable': true,
|
||||
'opacity': 0.5}).addTo(map);
|
||||
|
||||
marker.on('dragstart', () => {
|
||||
editing = true;
|
||||
});
|
||||
marker.on('dragend', function(){
|
||||
|
||||
marker.on('dragend', () => {
|
||||
editing = false;
|
||||
var pos = marker.getLatLng();
|
||||
const pos = marker.getLatLng();
|
||||
|
||||
updatePosition(pos.lat, pos.lng);
|
||||
});
|
||||
|
||||
|
||||
btnGPS = domlib.newAt(el, 'span');
|
||||
btnGPS.classList.add('btn');
|
||||
btnGPS.innerHTML = "Start follow position";
|
||||
btnGPS.addEventListener('click',function(){
|
||||
btnGPS.innerHTML = 'Start follow position';
|
||||
btnGPS.addEventListener('click', () => {
|
||||
if (editLocationGPS) {
|
||||
if(btnGPS.innerHTML == "Stop following")
|
||||
if (btnGPS.innerHTML === 'Stop following') {
|
||||
updatePosition();
|
||||
btnGPS.innerHTML = "Start follow position";
|
||||
}
|
||||
btnGPS.innerHTML = 'Start follow position';
|
||||
navigator.geolocation.clearWatch(editLocationGPS);
|
||||
editLocationGPS = false;
|
||||
|
||||
return;
|
||||
}
|
||||
btnGPS.innerHTML = 'Following position';
|
||||
if (navigator.geolocation !== undefined)
|
||||
editLocationGPS = navigator.geolocation.watchPosition(
|
||||
function geo_success(position) {
|
||||
btnGPS.innerHTML = "Stop following";
|
||||
if (navigator.geolocation) {
|
||||
editLocationGPS = navigator.geolocation.watchPosition((position) => {
|
||||
btnGPS.innerHTML = 'Stop following';
|
||||
storePosition = position.coords;
|
||||
var latlng = [position.coords.latitude, position.coords.longitude];
|
||||
const latlng = [position.coords.latitude, position.coords.longitude];
|
||||
|
||||
marker.setLatLng(latlng);
|
||||
map.setView(latlng);
|
||||
},
|
||||
function geo_error(error) {
|
||||
}, (error) => {
|
||||
switch (error.code) {
|
||||
case error.TIMEOUT:
|
||||
notify.send("error","Find Location timeout");
|
||||
notify.send('error', 'Find Location timeout');
|
||||
break;
|
||||
default:
|
||||
console.error('a navigator geolocation error: ', error);
|
||||
}
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true,
|
||||
maximumAge: 30000,
|
||||
timeout: 27000
|
||||
'enableHighAccuracy': true,
|
||||
'maximumAge': 30000,
|
||||
'timeout': 27000
|
||||
});
|
||||
else
|
||||
notify.send("error","Browser did not support Location");
|
||||
} else {
|
||||
notify.send('error', 'Browser did not support Location');
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
update();
|
||||
};
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,26 +1,31 @@
|
|||
/* exported guiSkel */
|
||||
/* globals domlib */
|
||||
var guiSkel = {};
|
||||
const guiSkel = {};
|
||||
|
||||
(function(){
|
||||
var view = guiSkel;
|
||||
var container, el;
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
const view = guiSkel;
|
||||
let container = null,
|
||||
el = null;
|
||||
|
||||
function update () {
|
||||
console.warn('Do not run dummies');
|
||||
}
|
||||
|
||||
view.bind = function(el) {
|
||||
container = el;
|
||||
view.bind = function bind (bindEl) {
|
||||
container = bindEl;
|
||||
};
|
||||
view.render = function render () {
|
||||
if (container === undefined){
|
||||
if (!container) {
|
||||
return;
|
||||
} else if (el !== undefined){
|
||||
} else if (el) {
|
||||
container.appendChild(el);
|
||||
update();
|
||||
|
||||
return;
|
||||
}
|
||||
console.log("generate new view for skel");
|
||||
console.log('generate new view for skel');
|
||||
el = domlib.newAt(container, 'div');
|
||||
|
||||
update();
|
||||
|
|
|
|||
|
|
@ -1,12 +1,20 @@
|
|||
/* exported guiStats */
|
||||
/* globals store, domlib */
|
||||
var guiStats = {};
|
||||
const guiStats = {};
|
||||
|
||||
(function(){
|
||||
var view = guiStats;
|
||||
var container, el;
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
var nodes, clients, clientsWifi,clientsWifi24, clientsWifi5;
|
||||
const view = guiStats;
|
||||
|
||||
let container = null,
|
||||
el = null,
|
||||
|
||||
nodes = null,
|
||||
clients = null,
|
||||
clientsWifi = null,
|
||||
clientsWifi24 = null,
|
||||
clientsWifi5 = null;
|
||||
|
||||
function update () {
|
||||
nodes.innerHTML = store.stats.Nodes;
|
||||
|
|
@ -16,43 +24,45 @@ var guiStats = {};
|
|||
clientsWifi5.innerHTML = store.stats.ClientsWifi5;
|
||||
}
|
||||
|
||||
view.bind = function(el) {
|
||||
container = el;
|
||||
view.bind = function bind (bindEl) {
|
||||
container = bindEl;
|
||||
};
|
||||
view.render = function(){
|
||||
if (container === undefined){
|
||||
|
||||
view.render = function render () {
|
||||
if (!container) {
|
||||
return;
|
||||
} else if (el !== undefined){
|
||||
} else if (el) {
|
||||
container.appendChild(el);
|
||||
update();
|
||||
|
||||
return;
|
||||
}
|
||||
console.log("generate new view for stats");
|
||||
console.log('generate new view for stats');
|
||||
el = domlib.newAt(container, 'div');
|
||||
domlib.newAt(el,'h1').innerHTML = "Statistics";
|
||||
domlib.newAt(el, 'h1').innerHTML = 'Statistics';
|
||||
|
||||
var table = domlib.newAt(el,'table');
|
||||
table.classList.add("stats");
|
||||
const table = domlib.newAt(el, 'table');
|
||||
|
||||
var tr,title;
|
||||
table.classList.add('stats');
|
||||
|
||||
tr = domlib.newAt(table,'tr');
|
||||
let tr = domlib.newAt(table, 'tr'),
|
||||
title = domlib.newAt(tr, 'th');
|
||||
title.innerHTML = "Nodes";
|
||||
title.setAttribute("colspan","2");
|
||||
|
||||
title.innerHTML = 'Nodes';
|
||||
title.setAttribute('colspan', '2');
|
||||
nodes = domlib.newAt(tr, 'td');
|
||||
|
||||
tr = domlib.newAt(table, 'tr');
|
||||
title = domlib.newAt(tr, 'th');
|
||||
title.innerHTML = "Clients";
|
||||
title.setAttribute("colspan","2");
|
||||
title.innerHTML = 'Clients';
|
||||
title.setAttribute('colspan', '2');
|
||||
clients = domlib.newAt(tr, 'td');
|
||||
|
||||
tr = domlib.newAt(table, 'tr');
|
||||
tr.classList.add("line");
|
||||
domlib.newAt(tr,'th').innerHTML = "Wifi";
|
||||
domlib.newAt(tr,'th').innerHTML = "2.4 Ghz";
|
||||
domlib.newAt(tr,'th').innerHTML = "5 Ghz";
|
||||
tr.classList.add('line');
|
||||
domlib.newAt(tr, 'th').innerHTML = 'Wifi';
|
||||
domlib.newAt(tr, 'th').innerHTML = '2.4 Ghz';
|
||||
domlib.newAt(tr, 'th').innerHTML = '5 Ghz';
|
||||
|
||||
tr = domlib.newAt(table, 'tr');
|
||||
clientsWifi = domlib.newAt(tr, 'td');
|
||||
|
|
|
|||
|
|
@ -1,27 +1,34 @@
|
|||
/* exported notify */
|
||||
|
||||
var notify = {};
|
||||
const notify = {};
|
||||
|
||||
(function(){
|
||||
var container;
|
||||
var messages = [];
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
if ("Notification" in window) {
|
||||
const DELAY_OF_NOTIFY = 15000,
|
||||
MAX_MESSAGE_SHOW = 10,
|
||||
messages = [];
|
||||
|
||||
let container = null;
|
||||
|
||||
if ('Notification' in window) {
|
||||
window.Notification.requestPermission();
|
||||
}
|
||||
|
||||
function removeLast () {
|
||||
messages.splice(0, 1);
|
||||
if(container!==undefined && container.firstElementChild)
|
||||
if (container && container.firstElementChild) {
|
||||
container.removeChild(container.firstElementChild);
|
||||
}
|
||||
}
|
||||
|
||||
function renderMsg (msg) {
|
||||
var msgBox = document.createElement('div');
|
||||
msgBox.classList.add("notify",msg.type);
|
||||
const msgBox = document.createElement('div');
|
||||
|
||||
msgBox.classList.add('notify', msg.type);
|
||||
msgBox.innerHTML = msg.text;
|
||||
container.appendChild(msgBox);
|
||||
msgBox.addEventListener('click', function(){
|
||||
msgBox.addEventListener('click', () => {
|
||||
container.removeChild(msgBox);
|
||||
if (messages.indexOf(msg) !== -1) {
|
||||
messages.splice(messages.indexOf(msg), 1);
|
||||
|
|
@ -29,23 +36,32 @@ var notify = {};
|
|||
});
|
||||
}
|
||||
|
||||
window.setInterval(removeLast,15000);
|
||||
window.setInterval(removeLast, DELAY_OF_NOTIFY);
|
||||
|
||||
notify.bind = function(el) {
|
||||
notify.bind = function bind (el) {
|
||||
container = el;
|
||||
};
|
||||
|
||||
notify.send = function(type, text){
|
||||
if("Notification" in window && window.Notification.permission === "granted") {
|
||||
new window.Notification(text,{body:type,icon:'/img/logo.jpg'});
|
||||
notify.send = function send (type, text) {
|
||||
if ('Notification' in window &&
|
||||
window.Notification.permission === 'granted') {
|
||||
// eslint-disable-next-line no-new
|
||||
new window.Notification(text, {
|
||||
'body': type,
|
||||
'icon': '/img/logo.jpg'
|
||||
});
|
||||
|
||||
return;
|
||||
}
|
||||
if(messages.length > 10){
|
||||
if (messages.length > MAX_MESSAGE_SHOW) {
|
||||
removeLast();
|
||||
}
|
||||
var msg = {type:type,text:text};
|
||||
const msg = {
|
||||
'text': text,
|
||||
'type': type
|
||||
};
|
||||
|
||||
messages.push(msg);
|
||||
renderMsg(msg);
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
|
|||
|
|
@ -1,13 +1,17 @@
|
|||
/* exported socket */
|
||||
/* globals notify,gui,store,config*/
|
||||
var socket = {readyState:0};
|
||||
let socket = {'readyState': 0};
|
||||
|
||||
(function(){
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
const RECONNECT_AFTER = 5000;
|
||||
|
||||
function onerror (err) {
|
||||
console.warn(err);
|
||||
// eslint-disable-next-line no-magic-numbers
|
||||
if (socket.readyState !== 3) {
|
||||
notify.send("error","Es gibt Übertragungsprobleme!");
|
||||
notify.send('error', 'Es gibt Übertragungsprobleme!');
|
||||
gui.render();
|
||||
}
|
||||
}
|
||||
|
|
@ -16,39 +20,48 @@ var socket = {readyState:0};
|
|||
gui.render();
|
||||
}
|
||||
|
||||
function onmessage(e) {
|
||||
var msg = JSON.parse(e.data);
|
||||
function onmessage (raw) {
|
||||
const msg = JSON.parse(raw.data);
|
||||
|
||||
switch (msg.type) {
|
||||
case "current":
|
||||
case 'current':
|
||||
store.updateNode(msg.node, true);
|
||||
break;
|
||||
case "to-update":
|
||||
case 'to-update':
|
||||
store.updateNode(msg.node);
|
||||
break;
|
||||
case "stats":
|
||||
case 'stats':
|
||||
if (msg.body) {
|
||||
store.stats = msg.body;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
notify.send("warn","unable to identify message: "+e);
|
||||
notify.send('warn', `unable to identify message: ${raw}`);
|
||||
break;
|
||||
}
|
||||
gui.render();
|
||||
}
|
||||
|
||||
function onclose () {
|
||||
console.log("socket closed by server");
|
||||
notify.send("warn","Es besteht ein Verbindungsproblem!");
|
||||
console.log('socket closed by server');
|
||||
notify.send('warn', 'Es besteht ein Verbindungsproblem!');
|
||||
gui.render();
|
||||
window.setTimeout(connect, 5000);
|
||||
// eslint-disable-next-line no-use-before-define
|
||||
window.setTimeout(connect, RECONNECT_AFTER);
|
||||
}
|
||||
|
||||
function sendnode (node) {
|
||||
var msg = {type:"to-update",node:node};
|
||||
var string = JSON.stringify(msg);
|
||||
socket.send(string);
|
||||
notify.send("success","Node '"+node.node_id+"' mit neuen Werten wurde übermittelt.");
|
||||
const notifyMsg = `Einstellungen für '${node.node_id}' gespeichert.`,
|
||||
socketMsg = JSON.stringify({
|
||||
'node': node,
|
||||
'type': 'to-update'
|
||||
});
|
||||
|
||||
|
||||
socket.send(socketMsg);
|
||||
|
||||
|
||||
notify.send('success', notifyMsg);
|
||||
}
|
||||
|
||||
function connect () {
|
||||
|
|
|
|||
|
|
@ -1,38 +1,52 @@
|
|||
/* exported store */
|
||||
|
||||
var store = {
|
||||
_list:{},
|
||||
_toupdate:{},
|
||||
stats:{"Clients":0,"ClientsWifi":0,"ClientsWifi24":0,"ClientsWifi5":0,"Gateways":0,"Nodes":0,"Firmwares":{},"Models":{}}
|
||||
|
||||
const store = {
|
||||
'stats': {
|
||||
'Clients': 0,
|
||||
'ClientsWifi': 0,
|
||||
'ClientsWifi24': 0,
|
||||
'ClientsWifi5': 0,
|
||||
'Firmwares': {},
|
||||
'Gateways': 0,
|
||||
'Models': {},
|
||||
'Nodes': 0
|
||||
}
|
||||
};
|
||||
|
||||
(function(){
|
||||
(function init () {
|
||||
'use strict';
|
||||
|
||||
const list = {},
|
||||
toupdate = {};
|
||||
|
||||
function getNode (nodeid) {
|
||||
var node;
|
||||
if (store._toupdate[nodeid]) {
|
||||
node = store._toupdate[nodeid];
|
||||
} else if (store._list[nodeid]){
|
||||
node = store._list[nodeid];
|
||||
let node = {};
|
||||
|
||||
if (toupdate[nodeid]) {
|
||||
node = toupdate[nodeid];
|
||||
} else if (list[nodeid]) {
|
||||
node = list[nodeid];
|
||||
} else {
|
||||
return;
|
||||
return null;
|
||||
}
|
||||
node._wireless = store._list[nodeid].wireless;
|
||||
// eslint-disable-next-line no-underscore-dangle
|
||||
node._wireless = list[nodeid].wireless;
|
||||
|
||||
return node;
|
||||
}
|
||||
|
||||
store.updateNode = function updateReal(node, real){
|
||||
store.updateNode = function updateNode (node, real) {
|
||||
if (real) {
|
||||
store._list[node.node_id] = node;
|
||||
list[node.node_id] = node;
|
||||
} else {
|
||||
store._toupdate[node.node_id] = node;
|
||||
toupdate[node.node_id] = node;
|
||||
}
|
||||
};
|
||||
|
||||
store.getNode = getNode;
|
||||
|
||||
store.getNodes = function() {
|
||||
return Object.keys(store._list).map(getNode);
|
||||
store.getNodes = function getNodes () {
|
||||
return Object.keys(list).map(getNode);
|
||||
};
|
||||
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue