From 1eb1e2c827d6619995d31529693c9b70f852c2af Mon Sep 17 00:00:00 2001
From: DarkCat09 <gh@dc09.ru>
Date: Mon, 6 May 2024 21:01:53 +0400
Subject: [PATCH] Working frontend!! No download progress yet, and no cool CSS

---
 frontend/index.html |  2 +-
 frontend/script.js  | 53 +++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index e7d6623..8637bb1 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -24,7 +24,7 @@
     </div>
     <div id="items-container"></div>
     <div>
-      <button type="button">Download</button>
+      <button type="button" id="dl-btn">Download</button>
     </div>
     <div>
       <label>Progress: <span id="progress">not implemented</span></label>
diff --git a/frontend/script.js b/frontend/script.js
index 74a6ee1..ebcebb7 100644
--- a/frontend/script.js
+++ b/frontend/script.js
@@ -15,4 +15,57 @@ addEventListener('DOMContentLoaded', () => {
       site.value = 'yandex'
     }
   })
+
+  const socket = new WebSocket('ws://127.0.0.1:4009')
+
+  const itemsDiv = document.getElementById('items-container')
+  let items = []
+
+  document.getElementById('items-btn').addEventListener('click', () => {
+    socket.send(JSON.stringify({
+      action: 'list',
+      site: site.value,
+      url: urlField.value,
+    }))
+  })
+
+  document.getElementById('dl-btn').addEventListener('click', () => {
+    socket.send(JSON.stringify({
+      action: 'download',
+      site: site.value,
+      url: urlField.value,
+      items: items,
+    }))
+    items = []
+  })
+
+  socket.addEventListener('message', ev => {
+    const msg = JSON.parse(ev.data)
+    switch (msg.type) {
+      case 'items':
+        itemsDiv.textContent = '' // clear
+        const len = msg.data.length
+        for (let i = 1; i <= len; i++) {
+          const itemElem = document.createElement('label')
+          const itemCheckbox = document.createElement('input')
+          itemCheckbox.type = 'checkbox'
+          itemCheckbox.addEventListener('change', () => {
+            if (itemCheckbox.checked) {
+              items.push(i)
+            } else {
+              items.splice(items.indexOf(i), 1)
+            }
+          })
+          itemElem.append(itemCheckbox)
+          itemText = document.createTextNode(msg.data[i - 1])
+          itemElem.append(itemText)
+          itemsDiv.append(itemElem)
+        }
+        break
+      case 'dl_progress':
+        break
+      case 'dl_end':
+        break
+    }
+  })
 })