ffhb/freifunkmanager
ffhb
/
freifunkmanager
mirror of https://github.com/FreifunkBremen/freifunkmanager.git
1
0
Fork 0
Code Issues Releases Wiki Activity

eslint all (with some exludes)

This commit is contained in:
Martin Geno 2017-05-16 19:18:35 +02:00
parent d3fcd7f232
commit a4045b50a6
No known key found for this signature in database
GPG Key ID: F0D39A37E925E941
15 changed files with 1180 additions and 924 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
webroot/.eslintrc Normal file
View File

@ -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,
}
}

1
webroot/index.html
View File

@ -28,7 +28,6 @@
<body> <body>
<header> <header>
<nav> <nav>
<ul> <ul>
<li class="logo"><img src="/img/logo.jpg"></li> <li class="logo"><img src="/img/logo.jpg"></li>
<li class="item-1"><a href="#/list">List</a></li> <li class="item-1"><a href="#/list">List</a></li>

112
webroot/js/config.js
View File

@ -1,60 +1,88 @@
/* exported config */ /* exported config */
var config = { /* eslint no-magic-numbers: "off"*/
title: 'FreifunkManager - Breminale', /* eslint sort-keys: "off"*/
backend: 'ws://'+location.host+'/websocket',
map: { const config = {
view: {bound: [53.07093, 8.79464], zoom: 17}, 'title': 'FreifunkManager - Breminale',
maxZoom: 20, 'backend': `ws://${location.host}/websocket`,
tileLayer: 'https://tiles.bremen.freifunk.net/{z}/{x}/{y}.png', 'map': {
/* heatmap settings '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) size: in meters (default: 30km)
opacity: in percent/100 (default: 1) opacity: in percent/100 (default: 1)
gradientTexture: url-to-texture-image (default: false) gradientTexture: url-to-texture-image (default: false)
alphaRange: change transparency in heatmap (default: 1) alphaRange: change transparency in heatmap (default: 1)
autoresize: resize heatmap when map size changes (default: false) autoresize: resize heatmap when map size changes (default: false)
*/ */
heatmap: { 'heatmap': {
wifi24: {size: 230, opacity: 0.5, alphaRange: 1}, 'wifi24': {
wifi5: {size: 230, opacity: 0.5, alphaRange: 1} 'size': 230,
'opacity': 0.5,
'alphaRange': 1
}, },
icon:{ 'wifi5': {
warn:{wifi24:20,wifi5:20}, 'size': 230,
crit:{wifi24:30,wifi5:30} 'opacity': 0.5,
'alphaRange': 1
}
}, },
geojson: { 'icon': {
url: 'http://events.ffhb.de/data/ground.geojson', 'warn': {
pointToLayer: function (feature, latlng){ '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; feature.properties.radius = 10;
return L.circleMarker(latlng, feature.properties); return L.circleMarker(latlng, feature.properties);
}, },
onEachFeature: function(feature, layer) { 'onEachFeature': function onEachFeature (feature, layer) {
if(feature.properties.name.length >0){ 'use strict';
if (feature.properties.name.length > 0) {
layer.bindTooltip(feature.properties.name); layer.bindTooltip(feature.properties.name);
} }
}, },
style: function(feature){ 'style': function style (feature) {
if(feature.geometry.type === 'LineString' || feature.geometry.type === 'Polygon'){ 'use strict';
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'
};
}
return {
color: feature.properties['marker-color'],
fillColor: feature.properties['marker-color'],
fillOpacity: 0.2,
weight: 2,
stroke: true
};
}
}
},
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'
};
}
return {
'color': feature.properties['marker-color'],
'fillColor': feature.properties['marker-color'],
'fillOpacity': 0.2,
'weight': 2,
'stroke': true
};
}
}
}
}; };

20
webroot/js/domlib.js
View File

@ -1,16 +1,22 @@
/* exported domlin */ /* exported domlin */
var domlib = {}; const domlib = {};
(function(){
domlib.newAt = function(at,eltype) { (function init () {
var el = document.createElement(eltype); 'use strict';
domlib.newAt = function newAt (at, eltype) {
const el = document.createElement(eltype);
at.appendChild(el); at.appendChild(el);
return el; return el;
}; };
domlib.removeChildren = function(el) { domlib.removeChildren = function removeChildren (el) {
if(el) if (el) {
while(el.firstChild) { while (el.firstChild) {
el.removeChild(el.firstChild); el.removeChild(el.firstChild);
} }
}
}; };
})(); })();

86
webroot/js/gui.js
View File

@ -1,73 +1,99 @@
/* exported gui,router */ /* exported gui,router */
/* globals socket,notify,domlib,guiList,guiMap,guiStats,guiNode */ /* globals socket,notify,domlib,guiList,guiMap,guiStats,guiNode */
var gui = {};
var router = new Navigo(null, true, '#');
(function(){ const gui = {},
var currentView = {bind:function(){},render:function(){}}; 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; return;
} }
status.classList.remove('connecting','offline'); status.classList.remove('connecting', 'offline');
if(socket.readyState !== 1){ 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]); notify.bind(document.getElementsByClassName('notifications')[0]);
currentView.render(); currentView.render();
router.resolve(); router.resolve();
} }
function setView(c){ function setView (toView) {
currentView = c; currentView = toView;
var main = document.querySelector('main'); const main = document.querySelector('main');
domlib.removeChildren(main); domlib.removeChildren(main);
currentView.bind(main); currentView.bind(main);
currentView.render(); currentView.render();
} }
router.on({ router.on({
'/list': function () { '/list': function routerList () {
setView(guiList); setView(guiList);
}, },
'/map':function(){ '/map': function routerMap () {
setView(guiMap); setView(guiMap);
}, },
'/statistics':function(){
setView(guiStats);
},
'/n/:nodeID': { '/n/:nodeID': {
as: 'node', 'as': 'node',
uses: function (params) { // eslint-disable-next-line func-name-matching
guiNode.setNodeID(params['nodeID'].toLowerCase()); 'uses': function routerNode (params) {
guiNode.setNodeID(params.nodeID.toLowerCase());
setView(guiNode); setView(guiNode);
} }
}, },
'/statistics': function routerStats () {
setView(guiStats);
}
}); });
router.on(function () { router.on(() => {
router.navigate('/list'); router.navigate('/list');
}); });
gui.render = function () { gui.render = function render () {
var timeout; let timeout = false;
function reset () { function reset () {
timeout = null; timeout = null;
} }
if (timeout){ if (timeout) {
console("skip rendering, because to often"); console('skip rendering, because to often');
window.clearTimeout(timeout); window.clearTimeout(timeout);
} else { } else {
render(); renderView();
} }
timeout = window.setTimeout(reset, 100); timeout = window.setTimeout(reset, GUI_RENDER_DEBOUNCER_TIME);
}; };
window.onload = gui.render; window.onload = gui.render;

305
webroot/js/gui_list.js
View File

@ -1,236 +1,275 @@
/* exported guiList */ /* exported guiList */
/* global domlib,store,router */ /* global domlib,store,router */
var guiList = {}; const guiList = {};
(function(){ (function init () {
var view = guiList; 'use strict';
var container, el;
var tbody; const view = guiList;
var sortReverse = false;
var sortIndex;
var hostnameFilter, nodeidFilter; let container = null,
el = null,
tbody = null,
sortReverse = false,
sortIndex = null,
hostnameFilter = null,
nodeidFilter = null;
function sort(a,b){ // eslint-disable-next-line id-length
function sortNumber(a,b){ function sort (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); return a.node_id.localeCompare(b.node_id);
}
switch (sortIndex.innerHTML) { switch (sortIndex.innerHTML) {
case "Lastseen": case 'Lastseen':
return a.lastseen - b.lastseen; return a.lastseen - b.lastseen;
case "CurPower": case 'CurPower':
// eslint-disable-next-line no-underscore-dangle
return a._wireless.txpower24 - b._wireless.txpower24; return a._wireless.txpower24 - b._wireless.txpower24;
case "Power": case 'Power':
return a.wireless.txpower24 - b.wireless.txpower24; 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; return a._wireless.channel24 - b._wireless.channel24;
case "Channel": case 'Channel':
return a.wireless.channel24 - b.wireless.channel24; return a.wireless.channel24 - b.wireless.channel24;
case "Clients": case 'Clients':
return a.statistics.clients.wifi24 - b.statistics.clients.wifi24; return a.statistics.clients.wifi24 - b.statistics.clients.wifi24;
case "ChanUtil": // eslint-disable-next-line no-case-declarations
var aMax = a.statistics.wireless.map(function(d){ case 'ChanUtil':
return d.ChanUtil; // eslint-disable-next-line id-length
}).sort(sortNumber); 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);
var bMax = b.statistics.wireless.map(function(d){ if (!sortReverse) {
return d.ChanUtil;
}).sort(sortNumber);
if(!sortReverse){
aMax = aMax.reverse(); aMax = aMax.reverse();
bMax = bMax.reverse(); bMax = bMax.reverse();
} }
return bMax[0] - aMax[0]; return bMax[0] - aMax[0];
case "Hostname": case 'Hostname':
return a.hostname.localeCompare(b.hostname); return a.hostname.localeCompare(b.hostname);
default: default:
return a.node_id.localeCompare(b.node_id); return a.node_id.localeCompare(b.node_id);
} }
} }
function renderRow(node){ function renderRow (node) {
var tr = document.createElement('tr'); const startdate = new Date(),
var 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); startdate.setMinutes(startdate.getMinutes() - 1);
if(new Date(node.lastseen) < startdate) if (new Date(node.lastseen) < startdate) {
tr.classList.add('offline'); tr.classList.add('offline');
}
domlib.newAt(tr,'td').innerHTML = moment(node.lastseen).fromNow(true); lastseen.innerHTML = moment(node.lastseen).fromNow(true);
domlib.newAt(tr,'td').innerHTML = node.node_id;
domlib.newAt(tr,'td').innerHTML = node.hostname; nodeID.innerHTML = node.node_id;
var freq = domlib.newAt(tr,'td'); hostname.innerHTML = node.hostname;
domlib.newAt(freq,'span').innerHTML = '2.4 Ghz';
domlib.newAt(freq,'span').innerHTML = '5 Ghz';
var curchannel = domlib.newAt(tr,'td'); domlib.newAt(freq, 'span').innerHTML = '2.4 Ghz';
domlib.newAt(curchannel,'span').innerHTML = node._wireless.channel24||'-'; domlib.newAt(freq, 'span').innerHTML = '5 Ghz';
domlib.newAt(curchannel,'span').innerHTML = node._wireless.channel5||'-';
var channel = domlib.newAt(tr,'td'); /* eslint-disable no-underscore-dangle */
domlib.newAt(channel,'span').innerHTML = node.wireless.channel24||'-'; domlib.newAt(curchannel, 'span').innerHTML = node._wireless.channel24 || '-';
domlib.newAt(channel,'span').innerHTML = node.wireless.channel5||'-'; domlib.newAt(curchannel, 'span').innerHTML = node._wireless.channel5 || '-';
/* eslint-enable no-underscore-dangle */
var curpower = domlib.newAt(tr,'td'); domlib.newAt(channel, 'span').innerHTML = node.wireless.channel24 || '-';
domlib.newAt(curpower,'span').innerHTML = node._wireless.txpower24||'-'; domlib.newAt(channel, 'span').innerHTML = node.wireless.channel5 || '-';
domlib.newAt(curpower,'span').innerHTML = node._wireless.txpower5||'-';
var power = domlib.newAt(tr,'td'); /* eslint-disable no-underscore-dangle */
domlib.newAt(power,'span').innerHTML = node.wireless.txpower24||'-'; domlib.newAt(curpower, 'span').innerHTML = node._wireless.txpower24 || '-';
domlib.newAt(power,'span').innerHTML = node.wireless.txpower5||'-'; domlib.newAt(curpower, 'span').innerHTML = node._wireless.txpower5 || '-';
/* eslint-enable no-underscore-dangle */
var client = domlib.newAt(tr,'td'); domlib.newAt(power, 'span').innerHTML = node.wireless.txpower24 || '-';
domlib.newAt(client,'span').innerHTML = node.statistics.clients.wifi24; domlib.newAt(power, 'span').innerHTML = node.wireless.txpower5 || '-';
domlib.newAt(client,'span').innerHTML = node.statistics.clients.wifi5;
var chanUtil = domlib.newAt(tr,'td'); domlib.newAt(client, 'span').innerHTML = node.statistics.clients.wifi24;
var chanUtil24 = node.statistics.wireless.filter(function(d){ domlib.newAt(client, 'span').innerHTML = node.statistics.clients.wifi5;
return d.frequency < 5000;
})[0] || {}; /* eslint-disable id-length, no-magic-numbers,one-var */
var chanUtil5 = node.statistics.wireless.filter(function(d){ const chanUtil24 = node.statistics.wireless.filter((d) => d.frequency < 5000)[0] || {},
return d.frequency > 5000; chanUtil5 = node.statistics.wireless.filter((d) => d.frequency > 5000)[0] || {};
})[0] || {}; /* eslint-enable id-length, no-magic-numbers,one-var */
domlib.newAt(chanUtil,'span').innerHTML = chanUtil24.ChanUtil||'-';
domlib.newAt(chanUtil,'span').innerHTML = chanUtil5.ChanUtil||'-'; 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.classList.add('btn');
edit.innerHTML = 'Edit'; edit.innerHTML = 'Edit';
edit.addEventListener('click',function(){ edit.addEventListener('click', () => {
router.navigate(router.generate('node', { nodeID: node.node_id })); router.navigate(router.generate('node', {'nodeID': node.node_id}));
}); });
return tr; return tr;
} }
function update(){ function update () {
domlib.removeChildren(tbody); domlib.removeChildren(tbody);
var nodes = store.getNodes(); let nodes = store.getNodes();
if(hostnameFilter && hostnameFilter.value != "") if (hostnameFilter && hostnameFilter.value !== '') {
nodes = nodes.filter(function(d){ // eslint-disable-next-line id-length
return d.hostname.toLowerCase().indexOf(hostnameFilter.value) > -1; nodes = nodes.filter((d) => d.hostname.toLowerCase().indexOf(hostnameFilter.value) > -1);
}); }
if(nodeidFilter && nodeidFilter.value != "") if (nodeidFilter && nodeidFilter.value !== '') {
nodes = nodes.filter(function(d){ // eslint-disable-next-line id-length
return d.node_id.indexOf(nodeidFilter.value) > -1; nodes = nodes.filter((d) => d.node_id.indexOf(nodeidFilter.value) > -1);
}); }
nodes = nodes.sort(sort); nodes = nodes.sort(sort);
if(sortReverse) if (sortReverse) {
nodes = nodes.reverse(); 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); tbody.appendChild(row);
} }
} }
function sortTable(head) { function sortTable (head) {
if(sortIndex) if (sortIndex) {
sortIndex.classList.remove("sort-up","sort-down"); sortIndex.classList.remove('sort-up', 'sort-down');
sortReverse = head === sortIndex ? !sortReverse : false; }
sortReverse = head === sortIndex
? !sortReverse
: false;
sortIndex = head; sortIndex = head;
sortIndex.classList.add(sortReverse ? 'sort-up' : 'sort-down');
sortIndex.classList.add(sortReverse
? 'sort-up'
: 'sort-down');
update(); update();
} }
view.bind = function(el) { view.bind = function bind (bindEl) {
container = el; container = bindEl;
}; };
view.render = function(){ view.render = function render () {
if (container === undefined){ if (!container) {
return; return;
} else if (el !== undefined){ } else if (el) {
container.appendChild(el); container.appendChild(el);
update(); update();
return; return;
} }
console.log("generate new view for list"); console.log('generate new view for list');
el = domlib.newAt(container,'div'); el = domlib.newAt(container, 'div');
var table = domlib.newAt(el,'table'); const table = domlib.newAt(el, 'table'),
var thead = domlib.newAt(table,'thead'); thead = domlib.newAt(table, 'thead');
tbody = domlib.newAt(table,'tbody');
var tr = domlib.newAt(thead,'tr'); tbody = domlib.newAt(table, 'tbody');
var cell1 = domlib.newAt(tr,'th'); // eslint-disable-next-line one-var
cell1.innerHTML = "Lastseen"; const tr = domlib.newAt(thead, 'tr'),
cell1.addEventListener('click', function(){ 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');
cell1.innerHTML = 'Lastseen';
cell1.addEventListener('click', () => {
sortTable(cell1); sortTable(cell1);
}); });
var cell2 = domlib.newAt(tr,'th');
cell2.classList.add('sortable'); cell2.classList.add('sortable');
nodeidFilter = domlib.newAt(cell2,'input'); nodeidFilter = domlib.newAt(cell2, 'input');
nodeidFilter.setAttribute("placeholder","NodeID"); nodeidFilter.setAttribute('placeholder', 'NodeID');
nodeidFilter.setAttribute("size","9"); nodeidFilter.setAttribute('size', '9');
nodeidFilter.addEventListener('keyup', update); nodeidFilter.addEventListener('keyup', update);
cell2.addEventListener('dblclick', function(){ cell2.addEventListener('dblclick', () => {
sortTable(cell2); sortTable(cell2);
}); });
var cell3 = domlib.newAt(tr,'th');
cell3.classList.add('sortable'); cell3.classList.add('sortable');
hostnameFilter = domlib.newAt(cell3,'input'); hostnameFilter = domlib.newAt(cell3, 'input');
hostnameFilter.setAttribute("placeholder","Hostname"); hostnameFilter.setAttribute('placeholder', 'Hostname');
hostnameFilter.addEventListener('keyup', update); hostnameFilter.addEventListener('keyup', update);
cell3.addEventListener('dblclick', function(){ cell3.addEventListener('dblclick', () => {
sortTable(cell3); sortTable(cell3);
}); });
domlib.newAt(tr,'th').innerHTML = 'Freq'; cell4.innerHTML = 'Freq';
var cell4 = domlib.newAt(tr,'th');
cell4.innerHTML = "CurChannel"; cell5.innerHTML = 'CurChannel';
cell4.classList.add('sortable'); cell5.classList.add('sortable');
cell4.addEventListener('click', function(){ cell5.addEventListener('click', () => {
sortTable(cell4); sortTable(cell4);
}); });
var cell5 = domlib.newAt(tr,'th');
cell5.innerHTML = "Channel";
cell5.classList.add('sortable'); cell6.innerHTML = 'Channel';
cell5.addEventListener('click', function(){ cell6.classList.add('sortable');
cell6.addEventListener('click', () => {
sortTable(cell5); sortTable(cell5);
}); });
var cell6 = domlib.newAt(tr,'th'); cell7.innerHTML = 'CurPower';
cell6.innerHTML = "CurPower"; cell7.classList.add('sortable');
cell6.classList.add('sortable'); cell7.addEventListener('click', () => {
cell6.addEventListener('click', function(){
sortTable(cell6); sortTable(cell6);
}); });
var cell7 = domlib.newAt(tr,'th');
cell7.innerHTML = "Power"; cell8.innerHTML = 'Power';
cell7.classList.add('sortable'); cell8.classList.add('sortable');
cell7.addEventListener('click', function(){ cell8.addEventListener('click', () => {
sortTable(cell7); sortTable(cell7);
}); });
var cell8 = domlib.newAt(tr,'th');
cell8.innerHTML = "Clients"; cell9.innerHTML = 'Clients';
cell8.classList.add('sortable'); cell9.classList.add('sortable');
cell8.addEventListener('click', function(){ cell9.addEventListener('click', () => {
sortTable(cell8); sortTable(cell8);
}); });
var cell9 = domlib.newAt(tr,'th');
cell9.innerHTML = "ChanUtil"; cell10.innerHTML = 'ChanUtil';
cell9.classList.add('sortable'); cell10.classList.add('sortable');
cell9.addEventListener('click', function(){ cell10.addEventListener('click', () => {
sortTable(cell9); sortTable(cell9);
}); });
domlib.newAt(tr,'th').innerHTML = "Option"; cell11.innerHTML = 'Option';
table.classList.add('nodes'); table.classList.add('nodes');

166
webroot/js/gui_map.js
View File

@ -1,72 +1,95 @@
/* exported guiMap */ /* exported guiMap */
/* global config,store,domlib,socket */ /* global config,store,domlib,socket */
var guiMap = {}; const guiMap = {};
(function(){ (function init () {
var view = guiMap; 'use strict';
var container, el;
var geoJsonLayer, nodeLayer, clientLayer24, clientLayer5;//, draggingNodeID; const view = guiMap,
WINDOW_HEIGHT_MENU = 50;
function addNode (node){ let container = null,
/* el = null,
https://github.com/Leaflet/Leaflet/issues/4484
geoJsonLayer = null,
nodeLayer = null,
clientLayer24 = null,
clientLayer5 = null;
// , draggingNodeID=null;
function addNode (node) {
/* eslint-disable-line https://github.com/Leaflet/Leaflet/issues/4484
if(node.node_id === draggingNodeID){ if(node.node_id === draggingNodeID){
return return
} }
*/ */
if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) {
if (!node.location || !node.location.latitude || !node.location.longitude) {
return; return;
} }
var className = 'node'; let className = 'node',
var startdate = new Date(); 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); startdate.setMinutes(startdate.getMinutes() - 1);
if(new Date(node.lastseen) < startdate) { if (new Date(node.lastseen) < startdate) {
className += ' offline'; className += ' offline';
} }
var wifi24='-',wifi5='-',ch24='-',ch5='-',tx24='-',tx5='-';
if(node.statistics && node.statistics.clients){
if (node.statistics && node.statistics.clients) {
// eslint-disable-next-line prefer-destructuring
wifi24 = node.statistics.clients.wifi24; wifi24 = node.statistics.clients.wifi24;
if(wifi24 < config.map.icon.warn.wifi24 && wifi24 > 0){ 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){ } 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){ } else if (wifi24 >= config.map.icon.crit.wifi24) {
className += ' client24-crit'; className += ' client24-crit';
} }
// eslint-disable-next-line prefer-destructuring
wifi5 = node.statistics.clients.wifi5; 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'; className += ' client5';
} else if(wifi5 < config.map.icon.crit.wifi5 && wifi5 >= config.map.icon.warn.wifi5){ } 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){ } else if (wifi5 >= config.map.icon.crit.wifi5) {
className += ' client5-crit'; className += ' client5-crit';
} }
} }
var nodemarker = L.marker([node.location.latitude, node.location.longitude], { // eslint-disable-next-line one-var
icon: L.divIcon({className: className}), const nodemarker = L.marker([node.location.latitude, node.location.longitude], {
draggable: true 'draggable': true,
'icon': L.divIcon({'className': className})
}); });
nodemarker.bindTooltip(node.hostname+' <div class=\'nodeicon-label\'>('+node.node_id+')'+
'<table>'+ nodemarker.bindTooltip(`${node.hostname} <div class='nodeicon-label'>(${node.node_id})` +
'<tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></tr>'+ '<table>' +
'<tr><td>2.4G</td><td>'+wifi24+'</td><td>'+ch24+'</td><td>'+tx24+'</td></tr>'+ '<tr><th></th><th>Cl</th><th>Ch</th><th>Tx</th></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>` +
'</table>'+ `<tr><td>5G</td><td>${wifi5}</td><td>${ch5}</td><td>${tx5}</td></tr>` +
'</table>' +
'</div>' '</div>'
); );
/* /*
nodemarker.on('dragstart',function(){ Nodemarker.on('dragstart',function(){
draggingNodeID = node.node_id; draggingNodeID = node.node_id;
}) })
*/ */
nodemarker.on('dragend',function(){ nodemarker.on('dragend', () => {
// draggingNodeID = undefined; // DraggingNodeID = undefined;
var pos = nodemarker.getLatLng(); const pos = nodemarker.getLatLng();
node.location = { node.location = {
'latitude': pos.lat, 'latitude': pos.lat,
'longitude': pos.lng 'longitude': pos.lng
@ -76,70 +99,75 @@ var guiMap = {};
nodeLayer.addLayer(nodemarker); nodeLayer.addLayer(nodemarker);
} }
function update() { function update () {
geoJsonLayer.refresh(); geoJsonLayer.refresh();
nodeLayer.clearLayers(); nodeLayer.clearLayers();
var nodes = store.getNodes(); const nodes = store.getNodes();
for(var i=0; i<nodes.length; i++){
for (let i = 0; i < nodes.length; i += 1) {
addNode(nodes[i]); addNode(nodes[i]);
} }
var clientData24 = nodes.map(function(node){
if(node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) { clientLayer24.setData(nodes.map((node) => {
return; if (!node.location || !node.location.latitude || !node.location.longitude) {
} return null;
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);
} }
view.bind = function(el) { return [node.location.latitude, node.location.longitude, node.statistics.clients.wifi24 || 0];
container = el; }));
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(){ view.render = function render () {
if (container === undefined){ if (!container) {
return; return;
} else if (el !== undefined){ } else if (el) {
container.appendChild(el); container.appendChild(el);
update(); update();
return; return;
} }
console.log("generate new view for map"); console.log('generate new view for map');
el = domlib.newAt(container,'div'); 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, { L.tileLayer(config.map.tileLayer, {
maxZoom: config.map.maxZoom, 'maxZoom': config.map.maxZoom
}).addTo(map); }).addTo(map);
var layerControl = L.control.layers().addTo(map);
geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson); geoJsonLayer = L.geoJson.ajax(config.map.geojson.url, config.map.geojson);
nodeLayer = L.layerGroup(); nodeLayer = L.layerGroup();
/* eslint-disable new-cap */
clientLayer24 = new L.webGLHeatmap(config.map.heatmap.wifi24); clientLayer24 = new L.webGLHeatmap(config.map.heatmap.wifi24);
clientLayer5 = new L.webGLHeatmap(config.map.heatmap.wifi5); clientLayer5 = new L.webGLHeatmap(config.map.heatmap.wifi5);
layerControl.addOverlay(geoJsonLayer,'geojson'); /* eslint-enable new-cap */
layerControl.addOverlay(nodeLayer,'Nodes'); layerControl.addOverlay(geoJsonLayer, 'geojson');
layerControl.addOverlay(clientLayer24,'Clients 2.4 Ghz'); layerControl.addOverlay(nodeLayer, 'Nodes');
layerControl.addOverlay(clientLayer5,'Clients 5 Ghz'); layerControl.addOverlay(clientLayer24, 'Clients 2.4 Ghz');
layerControl.addOverlay(clientLayer5, 'Clients 5 Ghz');
nodeLayer.addTo(map); nodeLayer.addTo(map);
window.addEventListener("resize",function(){ window.addEventListener('resize', () => {
el.style.height = (window.innerHeight - 50 )+"px"; el.style.height = `${window.innerHeight - WINDOW_HEIGHT_MENU}px`;
map.invalidateSize(); map.invalidateSize();
}); });

179
webroot/js/gui_node.js
View File

@ -1,142 +1,179 @@
/* exported guiNode */ /* exported guiNode */
/* globals store, socket, domlib, config,notify */ /* globals store, socket, domlib, config,notify */
var guiNode = {};
(function(){ const guiNode = {};
var view = guiNode;
var container, el;
var titleName,titleID,ago; (function init () {
var marker, map, geoJsonLayer; 'use strict';
var btnGPS, editLocationGPS, storePosition;
var current_node_id, editing = false;
function updatePosition(lat, lng){ const view = guiNode;
if(!lat || !lng) {
lat = storePosition.latitude || false; let container = null,
lng = storePosition.longitude || false; el = null,
if(!lat || !lng)
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) {
const node = store.getNode(currentNodeID),
newLat = lat || storePosition.latitude || false,
newlng = lng || storePosition.longitude || false;
if (!newLat || !newlng) {
return; return;
} }
var node = store.getNode(current_node_id);
node.location = {latitude:lat,longitude:lng}; node.location = {
'latitude': newLat,
'longitude': newlng
};
socket.sendnode(node); socket.sendnode(node);
} }
function update(){ function update () {
geoJsonLayer.refresh(); geoJsonLayer.refresh();
titleID.innerHTML = current_node_id; titleID.innerHTML = currentNodeID;
var node = store.getNode(current_node_id); const node = store.getNode(currentNodeID),
if(node === undefined){ startdate = new Date();
console.log("node not found: "+current_node_id);
if (!node) {
console.log(`node not found: ${currentNodeID}`);
return; return;
} }
var startdate = new Date();
startdate.setMinutes(startdate.getMinutes() - 1); startdate.setMinutes(startdate.getMinutes() - 1);
if(new Date(node.lastseen) < startdate){ if (new Date(node.lastseen) < startdate) {
ago.classList.add('offline'); ago.classList.add('offline');
ago.classList.remove('online'); ago.classList.remove('online');
}else{ } else {
ago.classList.remove('offline'); ago.classList.remove('offline');
ago.classList.add('online'); ago.classList.add('online');
} }
ago.innerHTML = moment(node.lastseen).fromNow() + ' ('+node.lastseen+')'; ago.innerHTML = `${moment(node.lastseen).fromNow()} (${node.lastseen})`;
if(editLocationGPS || editing || node.location === undefined || node.location.latitude === undefined || node.location.longitude === undefined) { if (editLocationGPS || editing || !node.location || !node.location.latitude || !node.location.longitude) {
return; return;
} }
titleName.innerHTML = node.hostname; 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); map.setView(latlng);
marker.setLatLng(latlng); marker.setLatLng(latlng);
marker.setOpacity(1); marker.setOpacity(1);
} }
view.setNodeID = function (nodeID){ view.setNodeID = function setNodeID (nodeID) {
current_node_id = nodeID; currentNodeID = nodeID;
}; };
view.bind = function(el) { view.bind = function bind (bindEl) {
container = el; container = bindEl;
}; };
view.render = function render(){
if (container === undefined){ view.render = function render () {
if (!container) {
return; return;
} else if (el !== undefined){ } else if (el) {
container.appendChild(el); container.appendChild(el);
update(); update();
return; return;
} }
console.log("generate new view for node"); console.log('generate new view for node');
el = domlib.newAt(container,'div'); el = domlib.newAt(container, 'div');
var title = domlib.newAt(el,'h1'); const title = domlib.newAt(el, 'h1'),
titleName = domlib.newAt(title,'span'); lastseen = domlib.newAt(el, 'p'),
title.appendChild(document.createTextNode(" - ")); mapEl = domlib.newAt(el, 'div');
titleID = domlib.newAt(title,'i');
titleName = domlib.newAt(title, 'span');
title.appendChild(document.createTextNode(' - '));
titleID = domlib.newAt(title, 'i');
domlib.newAt(lastseen, 'span').innerHTML = 'Lastseen: ';
ago = domlib.newAt(lastseen, 'span');
var lastseen = domlib.newAt(el,'p');
domlib.newAt(lastseen,'span').innerHTML = "Lastseen: ";
ago = domlib.newAt(lastseen,'span');
var mapEl = domlib.newAt(el,'div');
mapEl.style.height = '300px'; mapEl.style.height = '300px';
map = L.map(mapEl).setView(config.map.view.bound, config.map.view.zoom); map = L.map(mapEl).setView(config.map.view.bound, config.map.view.zoom);
L.tileLayer(config.map.tileLayer, { L.tileLayer(config.map.tileLayer, {
maxZoom: config.map.maxZoom, 'maxZoom': config.map.maxZoom
}).addTo(map); }).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); geoJsonLayer = L.geoJson.ajax(config.map.geojson.url,
marker.on('dragstart', function(){ 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; editing = true;
}); });
marker.on('dragend', function(){
marker.on('dragend', () => {
editing = false; editing = false;
var pos = marker.getLatLng(); const pos = marker.getLatLng();
updatePosition(pos.lat,pos.lng);
updatePosition(pos.lat, pos.lng);
}); });
btnGPS = domlib.newAt(el,'span'); btnGPS = domlib.newAt(el, 'span');
btnGPS.classList.add('btn'); btnGPS.classList.add('btn');
btnGPS.innerHTML = "Start follow position"; btnGPS.innerHTML = 'Start follow position';
btnGPS.addEventListener('click',function(){ btnGPS.addEventListener('click', () => {
if(editLocationGPS){ if (editLocationGPS) {
if(btnGPS.innerHTML == "Stop following") if (btnGPS.innerHTML === 'Stop following') {
updatePosition(); updatePosition();
btnGPS.innerHTML = "Start follow position"; }
btnGPS.innerHTML = 'Start follow position';
navigator.geolocation.clearWatch(editLocationGPS); navigator.geolocation.clearWatch(editLocationGPS);
editLocationGPS = false; editLocationGPS = false;
return; return;
} }
btnGPS.innerHTML = 'Following position'; btnGPS.innerHTML = 'Following position';
if (navigator.geolocation !== undefined) if (navigator.geolocation) {
editLocationGPS = navigator.geolocation.watchPosition( editLocationGPS = navigator.geolocation.watchPosition((position) => {
function geo_success(position) { btnGPS.innerHTML = 'Stop following';
btnGPS.innerHTML = "Stop following";
storePosition = position.coords; storePosition = position.coords;
var latlng = [position.coords.latitude, position.coords.longitude]; const latlng = [position.coords.latitude, position.coords.longitude];
marker.setLatLng(latlng); marker.setLatLng(latlng);
map.setView(latlng); map.setView(latlng);
}, }, (error) => {
function geo_error(error) {
switch (error.code) { switch (error.code) {
case error.TIMEOUT: case error.TIMEOUT:
notify.send("error","Find Location timeout"); notify.send('error', 'Find Location timeout');
break; break;
default:
console.error('a navigator geolocation error: ', error);
} }
}, },
{ {
enableHighAccuracy: true, 'enableHighAccuracy': true,
maximumAge: 30000, 'maximumAge': 30000,
timeout: 27000 'timeout': 27000
}); });
else } else {
notify.send("error","Browser did not support Location"); notify.send('error', 'Browser did not support Location');
}
}); });
update(); update();
}; };
})(); })();

29
webroot/js/gui_skelView.js
View File

@ -1,27 +1,32 @@
/* exported guiSkel */ /* exported guiSkel */
/* globals domlib */ /* globals domlib */
var guiSkel = {}; const guiSkel = {};
(function(){ (function init () {
var view = guiSkel; 'use strict';
var container, el;
function update(){ const view = guiSkel;
let container = null,
el = null;
function update () {
console.warn('Do not run dummies');
} }
view.bind = function(el) { view.bind = function bind (bindEl) {
container = el; container = bindEl;
}; };
view.render = function render(){ view.render = function render () {
if (container === undefined){ if (!container) {
return; return;
} else if (el !== undefined){ } else if (el) {
container.appendChild(el); container.appendChild(el);
update(); update();
return; return;
} }
console.log("generate new view for skel"); console.log('generate new view for skel');
el = domlib.newAt(container,'div'); el = domlib.newAt(container, 'div');
update(); update();
}; };

82
webroot/js/gui_stats.js
View File

@ -1,14 +1,22 @@
/* exported guiStats */ /* exported guiStats */
/* globals store, domlib */ /* globals store, domlib */
var guiStats = {}; const guiStats = {};
(function(){ (function init () {
var view = guiStats; 'use strict';
var container, el;
var nodes, clients, clientsWifi,clientsWifi24, clientsWifi5; const view = guiStats;
function update(){ let container = null,
el = null,
nodes = null,
clients = null,
clientsWifi = null,
clientsWifi24 = null,
clientsWifi5 = null;
function update () {
nodes.innerHTML = store.stats.Nodes; nodes.innerHTML = store.stats.Nodes;
clients.innerHTML = store.stats.Clients; clients.innerHTML = store.stats.Clients;
clientsWifi.innerHTML = store.stats.ClientsWifi; clientsWifi.innerHTML = store.stats.ClientsWifi;
@ -16,48 +24,50 @@ var guiStats = {};
clientsWifi5.innerHTML = store.stats.ClientsWifi5; clientsWifi5.innerHTML = store.stats.ClientsWifi5;
} }
view.bind = function(el) { view.bind = function bind (bindEl) {
container = el; container = bindEl;
}; };
view.render = function(){
if (container === undefined){ view.render = function render () {
if (!container) {
return; return;
} else if (el !== undefined){ } else if (el) {
container.appendChild(el); container.appendChild(el);
update(); update();
return; return;
} }
console.log("generate new view for stats"); console.log('generate new view for stats');
el = domlib.newAt(container,'div'); el = domlib.newAt(container, 'div');
domlib.newAt(el,'h1').innerHTML = "Statistics"; domlib.newAt(el, 'h1').innerHTML = 'Statistics';
var table = domlib.newAt(el,'table'); const table = domlib.newAt(el, 'table');
table.classList.add("stats");
var tr,title; table.classList.add('stats');
tr = domlib.newAt(table,'tr'); let tr = domlib.newAt(table, 'tr'),
title = domlib.newAt(tr,'th'); title = domlib.newAt(tr, 'th');
title.innerHTML = "Nodes";
title.setAttribute("colspan","2");
nodes = domlib.newAt(tr,'td');
tr = domlib.newAt(table,'tr'); title.innerHTML = 'Nodes';
title = domlib.newAt(tr,'th'); title.setAttribute('colspan', '2');
title.innerHTML = "Clients"; nodes = domlib.newAt(tr, 'td');
title.setAttribute("colspan","2");
clients = domlib.newAt(tr,'td');
tr = domlib.newAt(table,'tr'); tr = domlib.newAt(table, 'tr');
tr.classList.add("line"); title = domlib.newAt(tr, 'th');
domlib.newAt(tr,'th').innerHTML = "Wifi"; title.innerHTML = 'Clients';
domlib.newAt(tr,'th').innerHTML = "2.4 Ghz"; title.setAttribute('colspan', '2');
domlib.newAt(tr,'th').innerHTML = "5 Ghz"; clients = domlib.newAt(tr, 'td');
tr = domlib.newAt(table,'tr'); tr = domlib.newAt(table, 'tr');
clientsWifi = domlib.newAt(tr,'td'); tr.classList.add('line');
clientsWifi24 = domlib.newAt(tr,'td'); domlib.newAt(tr, 'th').innerHTML = 'Wifi';
clientsWifi5 = domlib.newAt(tr,'td'); 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');
clientsWifi24 = domlib.newAt(tr, 'td');
clientsWifi5 = domlib.newAt(tr, 'td');
update(); update();
}; };

54
webroot/js/notify.js
View File

@ -1,27 +1,34 @@
/* exported notify */ /* exported notify */
var notify = {}; const notify = {};
(function(){ (function init () {
var container; 'use strict';
var messages = [];
if ("Notification" in window) { const DELAY_OF_NOTIFY = 15000,
MAX_MESSAGE_SHOW = 10,
messages = [];
let container = null;
if ('Notification' in window) {
window.Notification.requestPermission(); window.Notification.requestPermission();
} }
function removeLast (){ function removeLast () {
messages.splice(0, 1); messages.splice(0, 1);
if(container!==undefined && container.firstElementChild) if (container && container.firstElementChild) {
container.removeChild(container.firstElementChild); container.removeChild(container.firstElementChild);
} }
}
function renderMsg(msg){ function renderMsg (msg) {
var msgBox = document.createElement('div'); const msgBox = document.createElement('div');
msgBox.classList.add("notify",msg.type);
msgBox.classList.add('notify', msg.type);
msgBox.innerHTML = msg.text; msgBox.innerHTML = msg.text;
container.appendChild(msgBox); container.appendChild(msgBox);
msgBox.addEventListener('click', function(){ msgBox.addEventListener('click', () => {
container.removeChild(msgBox); container.removeChild(msgBox);
if (messages.indexOf(msg) !== -1) { if (messages.indexOf(msg) !== -1) {
messages.splice(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; container = el;
}; };
notify.send = function(type, text){ notify.send = function send (type, text) {
if("Notification" in window && window.Notification.permission === "granted") { if ('Notification' in window &&
new window.Notification(text,{body:type,icon:'/img/logo.jpg'}); window.Notification.permission === 'granted') {
// eslint-disable-next-line no-new
new window.Notification(text, {
'body': type,
'icon': '/img/logo.jpg'
});
return; return;
} }
if(messages.length > 10){ if (messages.length > MAX_MESSAGE_SHOW) {
removeLast(); removeLast();
} }
var msg = {type:type,text:text}; const msg = {
'text': text,
'type': type
};
messages.push(msg); messages.push(msg);
renderMsg(msg); renderMsg(msg);
}; };
})(); })();

63
webroot/js/socket.js
View File

@ -1,57 +1,70 @@
/* exported socket */ /* exported socket */
/*globals notify,gui,store,config*/ /* globals notify,gui,store,config*/
var socket = {readyState:0}; let socket = {'readyState': 0};
(function(){ (function init () {
'use strict';
function onerror(err) { const RECONNECT_AFTER = 5000;
function onerror (err) {
console.warn(err); console.warn(err);
if(socket.readyState !== 3){ // eslint-disable-next-line no-magic-numbers
notify.send("error","Es gibt Übertragungsprobleme!"); if (socket.readyState !== 3) {
notify.send('error', 'Es gibt Übertragungsprobleme!');
gui.render(); gui.render();
} }
} }
function onopen() { function onopen () {
gui.render(); gui.render();
} }
function onmessage(e) { function onmessage (raw) {
var msg = JSON.parse(e.data); const msg = JSON.parse(raw.data);
switch (msg.type) { switch (msg.type) {
case "current": case 'current':
store.updateNode(msg.node,true); store.updateNode(msg.node, true);
break; break;
case "to-update": case 'to-update':
store.updateNode(msg.node); store.updateNode(msg.node);
break; break;
case "stats": case 'stats':
if(msg.body) { if (msg.body) {
store.stats = msg.body; store.stats = msg.body;
} }
break; break;
default: default:
notify.send("warn","unable to identify message: "+e); notify.send('warn', `unable to identify message: ${raw}`);
break; break;
} }
gui.render(); gui.render();
} }
function onclose(){ function onclose () {
console.log("socket closed by server"); console.log('socket closed by server');
notify.send("warn","Es besteht ein Verbindungsproblem!"); notify.send('warn', 'Es besteht ein Verbindungsproblem!');
gui.render(); gui.render();
window.setTimeout(connect, 5000); // eslint-disable-next-line no-use-before-define
window.setTimeout(connect, RECONNECT_AFTER);
} }
function sendnode(node) { function sendnode (node) {
var msg = {type:"to-update",node:node}; const notifyMsg = `Einstellungen für '${node.node_id}' gespeichert.`,
var string = JSON.stringify(msg); socketMsg = JSON.stringify({
socket.send(string); 'node': node,
notify.send("success","Node '"+node.node_id+"' mit neuen Werten wurde übermittelt."); 'type': 'to-update'
});
socket.send(socketMsg);
notify.send('success', notifyMsg);
} }
function connect() { function connect () {
socket = new window.WebSocket(config.backend); socket = new window.WebSocket(config.backend);
socket.onopen = onopen; socket.onopen = onopen;
socket.onerror = onerror; socket.onerror = onerror;

58
webroot/js/store.js
View File

@ -1,38 +1,52 @@
/* exported store */ /* exported store */
var store = {
_list:{}, const store = {
_toupdate:{}, 'stats': {
stats:{"Clients":0,"ClientsWifi":0,"ClientsWifi24":0,"ClientsWifi5":0,"Gateways":0,"Nodes":0,"Firmwares":{},"Models":{}} 'Clients': 0,
'ClientsWifi': 0,
'ClientsWifi24': 0,
'ClientsWifi5': 0,
'Firmwares': {},
'Gateways': 0,
'Models': {},
'Nodes': 0
}
}; };
(function(){ (function init () {
'use strict';
function getNode(nodeid){ const list = {},
var node; toupdate = {};
if (store._toupdate[nodeid]) {
node = store._toupdate[nodeid]; function getNode (nodeid) {
} else if (store._list[nodeid]){ let node = {};
node = store._list[nodeid];
}else{ if (toupdate[nodeid]) {
return; node = toupdate[nodeid];
} else if (list[nodeid]) {
node = list[nodeid];
} else {
return null;
} }
node._wireless = store._list[nodeid].wireless; // eslint-disable-next-line no-underscore-dangle
node._wireless = list[nodeid].wireless;
return node; return node;
} }
store.updateNode = function updateReal(node, real){ store.updateNode = function updateNode (node, real) {
if(real){ if (real) {
store._list[node.node_id] = node; list[node.node_id] = node;
}else{ } else {
store._toupdate[node.node_id] = node; toupdate[node.node_id] = node;
} }
}; };
store.getNode = getNode; store.getNode = getNode;
store.getNodes = function() { store.getNodes = function getNodes () {
return Object.keys(store._list).map(getNode); return Object.keys(list).map(getNode);
}; };
})(); })();