Update frontend for YDL logging

frontend/index.html

@@ -27,7 +27,7 @@
       <button type="button" id="dl-btn">Download</button>
     </div>
     <div>
-      <label>Progress: <span id="progress">not implemented</span></label>
+      <pre><code id="log"></code></pre>
     </div>
   </body>
 </html>

frontend/script.js

@@ -21,12 +21,15 @@ addEventListener('DOMContentLoaded', () => {
   const itemsDiv = document.getElementById('items-container')
   let items = []
 
+  const logField = document.getElementById('log')
+
   document.getElementById('items-btn').addEventListener('click', () => {
     socket.send(JSON.stringify({
       action: 'list',
       site: site.value,
       url: urlField.value,
     }))
+    logField.textContent = '' // clear
   })
 
   document.getElementById('dl-btn').addEventListener('click', () => {
@@ -37,13 +40,14 @@ addEventListener('DOMContentLoaded', () => {
       items: items,
     }))
     items = []
+    logField.textContent = ''
   })
 
   socket.addEventListener('message', ev => {
     const msg = JSON.parse(ev.data)
     switch (msg.type) {
       case 'items':
-        itemsDiv.textContent = '' // clear
+        itemsDiv.textContent = ''
         const len = msg.data.length
         for (let i = 1; i <= len; i++) {
           const itemElem = document.createElement('label')
@@ -62,9 +66,22 @@ addEventListener('DOMContentLoaded', () => {
           itemsDiv.append(itemElem)
         }
         break
-      case 'dl_progress':
+      case 'ydl_log':
+        const lineElem = document.createElement('span')
+        switch (msg.level) {
+          case 'warning':
+            lineElem.className = 'log-warning'
             break
-      case 'dl_end':
+          case 'error':
+            lineElem.className = 'log-error'
+            break
+          default: // add no classes if `debug` or some unknown level
+            break
+        }
+        lineElem.innerText = msg.data + '\n'
+        logField.append(lineElem)
+        break
+      case 'ydl_end':
         break
     }
   })