Working frontend!! No download progress yet, and no cool CSS
This commit is contained in:
parent
474c24e05a
commit
1eb1e2c827
2 changed files with 54 additions and 1 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in a new issue