From d868a181a9ac2011b60bdad5bec8e83a9c77cb96 Mon Sep 17 00:00:00 2001
From: Michael Beck <m.beck.tr@gmail.com>
Date: Wed, 5 Feb 2025 22:39:10 +0100
Subject: [PATCH] fixes log pagination

---
 app.py               | 11 +++++++++--
 static/app.js        | 18 +++++++++++-------
 static/style.css     |  8 ++++++++
 templates/index.html | 11 +++++++----
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/app.py b/app.py
index 9cb8d8b..9d59021 100644
--- a/app.py
+++ b/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():
diff --git a/static/app.js b/static/app.js
index 7244679..8351421 100644
--- a/static/app.js
+++ b/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)}`;
                 }
             });
     };
diff --git a/static/style.css b/static/style.css
index 6ed19d6..4742a63 100644
--- a/static/style.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/templates/index.html b/templates/index.html
index e673002..89d1b8e 100644
--- a/templates/index.html
+++ b/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" %}
\ No newline at end of file