Working frontend!! No download progress yet, and no cool CSS

This commit is contained in:
DarkCat09 2024-05-06 21:01:53 +04:00
parent 474c24e05a
commit 1eb1e2c827
Signed by: DarkCat09
GPG key ID: 0A26CD5B3345D6E3
2 changed files with 54 additions and 1 deletions

View file

@ -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>

View file

@ -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
}
})
})