luci-app: UI fixes

This commit is contained in:
gSpot
2021-02-27 18:41:29 +03:00
parent 44eb8baf0a
commit a5fc9016be
13 changed files with 84 additions and 120 deletions
+8 -6
View File
@@ -10,6 +10,8 @@ LUCI_APP=1
OWRT_VERSION="19.07" OWRT_VERSION="19.07"
RUAB_VERSION="0.9.0-1" RUAB_VERSION="0.9.0-1"
RUAB_MOD_LUA_VERSION="0.9.0-1"
RUAB_LUCI_APP_VERSION="0.9.0-2"
BASE_URL="https://raw.githubusercontent.com/gSpotx2f/ruantiblock_openwrt/master" BASE_URL="https://raw.githubusercontent.com/gSpotx2f/ruantiblock_openwrt/master"
PKG_DIR="/tmp" PKG_DIR="/tmp"
@@ -21,9 +23,9 @@ fi
### packages ### packages
URL_RUAB_PKG="${BASE_URL}/packages/${OWRT_VERSION}/ruantiblock_${RUAB_VERSION}_all.ipk" URL_RUAB_PKG="${BASE_URL}/packages/${OWRT_VERSION}/ruantiblock_${RUAB_VERSION}_all.ipk"
URL_MOD_LUA_PKG="${BASE_URL}/packages/${OWRT_VERSION}/ruantiblock-mod-lua_${RUAB_VERSION}_all.ipk" URL_MOD_LUA_PKG="${BASE_URL}/packages/${OWRT_VERSION}/ruantiblock-mod-lua_${RUAB_MOD_LUA_VERSION}_all.ipk"
URL_LUCI_APP_PKG="${BASE_URL}/packages/${OWRT_VERSION}/luci-app-ruantiblock_${RUAB_VERSION}_all.ipk" URL_LUCI_APP_PKG="${BASE_URL}/packages/${OWRT_VERSION}/luci-app-ruantiblock_${RUAB_LUCI_APP_VERSION}_all.ipk"
URL_LUCI_APP_RU_PKG="${BASE_URL}/packages/${OWRT_VERSION}/luci-i18n-ruantiblock-ru_${RUAB_VERSION}_all.ipk" URL_LUCI_APP_RU_PKG="${BASE_URL}/packages/${OWRT_VERSION}/luci-i18n-ruantiblock-ru_${RUAB_LUCI_APP_VERSION}_all.ipk"
### tor ### tor
URL_TORRC="${BASE_URL}/tor/etc/tor/torrc" URL_TORRC="${BASE_URL}/tor/etc/tor/torrc"
### ruantiblock-mod-lua ### ruantiblock-mod-lua
@@ -40,9 +42,9 @@ DATA_DIR_RAM="/var/ruantiblock"
RC_LOCAL="/etc/rc.local" RC_LOCAL="/etc/rc.local"
### packages ### packages
FILE_RUAB_PKG="${PKG_DIR}/ruantiblock_${RUAB_VERSION}_all.ipk" FILE_RUAB_PKG="${PKG_DIR}/ruantiblock_${RUAB_VERSION}_all.ipk"
FILE_MOD_LUA_PKG="${PKG_DIR}/ruantiblock-mod-lua_${RUAB_VERSION}_all.ipk" FILE_MOD_LUA_PKG="${PKG_DIR}/ruantiblock-mod-lua_${RUAB_MOD_LUA_VERSION}_all.ipk"
FILE_LUCI_APP_PKG="${PKG_DIR}/luci-app-ruantiblock_${RUAB_VERSION}_all.ipk" FILE_LUCI_APP_PKG="${PKG_DIR}/luci-app-ruantiblock_${RUAB_LUCI_APP_VERSION}_all.ipk"
FILE_LUCI_APP_RU_PKG="${PKG_DIR}/luci-i18n-ruantiblock-ru_${RUAB_VERSION}_all.ipk" FILE_LUCI_APP_RU_PKG="${PKG_DIR}/luci-i18n-ruantiblock-ru_${RUAB_LUCI_APP_VERSION}_all.ipk"
### ruantiblock ### ruantiblock
FILE_CONFIG="${RUAB_CFG_DIR}/ruantiblock.conf" FILE_CONFIG="${RUAB_CFG_DIR}/ruantiblock.conf"
FILE_FQDN_FILTER="${RUAB_CFG_DIR}/fqdn_filter" FILE_FQDN_FILTER="${RUAB_CFG_DIR}/fqdn_filter"
+1 -1
View File
@@ -5,7 +5,7 @@
include $(TOPDIR)/rules.mk include $(TOPDIR)/rules.mk
PKG_VERSION:=0.9.0 PKG_VERSION:=0.9.0
PKG_RELEASE:=1 PKG_RELEASE:=2
LUCI_TITLE:=LuCI support for ruantiblock LUCI_TITLE:=LuCI support for ruantiblock
LUCI_DEPENDS:=+ruantiblock +luci-mod-admin-full LUCI_DEPENDS:=+ruantiblock +luci-mod-admin-full
LUCI_PKGARCH:=all LUCI_PKGARCH:=all
@@ -94,7 +94,6 @@ function onchange_hour_interval(e) {
cron_hour.disabled = bool; cron_hour.disabled = bool;
cron_day_interval.disabled = bool; cron_day_interval.disabled = bool;
// For luci-theme-material
if(bool) { if(bool) {
cron_hour.style.opacity = '50%'; cron_hour.style.opacity = '50%';
cron_day_interval.style.opacity = '50%'; cron_day_interval.style.opacity = '50%';
@@ -121,7 +120,7 @@ return L.view.extend({
let cron_status = E('textarea', { let cron_status = E('textarea', {
'id': 'cron_status', 'id': 'cron_status',
'name': 'cron_status', 'name': 'cron_status',
'style': 'width:30em; padding:5px 10px 5px 10px !important; vertical-align:middle; resize:none !important;', 'style': 'width:100% !important; padding:5px 10px 5px 10px !important; resize:none !important;',
'readonly': 'readonly', 'readonly': 'readonly',
'wrap': 'off', 'wrap': 'off',
'rows': 2, 'rows': 2,
@@ -139,7 +138,11 @@ return L.view.extend({
E('div', { 'class': 'cbi-value' }, [ E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title', 'for': 'cron_status' }, E('label', { 'class': 'cbi-value-title', 'for': 'cron_status' },
_('Current schedule')), _('Current schedule')),
E('div', { 'class': 'cbi-value-field' }, [ cron_status, ' ', btn_cron_del ]), E('div', { 'class': 'cbi-value-field' }, cron_status),
]),
E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title', 'for': 'btn_cron_del' }),
E('div', { 'class': 'cbi-value-field' }, btn_cron_del),
]) ])
]); ]);
@@ -105,23 +105,23 @@ return L.view.extend({
if(data.last_blacklist_update.status) { if(data.last_blacklist_update.status) {
update_status.append( update_status.append(
E('div', { 'class': 'tr' }, [ E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, E('div', { 'class': 'td left', 'style': 'min-width:33%' },
_('Last blacklist update')), _('Last blacklist update') + ':'),
E('div', { 'class': 'td left', 'id': 'last_blacklist_update.date' }, E('div', { 'class': 'td left', 'id': 'last_blacklist_update.date' },
data.last_blacklist_update.date), data.last_blacklist_update.date),
]), ]),
E('div', { 'class': 'tr' }, [ E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, 'IP'), E('div', { 'class': 'td left' }, 'IP:'),
E('div', { 'class': 'td left', 'id': 'last_blacklist_update.ip' }, E('div', { 'class': 'td left', 'id': 'last_blacklist_update.ip' },
data.last_blacklist_update.ip), data.last_blacklist_update.ip),
]), ]),
E('div', { 'class': 'tr' }, [ E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, 'CIDR'), E('div', { 'class': 'td left' }, 'CIDR:'),
E('div', { 'class': 'td left', 'id': 'last_blacklist_update.cidr' }, E('div', { 'class': 'td left', 'id': 'last_blacklist_update.cidr' },
data.last_blacklist_update.cidr), data.last_blacklist_update.cidr),
]), ]),
E('div', { 'class': 'tr' }, [ E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, 'FQDN'), E('div', { 'class': 'td left' }, 'FQDN:'),
E('div', { 'class': 'td left', 'id': 'last_blacklist_update.fqdn' }, E('div', { 'class': 'td left', 'id': 'last_blacklist_update.fqdn' },
data.last_blacklist_update.fqdn), data.last_blacklist_update.fqdn),
]) ])
@@ -129,7 +129,7 @@ return L.view.extend({
} else { } else {
update_status.append( update_status.append(
E('div', { 'class': 'tr' }, [ E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, E('div', { 'class': 'td left' },
_('Last blacklist update')), _('Last blacklist update')),
E('div', { 'class': 'td left' }, _('No data')), E('div', { 'class': 'td left' }, _('No data')),
]) ])
@@ -139,7 +139,7 @@ return L.view.extend({
if(data.iptables) { if(data.iptables) {
let table_iptables = E('div', { 'class': 'table' }, [ let table_iptables = E('div', { 'class': 'table' }, [
E('div', { 'class': 'tr table-titles' }, [ E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th left', 'width': '33%' }, E('div', { 'class': 'th left', 'style': 'min-width:33%' },
_('Match-set')), _('Match-set')),
E('div', { 'class': 'th left' }, _('Bytes')), E('div', { 'class': 'th left' }, _('Bytes')),
]), ]),
@@ -150,10 +150,15 @@ return L.view.extend({
table_iptables.append( table_iptables.append(
E('div', { 'class': 'tr' }, [ E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, E('div', {
k), 'class': 'td left',
E('div', { 'class': 'td left', 'id': 'iptables.' + k }, 'data-title': _('Match-set'),
v), }, k),
E('div', {
'class': 'td left',
'id': 'iptables.' + k,
'data-title': _('Bytes'),
}, v),
]) ])
); );
}; };
@@ -167,7 +172,7 @@ return L.view.extend({
if(data.ipset) { if(data.ipset) {
let table_ipset = E('div', { 'class': 'table' }, let table_ipset = E('div', { 'class': 'table' },
E('div', { 'class': 'tr table-titles' }, [ E('div', { 'class': 'tr table-titles' }, [
E('div', { 'class': 'th left', 'width': '33%' }, _('Name')), E('div', { 'class': 'th left', 'style': 'min-width:33%' }, _('Name')),
E('div', { 'class': 'th left' }, _('Size in memory')), E('div', { 'class': 'th left' }, _('Size in memory')),
E('div', { 'class': 'th left' }, _('Number of entries')), E('div', { 'class': 'th left' }, _('Number of entries')),
]) ])
@@ -178,11 +183,20 @@ return L.view.extend({
table_ipset.append( table_ipset.append(
E('div', { 'class': 'tr' }, [ E('div', { 'class': 'tr' }, [
E('div', { 'class': 'td left', 'width': '33%' }, k), E('div', {
E('div', { 'class': 'td left', 'id': 'ipset.' + k + '.' + '0' }, 'class': 'td left',
v[0]), 'data-title': _('Name'),
E('div', { 'class': 'td left', 'id': 'ipset.' + k + '.' + '1' }, }, k),
v[1]), E('div', {
'class': 'td left',
'id': 'ipset.' + k + '.' + '0',
'data-title': _('Size in memory'),
}, v[0]),
E('div', {
'class': 'td left',
'id': 'ipset.' + k + '.' + '1',
'data-title': _('Number of entries'),
}, v[1]),
]) ])
); );
}; };
@@ -31,13 +31,13 @@ return L.view.extend({
}, },
render: function(logdata) { render: function(logdata) {
let nav_btns_top = '120px'; let nav_btns_top = '1px';
let loglines = this.parse_log_data(logdata); let loglines = this.parse_log_data(logdata);
let log_textarea = E('textarea', { let log_textarea = E('textarea', {
'id': 'syslog', 'id': 'syslog',
'class': 'cbi-input-textarea', 'class': 'cbi-input-textarea',
'style': 'width:100% !important; padding: 0 0 0 45px; font-size:12px', 'style': 'width:100% !important; resize:horizontal; padding: 0 0 0 45px; font-size:12px',
'readonly': 'readonly', 'readonly': 'readonly',
'wrap': 'off', 'wrap': 'off',
'rows': this.tail_default, 'rows': this.tail_default,
@@ -50,7 +50,7 @@ return L.view.extend({
'type': 'text', 'type': 'text',
'form': 'log_form', 'form': 'log_form',
'class': 'cbi-input-text', 'class': 'cbi-input-text',
'style': 'width:4em !important; min-width:4em !important', 'style': 'width:4em !important; min-width:4em !important; margin-bottom:0.3em !important',
'maxlength': 5, 'maxlength': 5,
}); });
tail_value.value = this.tail_default; tail_value.value = this.tail_default;
@@ -62,7 +62,7 @@ return L.view.extend({
'type': 'text', 'type': 'text',
'form': 'log_form', 'form': 'log_form',
'class': 'cbi-input-text', 'class': 'cbi-input-text',
'style': 'margin-left:1em !important; width:16em !important; min-width:16em !important', 'style': 'min-width:16em !important; margin-right:1em !important; margin-bottom:0.3em !important',
'placeholder': _('Message filter'), 'placeholder': _('Message filter'),
'data-tooltip': _('Filter messages with a regexp'), 'data-tooltip': _('Filter messages with a regexp'),
}); });
@@ -70,8 +70,8 @@ return L.view.extend({
let log_form_submit_btn = E('input', { let log_form_submit_btn = E('input', {
'type': 'submit', 'type': 'submit',
'form': 'log_form', 'form': 'log_form',
'class': 'cbi-button btn', 'class': 'cbi-button btn cbi-button-action',
'style': 'margin-left:1em !important; vertical-align:middle', 'style': 'margin-right:1em !important; margin-bottom:0.3em !important;',
'value': _('Apply'), 'value': _('Apply'),
'click': ev => ev.target.blur(), 'click': ev => ev.target.blur(),
}); });
@@ -113,8 +113,11 @@ return L.view.extend({
E('div', { 'class': 'cbi-section fade-in' }, E('div', { 'class': 'cbi-section fade-in' },
E('div', { 'class': 'cbi-section-node' }, E('div', { 'class': 'cbi-section-node' },
E('div', { 'class': 'cbi-value' }, [ E('div', { 'class': 'cbi-value' }, [
E('label', { 'class': 'cbi-value-title', 'for': 'tail_value' }, E('label', {
_('Show only the last messages')), 'class': 'cbi-value-title',
'for': 'tailValue',
'style': 'margin-bottom:0.3em !important',
}, _('Show only the last messages')),
E('div', { 'class': 'cbi-value-field' }, [ E('div', { 'class': 'cbi-value-field' }, [
tail_value, tail_value,
E('input', { E('input', {
@@ -127,25 +130,14 @@ return L.view.extend({
log_form_submit_btn.click(); log_form_submit_btn.click();
ev.target.blur(); ev.target.blur();
}, },
'style': 'margin-right:1em !important; margin-bottom:0.3em !important; max-width:4em !important',
}), }),
log_filter, log_filter,
E('input', {
'type': 'button',
'form': 'log_form',
'class': 'cbi-button btn cbi-button-reset',
'value': 'Χ',
'click': ev => {
log_filter.value = null;
log_form_submit_btn.click();
ev.target.blur();
},
}),
log_form_submit_btn, log_form_submit_btn,
E('form', { E('form', {
'id': 'log_form', 'id': 'log_form',
'name': 'log_form', 'name': 'log_form',
'style': 'display:inline-block; margin-left:1em !important', 'style': 'display:inline-block; margin-bottom:0.3em !important',
'submit': ui.createHandlerFn(this, function(ev) { 'submit': ui.createHandlerFn(this, function(ev) {
ev.preventDefault(); ev.preventDefault();
let form_elems = Array.from(document.forms.log_form.elements); let form_elems = Array.from(document.forms.log_form.elements);
@@ -154,6 +146,8 @@ return L.view.extend({
return this.load().then(logdata => { return this.load().then(logdata => {
let loglines = set_log_filter(set_log_tail( let loglines = set_log_filter(set_log_tail(
this.parse_log_data(logdata))); this.parse_log_data(logdata)));
log_textarea.rows = (loglines.length < this.tail_default) ?
this.tail_default : loglines.length;
log_textarea.value = loglines.join('\n'); log_textarea.value = loglines.join('\n');
}).finally(() => { }).finally(() => {
form_elems.forEach(e => e.disabled = false); form_elems.forEach(e => e.disabled = false);
@@ -173,7 +167,7 @@ return L.view.extend({
'style': 'position:relative; display:block; margin:0 !important; left:1px; top:' 'style': 'position:relative; display:block; margin:0 !important; left:1px; top:'
+ nav_btns_top, + nav_btns_top,
'click': ev => { 'click': ev => {
log_textarea.scrollTop = 0; document.getElementById('log_title').scrollIntoView(true);
ev.target.blur(); ev.target.blur();
}, },
}, '&#8593;'), }, '&#8593;'),
@@ -182,7 +176,7 @@ return L.view.extend({
'style': 'position:relative; display:block; margin:0 !important; margin-top:1px !important; left:1px; top:' 'style': 'position:relative; display:block; margin:0 !important; margin-top:1px !important; left:1px; top:'
+ nav_btns_top, + nav_btns_top,
'click': ev => { 'click': ev => {
log_textarea.scrollTop = log_textarea.scrollHeight; log_textarea.scrollIntoView(false);
ev.target.blur(); ev.target.blur();
}, },
}, '&#8595;'), }, '&#8595;'),
@@ -247,6 +247,7 @@ return L.view.extend({
o.description = _('e.g:') + ' <code>192.168.1.</code>'; o.description = _('e.g:') + ' <code>192.168.1.</code>';
o.placeholder = _('e.g:') + ' 192.168.1.'; o.placeholder = _('e.g:') + ' 192.168.1.';
o.default = ''; o.default = '';
depends_bllist_module(o); depends_bllist_module(o);
// SUMMARIZE_IP // SUMMARIZE_IP
@@ -89,8 +89,8 @@ return L.Class.extend({
app_status_label = this.info_label_error; app_status_label = this.info_label_error;
return `<div class="table"> return `<div class="table">
<div class="tr"> <div class="tr">
<div class="td left" style="width:33%"> <div class="td left" style="min-width:33%%">
${_('Status')} ${_('Status')}:
</div> </div>
<div class="td left"> <div class="td left">
${app_status_label} ${app_status_label}
@@ -101,24 +101,24 @@ return L.Class.extend({
return `<div class="table"> return `<div class="table">
<div class="tr"> <div class="tr">
<div class="td left" style="width:33%%"> <div class="td left" style="min-width:33%%">
${_('Status')} ${_('Status')}:
</div> </div>
<div class="td left%s"> <div class="td left%s">
%s %s %s %s %s %s
</div> </div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td left" style="width:33%%"> <div class="td left">
${_('Proxy mode')} ${_('Proxy mode')}:
</div> </div>
<div class="td left"> <div class="td left">
%s %s
</div> </div>
</div> </div>
<div class="tr"> <div class="tr">
<div class="td left" style="width:33%%"> <div class="td left">
${_('Blacklist update mode')} ${_('Blacklist update mode')}:
</div> </div>
<div class="td left"> <div class="td left">
%s %s
@@ -136,16 +136,17 @@ return L.Class.extend({
+ _('VPN routing error! Need restart') + '</span>' : '', + _('VPN routing error! Need restart') + '</span>' : '',
(proxy_mode == 1) ? 'Tor' : 'VPN', (proxy_mode == 1) ? 'Tor' : 'VPN',
(!bllist_module || bllist_module === '') ? _('user entries only') : bllist_mode, (!bllist_module || bllist_module === '') ? _('user entries only') : bllist_mode,
(!bllist_module || bllist_module === '') ? '' : `<div class="tr"> (!bllist_module || bllist_module === '') ? '' :
<div class="td left" style="width:33%%"> `<div class="tr">
${_('Blacklist source')} <div class="td left">
</div> ${_('Blacklist source')}:
<div class="td left"> </div>
<span style="cursor:help; border-bottom:1px dotted" data-tooltip="${this.blacklist_sources[bllist_source]}"> <div class="td left">
${bllist_source} <span style="cursor:help; border-bottom:1px dotted" data-tooltip="${this.blacklist_sources[bllist_source]}">
</span> ${bllist_source}
</div> </span>
</div>` </div>
</div>`
); );
}, },
@@ -1,51 +0,0 @@
'use strict';
'require fs';
'require uci';
'require view.ruantiblock.tools as tools';
return L.Class.extend({
title: _('Ruantiblock'),
load: function() {
return Promise.all([
fs.exec(tools.exec_path, [ 'raw-status' ]),
fs.exec(tools.exec_path, [ 'total-proxy-status' ]),
fs.exec(tools.exec_path, [ 'vpn-route-status' ]),
uci.load('ruantiblock'),
]).catch(e => {});
},
render: function(status_array) {
if(!status_array) {
return E('em', _('Error') + ': ' + _('Unable to execute or read contents'));
};
let app_status_code = status_array[0].code;
let tp_status_code = status_array[1].code;
let vpn_route_status_code = status_array[2].code;
let section = uci.get('ruantiblock', 'config');
let proxy_local_clients, proxy_mode, bllist_mode, bllist_module, bllist_source;
if(typeof(section) === 'object') {
proxy_local_clients = section.proxy_local_clients;
proxy_mode = section.proxy_mode;
bllist_mode = section.bllist_mode;
bllist_module = section.bllist_module;
bllist_source = section.bllist_source;
} else {
return _('Error');
};
document.head.append(E('style', { 'type': 'text/css' }, tools.css));
return E('div', { 'class': 'cbi-section' }).innerHTML = tools.make_status_string(
app_status_code,
proxy_mode,
bllist_mode,
bllist_module,
bllist_source,
tp_status_code,
vpn_route_status_code);
},
});
+1 -1
View File
@@ -5,7 +5,7 @@
include $(TOPDIR)/rules.mk include $(TOPDIR)/rules.mk
PKG_VERSION:=0.9.0 PKG_VERSION:=0.9.0
PKG_RELEASE:=1 PKG_RELEASE:=2
LUCI_TITLE:=Translation for luci-app-ruantiblock - Русский (Russian) LUCI_TITLE:=Translation for luci-app-ruantiblock - Русский (Russian)
LUCI_DEPENDS:=+luci-app-ruantiblock LUCI_DEPENDS:=+luci-app-ruantiblock
LUCI_PKGARCH:=all LUCI_PKGARCH:=all
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.