diff --git a/luci-app-alist/htdocs/luci-static/resources/view/alist/logs.js b/luci-app-alist/htdocs/luci-static/resources/view/alist/logs.js index 6077c3c..b80149a 100644 --- a/luci-app-alist/htdocs/luci-static/resources/view/alist/logs.js +++ b/luci-app-alist/htdocs/luci-static/resources/view/alist/logs.js @@ -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.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, ''); }), ]).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;' }, [ - 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,26 +31,35 @@ 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('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)) ) - ])]) + ]) + ]) ]); },