fix #399

assets/charts.html

@@ -153,6 +153,7 @@
                 <input class="input" type="date" id="endDate">
             </div>
             <div class="column has-text-right" style="margin: auto">
+                <button id="auto-update-log">⏸️</button>
                 <label class="checkbox checkbox-label">
                     Log
                     <input type="checkbox" id="log">
@@ -184,8 +185,7 @@
         <div class="columns">
             <div class="column is-12">
                 <div class="box" id="log-box" style="padding: 0.30rem; display: none;">
-                    <pre
-                        id="log-content">In your run.py file set save=True in logger_settings to save logs to a file.&#10;&#13;</pre>
+                    <pre id="log-content">In your run.py file set save=True in logger_settings to save logs to a file.&#10;&#13;</pre>
                 </div>
             </div>
         </div>

assets/dark-theme.css

@@ -1,4 +1,4 @@
-body {
+body, .dropdown *, .input {
     background: #343E59;
     color: #fff;
 }

assets/script.js

@@ -95,9 +95,21 @@ $(document).ready(function () {
     // Variable to keep track of whether log checkbox is checked
     var isLogCheckboxChecked = $('#log').prop('checked');
 
+    // Variable to keep track of whether auto-update log is active
+    var autoUpdateLog = true;
+
     // Variable to keep track of the last received log index
     var lastReceivedLogIndex = 0;
 
+    $('#auto-update-log').click(() => {
+        autoUpdateLog = !autoUpdateLog;
+        $('#auto-update-log').text(autoUpdateLog ? '⏸️' : '▶️');
+
+        if (autoUpdateLog) {
+            getLog();
+        }
+    });
+
     // Function to get the full log content
     function getLog() {
         if (isLogCheckboxChecked) {
@@ -110,8 +122,10 @@ $(document).ready(function () {
                 // Update the last received log index
                 lastReceivedLogIndex += data.length;
 
-                // Call getLog() again after a certain interval (e.g., 1 second)
-                setTimeout(getLog, 1000);
+                if (autoUpdateLog) {
+                    // Call getLog() again after a certain interval (e.g., 1 second)
+                    setTimeout(getLog, 1000);
+                }
             });
         }
     }
@@ -183,6 +197,7 @@ $(document).ready(function () {
     $('#log').prop('checked', logCheckboxState === 'true');
     if (logCheckboxState === 'true') {
         isLogCheckboxChecked = true;
+        $('#auto-update-log').show();
         $('#log-box').show();
         // Start continuously updating the log content
         getLog();
@@ -195,9 +210,12 @@ $(document).ready(function () {
 
         if (isLogCheckboxChecked) {
             $('#log-box').show();
+            $('#auto-update-log').show();
             getLog();
+            $('html, body').scrollTop($(document).height());
         } else {
             $('#log-box').hide();
+            $('#auto-update-log').hide();
             // Clear log content when checkbox is unchecked
             // $("#log-content").text('');
         }
@@ -266,7 +284,7 @@ function getStreamers() {
     $.getJSON('streamers', function (response) {
         streamersList = response;
         sortStreamers();
-        
+
         // Restore the selected streamer from localStorage on page load
         var selectedStreamer = localStorage.getItem("selectedStreamer");
 

assets/style.css

@@ -57,6 +57,14 @@ a {
 #log-content {
     text-align: left;
     white-space: pre-wrap;
-    max-height: 500px;
+    max-height: 400px;
     padding: 0;
+}
+
+#auto-update-log {
+    display: none;
+    background-color: transparent;
+    font-size: 20px;
+    padding: 0;
+    border-radius: 5px;
 }