60 lines
1.7 KiB
HTML
60 lines
1.7 KiB
HTML
{{block "boxes" .}}
|
|
{{range $index, $value := .}}
|
|
<input type="checkbox" id="box-{{$index}}" name="checked" {{if $value}}checked{{end}} >
|
|
{{end}}
|
|
|
|
<script>
|
|
const socketUrl =
|
|
(window.location.protocol.startsWith("https") ? "wss://" : "ws://") +
|
|
window.location.host +
|
|
"/ws";
|
|
|
|
let socket = new WebSocket(socketUrl);
|
|
|
|
socket.addEventListener("message", function (event) {
|
|
if (event.data.startsWith("u:")) {
|
|
const items = event.data.split(";");
|
|
items.forEach((i) => {
|
|
const parts = event.data.split(":");
|
|
document.getElementById("box-" + parts[1]).checked = parts[2] === "+";
|
|
console.log("box-" + parts[1]);
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (event.data.startsWith("i:")) {
|
|
const str = event.data.split("i:")[1];
|
|
const items = str.split(";");
|
|
if (items.length === 0) {
|
|
return;
|
|
}
|
|
document.querySelectorAll("input").forEach((input) => {
|
|
input.checked = false;
|
|
});
|
|
items.forEach((i) => {
|
|
if (!i) {
|
|
return;
|
|
}
|
|
console.log(i, document.getElementById("box-" + i));
|
|
document.getElementById("box-" + i).checked = true;
|
|
});
|
|
return;
|
|
}
|
|
});
|
|
|
|
setInterval(() => {
|
|
socket.send("ping");
|
|
}, 10000);
|
|
|
|
document.querySelectorAll("input").forEach((input) => {
|
|
input.addEventListener("change", (event) => {
|
|
if (socket.readyState !== socket.OPEN) {
|
|
socket = new WebSocket(socketUrl);
|
|
}
|
|
const id = event.target.id.split("-")[1];
|
|
const value = event.target.checked ? "+" : "-";
|
|
socket.send("u:" + id + ":" + value);
|
|
});
|
|
});
|
|
</script>
|
|
{{end}} |