From 54449690273128bb450a37239c2ebb8faf48c5b7 Mon Sep 17 00:00:00 2001
From: DarkCat09 <gh@dc09.ru>
Date: Wed, 8 May 2024 13:53:02 +0400
Subject: [PATCH] Update frontend for YDL logging

---
 frontend/index.html |  2 +-
 frontend/script.js  | 23 ++++++++++++++++++++---
 2 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index 8637bb1..521c10b 100644
--- a/frontend/index.html
+++ b/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>
diff --git a/frontend/script.js b/frontend/script.js
index ebcebb7..0499790 100644
--- a/frontend/script.js
+++ b/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 '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 'dl_end':
+      case 'ydl_end':
         break
     }
   })