techinc/ti-powerbar
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refresh

Browse source
This commit is contained in:
Matthew Frost 2023-11-19 02:46:47 +01:00
parent 303351b904
commit 88df77b712
1 changed files with 24 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/templates/index.html
View file

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>Powerbar Control</title> <title>Powerbar.ti</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<style> <style>
@ -123,18 +123,21 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script> <script>
// Fetch data from the /powerbars endpoint // Fetch data from the /powerbars endpoint
fetch('/powerbars') function fetchPowerbars() {
.then(response => response.json()) fetch('/powerbars')
.then(data => { .then(response => response.json())
// Render powerbars .then(data => {
renderPowerbars(data); // Render powerbars
}) renderPowerbars(data);
.catch(error => { })
console.error('Error:', error); .catch(error => {
}); console.error('Error:', error);
});
}
function renderPowerbars(data) { function renderPowerbars(data) {
const powerbarsContainer = document.getElementById('powerbars'); const powerbarsContainer = document.getElementById('powerbars');
powerbarsContainer.innerHTML = ''; // Clear existing powerbars
// Loop through each powerbar // Loop through each powerbar
for (const powerbarKey in data) { for (const powerbarKey in data) {
@ -262,6 +265,17 @@
} }
} }
}); });
// Refresh powerbars and their states
function refreshPowerbars() {
fetchPowerbars();
}
// Initial fetch and render
fetchPowerbars();
// Refresh every 5 seconds
setInterval(refreshPowerbars, 5000);
</script> </script>
</body> </body>
</html> </html>