✨ Adds fetching trackers

2025-10-08 18:14:07 +02:00
parent 8e8a51c3a0
commit 544fb9bba9
1 changed files with 60 additions and 2 deletions
--- a/static/index.html
+++ b/static/index.html
@@ -103,6 +103,26 @@
            align-self: end;
            cursor: pointer;
        }
+
+        #tracker-table {
+            width: 100%;
+            margin-top: 2rem;
+            font-size: 1.10rem;
+        }
+
+        #tracker-table th:nth-child(1) {
+            width: 20rem;
+        }
+
+        #tracker-table td:nth-child(3) {
+            width: 15rem;
+        }
+
+        #tracker-table td, #tracker-table th {
+            margin: 0;
+            padding: 0;
+            border-bottom: 1px solid black;
+        }
    </style>
 </head>
 <body>
@@ -116,8 +136,17 @@
        <button type="submit">Create</button>
    </form>

+    <table id="tracker-table">
+        <tr>
+            <th>ID</th>
+            <th>Name</th>
+            <th>Created at</th>
+            <th>Hits</th>
+        </tr>
+    </table>
+
    <div class="dialog" id="dialog">
-        <form onsubmit="saveAPIKey(event)">
+        <form onsubmit="saveAPIKey(Event)">
            <label for="api-key-input">API key:</label>
            <input id="api-key-input" type="password">

@@ -131,16 +160,45 @@
        event.preventDefault();
        const input = document.getElementById("api-key-input");
        localStorage.setItem("api-key", input.value);
-        console.log("set api-key to", input.value);
        document.getElementById("dialog").style.display = "none";
+        loadTriggers();
    }

    function init() {
        if (localStorage.getItem("api-key")) {
            document.getElementById("dialog").style.display = "none";
+            loadTriggers();
        }
    }

+    function loadTriggers() {
+        const apiKey = localStorage.getItem("api-key");
+        if (!apiKey) {
+            return;
+        }
+
+        fetch("http://localhost:8000/tracker", {
+            method: "GET",
+            headers: {
+                Authorization: apiKey,
+            }
+        }).then((res) => {
+            res.json().then((trackers) => {
+                console.log(trackers);
+                trackers.forEach((tracker) => {
+                    document.getElementById("tracker-table").innerHTML += `
+                    <tr>
+                        <td>${tracker.id}</td>
+                        <td>${tracker.name}</td>
+                        <td>${tracker.created_at}</td>
+                        <td>${tracker.hits}</td>
+                    </tr>
+                    `;
+                })
+            }).catch((err) => alert(`Couldn't unwrap json: ${err}`))
+        }).catch((err) => alert(`Couldn't fetch trackers: ${err}`));
+    }
+
    init();
 </script>
 </body>