jurajk/knet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
JurajKubrican
2025-01-10 23:46:36 +01:00
parent ca99429d79
commit 4b04531746
6 changed files with 107 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
views/boxes.html
View File

@@ -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}}

84
views/index.html
View File

@@ -7,25 +7,32 @@
<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>
<link rel="stylesheet" href="/main.css" >
</head>
<body class="bg-gray-900 text-white font-sans">
<nav class="bg-gray-800 py-4 shadow-md">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between">
<!-- Logo -->
<div class="text-2xl font-bold text-blue-500">
<a href="/">K</a> </div>
<!-- Navigation Links -->
<div class="space-x-6">
<!-- <a href="/" class="text-white hover:text-blue-500">Home</a> -->
<!-- <a href="/projects" class="text-white hover:text-blue-500">Projects</a> -->
<!-- <a href="/blog" class="text-white hover:text-blue-500">Blog</a> -->
</div>
</div>
</nav>
<main id="main" class="max-w-3xl mx-auto p-6 rounded-lg">
<section>
<div class="mt-4">{{template "boxes" .Boxes}}</div>
</section>
</main>
<footer class="bg-gray-800 text-center p-4">
<footer class="bg-gray-800 text-center p-4 flex flex-row justify-around">
<!-- link to github -->
<div class="mt-4">
<a href="https://github.com/JurajKubrican" class="text-blue-500"
@@ -43,59 +50,4 @@
</footer>
</body>
</html>
<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}}