websocket checkboxes

2024-12-28 18:49:49 +01:00
parent 6aee06da49
commit 73054d4325
5 changed files with 144 additions and 30 deletions
--- a/views/boxes.html
+++ b/views/boxes.html
@@ -0,0 +1,10 @@
+{{block "boxes" .}}
+{{range $index, $value := .}}
+    <input type="checkbox" id="box-{{$index}}" name="checked" {{if $value}}checked{{end}} 
+    hx-post="/box/{{$index}}" 
+    hx-vals='{"value": this.checked}' 
+    hx-trigger="change"
+    hx-encoding="none"
+    >
+{{end}}
+{{end}}
--- a/views/index.html
+++ b/views/index.html
@@ -7,19 +7,50 @@
    <title>Home</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/htmx.org@1.9.5"></script>
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            min-height: 100vh;
+        }
+        main {
+            flex: 1;
+        }
+    </style>
 </head>
 <body class="bg-gray-900 text-white font-sans">
-
-
    <main id="main" class="max-w-3xl mx-auto p-6 rounded-lg">
        <section>
-            <p class="mt-4">
-                Nothing to see here...
-            </p>
+            <div class="mt-4"> 
+                {{template "boxes" .Boxes}}
+            </div>
        </section>
    </main>

-    
+    <footer class="bg-gray-800 text-center p-4">
+        <!-- link to github -->
+        <div class="mt-4">
+            <a href="https://github.com/JurajKubrican" class="text-blue-500">Github</a>
+        </div>
+        <!-- Link to linkedin -->
+        <div class="mt-4">
+            <a href="https://www.linkedin.com/in/juraj-kubri%C4%8Dan-614b3274/" class="text-blue-500">LinkedIn</a>
+        </div>
+    </footer>
 </body>
 </html>
-{{end}}
+
+<script>
+    const socket = new WebSocket("ws://" + window.location.host+"/ws");
+
+    socket.addEventListener("message", function(event) {
+        const parts = event.data.split(":");
+        document.getElementById("box-"+parts[0]).checked = parts[1] === "+";
+        console.log("box-"+parts[0])
+    });
+</script>
+{{end}}
+
+
+
+