Skip to content

Commit

Permalink
Make displayed columns configurable
Browse files Browse the repository at this point in the history
  • Loading branch information
@brvphoenix
brvphoenix committed Apr 29, 2023
1 parent e826180 commit ef2dcf0
Show file tree
Hide file tree
Showing 2 changed files with 46 additions and 58 deletions.
95 changes: 43 additions & 52 deletions luci-app-wrtbwmon/htdocs/luci-static/resources/view/wrtbwmon/details.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,17 @@
var cachedData = [];
var luciConfig = '/etc/luci-wrtbwmon.conf';
var hostNameFile = '/etc/wrtbwmon.user';
var columns = {
thClient: _('Clients'),
thMAC: _('MAC'),
thDownload: _('Download'),
thUpload: _('Upload'),
thTotalDown: _('Total Down'),
thTotalUp: _('Total Up'),
thTotal: _('Total'),
thFirstSeen: _('First Seen'),
thLastSeen: _('Last Seen')
};

var callLuciDHCPLeases = rpc.declare({
object: 'luci-rpc',
Expand Down Expand Up @@ -89,26 +100,9 @@ function clickToSelectProtocol(settings, table, updated, updating, ev) {
updateData(settings, table, updated, updating, true);
}

function clickToShowMore(settings, table, ev) {
var t = table.querySelector('.tr.table-totals');
settings.showMore = ev.target.checked

if (t && t.firstElementChild)
t.firstElementChild.textContent = _('TOTAL') + (settings.showMore ? '' : ': ' + (table.childElementCount - 2));

table.querySelectorAll('.showMore').forEach(function(e) {
e.classList.toggle('hide');
});

if (!settings.showMore && table.querySelector('.th.sorted').classList.contains('hide')) {
table.querySelector('[id="thTotal"]').click();
}
}

function createOption(args, val) {
var cstr = args[0], title = args[1], desc = args.slice(-1), widget, frame;
val = val != null ? val : args[2];
widget = args.length == 5 ? new cstr(val, args[3]) : new cstr(val, args[3], args[4]);
widget = args.length == 4 ? new cstr(val, args[2]) : new cstr(val, args[2], args[3]);

frame = E('div', {'class': 'cbi-value'}, [
E('label', {'class': 'cbi-value-title'}, title),
Expand All @@ -123,13 +117,12 @@ function createOption(args, val) {

function displayTable(tb, settings) {
var elm, elmID, col, sortedBy, flag, IPVer;
var thID = ['thClient', 'thMAC', 'thDownload', 'thUpload', 'thTotalDown', 'thTotalUp', 'thTotal', 'thFirstSeen', 'thLastSeen', ''];

elm = tb.querySelector('.th.sorted');
elmID = elm ? elm.id : 'thTotal';
sortedBy = elm && elm.classList.contains('ascent') ? 'asc' : 'desc';

col = thID.indexOf(elmID);
col = Object.keys(columns).indexOf(elmID);
IPVer = col == 0 ? settings.protocol : null;
flag = sortedBy == 'desc' ? 1 : -1;

Expand Down Expand Up @@ -180,17 +173,17 @@ function handleConfig(ev) {
var arglist, keylist = Object.keys(settings), res, cstrs = {}, node = [], body;

arglist = [
[ui.Select, _('Default Protocol'), 'ipv4', {'ipv4': _('ipv4'), 'ipv6': _('ipv6')}, {}, ''],
[ui.Select, _('Default Refresh Interval'), '5', {'-1': _('Disabled'), '2': _('2 seconds'), '5': _('5 seconds'), '10': _('10 seconds'), '30': _('30 seconds')}, {sort: ['-1', '2', '5', '10', '30']}, ''],
[ui.Checkbox, _('Default More Columns'), false, {value_enabled: true, value_disabled: false}, ''],
[ui.Checkbox, _('Show Zeros'), true, {value_enabled: true, value_disabled: false}, ''],
[ui.Checkbox, _('Transfer Speed in Bits'), false, {value_enabled: true, value_disabled: false}, ''],
[ui.Select, _('Multiple of Unit'), '1000', {'1000': _('SI - 1000'), '1024': _('IEC - 1024')}, {}, ''],
[ui.Checkbox, _('Use DSL Bandwidth'), false, {value_enabled: true, value_disabled: false}, ''],
[ui.Textfield, _('Upstream Bandwidth'), '100', {datatype: 'ufloat'}, 'Mbps'],
[ui.Textfield, _('Downstream Bandwidth'), '100', {datatype: 'ufloat'}, 'Mbps'],
[ui.DynamicList, _('Hide MAC Addresses'), [], '', {datatype: 'macaddr'}, '']
]; // [constructor, label, default_value(, all_values), options, description]
[ui.Select, _('Default Protocol'), {'ipv4': _('ipv4'), 'ipv6': _('ipv6')}, {}, ''],
[ui.Select, _('Default Refresh Interval'), {'-1': _('Disabled'), '2': _('2 seconds'), '5': _('5 seconds'), '10': _('10 seconds'), '30': _('30 seconds')}, {sort: ['-1', '2', '5', '10', '30']}, ''],
[ui.Dropdown, _('Default More Columns'), columns, {multiple: true, sort: false, custom_placeholder: '', dropdown_items: 3}, ''],
[ui.Checkbox, _('Show Zeros'), {value_enabled: true, value_disabled: false}, ''],
[ui.Checkbox, _('Transfer Speed in Bits'), {value_enabled: true, value_disabled: false}, ''],
[ui.Select, _('Multiple of Unit'), {'1000': _('SI - 1000'), '1024': _('IEC - 1024')}, {}, ''],
[ui.Checkbox, _('Use DSL Bandwidth'), {value_enabled: true, value_disabled: false}, ''],
[ui.Textfield, _('Upstream Bandwidth'), {datatype: 'ufloat'}, 'Mbps'],
[ui.Textfield, _('Downstream Bandwidth'), {datatype: 'ufloat'}, 'Mbps'],
[ui.DynamicList, _('Hide MAC Addresses'), '', {datatype: 'macaddr'}, '']
]; // [constructor, label(, all_choices), options, description]

for (var i = 0; i < keylist.length; i++) {
res = createOption(arglist[i], settings[keylist[i]]);
Expand Down Expand Up @@ -233,7 +226,7 @@ function parseDatabase(raw, hosts, showZero, hideMACs) {
var values = [],
totals = [0, 0, 0, 0, 0],
rows = raw.trim().split(/\r?\n|\r/g),
rowIndex = [1, 0, 3, 4, 5, 6, 7, 8, 1];
rowIndex = [1, 0, 3, 4, 5, 6, 7, 8, 9, 0];

rows.shift();

Expand All @@ -256,13 +249,17 @@ function parseDatabase(raw, hosts, showZero, hideMACs) {
}

function parseDefaultSettings(file) {
var keylist = ['protocol', 'interval', 'showMore', 'showZero', 'useBits', 'useMultiple', 'useDSL', 'upstream', 'downstream', 'hideMACs'],
valuelist = ['ipv4', '5', false, true, false, '1000', false, '100', '100', []];
var defaultColumns = ['thClient', 'thDownload', 'thUpload', 'thTotalDown', 'thTotalUp', 'thTotal'],
keylist = ['protocol', 'interval', 'showColumns', 'showZero', 'useBits', 'useMultiple', 'useDSL', 'upstream', 'downstream', 'hideMACs'],
valuelist = ['ipv4', '5', defaultColumns, true, false, '1000', false, '100', '100', []];

return fs.read_direct(file, 'json').then(function(settings) {
return fs.read_direct(file, 'json').then(function(oldSettings) {
var settings = {};
for (var i = 0; i < keylist.length; i++) {
if (!(keylist[i] in settings))
if (!(keylist[i] in oldSettings))
settings[keylist[i]] = valuelist[i];
else
settings[keylist[i]] = oldSettings[keylist[i]];
}

if (settings.useDSL) {
Expand Down Expand Up @@ -312,8 +309,11 @@ function setupThisDOM(settings, table) {
displayTable(table, settings);
});

if (e.classList.contains('showMore'))
settings.showMore ? e.classList.remove('hide') : e.classList.add('hide');
if (settings.showColumns.indexOf(e.id) >= 0)
e.classList.remove('hide');
else
e.classList.add('hide');

}
});
}
Expand Down Expand Up @@ -449,7 +449,7 @@ function updateTable(tb, values, placeholder, settings) {
newNode = document.createElement('tr');
childTD = document.createElement('td');
for (var j = 0; j < tbTitle.children.length; j++) {
childTD.className = 'td' + ('178'.indexOf(j) != -1 ? ' showMore' + (settings.showMore ? '' : ' hide') : '');
childTD.className = 'td' + (settings.showColumns.indexOf(tbTitle.children[j].id) >= 0 ? '' : ' hide');
childTD.setAttribute('data-title', tbTitle.children[j].textContent);
newNode.appendChild(childTD.cloneNode(true));
}
Expand Down Expand Up @@ -499,7 +499,7 @@ function updateTable(tb, values, placeholder, settings) {
newNode = fragment.firstChild.cloneNode(true);
newNode.className = 'tr table-totals';

newNode.children[0].textContent = _('TOTAL') + (settings.showMore ? '' : ': ' + formData.length);
newNode.children[0].textContent = _('TOTAL') + (settings.showColumns.indexOf('thMAC') >= 0 ? '' : ': ' + formData.length);
newNode.children[1].textContent = formData.length + ' ' + _('Clients');

for (var j = 0; j < tbTitle.childElementCount; j++) {
Expand Down Expand Up @@ -554,14 +554,14 @@ return view.extend({
table = E('table', { 'class': 'table', 'id': 'traffic' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th', 'id': 'thClient' }, _('Clients')),
E('th', { 'class': 'th showMore hide', 'id': 'thMAC' }, _('MAC')),
E('th', { 'class': 'th hide', 'id': 'thMAC' }, _('MAC')),
E('th', { 'class': 'th', 'id': 'thDownload' }, _('Download')),
E('th', { 'class': 'th', 'id': 'thUpload' }, _('Upload')),
E('th', { 'class': 'th', 'id': 'thTotalDown' }, _('Total Down')),
E('th', { 'class': 'th', 'id': 'thTotalUp' }, _('Total Up')),
E('th', { 'class': 'th sorted', 'id': 'thTotal' }, _('Total')),
E('th', { 'class': 'th showMore hide', 'id': 'thFirstSeen' }, _('First Seen')),
E('th', { 'class': 'th showMore hide', 'id': 'thLastSeen' }, _('Last Seen'))
E('th', { 'class': 'th hide', 'id': 'thFirstSeen' }, _('First Seen')),
E('th', { 'class': 'th hide', 'id': 'thLastSeen' }, _('Last Seen'))
]),
E('tr', {'class': 'tr placeholder'}, [
E('td', { 'class': 'td' }, E('em', {}, _('Collecting data...')))
Expand All @@ -584,15 +584,6 @@ return view.extend({
'ipv6': 'ipv6'
}, settings.protocol))
]),
E('div', {}, [
E('label', { 'for': 'showMore' }, _('Show More Columns:')),
E('input', {
'id': 'showMore',
'type': 'checkbox',
'click': clickToShowMore.bind(this, settings, table),
'checked': settings.showMore ? '' : null
}),
]),
E('div', {}, [
E('button', {
'class': 'btn cbi-button cbi-button-reset important',
Expand Down
9 changes: 3 additions & 6 deletions luci-app-wrtbwmon/htdocs/luci-static/resources/view/wrtbwmon/wrtbwmon.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
padding: .5rem;
line-height: 2rem;
}
#control_panel > :nth-child(1), #control_panel > :nth-child(2) {
#control_panel > :nth-child(1) {
display: inline-block;
flex: 1 1 25%;
flex: 1 1 50%;
}
#control_panel > :nth-child(3) {
#control_panel > :nth-child(2) {
flex: 1 1 50%;
text-align: right;
}
Expand All @@ -31,9 +31,6 @@
min-width: unset;
width: auto;
}
#control_panel input[type="checkbox"]{
margin: 0
}
#control_panel + div {
display: flex;
margin-bottom: .5rem;
Expand Down

0 comments on commit ef2dcf0

Please sign in to comment.