zhao/luci-app-mosdns
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

luci-app-mosdns: fix some issues with log printing

Browse Source 
* print the bottom log content by default.
* fix the problem that users cannot scroll the log content when refreshing the log.

Signed-off-by: sbwml <admin@cooluc.com>
This commit is contained in:
sbwml 2024-08-19 19:16:38 +08:00
parent b98af55480
commit 92bf8db5a6
1 changed files with 30 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
luci-app-mosdns/htdocs/luci-static/resources/view/mosdns/logs.js
View File

@ -4,39 +4,23 @@
'require poll';
'require view';
function pollLog(e) {
var scrollPosition = 0;
var userScrolled = false;
var logTextarea;
function pollLog() {
return Promise.all([
fs.exec_direct('/usr/share/mosdns/mosdns.sh', ['printlog']).then(function (res) {
return res.trim().split(/\n/).join('\n')
return res.trim().split(/\n/).join('\n');
}),
]).then(function (data) {
var logTextarea = E('textarea', { 'class': 'cbi-input-textarea', 'wrap': 'off', 'readonly': 'readonly', 'style': 'width: calc(100% - 20px);height: 645px;margin: 10px;overflow-y: scroll;' }, [
data[0] || _('No log data.')
]);
logTextarea.value = data[0] || _('No log data.');
// Store the current scroll position
var storedScrollTop = e.querySelector('textarea') ? e.querySelector('textarea').scrollTop : null;
dom.content(e, logTextarea);
// If the storedScrollTop is not null, it means we have a previous scroll position
if (storedScrollTop !== null) {
logTextarea.scrollTop = storedScrollTop;
if (!userScrolled) {
logTextarea.scrollTop = logTextarea.scrollHeight;
} else {
logTextarea.scrollTop = scrollPosition;
}
// Add event listener to save the scroll position when scrolling stops
var timer;
logTextarea.addEventListener('scroll', function () {
clearTimeout(timer);
timer = setTimeout(function () {
storeScrollPosition(logTextarea.scrollTop);
}, 150);
});
function storeScrollPosition(scrollPos) {
localStorage.setItem("scrollPosition", JSON.stringify({ "log": scrollPos }));
}
});
};
@ -47,27 +31,36 @@ return view.extend({
},
render: function () {
var log_textarea = E('div', { 'id': 'log_textarea' },
E('img', {
'src': L.resource(['icons/loading.gif']),
'alt': _('Loading'),
'style': 'vertical-align:middle'
}, _('Collecting data...'))
);
logTextarea = E('textarea', {
'class': 'cbi-input-textarea',
'wrap': 'off',
'readonly': 'readonly',
'style': 'width: calc(100% - 20px);height: 535px;margin: 10px;overflow-y: scroll;',
});
logTextarea.addEventListener('scroll', function () {
userScrolled = true;
scrollPosition = logTextarea.scrollTop;
});
var log_textarea_wrapper = E('div', { 'id': 'log_textarea' }, logTextarea);
poll.add(pollLog);
poll.add(pollLog.bind(this, log_textarea));
var clear_logs_button = E('input', { 'class': 'btn cbi-button-action', 'type': 'button', 'style': 'margin-left: 10px; margin-top: 10px;', 'value': _('Clear logs') });
clear_logs_button.addEventListener('click', this.handleCleanLogs.bind(this));
return E([
E('div', { 'class': 'cbi-map' }, [
E('h2', { 'name': 'content' }, '%s - %s'.format(_('MosDNS'), _('Log Data'))),
E('div', { 'class': 'cbi-section' }, [
clear_logs_button,
log_textarea,
log_textarea_wrapper,
E('div', { 'style': 'text-align:right' },
E('small', {}, _('Refresh every %s seconds.').format(L.env.pollinterval))
)
])])
])
])
]);
},