From a50c99b8e560dec7540971be0cb0df893bae1afc Mon Sep 17 00:00:00 2001
From: Sergey Krashevich <svk@svk.su>
Date: Fri, 22 Mar 2024 16:49:25 +0300
Subject: [PATCH] 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 @@
 <div>
     <button id="clean">Clean</button>
     <button id="update">Auto Update: ON</button>
+    <button id="reverse">Reverse Log Order: ON</button>
 </div>
 <br>
 <table>
@@ -85,9 +86,14 @@
             .replace(/\n/g, '<br>');
     }
 
+    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();