stef_buwalda/dashboard_test
1
0
Fork 0
mirror of https://github.com/StefBuwalda/dashboard_test.git synced 2025-10-31 11:49:58 +00:00
Code Issues Packages Projects Releases Wiki Activity

Switched from browser refresh to update webpage with API fetch

Browse Source 
Added an ID field to the API. Added a fetch script that updates the webpage every second.
This commit is contained in:
Stef
2025-08-31 14:06:55 +02:00
parent f2a006b397
commit 6103a34ae1
3 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
templates/home.html
View File

@@ -2,7 +2,7 @@
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="UTF-8" http-equiv="refresh" content="1">
<meta charset="UTF-8">
<title>Debug Divs</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
@@ -27,4 +27,43 @@
</body>
<script>
const main_body = document.getElementById("main_body");
const url = '/api/status';
function fetchData() {
fetch(url, { cache: 'no-store' })
.then(response => response.json())
.then(data => {
console.log(data)
updateWebpage(data)
})
.catch(error => console.error("Error fetching data", error))
.finally(() => {
setTimeout(fetchData, 1000); // schedule next request after 1 second
});
}
function updateWebpage(services) {
main_body.innerHTML = ''; // Clear webpage
// Build all service divs as a single string
main_body.innerHTML = services.map(s => `
<div class="m-2 border border-3 ${s.online ? 'border-success' : 'border-danger'}" style="width: 200px">
<div class="bg-body-tertiary d-flex flex-column align-items-center">
<div class="bg-dark w-100">
<h4 class="text-center text-truncate m-0" style="font-size: 1.5rem;">${s.label}</h4>
</div>
<div class="ratio ratio-1x1 w-75">
<img src="static/icons/${s.id}.${s.icon_filetype}" class="img-fluid">
</div>
</div>
</div>
`).join(''); // join into a single string
}
fetchData(); // start the loop
</script>
</html>