mirror of
https://github.com/gSpotx2f/ruantiblock_openwrt.git
synced 2026-05-14 14:40:58 +00:00
luci-app: UI fixes
This commit is contained in:
gSpot
@@ -94,7 +94,6 @@ function onchange_hour_interval(e) {
|
||||
cron_hour.disabled = bool;
|
||||
cron_day_interval.disabled = bool;
|
||||
|
||||
// For luci-theme-material
|
||||
if(bool) {
|
||||
cron_hour.style.opacity = '50%';
|
||||
cron_day_interval.style.opacity = '50%';
|
||||
@@ -121,7 +120,7 @@ return L.view.extend({
|
||||
let cron_status = E('textarea', {
|
||||
'id': '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',
|
||||
'wrap': 'off',
|
||||
'rows': 2,
|
||||
@@ -139,7 +138,11 @@ return L.view.extend({
|
||||
E('div', { 'class': 'cbi-value' }, [
|
||||
E('label', { 'class': 'cbi-value-title', 'for': 'cron_status' },
|
||||
_('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) {
|
||||
update_status.append(
|
||||
E('div', { 'class': 'tr' }, [
|
||||
E('div', { 'class': 'td left', 'width': '33%' },
|
||||
_('Last blacklist update')),
|
||||
E('div', { 'class': 'td left', 'style': 'min-width:33%' },
|
||||
_('Last blacklist update') + ':'),
|
||||
E('div', { 'class': 'td left', 'id': 'last_blacklist_update.date' },
|
||||
data.last_blacklist_update.date),
|
||||
]),
|
||||
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' },
|
||||
data.last_blacklist_update.ip),
|
||||
]),
|
||||
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' },
|
||||
data.last_blacklist_update.cidr),
|
||||
]),
|
||||
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' },
|
||||
data.last_blacklist_update.fqdn),
|
||||
])
|
||||
@@ -129,7 +129,7 @@ return L.view.extend({
|
||||
} else {
|
||||
update_status.append(
|
||||
E('div', { 'class': 'tr' }, [
|
||||
E('div', { 'class': 'td left', 'width': '33%' },
|
||||
E('div', { 'class': 'td left' },
|
||||
_('Last blacklist update')),
|
||||
E('div', { 'class': 'td left' }, _('No data')),
|
||||
])
|
||||
@@ -139,7 +139,7 @@ return L.view.extend({
|
||||
if(data.iptables) {
|
||||
let table_iptables = E('div', { 'class': 'table' }, [
|
||||
E('div', { 'class': 'tr table-titles' }, [
|
||||
E('div', { 'class': 'th left', 'width': '33%' },
|
||||
E('div', { 'class': 'th left', 'style': 'min-width:33%' },
|
||||
_('Match-set')),
|
||||
E('div', { 'class': 'th left' }, _('Bytes')),
|
||||
]),
|
||||
@@ -150,10 +150,15 @@ return L.view.extend({
|
||||
|
||||
table_iptables.append(
|
||||
E('div', { 'class': 'tr' }, [
|
||||
E('div', { 'class': 'td left', 'width': '33%' },
|
||||
k),
|
||||
E('div', { 'class': 'td left', 'id': 'iptables.' + k },
|
||||
v),
|
||||
E('div', {
|
||||
'class': 'td left',
|
||||
'data-title': _('Match-set'),
|
||||
}, k),
|
||||
E('div', {
|
||||
'class': 'td left',
|
||||
'id': 'iptables.' + k,
|
||||
'data-title': _('Bytes'),
|
||||
}, v),
|
||||
])
|
||||
);
|
||||
};
|
||||
@@ -167,7 +172,7 @@ return L.view.extend({
|
||||
if(data.ipset) {
|
||||
let table_ipset = E('div', { 'class': 'table' },
|
||||
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' }, _('Number of entries')),
|
||||
])
|
||||
@@ -178,11 +183,20 @@ return L.view.extend({
|
||||
|
||||
table_ipset.append(
|
||||
E('div', { 'class': 'tr' }, [
|
||||
E('div', { 'class': 'td left', 'width': '33%' }, k),
|
||||
E('div', { 'class': 'td left', 'id': 'ipset.' + k + '.' + '0' },
|
||||
v[0]),
|
||||
E('div', { 'class': 'td left', 'id': 'ipset.' + k + '.' + '1' },
|
||||
v[1]),
|
||||
E('div', {
|
||||
'class': 'td left',
|
||||
'data-title': _('Name'),
|
||||
}, k),
|
||||
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) {
|
||||
let nav_btns_top = '120px';
|
||||
let nav_btns_top = '1px';
|
||||
let loglines = this.parse_log_data(logdata);
|
||||
|
||||
let log_textarea = E('textarea', {
|
||||
'id': 'syslog',
|
||||
'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',
|
||||
'wrap': 'off',
|
||||
'rows': this.tail_default,
|
||||
@@ -50,7 +50,7 @@ return L.view.extend({
|
||||
'type': 'text',
|
||||
'form': 'log_form',
|
||||
'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,
|
||||
});
|
||||
tail_value.value = this.tail_default;
|
||||
@@ -62,7 +62,7 @@ return L.view.extend({
|
||||
'type': 'text',
|
||||
'form': 'log_form',
|
||||
'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'),
|
||||
'data-tooltip': _('Filter messages with a regexp'),
|
||||
});
|
||||
@@ -70,8 +70,8 @@ return L.view.extend({
|
||||
let log_form_submit_btn = E('input', {
|
||||
'type': 'submit',
|
||||
'form': 'log_form',
|
||||
'class': 'cbi-button btn',
|
||||
'style': 'margin-left:1em !important; vertical-align:middle',
|
||||
'class': 'cbi-button btn cbi-button-action',
|
||||
'style': 'margin-right:1em !important; margin-bottom:0.3em !important;',
|
||||
'value': _('Apply'),
|
||||
'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-node' },
|
||||
E('div', { 'class': 'cbi-value' }, [
|
||||
E('label', { 'class': 'cbi-value-title', 'for': 'tail_value' },
|
||||
_('Show only the last messages')),
|
||||
E('label', {
|
||||
'class': 'cbi-value-title',
|
||||
'for': 'tailValue',
|
||||
'style': 'margin-bottom:0.3em !important',
|
||||
}, _('Show only the last messages')),
|
||||
E('div', { 'class': 'cbi-value-field' }, [
|
||||
tail_value,
|
||||
E('input', {
|
||||
@@ -127,25 +130,14 @@ return L.view.extend({
|
||||
log_form_submit_btn.click();
|
||||
ev.target.blur();
|
||||
},
|
||||
|
||||
'style': 'margin-right:1em !important; margin-bottom:0.3em !important; max-width:4em !important',
|
||||
}),
|
||||
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,
|
||||
E('form', {
|
||||
'id': '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) {
|
||||
ev.preventDefault();
|
||||
let form_elems = Array.from(document.forms.log_form.elements);
|
||||
@@ -154,6 +146,8 @@ return L.view.extend({
|
||||
return this.load().then(logdata => {
|
||||
let loglines = set_log_filter(set_log_tail(
|
||||
this.parse_log_data(logdata)));
|
||||
log_textarea.rows = (loglines.length < this.tail_default) ?
|
||||
this.tail_default : loglines.length;
|
||||
log_textarea.value = loglines.join('\n');
|
||||
}).finally(() => {
|
||||
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:'
|
||||
+ nav_btns_top,
|
||||
'click': ev => {
|
||||
log_textarea.scrollTop = 0;
|
||||
document.getElementById('log_title').scrollIntoView(true);
|
||||
ev.target.blur();
|
||||
},
|
||||
}, '↑'),
|
||||
@@ -182,7 +176,7 @@ return L.view.extend({
|
||||
'style': 'position:relative; display:block; margin:0 !important; margin-top:1px !important; left:1px; top:'
|
||||
+ nav_btns_top,
|
||||
'click': ev => {
|
||||
log_textarea.scrollTop = log_textarea.scrollHeight;
|
||||
log_textarea.scrollIntoView(false);
|
||||
ev.target.blur();
|
||||
},
|
||||
}, '↓'),
|
||||
|
||||
@@ -247,6 +247,7 @@ return L.view.extend({
|
||||
o.description = _('e.g:') + ' <code>192.168.1.</code>';
|
||||
o.placeholder = _('e.g:') + ' 192.168.1.';
|
||||
o.default = '';
|
||||
|
||||
depends_bllist_module(o);
|
||||
|
||||
// SUMMARIZE_IP
|
||||
|
||||
@@ -89,8 +89,8 @@ return L.Class.extend({
|
||||
app_status_label = this.info_label_error;
|
||||
return `<div class="table">
|
||||
<div class="tr">
|
||||
<div class="td left" style="width:33%">
|
||||
${_('Status')}
|
||||
<div class="td left" style="min-width:33%%">
|
||||
${_('Status')}:
|
||||
</div>
|
||||
<div class="td left">
|
||||
${app_status_label}
|
||||
@@ -101,24 +101,24 @@ return L.Class.extend({
|
||||
|
||||
return `<div class="table">
|
||||
<div class="tr">
|
||||
<div class="td left" style="width:33%%">
|
||||
${_('Status')}
|
||||
<div class="td left" style="min-width:33%%">
|
||||
${_('Status')}:
|
||||
</div>
|
||||
<div class="td left%s">
|
||||
%s %s %s
|
||||
</div>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div class="td left" style="width:33%%">
|
||||
${_('Proxy mode')}
|
||||
<div class="td left">
|
||||
${_('Proxy mode')}:
|
||||
</div>
|
||||
<div class="td left">
|
||||
%s
|
||||
</div>
|
||||
</div>
|
||||
<div class="tr">
|
||||
<div class="td left" style="width:33%%">
|
||||
${_('Blacklist update mode')}
|
||||
<div class="td left">
|
||||
${_('Blacklist update mode')}:
|
||||
</div>
|
||||
<div class="td left">
|
||||
%s
|
||||
@@ -136,16 +136,17 @@ return L.Class.extend({
|
||||
+ _('VPN routing error! Need restart') + '</span>' : '',
|
||||
(proxy_mode == 1) ? 'Tor' : 'VPN',
|
||||
(!bllist_module || bllist_module === '') ? _('user entries only') : bllist_mode,
|
||||
(!bllist_module || bllist_module === '') ? '' : `<div class="tr">
|
||||
<div class="td left" style="width:33%%">
|
||||
${_('Blacklist source')}
|
||||
</div>
|
||||
<div class="td left">
|
||||
<span style="cursor:help; border-bottom:1px dotted" data-tooltip="${this.blacklist_sources[bllist_source]}">
|
||||
${bllist_source}
|
||||
</span>
|
||||
</div>
|
||||
</div>`
|
||||
(!bllist_module || bllist_module === '') ? '' :
|
||||
`<div class="tr">
|
||||
<div class="td left">
|
||||
${_('Blacklist source')}:
|
||||
</div>
|
||||
<div class="td left">
|
||||
<span style="cursor:help; border-bottom:1px dotted" data-tooltip="${this.blacklist_sources[bllist_source]}">
|
||||
${bllist_source}
|
||||
</span>
|
||||
</div>
|
||||
</div>`
|
||||
);
|
||||
},
|
||||
|
||||
|
||||
-51
@@ -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);
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user