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);