Merge pull request #875 from skrashevich/logs-reverse-order

feat(webui): reverse log order to display newest first

www/log.html

@@ -37,6 +37,7 @@
 <div>
     <button id="clean">Clean</button>
     <button id="update">Auto Update: ON</button>
+    <button id="reverse">Reverse Log Order: OFF</button>
 </div>
 <br>
 <table>
@@ -68,9 +69,21 @@
             .replace(/\n/g, '<br>');
     }
 
+    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();
+        }
         return lines.map(line => {
             const ts = new Date(line['time']);
             const msg = Object.keys(line).reduce((msg, key) => {
@@ -95,19 +108,24 @@
 
     reload();
 
-    // Handle auto-update switch
+    update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`;
-    let autoUpdateEnabled = true;
-
-    const update = document.getElementById('update');
     update.addEventListener('click', () => {
         autoUpdateEnabled = !autoUpdateEnabled;
         update.textContent = `Auto Update: ${autoUpdateEnabled ? 'ON' : 'OFF'}`;
     });
 
+    // Toggle log order
+    reverseBtn.textContent = `Reverse Log Order: ${reverseOrder ? 'ON' : 'OFF'}`;
+    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();
     }, 5000);
 </script>
 </body>
-</html>
+</html>