From f8d9fccf74314de8b34ef7b31ffb23132dadd5a9 Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Fri, 12 Jan 2024 07:43:12 +0300 Subject: [PATCH 1/3] fix(log-display): reverse log order to display newest first The The applyLogStyling function in log.html has been updated to reverse the array of log lines. After parsing the JSON data, reversing the array ensures that the most recent logs appear at the top of the list. This change enhances the readability for users by displaying the logs in a descending chronological order. --- www/log.html | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/www/log.html b/www/log.html index 138b03f4..0eb1c4f3 100644 --- a/www/log.html +++ b/www/log.html @@ -87,7 +87,7 @@ function applyLogStyling(jsonlines) { const KEYS = ['time', 'level', 'message']; - const lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']'); + const lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']').reverse(); return lines.map(line => { const ts = new Date(line['time']); const msg = Object.keys(line).reduce((msg, key) => { @@ -127,4 +127,4 @@ }, 5000); - \ No newline at end of file + From a50c99b8e560dec7540971be0cb0df893bae1afc Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Fri, 22 Mar 2024 16:49:25 +0300 Subject: [PATCH 2/3] feat(log): introduce toggle for reversing log order Added a button to the log page allowing users to toggle the order in which logs are displayed (normal or reversed). This feature enhances user experience by providing flexibility in viewing logs. The implementation involves a boolean flag `reverseOrder` to track the current state of log order and dynamically updates the button text to reflect the current mode. Additionally, the log fetching function now conditionally reverses the log array based on this flag, ensuring that the display order matches the user's preference. This change could significantly improve usability for users needing to analyze recent events without scrolling through the entire log history. --- www/log.html | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/www/log.html b/www/log.html index 0eb1c4f3..7517bddd 100644 --- a/www/log.html +++ b/www/log.html @@ -54,6 +54,7 @@
+

@@ -85,9 +86,14 @@ .replace(/\n/g, '
'); } + let reverseOrder = false; + function applyLogStyling(jsonlines) { const KEYS = ['time', 'level', 'message']; - const lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']').reverse(); + const lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']'); + if (reverseOrder) { + lines = lines.reverse(); + } return lines.map(line => { const ts = new Date(line['time']); const msg = Object.keys(line).reduce((msg, key) => { @@ -121,6 +127,14 @@ update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`; }); + // Toggle log order + const reverseBtn = document.getElementById('reverse'); + reverseBtn.addEventListener('click', () => { + reverseOrder = !reverseOrder; + reverseBtn.textContent = `Reverse Log Order: ${reverseOrder ? 'ON' : 'OFF'}`; + reload(); // Reload logs to apply the new order + }); + // Reload the logs every 5 seconds setInterval(() => { if (autoUpdateEnabled) reload(); From de70b0a8611cc23944f567bfa890a04a98d535a3 Mon Sep 17 00:00:00 2001 From: Sergey Krashevich Date: Fri, 22 Mar 2024 17:08:12 +0300 Subject: [PATCH 3/3] some fixes --- www/log.html | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/www/log.html b/www/log.html index 7517bddd..42c1fcd8 100644 --- a/www/log.html +++ b/www/log.html @@ -54,7 +54,7 @@
- +

@@ -86,11 +86,18 @@ .replace(/\n/g, '
'); } + let reverseBtn = document.getElementById('reverse'); + let update = document.getElementById('update'); + let reverseOrder = false; + let autoUpdateEnabled = true; + + reverseBtn.textContent = `Reverse Log Order: ${reverseOrder ? 'ON' : 'OFF'}`; + update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`; function applyLogStyling(jsonlines) { const KEYS = ['time', 'level', 'message']; - const lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']'); + let lines = JSON.parse('[' + jsonlines.trimEnd().replaceAll('\n', ',') + ']'); if (reverseOrder) { lines = lines.reverse(); } @@ -118,17 +125,14 @@ reload(); - // Handle auto-update switch - let autoUpdateEnabled = true; - - const update = document.getElementById('update'); + update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`; update.addEventListener('click', () => { autoUpdateEnabled = !autoUpdateEnabled; update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`; }); // Toggle log order - const reverseBtn = document.getElementById('reverse'); + reverseBtn.textContent = `Reverse Log Order: ${reverseOrder ? 'ON' : 'OFF'}`; reverseBtn.addEventListener('click', () => { reverseOrder = !reverseOrder; reverseBtn.textContent = `Reverse Log Order: ${reverseOrder ? 'ON' : 'OFF'}`;