luci-app-ruantiblock: JS fixes.

This commit is contained in:
gSpot
2025-10-16 23:32:07 +03:00
parent 4f68d13026
commit ba2f8ba558
6 changed files with 79 additions and 86 deletions
+1 -1
View File
@@ -12,7 +12,7 @@ HTTPS_DNS_PROXY=1
OWRT_VERSION="current" OWRT_VERSION="current"
RUAB_VERSION="2.1.8-r1" RUAB_VERSION="2.1.8-r1"
RUAB_MOD_LUA_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" BASE_URL="https://raw.githubusercontent.com/gSpotx2f/packages-openwrt/master"
PKG_DIR="/tmp" PKG_DIR="/tmp"
+1 -1
View File
@@ -6,7 +6,7 @@ include $(TOPDIR)/rules.mk
PKG_NAME:=luci-app-ruantiblock PKG_NAME:=luci-app-ruantiblock
PKG_VERSION:=2.1.8 PKG_VERSION:=2.1.8
PKG_RELEASE:=1 PKG_RELEASE:=2
LUCI_TITLE:=LuCI support for ruantiblock LUCI_TITLE:=LuCI support for ruantiblock
LUCI_DEPENDS:=+ruantiblock LUCI_DEPENDS:=+ruantiblock
LUCI_PKGARCH:=all LUCI_PKGARCH:=all
@@ -46,7 +46,10 @@ return view.extend({
let output = { 'rules': [] }; let output = { 'rules': [] };
if(data.rules.nftables && data.rules.nftables.length > 1) { if(data.rules.nftables && data.rules.nftables.length > 1) {
for(let i of data.rules.nftables) { for(let i of data.rules.nftables) {
if(!i.rule) continue; if(!i.rule) {
continue;
};
let set, bytes; let set, bytes;
i.rule.expr.forEach(e => { i.rule.expr.forEach(e => {
if(e.match && e.match.left && e.match.left.payload) { if(e.match && e.match.left && e.match.left.payload) {
@@ -97,7 +100,6 @@ return view.extend({
}; };
}; };
}; };
}; };
return output; return output;
}, },
@@ -122,7 +124,7 @@ return view.extend({
ipTable.append( ipTable.append(
E('tr', { 'class': 'tr table-titles' }, [ 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')), E('th', { 'class': 'th left' }, _('Timeout')),
]) ])
); );
@@ -266,7 +268,7 @@ return view.extend({
if(data.last_blacklist_update.status) { if(data.last_blacklist_update.status) {
update_status.append( update_status.append(
E('tr', { 'class': 'tr' }, [ E('tr', { 'class': 'tr' }, [
E('td', { 'class': 'td left', 'style': 'min-width:33%' }, E('td', { 'class': 'td left', 'style': 'width:33%' },
_('Last blacklist update') + ':'), _('Last blacklist update') + ':'),
E('td', { 'class': 'td left', E('td', { 'class': 'td left',
'id' : 'last_blacklist_update.date' }, 'id' : 'last_blacklist_update.date' },
@@ -306,7 +308,7 @@ return view.extend({
for(let i of data.user_entries) { for(let i of data.user_entries) {
user_entries.append( user_entries.append(
E('tr', { 'class': 'tr' }, [ 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), i.id),
E('td', { 'class': 'td left', E('td', { 'class': 'td left',
'id' : 'user_entries_' + i }, 'id' : 'user_entries_' + i },
@@ -321,7 +323,7 @@ return view.extend({
if(nft_data.rules) { if(nft_data.rules) {
let table_rules = E('table', { 'class': 'table' }, [ let table_rules = E('table', { 'class': 'table' }, [
E('tr', { 'class': 'tr table-titles' }, [ 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')), _('Match-set')),
E('th', { 'class': 'th left' }, _('Description')), E('th', { 'class': 'th left' }, _('Description')),
E('th', { 'class': 'th left' }, _('Bytes')), E('th', { 'class': 'th left' }, _('Bytes')),
@@ -360,18 +362,15 @@ return view.extend({
if(nft_data.dnsmasq) { if(nft_data.dnsmasq) {
let rdTableWrapper = E('div', { let rdTableWrapper = E('div', {
'id' : 'rdTableWrapper', 'id' : 'rdTableWrapper',
'style': 'width:100%' 'style': 'width:100%',
}, this.makeDnsmasqTable(nft_data.dnsmasq, _('Dnsmasq'))); }, this.makeDnsmasqTable(nft_data.dnsmasq, _('Dnsmasq')));
dnsmasq = rdTableWrapper;
dnsmasq = E([
rdTableWrapper,
]);
}; };
if(nft_data.dnsmasq_user_instances) { if(nft_data.dnsmasq_user_instances) {
let rdsTableWrapper = E('div', { let rdsTableWrapper = E('div', {
'id' : 'rdsTableWrapper', 'id' : 'rdsTableWrapper',
'style': 'width:100%' 'style': 'width:100%',
}); });
for(let i of nft_data.dnsmasq_user_instances) { for(let i of nft_data.dnsmasq_user_instances) {
@@ -379,21 +378,16 @@ return view.extend({
}; };
if(nft_data.dnsmasq_user_instances.length > 0) { if(nft_data.dnsmasq_user_instances.length > 0) {
dnsmasqUserInstances = E([ dnsmasqUserInstances = rdsTableWrapper;
rdsTableWrapper,
]);
}; };
}; };
if(nft_data.dnsmasq_bypass) { if(nft_data.dnsmasq_bypass) {
let rdbTableWrapper = E('div', { let rdbTableWrapper = E('div', {
'id' : 'rdbTableWrapper', 'id' : 'rdbTableWrapper',
'style': 'width:100%' 'style': 'width:100%',
}, this.makeDnsmasqTable(nft_data.dnsmasq_bypass, _('Dnsmasq bypass'))); }, this.makeDnsmasqTable(nft_data.dnsmasq_bypass, _('Dnsmasq bypass')));
dnsmasqBypass = rdbTableWrapper;
dnsmasqBypass = E([
rdbTableWrapper,
]);
}; };
poll.add(L.bind(this.pollInfo, this), this.pollInterval); poll.add(L.bind(this.pollInfo, this), this.pollInterval);
@@ -10,6 +10,7 @@ document.head.append(E('style', {'type': 'text/css'},
} }
.log-entry-time-cell { .log-entry-time-cell {
min-width: 14em !important; min-width: 14em !important;
white-space: pre-wrap !important;
} }
.log-entry-host-cell { .log-entry-host-cell {
min-width: 10em !important; min-width: 10em !important;
@@ -53,8 +53,8 @@ return view.extend({
if(v.mount) { if(v.mount) {
for(let i of Object.keys(v.mount)) { for(let i of Object.keys(v.mount)) {
if(!ubus_dirs.has(i) && i.startsWith('/tmp/dnsmasq.')) { 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 ]); available_cfg_dirs.push([ `${i} [ ${k} ]`, i ]);
ubus_dirs.add(i); ubus_dirs.add(i);
@@ -81,7 +81,7 @@ return view.extend({
this.dnsmasqCfgDirsSelect = E('select', { this.dnsmasqCfgDirsSelect = E('select', {
'id' : 'dnsmasq_confdirs_list', 'id' : 'dnsmasq_confdirs_list',
'class': "cbi-input-select", 'class': 'cbi-input-select',
}), }),
available_cfg_dirs.forEach(e => { available_cfg_dirs.forEach(e => {
@@ -160,10 +160,10 @@ return view.extend({
}), }),
disableButtons(bool, btn, elems=[]) { 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_start.disabled = bool;
btn_update.disabled = bool; btn_update.disabled = bool;
@@ -191,9 +191,11 @@ return view.extend({
}, },
setAppStatus(status_array, elems=[], force_app_code) { 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'); let section = uci.get(tools.appName, 'config');
if(!status_array || typeof(section) !== 'object') { 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') ui.addNotification(null, E('p', _('Unable to read the contents')
+ ': setAppStatus()')); + ': setAppStatus()'));
this.disableButtons(true, null, elems); this.disableButtons(true, null, elems);
@@ -263,11 +265,12 @@ return view.extend({
this.disableButtons(true, null, elems); this.disableButtons(true, null, elems);
}; };
(elems[0] || document.getElementById("status")).innerHTML = tools.makeStatusString( status_elem.append(tools.makeStatusString(
app_status_code, app_status_code,
bllist_preset, bllist_preset,
bllist_module, bllist_module,
vpn_route_status_code); vpn_route_status_code)
);
if(!poll.active()) { if(!poll.active()) {
poll.start(); poll.start();
@@ -337,11 +340,10 @@ return view.extend({
return; return;
}; };
let section = uci.get(tools.appName, 'config'); let section = uci.get(tools.appName, 'config');
this.statusTokenValue = (Array.isArray(status_array)) ? this.statusTokenValue = (Array.isArray(status_array)) ?
tools.normalizeValue(status_array[4]) : null; tools.normalizeValue(status_array[4]) : null;
let dialog_destroy = new this.dialogDestroy(this);
let dialog_destroy = new this.dialogDestroy(this);
let status_string = E('div', { let status_string = E('div', {
'id' : 'status', 'id' : 'status',
@@ -7,14 +7,15 @@
document.head.append(E('style', {'type': 'text/css'}, document.head.append(E('style', {'type': 'text/css'},
` `
.label-status { .label-status {
display: inline; display: inline-block;
margin: 0 2px 0 0 !important; margin: 2px !important;
padding: 2px 4px; padding: 2px 4px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
font-weight: bold; font-weight: bold;
color: #fff !important; color: #fff !important;
word-wrap: break-word !important;
} }
.starting { .starting {
background-color: #9c994c !important; background-color: #9c994c !important;
@@ -47,11 +48,11 @@ return baseclass.extend({
grExcludedNetsFile : '/etc/ruantiblock/gr_excluded_nets', grExcludedNetsFile : '/etc/ruantiblock/gr_excluded_nets',
grExcludedSldFile : '/etc/ruantiblock/gr_excluded_sld', grExcludedSldFile : '/etc/ruantiblock/gr_excluded_sld',
crontabFile : '/etc/crontabs/root', 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: { blacklistPresets: {
'ruantiblock-fqdn': [ 'ruantiblock', 'fqdn', 'https://github.com/gSpotx2f/ruantiblock_blacklist' ], 'ruantiblock-fqdn': [ 'ruantiblock', 'fqdn', 'https://github.com/gSpotx2f/ruantiblock_blacklist' ],
@@ -140,48 +141,43 @@ return baseclass.extend({
break; break;
default: default:
app_status_label = this.infoLabelError; 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> app_status_label,
<td class="td left%s"> (app_status_code != 2 && vpn_route_status_code != 0)
%s %s ? E('span', { 'class': 'label-status error' },
</td> _('VPN routing error! Need restart'))
</tr> : '',
<tr class="tr"> ]),
<td class="td left"> ]),
${_('Blacklist update mode')}: E('tr', { 'class': 'tr' }, [
</td> E('td', { 'class': 'td left' }, _('Blacklist update mode')),
<td class="td left"> E('td', { 'class': 'td left' },
%s (!bllist_preset || bllist_preset === '') ? _('user entries only') :
</td> (this.blacklistPresets[bllist_preset]) ?
</tr> [
</table> E('span', {
`.format( 'style' : 'cursor:help; border-bottom:1px dotted',
spinning, 'data-tooltip': this.blacklistPresets[bllist_preset][2],
app_status_label, }, this.blacklistPresets[bllist_preset][0]),
(app_status_code != 2 && vpn_route_status_code != 0) ' - ',
? '<span class="label-status error">' this.blacklistPresets[bllist_preset][1],
+ _('VPN routing error! Need restart') + '</span>' : '', ]
(!bllist_preset || bllist_preset === '') ? _('user entries only') : :
(this.blacklistPresets[bllist_preset]) ? _('Error') + '!'
`<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]}` ]),
: _('Error') + '!' ]);
);
}, },
fileEditDialog: baseclass.extend({ fileEditDialog: baseclass.extend({