treewide: transition div tables to actual table markup

Modern browsers allow decomposing table markup equally well as nested div
constructs, therefor migrate our <div> table markup to actual <table> tags
but keep the old table/tr/th/td CSS classes for now to allow for a smooth
theme transition.

Signed-off-by: Jo-Philipp Wich <jo@mein.io>
This commit is contained in:
Jo-Philipp Wich 2020-11-27 20:54:18 +01:00
parent c850608dcf
commit 03c77dafe3
31 changed files with 384 additions and 384 deletions

View file

@ -73,16 +73,16 @@ var cbiACLSelect = form.Value.extend({
var readMatches = globListToRegExp(section_id, 'read'),
writeMatches = globListToRegExp(section_id, 'write');
var table = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'th' }, [ _('ACL group') ]),
E('div', { 'class': 'th' }, [ _('Description') ]),
E('div', { 'class': 'th' }, [ _('Access level') ])
var table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr' }, [
E('th', { 'class': 'th' }, [ _('ACL group') ]),
E('th', { 'class': 'th' }, [ _('Description') ]),
E('th', { 'class': 'th' }, [ _('Access level') ])
]),
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td' }, [ '' ]),
E('div', { 'class': 'td' }, [ '' ]),
E('div', { 'class': 'td' }, [
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td' }, [ '' ]),
E('td', { 'class': 'td' }, [ '' ]),
E('td', { 'class': 'td' }, [
_('Set all: ', 'Set all permissions in the table below to one of the given values'),
E('a', { 'href': '#', 'click': function() {
table.querySelectorAll('select').forEach(function(select) { select.value = select.options[0].value });
@ -102,10 +102,10 @@ var cbiACLSelect = form.Value.extend({
isReadable = (readMatches[0].test(aclGroupName) && !readMatches[1].test(aclGroupName)) || null,
isWritable = (writeMatches[0].test(aclGroupName) && !writeMatches[1].test(aclGroupName)) || null;
table.appendChild(E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td' }, [ aclGroupName ]),
E('div', { 'class': 'td' }, [ aclList[aclGroupName].description || '-' ]),
E('div', { 'class': 'td' }, [
table.appendChild(E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td' }, [ aclGroupName ]),
E('td', { 'class': 'td' }, [ aclList[aclGroupName].description || '-' ]),
E('td', { 'class': 'td' }, [
E('select', { 'data-acl-group': aclGroupName }, [
isRequired ? E([]) : E('option', { 'value': '' }, [ _('denied', 'No permissions granted') ]),
E('option', { 'value': 'read', 'selected': isReadable }, [ _('readonly', 'Only read permissions granted') ]),

View file

@ -200,14 +200,14 @@ return view.extend({
content = JSON.parse(dnsreport);
var rows_top = [];
var tbl_top = E('div', { 'class': 'table', 'id': 'top_10' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th right' }, _('Count')),
E('div', { 'class': 'th' }, _('Name / IP Address')),
E('div', { 'class': 'th right' }, _('Count')),
E('div', { 'class': 'th' }, _('Domain')),
E('div', { 'class': 'th right' }, _('Count')),
E('div', { 'class': 'th' }, _('Blocked Domain'))
var tbl_top = E('table', { 'class': 'table', 'id': 'top_10' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th right' }, _('Count')),
E('th', { 'class': 'th' }, _('Name / IP Address')),
E('th', { 'class': 'th right' }, _('Count')),
E('th', { 'class': 'th' }, _('Domain')),
E('th', { 'class': 'th right' }, _('Count')),
E('th', { 'class': 'th' }, _('Blocked Domain'))
])
]);
@ -247,14 +247,14 @@ return view.extend({
cbi_update_table(tbl_top, rows_top);
var rows_requests = [];
var tbl_requests = E('div', { 'class': 'table', 'id': 'requests' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Date')),
E('div', { 'class': 'th' }, _('Time')),
E('div', { 'class': 'th' }, _('Client')),
E('div', { 'class': 'th' }, _('Domain')),
E('div', { 'class': 'th' }, _('Answer')),
E('div', { 'class': 'th' }, _('Action'))
var tbl_requests = E('table', { 'class': 'table', 'id': 'requests' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Date')),
E('th', { 'class': 'th' }, _('Time')),
E('th', { 'class': 'th' }, _('Client')),
E('th', { 'class': 'th' }, _('Domain')),
E('th', { 'class': 'th' }, _('Answer')),
E('th', { 'class': 'th' }, _('Action'))
])
]);

View file

@ -198,12 +198,12 @@ return view.extend({
body.appendChild(E('h3', device_info.device_name + _(' Partitions')));
if (device_info.device_name) {
var partitions_table = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, [ _('Partition') ]),
E('div', { 'class': 'th' }, [ _('Status') ]),
E('div', { 'class': 'th' }, [ _('Firmware') ]),
E('div', { 'class': 'th' }, [ _('Reboot') ])
var partitions_table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, [ _('Partition') ]),
E('th', { 'class': 'th' }, [ _('Status') ]),
E('th', { 'class': 'th' }, [ _('Firmware') ]),
E('th', { 'class': 'th' }, [ _('Reboot') ])
])
]);

View file

@ -22,13 +22,13 @@ return baseclass.extend({
render: function(data) {
var services = data[0];
var table = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Configuration')),
E('div', { 'class': 'th' }, _('Next Update')),
E('div', { 'class': 'th' }, _('Lookup Hostname')),
E('div', { 'class': 'th' }, _('Registered IP')),
E('div', { 'class': 'th' }, _('Network'))
var table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Configuration')),
E('th', { 'class': 'th' }, _('Next Update')),
E('th', { 'class': 'th' }, _('Lookup Hostname')),
E('th', { 'class': 'th' }, _('Registered IP')),
E('th', { 'class': 'th' }, _('Network'))
])
]);

View file

@ -609,14 +609,14 @@ return view.extend({
])
])
]),
E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, label || col),
E('div', { 'class': 'th' }, _('Conn.')),
E('div', { 'class': 'th' }, _('Down. (Bytes)')),
E('div', { 'class': 'th' }, _('Down. (Pkts.)')),
E('div', { 'class': 'th' }, _('Up. (Bytes)')),
E('div', { 'class': 'th' }, _('Up. (Pkts.)')),
E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, label || col),
E('th', { 'class': 'th' }, _('Conn.')),
E('th', { 'class': 'th' }, _('Down. (Bytes)')),
E('th', { 'class': 'th' }, _('Down. (Pkts.)')),
E('th', { 'class': 'th' }, _('Up. (Bytes)')),
E('th', { 'class': 'th' }, _('Up. (Pkts.)')),
])
])
]);
@ -841,18 +841,18 @@ return view.extend({
])
]),
E('div', { 'class': 'table', 'id': 'host-data' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th left hostname' }, [ _('Host') ]),
E('div', { 'class': 'th right' }, [ _('MAC') ]),
E('div', { 'class': 'th right' }, [ _('Connections') ]),
E('div', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
E('div', { 'class': 'th right' }, [ _('Download (Packets)') ]),
E('div', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
E('div', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
E('table', { 'class': 'table', 'id': 'host-data' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th left hostname' }, [ _('Host') ]),
E('th', { 'class': 'th right' }, [ _('MAC') ]),
E('th', { 'class': 'th right' }, [ _('Connections') ]),
E('th', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
E('th', { 'class': 'th right' }, [ _('Download (Packets)') ]),
E('th', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
E('th', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
]),
E('div', { 'class': 'tr placeholder' }, [
E('div', { 'class': 'td' }, [
E('tr', { 'class': 'tr placeholder' }, [
E('td', { 'class': 'td' }, [
E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
])
])
@ -881,17 +881,17 @@ return view.extend({
])
]),
E('div', { 'class': 'table', 'id': 'layer7-data' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th left' }, [ _('Application') ]),
E('div', { 'class': 'th right' }, [ _('Connections') ]),
E('div', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
E('div', { 'class': 'th right' }, [ _('Download (Packets)') ]),
E('div', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
E('div', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
E('table', { 'class': 'table', 'id': 'layer7-data' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th left' }, [ _('Application') ]),
E('th', { 'class': 'th right' }, [ _('Connections') ]),
E('th', { 'class': 'th right' }, [ _('Download (Bytes)') ]),
E('th', { 'class': 'th right' }, [ _('Download (Packets)') ]),
E('th', { 'class': 'th right' }, [ _('Upload (Bytes)') ]),
E('th', { 'class': 'th right' }, [ _('Upload (Packets)') ]),
]),
E('div', { 'class': 'tr placeholder' }, [
E('div', { 'class': 'td' }, [
E('tr', { 'class': 'tr placeholder' }, [
E('td', { 'class': 'td' }, [
E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
])
])
@ -920,18 +920,18 @@ return view.extend({
])
]),
E('div', { 'class': 'table', 'id': 'ipv6-data' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th left' }, [ _('Host') ]),
E('div', { 'class': 'th right' }, [ _('MAC') ]),
E('div', { 'class': 'th double right hide-xs' }, [ _('Family') ]),
E('div', { 'class': 'th double right' }, [ _('Download (Bytes)') ]),
E('div', { 'class': 'th double right' }, [ _('Download (Packets)') ]),
E('div', { 'class': 'th double right' }, [ _('Upload (Bytes)') ]),
E('div', { 'class': 'th double right' }, [ _('Upload (Packets)') ]),
E('table', { 'class': 'table', 'id': 'ipv6-data' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th left' }, [ _('Host') ]),
E('th', { 'class': 'th right' }, [ _('MAC') ]),
E('th', { 'class': 'th double right hide-xs' }, [ _('Family') ]),
E('th', { 'class': 'th double right' }, [ _('Download (Bytes)') ]),
E('th', { 'class': 'th double right' }, [ _('Download (Packets)') ]),
E('th', { 'class': 'th double right' }, [ _('Upload (Bytes)') ]),
E('th', { 'class': 'th double right' }, [ _('Upload (Packets)') ]),
]),
E('div', { 'class': 'tr placeholder' }, [
E('div', { 'class': 'td' }, [
E('tr', { 'class': 'tr placeholder' }, [
E('td', { 'class': 'td' }, [
E('em', { 'class': 'spinning' }, [ _('Collecting data...') ])
])
])

View file

@ -1064,13 +1064,13 @@ return view.extend({
])
]),
E('div', { 'id': 'packages', 'class': 'table' }, [
E('div', { 'class': 'tr cbi-section-table-titles' }, [
E('div', { 'class': 'th col-2 left' }, [ _('Package name') ]),
E('div', { 'class': 'th col-2 left version' }, [ _('Version') ]),
E('div', { 'class': 'th col-1 center size'}, [ _('Size (.ipk)') ]),
E('div', { 'class': 'th col-10 left' }, [ _('Description') ]),
E('div', { 'class': 'th right cbi-section-actions' }, [ '\u00a0' ])
E('table', { 'id': 'packages', 'class': 'table' }, [
E('tr', { 'class': 'tr cbi-section-table-titles' }, [
E('th', { 'class': 'th col-2 left' }, [ _('Package name') ]),
E('th', { 'class': 'th col-2 left version' }, [ _('Version') ]),
E('th', { 'class': 'th col-1 center size'}, [ _('Size (.ipk)') ]),
E('th', { 'class': 'th col-10 left' }, [ _('Description') ]),
E('th', { 'class': 'th right cbi-section-actions' }, [ '\u00a0' ])
])
])
]);

View file

@ -227,7 +227,7 @@ return view.extend({
'click': ui.createHandlerFn(this, handleRemove, section_id)
}, _('Del'))
];
return E('div', { 'class': 'td middle cbi-section-actions' }, E('div', btns));
return E('td', { 'class': 'td middle cbi-section-actions' }, E('div', btns));
};
o = s.taboption('travelmate', form.Flag, '_enabled', _('Enabled'));
@ -566,14 +566,14 @@ return view.extend({
modal 'scan' dialog
*/
s.handleScan = function(radio) {
var table = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th col-1 middle left' }, _('Strength')),
E('div', { 'class': 'th col-1 middle left hide-xs' }, _('Channel')),
E('div', { 'class': 'th col-2 middle left' }, _('SSID')),
E('div', { 'class': 'th col-2 middle left' }, _('BSSID')),
E('div', { 'class': 'th col-3 middle left' }, _('Encryption')),
E('div', { 'class': 'th cbi-section-actions right' }, '\xa0')
var table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th col-1 middle left' }, _('Strength')),
E('th', { 'class': 'th col-1 middle left hide-xs' }, _('Channel')),
E('th', { 'class': 'th col-2 middle left' }, _('SSID')),
E('th', { 'class': 'th col-2 middle left' }, _('BSSID')),
E('th', { 'class': 'th col-3 middle left' }, _('Encryption')),
E('th', { 'class': 'th cbi-section-actions right' }, '\xa0')
])
]);
cbi_update_table(table, [], E('em', { class: 'spinning' }, _('Starting wireless scan on \'' + radio + '\'...')));

View file

@ -38,15 +38,15 @@ return baseclass.extend({
render: function(data) {
var table = E('div', { 'class': 'table', 'id': 'upnp_status_table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Protocol')),
E('div', { 'class': 'th' }, _('External Port')),
E('div', { 'class': 'th' }, _('Client Address')),
E('div', { 'class': 'th' }, _('Host')),
E('div', { 'class': 'th' }, _('Client Port')),
E('div', { 'class': 'th' }, _('Description')),
E('div', { 'class': 'th cbi-section-actions' }, '')
var table = E('table', { 'class': 'table', 'id': 'upnp_status_table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Protocol')),
E('th', { 'class': 'th' }, _('External Port')),
E('th', { 'class': 'th' }, _('Client Address')),
E('th', { 'class': 'th' }, _('Host')),
E('th', { 'class': 'th' }, _('Client Port')),
E('th', { 'class': 'th' }, _('Description')),
E('th', { 'class': 'th cbi-section-actions' }, '')
])
]);

View file

@ -78,15 +78,15 @@ return view.extend({
s = m.section(form.GridSection, '_active_rules');
s.render = L.bind(function(view, section_id) {
var table = E('div', { 'class': 'table cbi-section-table', 'id': 'upnp_status_table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Protocol')),
E('div', { 'class': 'th' }, _('External Port')),
E('div', { 'class': 'th' }, _('Client Address')),
E('div', { 'class': 'th' }, _('Host')),
E('div', { 'class': 'th' }, _('Client Port')),
E('div', { 'class': 'th' }, _('Description')),
E('div', { 'class': 'th cbi-section-actions' }, '')
var table = E('table', { 'class': 'table cbi-section-table', 'id': 'upnp_status_table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Protocol')),
E('th', { 'class': 'th' }, _('External Port')),
E('th', { 'class': 'th' }, _('Client Address')),
E('th', { 'class': 'th' }, _('Host')),
E('th', { 'class': 'th' }, _('Client Port')),
E('th', { 'class': 'th' }, _('Description')),
E('th', { 'class': 'th cbi-section-actions' }, '')
])
]);

View file

@ -76,10 +76,10 @@ return view.extend({
};
o.render = L.bind(function(view, section_id) {
var table = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Interface')),
E('div', { 'class': 'th right' }, _('Delete'))
var table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Interface')),
E('th', { 'class': 'th right' }, _('Delete'))
])
]);

View file

@ -744,22 +744,22 @@ function cbi_update_table(table, data, placeholder) {
if (!isElem(target))
return;
target.querySelectorAll('.tr.table-titles, .cbi-section-table-titles').forEach(function(thead) {
target.querySelectorAll('tr.table-titles, .tr.table-titles, .cbi-section-table-titles').forEach(function(thead) {
var titles = [];
thead.querySelectorAll('.th').forEach(function(th) {
thead.querySelectorAll('th, .th').forEach(function(th) {
titles.push(th);
});
if (Array.isArray(data)) {
var n = 0, rows = target.querySelectorAll('.tr');
var n = 0, rows = target.querySelectorAll('tr, .tr');
data.forEach(function(row) {
var trow = E('div', { 'class': 'tr' });
var trow = E('tr', { 'class': 'tr' });
for (var i = 0; i < titles.length; i++) {
var text = (titles[i].innerText || '').trim();
var td = trow.appendChild(E('div', {
var td = trow.appendChild(E('td', {
'class': titles[i].className,
'data-title': (text !== '') ? text : null
}, row[i] || ''));
@ -780,8 +780,8 @@ function cbi_update_table(table, data, placeholder) {
target.removeChild(rows[n]);
if (placeholder && target.firstElementChild === target.lastElementChild) {
var trow = target.appendChild(E('div', { 'class': 'tr placeholder' }));
var td = trow.appendChild(E('div', { 'class': titles[0].className }, placeholder));
var trow = target.appendChild(E('tr', { 'class': 'tr placeholder' }));
var td = trow.appendChild(E('td', { 'class': titles[0].className }, placeholder));
td.classList.remove('th');
td.classList.add('td');
@ -790,10 +790,10 @@ function cbi_update_table(table, data, placeholder) {
else {
thead.parentNode.style.display = 'none';
thead.parentNode.querySelectorAll('.tr, .cbi-section-table-row').forEach(function(trow) {
thead.parentNode.querySelectorAll('tr, .tr, .cbi-section-table-row').forEach(function(trow) {
if (trow !== thead) {
var n = 0;
trow.querySelectorAll('.th, .td').forEach(function(td) {
trow.querySelectorAll('th, td, .th, .td').forEach(function(td) {
if (n < titles.length) {
var text = (titles[n++].innerText || '').trim();
if (text !== '')

View file

@ -2460,7 +2460,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
'data-tab': (this.map.tabbed && !this.parentoption) ? this.sectiontype : null,
'data-tab-title': (this.map.tabbed && !this.parentoption) ? this.title || this.sectiontype : null
}),
tableEl = E('div', {
tableEl = E('table', {
'class': 'table cbi-section-table'
});
@ -2478,7 +2478,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
if (sectionname == null)
sectionname = cfgsections[i];
var trEl = E('div', {
var trEl = E('tr', {
'id': 'cbi-%s-%s'.format(config_name, cfgsections[i]),
'class': 'tr cbi-section-table-row',
'data-sid': cfgsections[i],
@ -2506,8 +2506,8 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
}
if (nodes.length == 0)
tableEl.appendChild(E('div', { 'class': 'tr cbi-section-table-row placeholder' },
E('div', { 'class': 'td' },
tableEl.appendChild(E('tr', { 'class': 'tr cbi-section-table-row placeholder' },
E('td', { 'class': 'td' },
E('em', {}, _('This section contains no values yet')))));
sectionEl.appendChild(tableEl);
@ -2537,7 +2537,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
}
if (has_titles) {
var trEl = E('div', {
var trEl = E('tr', {
'class': 'tr cbi-section-table-titles ' + anon_class,
'data-title': (!this.anonymous || this.sectiontitle) ? _('Name') : null
});
@ -2546,7 +2546,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
if (opt.modalonly)
continue;
trEl.appendChild(E('div', {
trEl.appendChild(E('th', {
'class': 'th cbi-section-table-cell',
'data-widget': opt.__name__
}));
@ -2566,7 +2566,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
}
if (this.sortable || this.extedit || this.addremove || has_more || has_action)
trEl.appendChild(E('div', {
trEl.appendChild(E('th', {
'class': 'th cbi-section-table-cell cbi-section-actions'
}));
@ -2574,7 +2574,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
}
if (has_descriptions && !this.nodescriptions) {
var trEl = E('div', {
var trEl = E('tr', {
'class': 'tr cbi-section-table-descr ' + anon_class
});
@ -2582,7 +2582,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
if (opt.modalonly)
continue;
trEl.appendChild(E('div', {
trEl.appendChild(E('th', {
'class': 'th cbi-section-table-cell',
'data-widget': opt.__name__
}, opt.description));
@ -2593,7 +2593,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
}
if (this.sortable || this.extedit || this.addremove || has_more || has_action)
trEl.appendChild(E('div', {
trEl.appendChild(E('th', {
'class': 'th cbi-section-table-cell cbi-section-actions'
}));
@ -2610,7 +2610,7 @@ var CBITableSection = CBITypedSection.extend(/** @lends LuCI.form.TableSection.p
if (!this.sortable && !this.extedit && !this.addremove && !more_label)
return E([]);
var tdEl = E('div', {
var tdEl = E('td', {
'class': 'td cbi-section-table-cell nowrap cbi-section-actions'
}, E('div'));
@ -2998,7 +2998,7 @@ var CBIGridSection = CBITableSection.extend(/** @lends LuCI.form.GridSection.pro
descr = this.stripTags(opt.description).trim(),
value = opt.textvalue(section_id);
return E('div', {
return E('td', {
'class': 'td cbi-value-field',
'data-title': (title != '') ? title : null,
'data-description': (descr != '') ? descr : null,
@ -3289,7 +3289,7 @@ var CBIValue = CBIAbstractValue.extend(/** @lends LuCI.form.Value.prototype */ {
if (in_table) {
var title = this.stripTags(this.title).trim();
optionEl = E('div', {
optionEl = E('td', {
'class': 'td cbi-value-field',
'data-title': (title != '') ? title : null,
'data-description': this.stripTags(this.description).trim(),

View file

@ -25,15 +25,15 @@ return baseclass.extend({
var container_wapper = E('div', { 'class': 'router-status-lan dashboard-bg box-s1' });
var container_box = E('div', { 'class': 'lan-info devices-list' });
var container_devices = E('div', { 'class': 'table assoclist devices-info' }, [
E('div', { 'class': 'tr table-titles dashboard-bg' }, [
E('div', { 'class': 'th nowrap' }, _('Hostname')),
E('div', { 'class': 'th' }, _('IP Address')),
E('div', { 'class': 'th' }, _('MAC')),
var container_devices = E('table', { 'class': 'table assoclist devices-info' }, [
E('tr', { 'class': 'tr table-titles dashboard-bg' }, [
E('th', { 'class': 'th nowrap' }, _('Hostname')),
E('th', { 'class': 'th' }, _('IP Address')),
E('th', { 'class': 'th' }, _('MAC')),
])
]);
var container_deviceslist = E('div', { 'class': 'table assoclist devices-info' });
var container_deviceslist = E('table', { 'class': 'table assoclist devices-info' });
container_box.appendChild(E('div', { 'class': 'title'}, [
E('img', {
@ -48,21 +48,21 @@ return baseclass.extend({
for(var idx in this.params.lan.devices) {
var deivce = this.params.lan.devices[idx];
container_deviceslist.appendChild(E('div', { 'class': 'tr cbi-rowstyle-1'}, [
container_deviceslist.appendChild(E('tr', { 'class': 'tr cbi-rowstyle-1'}, [
E('div', { 'class': 'td device-info'}, [
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ deivce.hostname ]),
]),
]),
E('div', { 'class': 'td device-info'}, [
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ deivce.ipv4 ]),
]),
]),
E('div', { 'class': 'td device-info'}, [
E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': 'd-inline-block'}, [ deivce.macaddr ]),
]),

View file

@ -78,20 +78,20 @@ return baseclass.extend({
container_box.appendChild(container_radio);
var container_devices = E('div', { 'class': 'table assoclist devices-info' }, [
E('div', { 'class': 'tr table-titles dashboard-bg' }, [
E('div', { 'class': 'th nowrap' }, _('Hostname')),
E('div', { 'class': 'th' }, _('Wireless')),
E('div', { 'class': 'th' }, _('Signal')),
E('div', { 'class': 'th' }, '%s / %s'.format( _('Up.'), _('Down.')))
var container_devices = E('table', { 'class': 'table assoclist devices-info' }, [
E('tr', { 'class': 'tr table-titles dashboard-bg' }, [
E('th', { 'class': 'th nowrap' }, _('Hostname')),
E('th', { 'class': 'th' }, _('Wireless')),
E('th', { 'class': 'th' }, _('Signal')),
E('th', { 'class': 'th' }, '%s / %s'.format( _('Up.'), _('Down.')))
])
]);
var container_devices_item;
var container_devices_list = E('div', { 'class': 'table assoclist devices-info' });
var container_devices_list = E('table', { 'class': 'table assoclist devices-info' });
for (var i =0; i < this.params.wifi.devices.length; i++) {
container_devices_item = E('div', { 'class': 'tr cbi-rowstyle-1' });
container_devices_item = E('tr', { 'class': 'tr cbi-rowstyle-1' });
for(var idx in this.params.wifi.devices[i]) {
var device = this.params.wifi.devices[i];
@ -109,7 +109,7 @@ return baseclass.extend({
])
]);
} else if ('rate' == idx) {
container_content = E('div', { 'class': 'td device-info' }, [
container_content = E('td', { 'class': 'td device-info' }, [
E('p', {}, [
E('span', { 'class': ''}, [ device[idx].value.rx ]),
E('br'),
@ -117,7 +117,7 @@ return baseclass.extend({
])
]);
} else {
container_content = E('div', { 'class': 'td device-info'}, [
container_content = E('td', { 'class': 'td device-info'}, [
E('p', {}, [
E('span', { 'class': ''}, [ device[idx].value ]),
])

View file

@ -31,15 +31,15 @@ CBILeaseStatus = form.DummyValue.extend({
renderWidget: function(section_id, option_id, cfgvalue) {
return E([
E('h4', _('Active DHCP Leases')),
E('div', { 'id': 'lease_status_table', 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Hostname')),
E('div', { 'class': 'th' }, _('IPv4-Address')),
E('div', { 'class': 'th' }, _('MAC-Address')),
E('div', { 'class': 'th' }, _('Lease time remaining'))
E('table', { 'id': 'lease_status_table', 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Hostname')),
E('th', { 'class': 'th' }, _('IPv4-Address')),
E('th', { 'class': 'th' }, _('MAC-Address')),
E('th', { 'class': 'th' }, _('Lease time remaining'))
]),
E('div', { 'class': 'tr placeholder' }, [
E('div', { 'class': 'td' }, E('em', _('Collecting data...')))
E('tr', { 'class': 'tr placeholder' }, [
E('td', { 'class': 'td' }, E('em', _('Collecting data...')))
])
])
]);
@ -50,15 +50,15 @@ CBILease6Status = form.DummyValue.extend({
renderWidget: function(section_id, option_id, cfgvalue) {
return E([
E('h4', _('Active DHCPv6 Leases')),
E('div', { 'id': 'lease6_status_table', 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Host')),
E('div', { 'class': 'th' }, _('IPv6-Address')),
E('div', { 'class': 'th' }, _('DUID')),
E('div', { 'class': 'th' }, _('Lease time remaining'))
E('table', { 'id': 'lease6_status_table', 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Host')),
E('th', { 'class': 'th' }, _('IPv6-Address')),
E('th', { 'class': 'th' }, _('DUID')),
E('th', { 'class': 'th' }, _('Lease time remaining'))
]),
E('div', { 'class': 'tr placeholder' }, [
E('div', { 'class': 'td' }, E('em', _('Collecting data...')))
E('tr', { 'class': 'tr placeholder' }, [
E('td', { 'class': 'td' }, E('em', _('Collecting data...')))
])
])
]);

View file

@ -66,9 +66,9 @@ return view.extend({
return E([], [
E('h2', {}, [ _('Network Utilities') ]),
E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left' }, [
E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td left' }, [
E('input', {
'style': 'margin:5px 0',
'type': 'text',
@ -91,7 +91,7 @@ return view.extend({
])
]),
E('div', { 'class': 'td left' }, [
E('td', { 'class': 'td left' }, [
E('input', {
'style': 'margin:5px 0',
'type': 'text',
@ -114,7 +114,7 @@ return view.extend({
])
]),
E('div', { 'class': 'td left' }, [
E('td', { 'class': 'td left' }, [
E('input', {
'style': 'margin:5px 0',
'type': 'text',

View file

@ -649,7 +649,7 @@ return view.extend({
if (bss.network.isClientDisconnectSupported()) {
if (table.firstElementChild.childNodes.length < 6)
table.firstElementChild.appendChild(E('div', { 'class': 'th cbi-section-actions'}));
table.firstElementChild.appendChild(E('th', { 'class': 'th cbi-section-actions'}));
row.push(E('button', {
'class': 'cbi-button cbi-button-remove',
@ -850,7 +850,7 @@ return view.extend({
];
}
return E('div', { 'class': 'td middle cbi-section-actions' }, E('div', btns));
return E('td', { 'class': 'td middle cbi-section-actions' }, E('div', btns));
};
s.addModalOptions = function(s) {
@ -1656,15 +1656,15 @@ return view.extend({
};
s.handleScan = function(radioDev, ev) {
var table = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th col-2 middle center' }, _('Signal')),
E('div', { 'class': 'th col-4 middle left' }, _('SSID')),
E('div', { 'class': 'th col-2 middle center hide-xs' }, _('Channel')),
E('div', { 'class': 'th col-2 middle left hide-xs' }, _('Mode')),
E('div', { 'class': 'th col-3 middle left hide-xs' }, _('BSSID')),
E('div', { 'class': 'th col-3 middle left' }, _('Encryption')),
E('div', { 'class': 'th cbi-section-actions right' }, ' '),
var table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th col-2 middle center' }, _('Signal')),
E('th', { 'class': 'th col-4 middle left' }, _('SSID')),
E('th', { 'class': 'th col-2 middle center hide-xs' }, _('Channel')),
E('th', { 'class': 'th col-2 middle left hide-xs' }, _('Mode')),
E('th', { 'class': 'th col-3 middle left hide-xs' }, _('BSSID')),
E('th', { 'class': 'th col-3 middle left' }, _('Encryption')),
E('th', { 'class': 'th cbi-section-actions right' }, ' '),
])
]);
@ -2073,13 +2073,13 @@ return view.extend({
.then(L.bind(this.poll_status, this, nodes));
}, this), 5);
var table = E('div', { 'class': 'table assoclist', 'id': 'wifi_assoclist_table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th nowrap' }, _('Network')),
E('div', { 'class': 'th hide-xs' }, _('MAC-Address')),
E('div', { 'class': 'th' }, _('Host')),
E('div', { 'class': 'th' }, _('Signal / Noise')),
E('div', { 'class': 'th' }, _('RX Rate / TX Rate'))
var table = E('table', { 'class': 'table assoclist', 'id': 'wifi_assoclist_table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th nowrap' }, _('Network')),
E('th', { 'class': 'th hide-xs' }, _('MAC-Address')),
E('th', { 'class': 'th' }, _('Host')),
E('th', { 'class': 'th' }, _('Signal / Noise')),
E('th', { 'class': 'th' }, _('RX Rate / TX Rate'))
])
]);

View file

@ -260,26 +260,26 @@ return view.extend({
E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
E('br'),
E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('Inbound:') ])),
E('div', { 'class': 'td', 'id': 'rx_bw_cur' }, rate(0, true)),
E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('Inbound:') ])),
E('td', { 'class': 'td', 'id': 'rx_bw_cur' }, rate(0, true)),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'rx_bw_avg' }, rate(0, true)),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'rx_bw_avg' }, rate(0, true)),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'rx_bw_peak' }, rate(0, true))
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'rx_bw_peak' }, rate(0, true))
]),
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('Outbound:') ])),
E('div', { 'class': 'td', 'id': 'tx_bw_cur' }, rate(0, true)),
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('Outbound:') ])),
E('td', { 'class': 'td', 'id': 'tx_bw_cur' }, rate(0, true)),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'tx_bw_avg' }, rate(0, true)),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'tx_bw_avg' }, rate(0, true)),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'tx_bw_peak' }, rate(0, true))
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'tx_bw_peak' }, rate(0, true))
])
])
]));

View file

@ -321,36 +321,36 @@ return view.extend({
E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
E('br'),
E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('UDP:') ])),
E('div', { 'class': 'td', 'id': 'lb_udp_cur' }, [ '0' ]),
E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('UDP:') ])),
E('td', { 'class': 'td', 'id': 'lb_udp_cur' }, [ '0' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'lb_udp_avg' }, [ '0' ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'lb_udp_avg' }, [ '0' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'lb_udp_peak' }, [ '0' ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'lb_udp_peak' }, [ '0' ])
]),
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('TCP:') ])),
E('div', { 'class': 'td', 'id': 'lb_tcp_cur' }, [ '0' ]),
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('TCP:') ])),
E('td', { 'class': 'td', 'id': 'lb_tcp_cur' }, [ '0' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'lb_tcp_avg' }, [ '0' ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'lb_tcp_avg' }, [ '0' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'lb_tcp_peak' }, [ '0' ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'lb_tcp_peak' }, [ '0' ])
]),
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid red' }, [ _('Other:') ])),
E('div', { 'class': 'td', 'id': 'lb_otr_cur' }, [ '0' ]),
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid red' }, [ _('Other:') ])),
E('td', { 'class': 'td', 'id': 'lb_otr_cur' }, [ '0' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'lb_otr_avg' }, [ '0' ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'lb_otr_avg' }, [ '0' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'lb_otr_peak' }, [ '0' ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'lb_otr_peak' }, [ '0' ])
])
]),
@ -376,16 +376,16 @@ return view.extend({
E('br'),
E('div', { 'class': 'cbi-section-node' }, [
E('div', { 'class': 'table', 'id': 'connections' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th col-2 hide-xs' }, [ _('Network') ]),
E('div', { 'class': 'th col-2' }, [ _('Protocol') ]),
E('div', { 'class': 'th col-7' }, [ _('Source') ]),
E('div', { 'class': 'th col-7' }, [ _('Destination') ]),
E('div', { 'class': 'th col-4' }, [ _('Transfer') ])
E('table', { 'class': 'table', 'id': 'connections' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th col-2 hide-xs' }, [ _('Network') ]),
E('th', { 'class': 'th col-2' }, [ _('Protocol') ]),
E('th', { 'class': 'th col-7' }, [ _('Source') ]),
E('th', { 'class': 'th col-7' }, [ _('Destination') ]),
E('th', { 'class': 'th col-4' }, [ _('Transfer') ])
]),
E('div', { 'class': 'tr placeholder' }, [
E('div', { 'class': 'td' }, [
E('tr', { 'class': 'tr placeholder' }, [
E('td', { 'class': 'td' }, [
E('em', {}, [ _('Collecting data...') ])
])
])

View file

@ -65,12 +65,12 @@ return baseclass.extend({
) : null
];
var table = E('div', { 'class': 'table' });
var table = E('table', { 'class': 'table' });
for (var i = 0; i < fields.length; i += 2) {
table.appendChild(E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
E('div', { 'class': 'td left' }, [ (fields[i + 1] != null) ? fields[i + 1] : '?' ])
table.appendChild(E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
E('td', { 'class': 'td left' }, [ (fields[i + 1] != null) ? fields[i + 1] : '?' ])
]));
}

View file

@ -43,12 +43,12 @@ return baseclass.extend({
if (swap.total > 0)
fields.push(_('Swap free'), swap.free, swap.total);
var table = E('div', { 'class': 'table' });
var table = E('table', { 'class': 'table' });
for (var i = 0; i < fields.length; i += 3) {
table.appendChild(E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
E('div', { 'class': 'td left' }, [
table.appendChild(E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
E('td', { 'class': 'td left' }, [
(fields[i + 1] != null) ? progressbar(fields[i + 1], fields[i + 2], true) : '?'
])
]));

View file

@ -81,12 +81,12 @@ return baseclass.extend({
_('Active Connections'), ct_max ? ct_count : null
];
var ctstatus = E('div', { 'class': 'table' });
var ctstatus = E('table', { 'class': 'table' });
for (var i = 0; i < fields.length; i += 2) {
ctstatus.appendChild(E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
E('div', { 'class': 'td left' }, [
ctstatus.appendChild(E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td left', 'width': '33%' }, [ fields[i] ]),
E('td', { 'class': 'td left' }, [
(fields[i + 1] != null) ? progressbar(fields[i + 1], ct_max) : '?'
])
]));

View file

@ -81,13 +81,13 @@ return baseclass.extend({
}
};
var table = E('div', { 'class': 'table lases' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Hostname')),
E('div', { 'class': 'th' }, _('IPv4-Address')),
E('div', { 'class': 'th' }, _('MAC-Address')),
E('div', { 'class': 'th' }, _('Lease time remaining')),
E('div', { 'class': 'th cbi-section-actions' }, _('Static Lease'))
var table = E('table', { 'class': 'table lases' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Hostname')),
E('th', { 'class': 'th' }, _('IPv4-Address')),
E('th', { 'class': 'th' }, _('MAC-Address')),
E('th', { 'class': 'th' }, _('Lease time remaining')),
E('th', { 'class': 'th cbi-section-actions' }, _('Static Lease'))
])
]);
@ -120,13 +120,13 @@ return baseclass.extend({
return rows;
}, this)), E('em', _('There are no active leases')));
var table6 = E('div', { 'class': 'table leases6' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Host')),
E('div', { 'class': 'th' }, _('IPv6-Address')),
E('div', { 'class': 'th' }, _('DUID')),
E('div', { 'class': 'th' }, _('Lease time remaining')),
E('div', { 'class': 'th cbi-section-actions' }, _('Static Lease'))
var table6 = E('table', { 'class': 'table leases6' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Host')),
E('th', { 'class': 'th' }, _('IPv6-Address')),
E('th', { 'class': 'th' }, _('DUID')),
E('th', { 'class': 'th' }, _('Lease time remaining')),
E('th', { 'class': 'th cbi-section-actions' }, _('Static Lease'))
])
]);

View file

@ -223,13 +223,13 @@ return baseclass.extend({
if (!table.lastElementChild)
return null;
var assoclist = E('div', { 'class': 'table assoclist' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th nowrap' }, _('Network')),
E('div', { 'class': 'th hide-xs' }, _('MAC-Address')),
E('div', { 'class': 'th' }, _('Host')),
E('div', { 'class': 'th' }, '%s / %s'.format(_('Signal'), _('Noise'))),
E('div', { 'class': 'th' }, '%s / %s'.format(_('RX Rate'), _('TX Rate')))
var assoclist = E('table', { 'class': 'table assoclist' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th nowrap' }, _('Network')),
E('th', { 'class': 'th hide-xs' }, _('MAC-Address')),
E('th', { 'class': 'th' }, _('Host')),
E('th', { 'class': 'th' }, '%s / %s'.format(_('Signal'), _('Noise'))),
E('th', { 'class': 'th' }, '%s / %s'.format(_('RX Rate'), _('TX Rate')))
])
]);
@ -324,7 +324,7 @@ return baseclass.extend({
if (networks[i].isClientDisconnectSupported() && hasWritePermission) {
if (assoclist.firstElementChild.childNodes.length < 6)
assoclist.firstElementChild.appendChild(E('div', { 'class': 'th cbi-section-actions' }));
assoclist.firstElementChild.appendChild(E('th', { 'class': 'th cbi-section-actions' }));
if (macfilter != null && macfilter != 'disable' && !this.isDeviceAdded[bss.mac]) {
row.push(new L.ui.ComboButton('button', {

View file

@ -58,18 +58,18 @@ return view.extend({
if (!cdiv) {
cdiv = E('div', { 'data-chain': chain }, [
E('h4', { 'id': 'rule_%s-%s_%s'.format(is_ipv6 ? 'ipv6' : 'ipv4', table.toLowerCase(), chain) }, title),
E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th center' }, _('Pkts.')),
E('div', { 'class': 'th center' }, _('Traffic')),
E('div', { 'class': 'th' }, _('Target')),
E('div', { 'class': 'th' }, _('Prot.')),
E('div', { 'class': 'th' }, _('In')),
E('div', { 'class': 'th' }, _('Out')),
E('div', { 'class': 'th' }, _('Source')),
E('div', { 'class': 'th' }, _('Destination')),
E('div', { 'class': 'th' }, _('Options')),
E('div', { 'class': 'th' }, _('Comment'))
E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th center' }, _('Pkts.')),
E('th', { 'class': 'th center' }, _('Traffic')),
E('th', { 'class': 'th' }, _('Target')),
E('th', { 'class': 'th' }, _('Prot.')),
E('th', { 'class': 'th' }, _('In')),
E('th', { 'class': 'th' }, _('Out')),
E('th', { 'class': 'th' }, _('Source')),
E('th', { 'class': 'th' }, _('Destination')),
E('th', { 'class': 'th' }, _('Options')),
E('th', { 'class': 'th' }, _('Comment'))
])
])
]);

View file

@ -226,36 +226,36 @@ return view.extend({
E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
E('br'),
E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f00' }, [ _('1 Minute Load:') ])),
E('div', { 'class': 'td', 'id': 'lb_load01_cur' }, [ '0.00' ]),
E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f00' }, [ _('1 Minute Load:') ])),
E('td', { 'class': 'td', 'id': 'lb_load01_cur' }, [ '0.00' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'lb_load01_avg' }, [ '0.00' ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'lb_load01_avg' }, [ '0.00' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'lb_load01_peak' }, [ '0.00' ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'lb_load01_peak' }, [ '0.00' ])
]),
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f60' }, [ _('5 Minute Load:') ])),
E('div', { 'class': 'td', 'id': 'lb_load05_cur' }, [ '0.00' ]),
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #f60' }, [ _('5 Minute Load:') ])),
E('td', { 'class': 'td', 'id': 'lb_load05_cur' }, [ '0.00' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'lb_load05_avg' }, [ '0.00' ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'lb_load05_avg' }, [ '0.00' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'lb_load05_peak' }, [ '0.00' ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'lb_load05_peak' }, [ '0.00' ])
]),
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #fa0' }, [ _('15 Minute Load:') ])),
E('div', { 'class': 'td', 'id': 'lb_load15_cur' }, [ '0.00' ]),
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid #fa0' }, [ _('15 Minute Load:') ])),
E('td', { 'class': 'td', 'id': 'lb_load15_cur' }, [ '0.00' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'lb_load15_avg' }, [ '0.00' ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'lb_load15_avg' }, [ '0.00' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'lb_load15_peak' }, [ '0.00' ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'lb_load15_peak' }, [ '0.00' ])
])
])
]);

View file

@ -64,14 +64,14 @@ return view.extend({
E('h2', _('Processes')),
E('div', { 'class': 'cbi-map-descr' }, _('This list gives an overview over currently running system processes and their status.')),
E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('PID')),
E('div', { 'class': 'th' }, _('Owner')),
E('div', { 'class': 'th' }, _('Command')),
E('div', { 'class': 'th' }, _('CPU usage (%)')),
E('div', { 'class': 'th' }, _('Memory usage (%)')),
E('div', { 'class': 'th center nowrap cbi-section-actions' })
E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('PID')),
E('th', { 'class': 'th' }, _('Owner')),
E('th', { 'class': 'th' }, _('Command')),
E('th', { 'class': 'th' }, _('CPU usage (%)')),
E('th', { 'class': 'th' }, _('Memory usage (%)')),
E('th', { 'class': 'th center nowrap cbi-section-actions' })
])
])
]);

View file

@ -150,41 +150,41 @@ return view.extend({
ip6neigh = data[3].stdout || '',
ip6route = data[4].stdout || '';
var neigh4tbl = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, [ _('IPv4-Address') ]),
E('div', { 'class': 'th' }, [ _('MAC-Address') ]),
E('div', { 'class': 'th' }, [ _('Interface') ])
var neigh4tbl = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, [ _('IPv4-Address') ]),
E('th', { 'class': 'th' }, [ _('MAC-Address') ]),
E('th', { 'class': 'th' }, [ _('Interface') ])
])
]);
var route4tbl = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, [ _('Network') ]),
E('div', { 'class': 'th' }, [ _('Target') ]),
E('div', { 'class': 'th' }, [ _('IPv4-Gateway') ]),
E('div', { 'class': 'th' }, [ _('Metric') ]),
E('div', { 'class': 'th' }, [ _('Table') ]),
E('div', { 'class': 'th' }, [ _('Protocol') ]),
var route4tbl = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, [ _('Network') ]),
E('th', { 'class': 'th' }, [ _('Target') ]),
E('th', { 'class': 'th' }, [ _('IPv4-Gateway') ]),
E('th', { 'class': 'th' }, [ _('Metric') ]),
E('th', { 'class': 'th' }, [ _('Table') ]),
E('th', { 'class': 'th' }, [ _('Protocol') ]),
])
]);
var neigh6tbl = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, [ _('IPv6-Address') ]),
E('div', { 'class': 'th' }, [ _('MAC-Address') ]),
E('div', { 'class': 'th' }, [ _('Interface') ])
var neigh6tbl = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, [ _('IPv6-Address') ]),
E('th', { 'class': 'th' }, [ _('MAC-Address') ]),
E('th', { 'class': 'th' }, [ _('Interface') ])
])
]);
var route6tbl = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, [ _('Network') ]),
E('div', { 'class': 'th' }, [ _('Target') ]),
E('div', { 'class': 'th' }, [ _('Source') ]),
E('div', { 'class': 'th' }, [ _('Metric') ]),
E('div', { 'class': 'th' }, [ _('Table') ]),
E('div', { 'class': 'th' }, [ _('Protocol') ]),
var route6tbl = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, [ _('Network') ]),
E('th', { 'class': 'th' }, [ _('Target') ]),
E('th', { 'class': 'th' }, [ _('Source') ]),
E('th', { 'class': 'th' }, [ _('Metric') ]),
E('th', { 'class': 'th' }, [ _('Table') ]),
E('th', { 'class': 'th' }, [ _('Protocol') ]),
])
]);

View file

@ -255,26 +255,26 @@ return view.extend({
E('div', { 'class': 'right' }, E('small', { 'id': 'scale' }, '-')),
E('br'),
E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('Signal:') ])),
E('div', { 'class': 'td', 'id': 'rssi_bw_cur' }, [ '0 ' + _('dBm') ]),
E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid blue' }, [ _('Signal:') ])),
E('td', { 'class': 'td', 'id': 'rssi_bw_cur' }, [ '0 ' + _('dBm') ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'rssi_bw_avg' }, [ '0 ' + _('dBm') ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'rssi_bw_avg' }, [ '0 ' + _('dBm') ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'rssi_bw_peak' }, [ '0 ' + _('dBm') ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'rssi_bw_peak' }, [ '0 ' + _('dBm') ])
]),
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid red' }, [ _('Noise:') ])),
E('div', { 'class': 'td', 'id': 'noise_bw_cur' }, [ '0 ' + _('dBm') ]),
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid red' }, [ _('Noise:') ])),
E('td', { 'class': 'td', 'id': 'noise_bw_cur' }, [ '0 ' + _('dBm') ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'noise_bw_avg' }, [ '0 ' + _('dBm') ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'noise_bw_avg' }, [ '0 ' + _('dBm') ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'noise_bw_peak' }, [ '0 ' + _('dBm') ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'noise_bw_peak' }, [ '0 ' + _('dBm') ])
])
]),
E('br'),
@ -283,16 +283,16 @@ return view.extend({
E('div', { 'class': 'right' }, E('small', { 'id': 'scale2' }, '-')),
E('br'),
E('div', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('Phy Rate:') ])),
E('div', { 'class': 'td', 'id': 'rate_bw_cur' }, [ '0 MBit/s' ]),
E('table', { 'class': 'table', 'style': 'width:100%;table-layout:fixed' }, [
E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td right top' }, E('strong', { 'style': 'border-bottom:2px solid green' }, [ _('Phy Rate:') ])),
E('td', { 'class': 'td', 'id': 'rate_bw_cur' }, [ '0 MBit/s' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('div', { 'class': 'td', 'id': 'rate_bw_avg' }, [ '0 MBit/s' ]),
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Average:') ])),
E('td', { 'class': 'td', 'id': 'rate_bw_avg' }, [ '0 MBit/s' ]),
E('div', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('div', { 'class': 'td', 'id': 'rate_bw_peak' }, [ '0 MBit/s' ])
E('td', { 'class': 'td right top' }, E('strong', {}, [ _('Peak:') ])),
E('td', { 'class': 'td', 'id': 'rate_bw_peak' }, [ '0 MBit/s' ])
])
])
]));

View file

@ -186,13 +186,13 @@ return view.extend({
};
o.render = L.bind(function(view, section_id) {
var table = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Filesystem')),
E('div', { 'class': 'th' }, _('Mount Point')),
E('div', { 'class': 'th center' }, _('Available')),
E('div', { 'class': 'th center' }, _('Used')),
E('div', { 'class': 'th' }, _('Unmount'))
var table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Filesystem')),
E('th', { 'class': 'th' }, _('Mount Point')),
E('th', { 'class': 'th center' }, _('Available')),
E('th', { 'class': 'th center' }, _('Used')),
E('th', { 'class': 'th' }, _('Unmount'))
])
]);

View file

@ -71,11 +71,11 @@ return view.extend({
initList = data[1],
rows = [], list = [];
var table = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th' }, _('Start priority')),
E('div', { 'class': 'th' }, _('Initscript')),
E('div', { 'class': 'th nowrap cbi-section-actions' })
var table = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [
E('th', { 'class': 'th' }, _('Start priority')),
E('th', { 'class': 'th' }, _('Initscript')),
E('th', { 'class': 'th nowrap cbi-section-actions' })
])
]);