import * as domlib from '../domlib'; import * as gui from '../gui'; import * as lib from '../lib'; import * as socket from '../socket'; import * as store from '../store'; import * as V from 'superfine'; import Table from '../table'; import config from '../config'; import View from '../view'; import {FromNowAgo} from '../lib'; export class ListView extends View { constructor () { super(); this.debouncer = new lib.Debouncer(1000, "list render"); this.filter = domlib.newAt(this.el, 'input', { 'placeholder': 'Search', 'style': 'width: 100%;border: 0px; border-bottom: 2px inset;', }); this.filter.addEventListener('keyup', () => { this.render(); }); this.table = new Table(domlib.newAt(this.el, 'div'),{ class: 'nodes', },[ { name:'Lastseen', sort: (a, b) => new Date(a.lastseen) - new Date(b.lastseen), reverse: false }, { name:'NodeID', sort: (a, b) => a.node_id.localeCompare(b.node_id), reverse: false }, { name:'Hostname', sort: (a, b) => a.hostname.localeCompare(b.hostname), reverse: false }, { name:'Freq' }, { name:'CurCh', sort: (a, b) => (a._wireless ? a._wireless.channel24 : 0) - (b._wireless ? b._wireless.channel24 : 0), reverse: false }, { name:'Channel', sort: (a, b) => a.wireless.channel24 - b.wireless.channel24, reverse: false }, { name:'CurPW', sort: (a, b) => (a._wireless ? a._wireless.txpower24 : 0) - (b._wireless ? b._wireless.txpower24 : 0), reverse: false }, { name:'Power', sort: (a, b) => a.wireless.txpower24 - b.wireless.txpower24, reverse: false }, { name:'Clients', sort: (a, b) => a.statistics.clients.wifi24 - b.statistics.clients.wifi24, reverse: false }, { name:'ChanUtil', sort: (a, b) => (a.statistics.wireless ? a.statistics.wireless.filter((d) => d.frequency < 5000)[0].ChanUtil || 0 : 0) - (b.statistics.wireless ? b.statistics.wireless.filter((d) => d.frequency < 5000)[0].ChanUtil || 0 : 0), reverse: false }, { name:'Options' } ], 1, this.renderRow.bind(this)); } renderRow (node) { const startdate = new Date(), channel24Options = [], channel5Options = []; startdate.setMinutes(startdate.getMinutes() - config.node.offline); let i = 0; for (i = 0; i < store.channelsWifi24.length; i++) { channel24Options.push(V.h('option', { 'value': store.channelsWifi24[i], 'selected': (store.channelsWifi24[i] === node.wireless.channel24), }, store.channelsWifi24[i])); } for (i = 0; i < store.channelsWifi5.length; i++) { channel5Options.push(V.h('option', { 'value': store.channelsWifi5[i], 'selected': (store.channelsWifi5[i] === node.wireless.channel5), }, store.channelsWifi5[i])); } return V.h('tr', {},[ V.h('td', { 'class':(new Date(node.lastseen) < startdate)?'offline':(!node._wireless)?'unseen':'' }, FromNowAgo(node.lastseen)), V.h('td', {}, node.node_id), V.h('td', {}, V.h('input',{ 'value': this._hostname || node.hostname, 'oninput':(e) => { this._hostname = e.target.value; }, 'onfocusout':(e) => { delete this._hostname; const old = node.hostname; node.hostname = e.target.value; socket.sendnode(node, (msg)=>{ if (!msg.body) { node.hostname = old; e.target.value = old; } }); } })), V.h('td', {}, [ V.h('span', {},'2.4 GHz'), V.h('span', {},'5 GHz') ]), V.h('td', {}, [ V.h('span', {}, node._wireless ? node._wireless.channel24 || '-':'-'), V.h('span', {}, node._wireless ? node._wireless.channel5 || '-':'-') ]), V.h('td', {}, [ V.h('span', {}, V.h('select',{ 'onfocusout':(e) => { const old = node.wireless.channel24; node.wireless.channel24 = parseInt(e.target.value, 10); socket.sendnode(node, (msg)=>{ if (!msg.body) { node.wireless.channel24 = old; e.target.value = old; } }); } }, channel24Options)), V.h('span', {}, V.h('select',{ 'onfocusout':(e) => { const old = node.wireless.channel5; node.wireless.channel5 = parseInt(e.target.value, 10); socket.sendnode(node, (msg)=>{ if (!msg.body) { node.wireless.channel5 = old; e.target.value = old; } }); } }, channel5Options)) ]), V.h('td', {}, [ V.h('span', {}, node._wireless ? node._wireless.txpower24 || '-':'-'), V.h('span', {}, node._wireless ? node._wireless.txpower5 || '-':'-') ]), V.h('td', {}, [ V.h('span', {}, V.h('input',{ 'type': 'number', 'min': 0, 'max': 23, 'value': this._txpower24 || node.wireless.txpower24, 'oninput':(e) => { this._txpower24 = e.target.value; }, 'onfocusout':(e) => { delete this._txpower24; const old = node.wireless.txpower24; node.wireless.txpower24 = parseInt(e.target.value, 10); socket.sendnode(node, (msg)=>{ if (!msg.body) { node.wireless.txpower24 = old; e.target.value = old; } }); } })), V.h('span', {}, V.h('input',{ 'type': 'number', 'min': 0, 'max': 23, 'value': this._txpower5 || node.wireless.txpower5, 'oninput':(e) => { this._txpower5 = e.target.value; }, 'onfocusout':(e) => { delete this._txpower5; const old = node.wireless.txpower5; node.wireless.txpower5 = parseInt(e.target.value, 10); socket.sendnode(node, (msg)=>{ if (!msg.body) { node.wireless.txpower5 = old; e.target.value = old; } }); } })) ]), V.h('td', {}, [ V.h('span', {}, node.statistics.clients.wifi24), V.h('span', {}, node.statistics.clients.wifi5) ]), V.h('td', {}, [ V.h('span', {}, node.statistics.wireless ? (node.statistics.wireless.filter((d) => d.frequency < 5000)[0] || {ChanUtil: '-'}).ChanUtil : '-'), V.h('span', {}, node.statistics.wireless ? (node.statistics.wireless.filter((d) => d.frequency > 5000)[0] || {ChanUtil: '-'}).ChanUtil : '-'), ]), V.h('td', {}, [ V.h('a',{ 'class':'btn', 'href':gui.router.generate('node', {'nodeID': node.node_id}) }, 'Edit') ]), ]); } render () { this.debouncer.run(() => { this.renderView(); }); } renderView () { let nodes = store.getNodes(); if (this.filter && this.filter.value !== '') { // eslint-disable-next-line id-length nodes = nodes.filter((d) => { return d.node_id.toLowerCase().indexOf(this.filter.value.toLowerCase()) > -1 || d.hostname.toLowerCase().indexOf(this.filter.value.toLowerCase()) > -1 || d.owner.toLowerCase().indexOf(this.filter.value.toLowerCase()) > -1 }); } this.table.setData(nodes); } }