feat!: new targets.json structure, add target status endpoint, move frontend to HTML file with table

BREAKING CHANGE: convert older targets.json file to new structure
2026-02-03 00:28:19 +01:00
parent 163d995008
commit ff99caa644
4 changed files with 94 additions and 29 deletions
--- a/public/index.html
+++ b/public/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <title>WOL</title>
+        <style>
+            body {
+                background: #fff;
+                color: #000;
+            }
+            @media (prefers-color-scheme: dark) {
+                body {
+                    background: #111;
+                    color: #eee; 
+                }
+                a {
+                    color: #7295f6;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <h2>Targets</h2>
+        <table border="1" cellpadding="6">
+            <tr>
+                <th>Name</th>
+                <th>MAC</th>
+                <th>Status</th>
+                <th></th>
+            </tr>
+            <tbody id="targets"></tbody>
+    </body>
+    <script>
+        async function loadTargets() {
+            const res = await fetch("/targets");
+            const targets = await res.json();
+            const tbody = document.getElementById("targets");
+
+            for (const [name, t] of Object.entries(targets)) {
+                const tr = document.createElement("tr");
+                tr.innerHTML = `
+                    <td>${name}</td>
+                    <td>${t.mac}</td>
+                    <td id="status-${name}">checking...</td>
+                    <td><a href="#" onclick="fetch('/wake/${name}')">Send WOL</a></td>
+                `;
+
+                tbody.appendChild(tr);
+
+                const checkStatus = async () => {
+                    fetch("/status/" + name)
+                    .then(res => res.ok ? res.json() : Promise.reject())
+                    .then(json => document.getElementById("status-" + name).textContent = json.isUp ? "online" : "offline")
+                    .catch(() => document.getElementById("status-" + name).textContent = "unknown");
+                }
+
+                checkStatus();
+                setInterval(checkStatus, 5000);
+            }
+        }
+
+        loadTargets();
+    </script>
+</html>