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

Added an on hover history button to display history chart.

Browse Source
This commit is contained in:
Stef
2025-09-06 10:52:21 +02:00
parent 55e8356b1b
commit 7242392233
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
app/flask_app/templates/home.html
View File

@@ -30,12 +30,12 @@
const interval = 5000; // 5 seconds between requests
const progressBar = document.getElementById('progressBar');
const chartURL = "{{ url_for("main.chart", id=0) }}"
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))
@@ -75,8 +75,8 @@
// Build all service divs as a single string
main_body.innerHTML = services.map(s => `
<a href="${s.url}" class="d-block text-body text-decoration-none m-2 border border-3 ${s.ping ? 'border-success' : 'border-danger'}" style="width: 175px">
<div class="bg-body-tertiary d-flex flex-column align-items-center">
<div class="service-tile position-relative m-2" style="width: 175px">
<a href="${s.url}" class="text-body text-decoration-none bg-body-tertiary d-flex flex-column align-items-center border border-3 ${s.ping ? 'border-success' : 'border-danger'}">
<div class="bg-dark w-100">
<h4 class="text-center text-truncate m-0 p-1">${s.label}</h4>
</div>
@@ -89,14 +89,33 @@
<div class="position-absolute bottom-0 text-body bg-dark bg-opacity-75 px-1 rounded">${s.ping ? s.ping + "ms" : ""}</div>
</div>
</div>
</div>
</a>
</a>
<a href="${chartURL.replace("0", s.service_id)}" class="overlay position-absolute bottom-0 end-0 m-1" style="width:40px;">
<img src="{{ url_for('static', filename='history.svg') }}">
</a>
</div>
`).join(''); // join into a single string
}
fetchData(); // start the loop
</script>
<!-- Add this CSS once (in your stylesheet or in a <style> block) -->
<style>
/* make overlay invisible and non-interactive by default */
.service-tile .overlay {
opacity: 0;
pointer-events: none;
transition: opacity .18s ease;
}
/* reveal overlay on hover (and make it clickable) */
.service-tile:hover .overlay {
opacity: 1;
pointer-events: auto;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script>