fixes log pagination

app.py

@@ -176,7 +176,8 @@ def logs():
 
 @app.route('/logfile', methods=['GET'])
 def logfile():
-    lines = int(request.args.get('lines', 100))  # Number of lines to read
+    page = int(request.args.get('page', 0))  # Page number
+    lines_per_page = int(request.args.get('lines_per_page', config['DEFAULT']['LOG_VIEW_LINES']))  # Lines per page
     log_file_path = logFile  # Path to the current log file
 
     if not os.path.isfile(log_file_path):
@@ -184,8 +185,14 @@ def logfile():
 
     with open(log_file_path, 'r') as file:
         log_lines = file.readlines()
+        
+    log_lines = log_lines[::-1]
 
-    return jsonify({"log": log_lines[-lines:]})
+    start = page * lines_per_page
+    end = start + lines_per_page
+    paginated_lines = log_lines[start:end] if start < len(log_lines) else []
+
+    return jsonify({"log": paginated_lines, "total_lines": len(log_lines), "pages": len(log_lines) // lines_per_page})
 
 @app.route('/results')
 def results():

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;
+}

templates/index.html

@@ -23,15 +23,17 @@
                 <button id="stopButton" class="btn btn-primary">Stop Scraping</button>
             </div>
         </section>
-
         <section id="resultsContainer" class="container-fluid d-flex justify-content-center">
             <div class="container-md my-5 mx-2 shadow-lg p-4" style="height: 500px;">
                 <div class="row">
                     <div class="col-7">
                         <h2>Logs</h2>
-                        <button id="prevPage">Previous</button>
-                        <button id="nextPage">Next</button>
-                        <pre id="logs" class="pre-scrollable" style="height: 430px; overflow:scroll; "><code></code></pre>
+                        <pre id="logs" class="pre-scrollable" style="height: 350px; overflow:scroll; "><code></code></pre>
+                        <div class="btn-group btn-group-sm">
+                            <button class="btn btn-primary" id="prevPage">Previous</button>
+                            <button class="btn btn-primary" id="pageInfo" disabled>Page 1 of 1</button>
+                            <button class="btn btn-primary" id="nextPage">Next</button>
+                        </div>
                     </div>
                     <div class="col">
                         <h2>Stats</h2>
@@ -41,6 +43,7 @@
         </section>
     {% block scripts %}
         {{ bootstrap.load_js() }}
+        <link rel="stylesheet" href="{{ url_for('.static', filename='style.css') }}">
         <script src="{{url_for('.static', filename='app.js')}}"></script>
     {% endblock %}
     {% include "footer.html" %}