diff --git a/www/log.html b/www/log.html index d9708363..fa5d3615 100644 --- a/www/log.html +++ b/www/log.html @@ -37,6 +37,7 @@
+

@@ -68,9 +69,21 @@ .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(); + } 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 - 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 + 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); - \ No newline at end of file +