cleanup

views/boxes.html

@@ -2,4 +2,59 @@
 {{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}}