log: show the end of the log and make it scrollable

Show the latest lines of the log first as they contain the
information relevant to the latest operations.

Show the logs inside an scrollable widget.

1 files changed, 15 insertions, 1 deletions

diff --git a/ogcp/templates/actions/legacy/log.html b/ogcp/templates/actions/legacy/log.html
index a3f252c..12c7c50 100644
--- a/ogcp/templates/actions/legacy/log.html
+++ b/ogcp/templates/actions/legacy/log.html
@@ -20,6 +20,20 @@
     }
 </style>
 
-<pre>{{ log }}</pre>
+<div class="container-fluid d-flex flex-column" style="height: 90vh;">
+    <div class="border p-3 overflow-auto flex-grow-1" id="logContainer">
+        <pre>{{ log }}</pre>
+    </div>
+</div>
+
+<script>
+    function scrollToBottom() {
+        const logContainer = document.getElementById('logContainer');
+        logContainer.scrollTo({ top: logContainer.scrollHeight, behavior: 'instant' });
+    }
+
+    document.addEventListener("DOMContentLoaded", scrollToBottom);
+</script>
+
 
 {% endblock %}