stef_buwalda/dashboard_test
1
0
Fork 0
mirror of https://github.com/StefBuwalda/dashboard_test.git synced 2025-10-29 18:59:59 +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

1
app/flask_app/static/history.svg Normal file
View File

@@ -0,0 +1 @@
<!-- icon666.com - MILLIONS OF FREE VECTOR ICONS --><svg id="Layer_1" enable-background="new 0 0 24 24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m18 24h-12c-3.3 0-6-2.7-6-6v-12c0-3.3 2.7-6 6-6h12c3.3 0 6 2.7 6 6v12c0 3.3-2.7 6-6 6z" fill="#00adff" style="fill: rgb(82, 82, 82);"></path><path d="m12 3.8c4.5 0 8.2 3.7 8.2 8.2s-3.7 8.2-8.2 8.2-8.2-3.7-8.2-8.2h1.6c0 3.6 3 6.6 6.6 6.6s6.6-3 6.6-6.6-3-6.6-6.6-6.6c-2.1 0-3.9.9-5 2.4l1.7 1.7h-4.9v-4.9l2 2c1.5-1.7 3.7-2.8 6.2-2.8zm.8 4.1v3.8l2.6 2.6-1.1 1.1-3.1-3.1v-4.4z" fill="#fff"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 566 B

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

@@ -30,12 +30,12 @@
const interval = 5000; // 5 seconds between requests const interval = 5000; // 5 seconds between requests
const progressBar = document.getElementById('progressBar'); const progressBar = document.getElementById('progressBar');
const chartURL = "{{ url_for("main.chart", id=0) }}"
function fetchData() { function fetchData() {
fetch(url, { cache: 'no-store' }) fetch(url, { cache: 'no-store' })
.then(response => response.json()) .then(response => response.json())
.then(data => { .then(data => {
console.log(data)
updateWebpage(data) updateWebpage(data)
}) })
.catch(error => console.error("Error fetching data", error)) .catch(error => console.error("Error fetching data", error))
@@ -75,8 +75,8 @@
// Build all service divs as a single string // Build all service divs as a single string
main_body.innerHTML = services.map(s => ` 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="service-tile position-relative m-2" style="width: 175px">
<div class="bg-body-tertiary d-flex flex-column align-items-center"> <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"> <div class="bg-dark w-100">
<h4 class="text-center text-truncate m-0 p-1">${s.label}</h4> <h4 class="text-center text-truncate m-0 p-1">${s.label}</h4>
</div> </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 class="position-absolute bottom-0 text-body bg-dark bg-opacity-75 px-1 rounded">${s.ping ? s.ping + "ms" : ""}</div>
</div> </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 `).join(''); // join into a single string
} }
fetchData(); // start the loop fetchData(); // start the loop
</script> </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" <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"
integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI"
crossorigin="anonymous"></script> crossorigin="anonymous"></script>