From ba2f8ba55846aea8a35e5231946d1d1ee054158d Mon Sep 17 00:00:00 2001 From: gSpot Date: Thu, 16 Oct 2025 23:32:07 +0300 Subject: [PATCH] luci-app-ruantiblock: JS fixes. --- autoinstall/2.x/autoinstall.sh | 2 +- luci-app-ruantiblock/Makefile | 2 +- .../resources/view/ruantiblock/info.js | 34 +++---- .../resources/view/ruantiblock/log-widget.js | 1 + .../resources/view/ruantiblock/service.js | 36 ++++---- .../resources/view/ruantiblock/tools.js | 90 +++++++++---------- 6 files changed, 79 insertions(+), 86 deletions(-) diff --git a/autoinstall/2.x/autoinstall.sh b/autoinstall/2.x/autoinstall.sh index 4dafe13..a19c721 100755 --- a/autoinstall/2.x/autoinstall.sh +++ b/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" diff --git a/luci-app-ruantiblock/Makefile b/luci-app-ruantiblock/Makefile index a63a678..82b3bb3 100644 --- a/luci-app-ruantiblock/Makefile +++ b/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 diff --git a/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/info.js b/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/info.js index 7e703c7..563d8c0 100644 --- a/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/info.js +++ b/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 = E([ - rdTableWrapper, - ]); + dnsmasq = 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([ - rdsTableWrapper, - ]); + dnsmasqUserInstances = 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 = E([ - rdbTableWrapper, - ]); + dnsmasqBypass = rdbTableWrapper; }; poll.add(L.bind(this.pollInfo, this), this.pollInterval); diff --git a/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/log-widget.js b/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/log-widget.js index 3aab422..b972ff5 100644 --- a/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/log-widget.js +++ b/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; diff --git a/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/service.js b/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/service.js index 73707bb..1d6997f 100644 --- a/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/service.js +++ b/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") { - k = _("default"); + if(i == '/tmp/dnsmasq.d') { + 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_destroy = elems[4] || document.getElementById("btn_destroy"); - let btn_enable = elems[2] || document.getElementById("btn_enable"); - let btn_update = elems[3] || document.getElementById("btn_update"); + let btn_start = elems[1] || document.getElementById('btn_start'); + let btn_destroy = elems[4] || document.getElementById('btn_destroy'); + let btn_enable = elems[2] || document.getElementById('btn_enable'); + 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( - app_status_code, - bllist_preset, - bllist_module, - vpn_route_status_code); + status_elem.append(tools.makeStatusString( + app_status_code, + bllist_preset, + bllist_module, + vpn_route_status_code) + ); if(!poll.active()) { poll.start(); @@ -337,11 +340,10 @@ return view.extend({ return; }; - let section = uci.get(tools.appName, 'config'); + 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); + tools.normalizeValue(status_array[4]) : null; + let dialog_destroy = new this.dialogDestroy(this); let status_string = E('div', { 'id' : 'status', diff --git a/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/tools.js b/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/tools.js index 1f7990a..5037907 100644 --- a/luci-app-ruantiblock/htdocs/luci-static/resources/view/ruantiblock/tools.js +++ b/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; - margin: 0 2px 0 0 !important; + display: inline-block; + 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 : '' + _('Starting') + '', - infoLabelRunning : '' + _('Enabled') + '', - infoLabelUpdating : '' + _('Updating') + '', - infoLabelStopped : '' + _('Disabled') + '', - infoLabelError : '' + _('Error') + '', + infoLabelStarting : E('span', { 'class': 'label-status starting' }, _('Starting')), + infoLabelRunning : E('span', { 'class': 'label-status running' }, _('Enabled')), + infoLabelUpdating : E('span', { 'class': 'label-status updating' }, _('Updating')), + infoLabelStopped : E('span', { 'class': 'label-status stopped' }, _('Disabled')), + 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 ` - - - - -
- ${_('Status')}: - - ${app_status_label} -
` + return E('table', { 'class': 'table' }, [ + E('tr', { 'class': 'tr' }, [ + E('td', { 'class': 'td left', 'style': 'width:33%' }, _('Status')), + E('td', { 'class': 'td left' }, app_status_label), + ]), + ]); }; - return ` - - - - - - - - -
- ${_('Status')}: - - %s %s -
- ${_('Blacklist update mode')}: - - %s -
- `.format( - spinning, - app_status_label, - (app_status_code != 2 && vpn_route_status_code != 0) - ? '' - + _('VPN routing error! Need restart') + '' : '', - (!bllist_preset || bllist_preset === '') ? _('user entries only') : - (this.blacklistPresets[bllist_preset]) ? - ` - ${this.blacklistPresets[bllist_preset][0]} - ${this.blacklistPresets[bllist_preset][1]}` - : _('Error') + '!' - ); + return E('table', { 'class': 'table' }, [ + E('tr', { 'class': 'tr' }, [ + E('td', { 'class': 'td left', 'style': 'width:33%' }, _('Status')), + E('td', { 'class': 'td left' + spinning }, [ + app_status_label, + (app_status_code != 2 && vpn_route_status_code != 0) + ? E('span', { 'class': 'label-status error' }, + _('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]) ? + [ + E('span', { + '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({