fixes log pagination

static/app.js

@@ -4,23 +4,27 @@ document.addEventListener('DOMContentLoaded', () => {
     const logsElement = document.getElementById('logs');
     const prevPageButton = document.getElementById('prevPage');
     const nextPageButton = document.getElementById('nextPage');
+    const pageInfo = document.getElementById('pageInfo');
     let currentPage = 0;
+    
     const linesPerPage = 50;
     let autoRefreshInterval;
 
-    console.log('Form:', form);
-    console.log('Submit button:', form.querySelector('button[type="submit"]'));
-
     const fetchLogs = (page) => {
-        fetch(`/logfile?lines=${linesPerPage * (page + 1)}`)
+        fetch(`/logfile?page=${page}&lines_per_page=${linesPerPage}`)
             .then(response => response.json())
             .then(data => {
                 if (data.error) {
                     logsElement.textContent = data.error;
                 } else {
-                    // Reverse the order of log lines
-                    const reversedLogs = data.log.reverse();
-                    logsElement.textContent = reversedLogs.join('');
+                    logsElement.innerHTML = data.log.map((line, index) => {
+                        const lineNumber = data.total_lines - (page * linesPerPage + index);
+                        return `<span class="line-number">${lineNumber}</span> ${line}`;
+                    }).join('');
+                    // Disable/enable pagination buttons based on the page number and total lines
+                    prevPageButton.disabled = page === 0;
+                    nextPageButton.disabled = (page + 1) * linesPerPage >= data.total_lines;
+                    pageInfo.textContent = `Page ${page + 1} of ${Math.ceil(data.total_lines / linesPerPage)}`;
                 }
             });
     };

static/style.css

@@ -207,3 +207,11 @@
 #color-mode-toggle  input:not(:checked) + label .sun {
     opacity: 0;
 }
+
+.line-number {
+    display: inline-block;
+    width: 30px;
+    text-align: right;
+    margin-right: 10px;
+    color: #888;
+}