Display Console

src/templates/progress

@@ -68,7 +68,7 @@
         #abort-button:hover {
             background-color: #d32f2f;
         }
-        #pause-button, #resume-button {
+        #pause-button, #resume-button, #toggle-console {
             background-color: #4CAF50;
             color: white;
             border: none;
@@ -77,7 +77,7 @@
             border-radius: 4px;
             cursor: pointer;
         }
-        #pause-button:hover, #resume-button:hover {
+        #pause-button:hover, #resume-button:hover, #toggle-console:hover {
             background-color: #45a049;
         }
         #resume-button {
@@ -96,6 +96,17 @@
         #back-button:hover {
             background-color: #1976D2;
         }
+        #console {
+            display: none; /* Initially hidden */
+            background-color: black;
+            color: white;
+            height: 300px; /* Adjust height as needed */
+            overflow-y: scroll;
+            white-space: pre; /* Preserve whitespace */
+            font-family: monospace; /* Use monospace font */
+            margin-top: 10px;
+            border: 1px solid #ccc;
+        }
         @media (max-width: 600px) {
             body {
                 padding: 10px;
@@ -128,8 +139,10 @@
         <button id="abort-button" onclick="abortDownload()">Abort Download</button>
         <button id="pause-button" onclick="pauseDownload()">Pause Download</button>
         <button id="resume-button" onclick="resumeDownload()" style="display: none;">Resume Download</button>
+        <button id="toggle-console">Toggle Console View</button>
         <button id="back-button" onclick="window.location.href='/'">Back to Index</button>
     </div>
+    <div id="console"></div>
     <script>
         let isPaused = false;
 
@@ -203,6 +216,22 @@
                 });
         }
 
+        const consoleDiv = document.getElementById('console');
+        const ws = new WebSocket(`ws://${window.location.host}/ws`);
+
+        ws.onmessage = function(event) {
+            consoleDiv.textContent += event.data; 
+            consoleDiv.scrollTop = consoleDiv.scrollHeight; 
+        };
+
+        document.getElementById('toggle-console').onclick = function() {
+            if (consoleDiv.style.display === "none") {
+                consoleDiv.style.display = "block";
+            } else {
+                consoleDiv.style.display = "none";
+            }
+        };
+
         updateProgress();
     </script>
 </body>