Adds fetching trackers

This commit is contained in:
2025-10-08 18:14:07 +02:00
parent 8e8a51c3a0
commit 544fb9bba9

View File

@@ -103,6 +103,26 @@
align-self: end; align-self: end;
cursor: pointer; 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> </style>
</head> </head>
<body> <body>
@@ -116,8 +136,17 @@
<button type="submit">Create</button> <button type="submit">Create</button>
</form> </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"> <div class="dialog" id="dialog">
<form onsubmit="saveAPIKey(event)"> <form onsubmit="saveAPIKey(Event)">
<label for="api-key-input">API key:</label> <label for="api-key-input">API key:</label>
<input id="api-key-input" type="password"> <input id="api-key-input" type="password">
@@ -131,16 +160,45 @@
event.preventDefault(); event.preventDefault();
const input = document.getElementById("api-key-input"); const input = document.getElementById("api-key-input");
localStorage.setItem("api-key", input.value); localStorage.setItem("api-key", input.value);
console.log("set api-key to", input.value);
document.getElementById("dialog").style.display = "none"; document.getElementById("dialog").style.display = "none";
loadTriggers();
} }
function init() { function init() {
if (localStorage.getItem("api-key")) { if (localStorage.getItem("api-key")) {
document.getElementById("dialog").style.display = "none"; 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(); init();
</script> </script>
</body> </body>