luci-mod-status: Adding scroll buttons on syslog and kernellog status…

… pages Signed-off-by: Ramon Van Gorkom <[email protected]>
openwrt · Feb 11, 2024 · 226d47e · 226d47e
1 parent b4a546c
commit 226d47e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 2 deletions.
diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/dmesg.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/dmesg.js
@@ -16,16 +16,36 @@ return view.extend({
 			return line.replace(/^<\d+>/, '');
 		});
 
+		var scrollDownButton = E('button', { 
+				'id': 'scrollDownButton',
+				'class': 'cbi-button cbi-button-neutral',
+			}, _('Scroll to tail', 'scroll to bottom (the tail) of the log file')
+		);
+		scrollDownButton.addEventListener('click', function() {
+			window.scrollTo(0, document.body.scrollHeight);
+		});
+
+		var scrollUpButton = E('button', { 
+				'id' : 'scrollUpButton',
+				'class': 'cbi-button cbi-button-neutral',
+			}, _('Scroll to head', 'scroll to top (the head) of the log file')
+		);
+		scrollUpButton.addEventListener('click', function() {
+			window.scrollTo(0, 0);
+		});
+
 		return E([], [
 			E('h2', {}, [ _('Kernel Log') ]),
 			E('div', { 'id': 'content_syslog' }, [
+				E('div', {'style': 'padding-bottom: 20px'} ,[scrollDownButton]),
 				E('textarea', {
 					'id': 'syslog',
 					'style': 'font-size:12px',
 					'readonly': 'readonly',
 					'wrap': 'off',
 					'rows': loglines.length + 1
-				}, [ loglines.join('\n') ])
+				}, [ loglines.join('\n') ]),
+				E('div', {'style': 'padding-bottom: 20px'} ,[scrollUpButton])
 			])
 		]);
 	},

diff --git a/modules/luci-mod-status/htdocs/luci-static/resources/view/status/syslog.js b/modules/luci-mod-status/htdocs/luci-static/resources/view/status/syslog.js
@@ -21,16 +21,37 @@ return view.extend({
 	render: function(logdata) {
 		var loglines = logdata.trim().split(/\n/);
 
+
+		var scrollDownButton = E('button', { 
+				'id': 'scrollDownButton',
+				'class': 'cbi-button cbi-button-neutral'
+			}, _('Scroll to tail', 'scroll to bottom (the tail) of the log file')
+		);
+		scrollDownButton.addEventListener('click', function() {
+			window.scrollTo(0, document.body.scrollHeight);
+		});
+
+		var scrollUpButton = E('button', { 
+				'id' : 'scrollUpButton',
+				'class': 'cbi-button cbi-button-neutral'
+			}, _('Scroll to head', 'scroll to top (the head) of the log file')
+		);
+		scrollUpButton.addEventListener('click', function() {
+			window.scrollTo(0, 0);
+		});
+
 		return E([], [
 			E('h2', {}, [ _('System Log') ]),
 			E('div', { 'id': 'content_syslog' }, [
+				E('div', {'style': 'padding-bottom: 20px'} ,[scrollDownButton]),
 				E('textarea', {
 					'id': 'syslog',
 					'style': 'font-size:12px',
 					'readonly': 'readonly',
 					'wrap': 'off',
 					'rows': loglines.length + 1
-				}, [ loglines.join('\n') ])
+				}, [ loglines.join('\n') ]),
+				E('div', {'style': 'padding-bottom: 20px'} ,[scrollUpButton])
 			])
 		]);
 	},