src/webui_live.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

/// <reference lib="dom" />

const ws = new WebSocket("/webui_ws")
ws.onopen = () => console.log("ws open");
ws.onerror = () => console.warn("ws error");
ws.onclose = () => {
    console.warn("ws close");
    document.body.innerHTML +=
        `<p style="position:absolute;top:10px;left:10px;font-size:larger;background-color:red;padding:1em;">Websocket connection lost.</p>`
    setTimeout(() => globalThis.location.reload(), 500)
}
ws.onmessage = ev => {
    const u = JSON.parse(ev.data)
    if (u.t == "update_worker") {
        const e = document.getElementById(`worker-${u.id}`)
        if (e) e.outerHTML = u.html
        else document.querySelector("#workers > ul").innerHTML += u.html
    } else if (u.t == "remove_worker") {
        document.getElementById(`worker-${u.id}`)?.remove()
    } else if (u.t == "update_task") {
        const e = document.getElementById(u.key)
        const parent_id = u.bin == "queue" ? "bin-queue" : u.bin == "loading" ? "bin-loading" : "bin-complete"
        const parent = document.querySelector(`#${parent_id} > ul`)
        if (e && e.parentElement == parent) e.outerHTML = u.html
        else {
            e?.remove()
            // prevent adding thousands of tasks
            // TODO maybe do this server-sided
            if (parent.children.length < 256)
                parent.innerHTML += u.html
        }
    } else if (u.t == "remove_task") {
        document.getElementById(u.key)?.remove()
    } else if (u.t == "counters") {
        document.querySelector("#bin-queue .count").textContent = `${u.queue} tasks`
        document.querySelector("#bin-loading .count").textContent = `${u.loading} tasks`
        document.querySelector("#bin-complete .count").textContent = `${u.complete} tasks`
    }
}