luci-mod-dashboard: bug fixes and code cleanup

Signed-off-by: Paul Donald <newtwen+github@gmail.com>

modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/css/custom.css

@@ -199,8 +199,7 @@
 
 [data-darkmode="true"] {
 	/* invert black SVG line drawings in dark mode */
-	.Dashboard
-	.svgmonotone {
+	.Dashboard .svgmonotone {
 		filter: invert(.5);
 	}
 }

modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/20_lan.js

@@ -17,7 +17,6 @@ return baseclass.extend({
 	load() {
 		return Promise.all([
 			callLuciDHCPLeases(),
-			network.getDevices()
 		]);
 	},
 
@@ -36,7 +35,7 @@ return baseclass.extend({
 		]));
 
 		const container_devices = E('table', { 'class': 'table assoclist devices-info' }, [
-			E('tr', { 'class': 'tr dashboard-bg' }, [
+			E('thead', { 'class': 'thead dashboard-bg' }, [
 				E('th', { 'class': 'th nowrap' }, _('Hostname')),
 				E('th', { 'class': 'th' }, _('IP Address')),
 				E('th', { 'class': 'th' }, _('MAC')),
@@ -46,7 +45,7 @@ return baseclass.extend({
 		for(let idx in this.params.lan.devices) {
 			const device = this.params.lan.devices[idx];
 
-			container_devices.appendChild(E('tr', { 'class': 'tr cbi-rowstyle-1'}, [
+			container_devices.appendChild(E('tr', { 'class': idx % 2 ? 'tr cbi-rowstyle-2' : 'tr cbi-rowstyle-1' }, [
 
 				E('td', { 'class': 'td device-info'}, [
 					E('p', {}, [
@@ -64,81 +63,58 @@ return baseclass.extend({
 					E('p', {}, [
 						E('span', { 'class': 'd-inline-block'}, [ device.macaddr ]),
 					]),
-				])
+				]),
 			]));
 		}
 
+		container_devices.appendChild(E('tfoot', { 'class': 'tfoot dashboard-bg' }, [
+			E('tr', { 'class': 'tr cbi-rowstyle-1' }, [
+				E('td', { 'class': 'td device-info'}, [
+					E('p', {}, [
+						E('span', { 'class': 'd-inline-block'}, [ ]),
+					]),
+				]),
+
+				E('td', { 'class': 'td device-info'}, [
+					E('p', {}, [
+						E('span', { 'class': 'd-inline-block'}, [ _('Total') + '：' ]),
+					]),
+				]),
+
+				E('td', { 'class': 'td device-info'}, [
+					E('p', {}, [
+						E('span', { 'class': 'd-inline-block'}, [ this.params.lan.devices.length ]),
+					]),
+				]),
+
+			])
+		]));
+
 		container_box.appendChild(container_devices);
 		container_wapper.appendChild(container_box);
 
 		return container_wapper;
 	},
 
-	renderUpdateData(data, leases) {
+	renderUpdateData(leases) {
+		const dev_arr = [];
 
-		for(let item in data) {
-			if (/lan|br-lan/ig.test(data[item].ifname) && (typeof data[item].dev == 'object' && !data[item].dev.wireless)) {
-				const lan_device = data[item];
-				const ipv4addr = lan_device.dev.ipaddrs.toString().split('/');
-
-				this.params.lan.ipv4 = ipv4addr[0] || '?';
-				this.params.lan.ipv6 = ipv4addr[0] || '?';
-				this.params.lan.macaddr = lan_device.dev.macaddr || '00:00:00:00:00:00';
-				this.params.lan.rx_bytes = lan_device.dev.stats.rx_bytes ? '%.2mB'.format(lan_device.dev.stats.rx_bytes)  : '-';
-				this.params.lan.tx_bytes = lan_device.dev.stats.tx_bytes ? '%.2mB'.format(lan_device.dev.stats.tx_bytes)  : '-';
-			}
-		}
-
-		const devices = [];
-		leases.map(lease => {
-			devices[lease.expires] = {
-				hostname: lease.hostname || '?',
-				ipv4: lease.ipaddr || '-',
-				macaddr: lease.macaddr || '00:00:00:00:00:00',
-			};
+		leases.forEach(({ hostname = '?', ipaddr: ipv4 = '-', macaddr = '00:00:00:00:00:00' }) => {
+			dev_arr.push({ hostname, ipv4, macaddr });
 		});
-		this.params.lan.devices = devices;
+
+		this.params.lan = { devices: dev_arr };
 	},
 
-	renderLeases(data) {
-
-		const leases = Array.isArray(data[0].dhcp_leases) ? data[0].dhcp_leases : [];
-
-		this.params.lan = {
-			ipv4: {
-				title:  _('IPv4'),
-				value: '?'
-			},
-
-			macaddr: {
-				title: _('Mac'),
-				value: '00:00:00:00:00:00'
-			},
-
-			rx_bytes: {
-				title: _('Upload'),
-				value: '-'
-			},
-
-			tx_bytes: {
-				title: _('Download'),
-				value: '-'
-			},
-
-			devices: {
-				title: _('Devices'),
-				value: []
-			}
-		};
-
-		this.renderUpdateData(data[1], leases);
+	renderLeases(leases) {
+		this.renderUpdateData([...leases.dhcp_leases]);
 
 		return this.renderHtml();
 	},
 
-	render(data) {
+	render([leases]) {
 		if (L.hasSystemFeature('dnsmasq') || L.hasSystemFeature('odhcpd'))
-			return this.renderLeases(data);
+			return this.renderLeases(leases);
 
 		return E([]);
 	}

modules/luci-mod-dashboard/htdocs/luci-static/resources/view/dashboard/include/30_wifi.js

@@ -34,7 +34,6 @@ return baseclass.extend({
 		const container_wapper = E('div', { 'class': 'router-status-wifi dashboard-bg box-s1' });
 		const container_box = E('div', { 'class': 'wifi-info devices-list' });
 		const container_radio = E('div', { 'class': 'settings-info' });
-		let container_radio_item;
 
 		container_box.appendChild(E('div', { 'class': 'title'}, [
 			E('img', {
@@ -48,7 +47,7 @@ return baseclass.extend({
 
 		for (let i = 0; i < this.params.wifi.radios.length; i++) {
 
-			container_radio_item = E('div', { 'class': 'radio-info' })
+			const container_radio_item = E('div', { 'class': 'radio-info' })
 
 			for(let idx in this.params.wifi.radios[i]) {
 				let classname = idx;
@@ -77,16 +76,18 @@ return baseclass.extend({
 		container_box.appendChild(container_radio);
 
 		const container_devices = E('table', { 'class': 'table assoclist devices-info' }, [
+			E('thead', { 'class': 'thead dashboard-bg' }, [
 			E('tr', { 'class': 'tr dashboard-bg' }, [
-				E('th', { 'class': 'th nowrap' }, _('Hostname')),
-				E('th', { 'class': 'th' }, _('SSID')),
-				E('th', { 'class': 'th', 'width': '45%' }, _('Signal Strength')),
-				E('th', { 'class': 'th' }, _('Transferred') + ' %s / %s'.format( _('Up.'), _('Down.')))
+				E('th', { 'class': 'th nowrap' },[ _('Hostname') ]),
+				E('th', { 'class': 'th' }, [ _('SSID') ]),
+				E('th', { 'class': 'th', 'width': '45%' }, [ _('Signal Strength') ]),
+				E('th', { 'class': 'th' }, [ _('Transferred') + ' %s / %s'.format( _('Up.'), _('Down.')) ])
+			])
 			])
 		]);
 
 		for (let i = 0; i < this.params.wifi.devices.length; i++) {
-			const container_devices_item = E('tr', { 'class': 'tr cbi-rowstyle-1' });
+			const container_devices_item = E('tr', { 'class': i % 2 ? 'tr cbi-rowstyle-2' : 'tr cbi-rowstyle-1' });
 
 			for(let idx in this.params.wifi.devices[i]) {
 				const device = this.params.wifi.devices[i];
@@ -95,36 +96,40 @@ return baseclass.extend({
 					continue;
 				}
 
-				let container_content;
-
 				if ('progress' == idx) {
-					container_content = E('td', { 'class' : 'td device-info' }, [
+					container_devices_item.appendChild(E('td', { 'class' : 'td device-info' }, [
 						E('div', { 'class': 'cbi-progressbar', 'title': 'RSSI: ' + parseInt(device[idx].value.qualite) + '% (' + device[idx].value.rssi + 'dBm)'  }, [
 							E('div', { 'style': 'width: '+device[idx].value.qualite+'%'}),
 						])
-					]);
+					]));
 				} else if ('transferred' == idx) {
-					container_content = E('td', { 'class': 'td device-info'  }, [
+					container_devices_item.appendChild(E('td', { 'class': 'td device-info'  }, [
 						E('p', {}, [
 							E('span', { 'class': ''}, [ device[idx].value.rx ]),
 							E('br'),
 							E('span', { 'class': ''}, [ device[idx].value.tx ])
 						])
-					]);
+					]));
 				} else {
-					container_content = E('td', { 'class': 'td device-info'}, [
+					container_devices_item.appendChild(E('td', { 'class': 'td device-info'}, [
 						E('p', {}, [
 							E('span', { 'class': ''}, [ device[idx].value ]),
 						])
-					]);
+					]));
 				}
 
-				container_devices_item.appendChild(container_content);
 			}
 
 			container_devices.appendChild(container_devices_item);
 		}
 
+		container_devices.appendChild(E('tfoot', { 'class': 'tfoot dashboard-bg' }, [
+				E('td', { 'class': 'td nowrap' }, [ ]),
+				E('td', { 'class': 'td' }, [ _('Total') + '：' ]),
+				E('td', { 'class': 'td' }, [ this.params.wifi.devices.length ]),
+				E('td', { 'class': 'td' }, [] ),
+			]));
+
 		container_box.appendChild(container_devices);
 		container_wapper.appendChild(container_box);
 
@@ -249,14 +254,14 @@ return baseclass.extend({
 		}
 	},
 
-	render(data) {
+	render([radios, networks, hosthints]) {
 
 		this.params.wifi = {
 			radios: [],
 			devices: []
 		};
 
-		this.renderUpdateData(data[0], data[1], data[2]);
+		this.renderUpdateData(radios, networks, hosthints);
 
 		if (this.params.wifi.radios.length)
 			return this.renderHtml();