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

luci-app-alist: 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:45:26 +08:00
parent d0111602ec
commit c7a2dbac10
1 changed files with 29 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
luci-app-alist/htdocs/luci-static/resources/view/alist/logs.js
View File

@ -4,39 +4,23 @@
'require poll'; 'require poll';
'require view'; 'require view';
function pollLog(e) { var scrollPosition = 0;
var userScrolled = false;
var logTextarea;
function pollLog() {
return Promise.all([ return Promise.all([
fs.read_direct('/var/log/alist.log', 'text').then(function (res) { fs.read_direct('/var/log/alist.log', 'text').then(function (res) {
return res.trim().split(/\n/).join('\n').replace(/\u001b\[33mWARN\u001b\[0m/g, '').replace(/\u001b\[36mINFO\u001b\[0m/g, ''); return res.trim().split(/\n/).join('\n').replace(/\u001b\[33mWARN\u001b\[0m/g, '').replace(/\u001b\[36mINFO\u001b\[0m/g, '');
}), }),
]).then(function (data) { ]).then(function (data) {
var logTextarea = E('textarea', { 'class': 'cbi-input-textarea', 'wrap': 'off', 'readonly': 'readonly', 'style': 'width: calc(100% - 20px);height: 500px;margin: 10px;overflow-y: scroll;' }, [ logTextarea.value = data[0] || _('No log data.');
data[0] || _('No log data.')
]);
// Store the current scroll position if (!userScrolled) {
var storedScrollTop = e.querySelector('textarea') ? e.querySelector('textarea').scrollTop : null; logTextarea.scrollTop = logTextarea.scrollHeight;
} else {
dom.content(e, logTextarea); logTextarea.scrollTop = scrollPosition;
// If the storedScrollTop is not null, it means we have a previous scroll position
if (storedScrollTop !== null) {
logTextarea.scrollTop = storedScrollTop;
} }
// 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,26 +31,35 @@ return view.extend({
}, },
render: function () { render: function () {
var log_textarea = E('div', { 'id': 'log_textarea' }, logTextarea = E('textarea', {
E('img', { 'class': 'cbi-input-textarea',
'src': L.resource(['icons/loading.gif']), 'wrap': 'off',
'alt': _('Loading'), 'readonly': 'readonly',
'style': 'vertical-align:middle' 'style': 'width: calc(100% - 20px);height: 535px;margin: 10px;overflow-y: scroll;',
}, _('Collecting data...')) });
);
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') }); 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)); clear_logs_button.addEventListener('click', this.handleCleanLogs.bind(this));
return E([ return E([
E('div', { 'class': 'cbi-map' }, [ E('div', { 'class': 'cbi-map' }, [
E('div', { 'class': 'cbi-section' }, [ E('div', { 'class': 'cbi-section' }, [
clear_logs_button, clear_logs_button,
log_textarea, log_textarea_wrapper,
E('div', { 'style': 'text-align:right' }, E('div', { 'style': 'text-align:right' },
E('small', {}, _('Refresh every %s seconds.').format(L.env.pollinterval)) E('small', {}, _('Refresh every %s seconds.').format(L.env.pollinterval))
) )
])]) ])
])
]); ]);
}, },