luci-app-ruantiblock: JS fixes.

autoinstall/2.x/autoinstall.sh

@@ -12,7 +12,7 @@ HTTPS_DNS_PROXY=1
 OWRT_VERSION="current"
 RUAB_VERSION="2.1.8-r1"
 RUAB_MOD_LUA_VERSION="2.1.8-r1"
-RUAB_LUCI_APP_VERSION="2.1.8-r1"
+RUAB_LUCI_APP_VERSION="2.1.8-r2"
 BASE_URL="https://raw.githubusercontent.com/gSpotx2f/packages-openwrt/master"
 PKG_DIR="/tmp"
 

luci-app-ruantiblock/Makefile

@@ -6,7 +6,7 @@ include $(TOPDIR)/rules.mk
 
 PKG_NAME:=luci-app-ruantiblock
 PKG_VERSION:=2.1.8
-PKG_RELEASE:=1
+PKG_RELEASE:=2
 LUCI_TITLE:=LuCI support for ruantiblock
 LUCI_DEPENDS:=+ruantiblock
 LUCI_PKGARCH:=all

luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/info.js

@@ -46,7 +46,10 @@ return view.extend({
 		let output = { 'rules': [] };
 		if(data.rules.nftables && data.rules.nftables.length > 1) {
 			for(let i of data.rules.nftables) {
-				if(!i.rule) continue;
+				if(!i.rule) {
+					continue;
+				};
+
 				let set, bytes;
 				i.rule.expr.forEach(e => {
 					if(e.match && e.match.left && e.match.left.payload) {
@@ -97,7 +100,6 @@ return view.extend({
 					};
 				};
 			};
-
 		};
 		return output;
 	},
@@ -122,7 +124,7 @@ return view.extend({
 
 			ipTable.append(
 				E('tr', { 'class': 'tr table-titles' }, [
-					E('th', { 'class': 'th left', 'style': 'min-width:33%' }, _('IP address')),
+					E('th', { 'class': 'th left', 'style': 'width:33%' }, _('IP address')),
 					E('th', { 'class': 'th left' }, _('Timeout')),
 				])
 			);
@@ -266,7 +268,7 @@ return view.extend({
 				if(data.last_blacklist_update.status) {
 					update_status.append(
 						E('tr', { 'class': 'tr' }, [
-							E('td', { 'class': 'td left', 'style': 'min-width:33%' },
+							E('td', { 'class': 'td left', 'style': 'width:33%' },
 								_('Last blacklist update') + ':'),
 							E('td', { 'class': 'td left',
 										'id' : 'last_blacklist_update.date' },
@@ -306,7 +308,7 @@ return view.extend({
 					for(let i of data.user_entries) {
 						user_entries.append(
 							E('tr', { 'class': 'tr' }, [
-								E('td', { 'class': 'td left', 'style': 'min-width:33%' },
+								E('td', { 'class': 'td left', 'style': 'word-wrap:break-word' },
 									i.id),
 								E('td', { 'class': 'td left',
 											'id' : 'user_entries_' + i },
@@ -321,7 +323,7 @@ return view.extend({
 				if(nft_data.rules) {
 					let table_rules = E('table', { 'class': 'table' }, [
 						E('tr', { 'class': 'tr table-titles' }, [
-							E('th', { 'class': 'th left', 'style': 'min-width:33%' },
+							E('th', { 'class': 'th left', 'style': 'width:33%' },
 								_('Match-set')),
 							E('th', { 'class': 'th left' }, _('Description')),
 							E('th', { 'class': 'th left' }, _('Bytes')),
@@ -360,18 +362,15 @@ return view.extend({
 				if(nft_data.dnsmasq) {
 					let rdTableWrapper = E('div', {
 						'id'   : 'rdTableWrapper',
-						'style': 'width:100%'
+						'style': 'width:100%',
 					}, this.makeDnsmasqTable(nft_data.dnsmasq, _('Dnsmasq')));
-
+					dnsmasq = rdTableWrapper;
-					dnsmasq = E([
-						rdTableWrapper,
-					]);
 				};
 
 				if(nft_data.dnsmasq_user_instances) {
 					let rdsTableWrapper = E('div', {
 						'id'   : 'rdsTableWrapper',
-						'style': 'width:100%'
+						'style': 'width:100%',
 					});
 
 					for(let i of nft_data.dnsmasq_user_instances) {
@@ -379,21 +378,16 @@ return view.extend({
 					};
 
 					if(nft_data.dnsmasq_user_instances.length > 0) {
-						dnsmasqUserInstances = E([
+						dnsmasqUserInstances = rdsTableWrapper;
-							rdsTableWrapper,
-						]);
 					};
 				};
 
 				if(nft_data.dnsmasq_bypass) {
 					let rdbTableWrapper = E('div', {
 						'id'   : 'rdbTableWrapper',
-						'style': 'width:100%'
+						'style': 'width:100%',
 					}, this.makeDnsmasqTable(nft_data.dnsmasq_bypass, _('Dnsmasq bypass')));
-
+					dnsmasqBypass = rdbTableWrapper;
-					dnsmasqBypass = E([
-						rdbTableWrapper,
-					]);
 				};
 
 				poll.add(L.bind(this.pollInfo, this), this.pollInterval);

luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/log-widget.js

@@ -10,6 +10,7 @@ document.head.append(E('style', {'type': 'text/css'},
 }
 .log-entry-time-cell {
 	min-width: 14em !important;
+	white-space: pre-wrap !important;
 }
 .log-entry-host-cell {
 	min-width: 10em !important;

luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/service.js

@@ -53,8 +53,8 @@ return view.extend({
 					if(v.mount) {
 						for(let i of Object.keys(v.mount)) {
 							if(!ubus_dirs.has(i) && i.startsWith('/tmp/dnsmasq.')) {
-								if(i == "/tmp/dnsmasq.d") {
+								if(i == '/tmp/dnsmasq.d') {
-									k = _("default");
+									k = _('default');
 								};
 								available_cfg_dirs.push([ `${i} [ ${k} ]`, i ]);
 								ubus_dirs.add(i);
@@ -81,7 +81,7 @@ return view.extend({
 
 			this.dnsmasqCfgDirsSelect = E('select', {
 				'id'   : 'dnsmasq_confdirs_list',
-				'class': "cbi-input-select",
+				'class': 'cbi-input-select',
 			}),
 
 			available_cfg_dirs.forEach(e => {
@@ -160,10 +160,10 @@ return view.extend({
 	}),
 
 	disableButtons(bool, btn, elems=[]) {
-		let btn_start   = elems[1] || document.getElementById("btn_start");
+		let btn_start   = elems[1] || document.getElementById('btn_start');
-		let btn_destroy = elems[4] || document.getElementById("btn_destroy");
+		let btn_destroy = elems[4] || document.getElementById('btn_destroy');
-		let btn_enable  = elems[2] || document.getElementById("btn_enable");
+		let btn_enable  = elems[2] || document.getElementById('btn_enable');
-		let btn_update  = elems[3] || document.getElementById("btn_update");
+		let btn_update  = elems[3] || document.getElementById('btn_update');
 
 		btn_start.disabled   = bool;
 		btn_update.disabled  = bool;
@@ -191,9 +191,11 @@ return view.extend({
 	},
 
 	setAppStatus(status_array, elems=[], force_app_code) {
+		let status_elem       = elems[0] || document.getElementById('status');
+		status_elem.innerHTML = '';
 		let section = uci.get(tools.appName, 'config');
 		if(!status_array || typeof(section) !== 'object') {
-			(elems[0] || document.getElementById("status")).innerHTML = tools.makeStatusString(1);
+			status_elem.append(tools.makeStatusString(1));
 			ui.addNotification(null, E('p', _('Unable to read the contents')
 				+ ': setAppStatus()'));
 			this.disableButtons(true, null, elems);
@@ -263,11 +265,12 @@ return view.extend({
 			this.disableButtons(true, null, elems);
 		};
 
-		(elems[0] || document.getElementById("status")).innerHTML = tools.makeStatusString(
+		status_elem.append(tools.makeStatusString(
 			app_status_code,
 			bllist_preset,
 			bllist_module,
-								vpn_route_status_code);
+			vpn_route_status_code)
+		);
 
 		if(!poll.active()) {
 			poll.start();
@@ -340,7 +343,6 @@ return view.extend({
 		let section           = uci.get(tools.appName, 'config');
 		this.statusTokenValue = (Array.isArray(status_array)) ?
 			tools.normalizeValue(status_array[4]) : null;
-
 		let dialog_destroy    = new this.dialogDestroy(this);
 
 		let status_string = E('div', {

luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/tools.js

@@ -7,14 +7,15 @@
 document.head.append(E('style', {'type': 'text/css'},
 `
 .label-status {
-	display: inline;
+	display: inline-block;
-	margin: 0 2px 0 0 !important;
+	margin: 2px !important;
 	padding: 2px 4px;
 	-webkit-border-radius: 3px;
 	-moz-border-radius: 3px;
 	border-radius: 3px;
 	font-weight: bold;
 	color: #fff !important;
+	word-wrap: break-word !important;
 }
 .starting {
 	background-color: #9c994c !important;
@@ -47,11 +48,11 @@ return baseclass.extend({
 	grExcludedNetsFile  : '/etc/ruantiblock/gr_excluded_nets',
 	grExcludedSldFile   : '/etc/ruantiblock/gr_excluded_sld',
 	crontabFile         : '/etc/crontabs/root',
-	infoLabelStarting   : '<span class="label-status starting">' + _('Starting') + '</span>',
+	infoLabelStarting   : E('span', { 'class': 'label-status starting' }, _('Starting')),
-	infoLabelRunning    : '<span class="label-status running">' + _('Enabled') + '</span>',
+	infoLabelRunning    : E('span', { 'class': 'label-status running' }, _('Enabled')),
-	infoLabelUpdating   : '<span class="label-status updating">' + _('Updating') + '</span>',
+	infoLabelUpdating   : E('span', { 'class': 'label-status updating' }, _('Updating')),
-	infoLabelStopped    : '<span class="label-status stopped">' + _('Disabled') + '</span>',
+	infoLabelStopped    : E('span', { 'class': 'label-status stopped' }, _('Disabled')),
-	infoLabelError      : '<span class="label-status error">' + _('Error') + '</span>',
+	infoLabelError      : E('span', { 'class': 'label-status error' }, _('Error')),
 
 	blacklistPresets: {
 		'ruantiblock-fqdn': [ 'ruantiblock', 'fqdn', 'https://github.com/gSpotx2f/ruantiblock_blacklist' ],
@@ -140,48 +141,43 @@ return baseclass.extend({
 				break;
 			default:
 				app_status_label = this.infoLabelError;
-				return `<table class="table">
+				return E('table', { 'class': 'table' }, [
-							<tr class="tr">
+					E('tr', { 'class': 'tr' }, [
-								<td class="td left" style="min-width:33%%">
+						E('td', { 'class': 'td left', 'style': 'width:33%' }, _('Status')),
-									${_('Status')}:
+						E('td', { 'class': 'td left' }, app_status_label),
-								</td>
+					]),
-								<td class="td left">
+				]);
-									${app_status_label}
-								</td>
-							</tr>
-						</table>`
 		};
 
-		return `<table class="table">
+		return E('table', { 'class': 'table' }, [
-					<tr class="tr">
+			E('tr', { 'class': 'tr' }, [
-						<td class="td left" style="min-width:33%%">
+				E('td', { 'class': 'td left', 'style': 'width:33%' }, _('Status')),
-							${_('Status')}:
+				E('td', { 'class': 'td left' + spinning }, [
-						</td>
-						<td class="td left%s">
-							%s %s
-						</td>
-					</tr>
-					<tr class="tr">
-						<td class="td left">
-							${_('Blacklist update mode')}:
-						</td>
-						<td class="td left">
-							%s
-						</td>
-					</tr>
-				</table>
-		`.format(
-			spinning,
 					app_status_label,
 					(app_status_code != 2 && vpn_route_status_code != 0)
-				? '<span class="label-status error">'
+						? E('span', { 'class': 'label-status error' },
-					+ _('VPN routing error! Need restart') + '</span>' : '',
+							_('VPN routing error! Need restart'))
+						: '',
+				]),
+			]),
+			E('tr', { 'class': 'tr' }, [
+				E('td', { 'class': 'td left' }, _('Blacklist update mode')),
+				E('td', { 'class': 'td left' },
 					(!bllist_preset || bllist_preset === '') ? _('user entries only') :
 						(this.blacklistPresets[bllist_preset]) ?
-					`<span style="cursor:help; border-bottom:1px dotted" data-tooltip="${this.blacklistPresets[bllist_preset][2]}">
+							[
-						${this.blacklistPresets[bllist_preset][0]}</span> - ${this.blacklistPresets[bllist_preset][1]}`
+								E('span', {
-				: _('Error') + '!'
+									'style'       : 'cursor:help; border-bottom:1px dotted',
-		);
+									'data-tooltip': this.blacklistPresets[bllist_preset][2],
+								}, this.blacklistPresets[bllist_preset][0]),
+								' - ',
+								this.blacklistPresets[bllist_preset][1],
+							]
+						:
+							_('Error') + '!'
+				),
+			]),
+		]);
 	},
 
 	fileEditDialog: baseclass.extend({