CimeyClust/HabitTracker
1
1
Fork 0
Code Issues Pull Requests Packages Projects 2 Releases Wiki Activity

Added dynamic update of progress bar

Browse Source
This commit is contained in:
Verox001 2024-01-30 10:53:21 +01:00
parent d9f67501b2
commit 074be3fac7
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
templates/index.html
View File

@ -109,7 +109,7 @@
</button> </button>
<div class="col-12"> <div class="col-12">
<div class="progress" style="height: 2px; width: 90%"> <div class="progress" style="height: 2px; width: 90%">
<div class="progress-bar" role="progressbar" style="width: {{ habit.percentage }};"></div> <div class="progress-bar" id="progress-bar-{{habit.id}}" role="progressbar" style="width: {{ habit.percentage }};"></div>
</div> </div>
</div> </div>
</li> </li>
@ -135,6 +135,11 @@
}).then(function (response) { }).then(function (response) {
// Handle the success response if needed // Handle the success response if needed
console.log(response.data); console.log(response.data);
// Set the percentage of the habit. percentage received as integer
var percentage = response.data.percentage;
var progressBar = document.getElementById("progress-bar-" + habitId);
progressBar.style.width = percentage + "%";
}).catch(function (error) { }).catch(function (error) {
// Handle the error if needed // Handle the error if needed
console.error('Error:', error); console.error('Error:', error);