279 lines
7.4 KiB
JavaScript
279 lines
7.4 KiB
JavaScript
/* exported guiList */
|
|
/* global domlib,store,router */
|
|
|
|
const guiList = {};
|
|
|
|
(function init () {
|
|
'use strict';
|
|
|
|
const view = guiList;
|
|
|
|
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 (aNum, bNum) {
|
|
return aNum - bNum;
|
|
}
|
|
if (!sortIndex) {
|
|
return a.node_id.localeCompare(b.node_id);
|
|
}
|
|
switch (sortIndex.innerHTML) {
|
|
case 'Lastseen':
|
|
return a.lastseen - b.lastseen;
|
|
case 'CurPower':
|
|
// eslint-disable-next-line no-underscore-dangle
|
|
return a._wireless.txpower24 - b._wireless.txpower24;
|
|
case 'Power':
|
|
return a.wireless.txpower24 - b.wireless.txpower24;
|
|
case 'CurChannel':
|
|
// eslint-disable-next-line no-underscore-dangle
|
|
return a._wireless.channel24 - b._wireless.channel24;
|
|
case 'Channel':
|
|
return a.wireless.channel24 - b.wireless.channel24;
|
|
case 'Clients':
|
|
return a.statistics.clients.wifi24 - b.statistics.clients.wifi24;
|
|
// 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':
|
|
return a.hostname.localeCompare(b.hostname);
|
|
default:
|
|
return a.node_id.localeCompare(b.node_id);
|
|
}
|
|
}
|
|
|
|
function renderRow (node) {
|
|
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) {
|
|
tr.classList.add('offline');
|
|
}
|
|
|
|
lastseen.innerHTML = moment(node.lastseen).fromNow(true);
|
|
|
|
nodeID.innerHTML = node.node_id;
|
|
|
|
hostname.innerHTML = node.hostname;
|
|
|
|
domlib.newAt(freq, 'span').innerHTML = '2.4 Ghz';
|
|
domlib.newAt(freq, 'span').innerHTML = '5 Ghz';
|
|
|
|
/* 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 */
|
|
|
|
domlib.newAt(channel, 'span').innerHTML = node.wireless.channel24 || '-';
|
|
domlib.newAt(channel, 'span').innerHTML = node.wireless.channel5 || '-';
|
|
|
|
/* 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 */
|
|
|
|
domlib.newAt(power, 'span').innerHTML = node.wireless.txpower24 || '-';
|
|
domlib.newAt(power, 'span').innerHTML = node.wireless.txpower5 || '-';
|
|
|
|
domlib.newAt(client, 'span').innerHTML = node.statistics.clients.wifi24;
|
|
domlib.newAt(client, 'span').innerHTML = node.statistics.clients.wifi5;
|
|
|
|
/* 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 || '-';
|
|
|
|
edit.classList.add('btn');
|
|
edit.innerHTML = 'Edit';
|
|
edit.addEventListener('click', () => {
|
|
router.navigate(router.generate('node', {'nodeID': node.node_id}));
|
|
});
|
|
|
|
return tr;
|
|
}
|
|
|
|
function update () {
|
|
domlib.removeChildren(tbody);
|
|
let nodes = store.getNodes();
|
|
|
|
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) {
|
|
nodes = nodes.reverse();
|
|
}
|
|
|
|
for (let i = 0; i < nodes.length; i += 1) {
|
|
const row = renderRow(nodes[i]);
|
|
|
|
tbody.appendChild(row);
|
|
}
|
|
}
|
|
|
|
function sortTable (head) {
|
|
if (sortIndex) {
|
|
sortIndex.classList.remove('sort-up', 'sort-down');
|
|
}
|
|
sortReverse = head === sortIndex
|
|
? !sortReverse
|
|
: false;
|
|
sortIndex = head;
|
|
|
|
sortIndex.classList.add(sortReverse
|
|
? 'sort-up'
|
|
: 'sort-down');
|
|
|
|
update();
|
|
}
|
|
|
|
view.bind = function bind (bindEl) {
|
|
container = bindEl;
|
|
};
|
|
|
|
view.render = function render () {
|
|
if (!container) {
|
|
return;
|
|
} else if (el) {
|
|
container.appendChild(el);
|
|
update();
|
|
|
|
return;
|
|
}
|
|
console.log('generate new view for list');
|
|
el = domlib.newAt(container, 'div');
|
|
|
|
const table = domlib.newAt(el, 'table'),
|
|
thead = domlib.newAt(table, 'thead');
|
|
|
|
tbody = domlib.newAt(table, 'tbody');
|
|
|
|
// 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');
|
|
|
|
cell1.innerHTML = 'Lastseen';
|
|
cell1.addEventListener('click', () => {
|
|
sortTable(cell1);
|
|
});
|
|
|
|
cell2.classList.add('sortable');
|
|
nodeidFilter = domlib.newAt(cell2, 'input');
|
|
nodeidFilter.setAttribute('placeholder', 'NodeID');
|
|
nodeidFilter.setAttribute('size', '9');
|
|
nodeidFilter.addEventListener('keyup', update);
|
|
cell2.addEventListener('dblclick', () => {
|
|
sortTable(cell2);
|
|
});
|
|
|
|
|
|
cell3.classList.add('sortable');
|
|
hostnameFilter = domlib.newAt(cell3, 'input');
|
|
hostnameFilter.setAttribute('placeholder', 'Hostname');
|
|
hostnameFilter.addEventListener('keyup', update);
|
|
cell3.addEventListener('dblclick', () => {
|
|
sortTable(cell3);
|
|
});
|
|
|
|
cell4.innerHTML = 'Freq';
|
|
|
|
|
|
cell5.innerHTML = 'CurChannel';
|
|
cell5.classList.add('sortable');
|
|
cell5.addEventListener('click', () => {
|
|
sortTable(cell4);
|
|
});
|
|
|
|
|
|
cell6.innerHTML = 'Channel';
|
|
cell6.classList.add('sortable');
|
|
cell6.addEventListener('click', () => {
|
|
sortTable(cell5);
|
|
});
|
|
|
|
cell7.innerHTML = 'CurPower';
|
|
cell7.classList.add('sortable');
|
|
cell7.addEventListener('click', () => {
|
|
sortTable(cell6);
|
|
});
|
|
|
|
cell8.innerHTML = 'Power';
|
|
cell8.classList.add('sortable');
|
|
cell8.addEventListener('click', () => {
|
|
sortTable(cell7);
|
|
});
|
|
|
|
|
|
cell9.innerHTML = 'Clients';
|
|
cell9.classList.add('sortable');
|
|
cell9.addEventListener('click', () => {
|
|
sortTable(cell8);
|
|
});
|
|
|
|
cell10.innerHTML = 'ChanUtil';
|
|
cell10.classList.add('sortable');
|
|
cell10.addEventListener('click', () => {
|
|
sortTable(cell9);
|
|
});
|
|
cell11.innerHTML = 'Option';
|
|
|
|
table.classList.add('nodes');
|
|
|
|
update();
|
|
};
|
|
})();
|