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

Merge branch 'master' of https://repo.cimeyclust.com/CimeyClust/HabitTracker

Browse Source
This commit is contained in:
Yapollon 2024-01-30 11:18:00 +01:00
commit 390d437578
2 changed files with 45 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
app.py
View File

@ -329,7 +329,8 @@ def check_habit():
return {
"habitId": habit_id,
"unchecked": not delete_tracking
"unchecked": not delete_tracking,
"percentage": habit.percentage,
}
@app.route('/delete', methods=['POST'])

49
templates/index.html
View File

@ -13,8 +13,8 @@
}
.day {
width: 50px; /* Ändere die Breite nach Bedarf */
height: 50px; /* Ändere die Höhe nach Bedarf */
width: 50px;
height: 50px;
border: 1px solid #ccc;
display: flex;
align-items: center;
@ -24,7 +24,10 @@
<div class="row">
<div class="col-sm-12 col-md-5 col-12" id="heatmap"></div>
<div class="col-md-5 col-12">
<div id="heatmap"></div>
</div>
<script>
// Funktion zur Rückgabe des Montagsdatums
function getMonday(date) {
@ -34,7 +37,7 @@
}
// Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
const activityData = [9, 5, 11, 39, 24, 2, 10, 47, 32, 45, 9, 5, 11, 39, 24, 2, 10, 47, 32, 45];
const activityData = [5, 3, 10, 5, 24, 2, 10, 47, 32, 45, 9, 5, 11, 39, 24, 2, 10, 47, 32, 45];
// Funktion zum Erstellen der Heatmap
function createHeatmap(data) {
@ -74,9 +77,11 @@
// Erstelle die Heatmap mit den simulierten Daten
createHeatmap(activityData);
</script>
<div class="col-sm-12 col-md-7 col-12">
<div class="col-md-7 col-12">
<div class="row mb-3">
<h2 class="col-10">Task List</h2>
<a class="col-2 btn btn-primary" role="button" href="/habit">
@ -99,14 +104,40 @@
{{ habit.note }}
</div>
<button type="button" class="btn btn-xs btn-danger rounded-circle" style="width: 40px; height: 40px" onclick="deleteHabit('{{habit.id}}')">
<button type="button" class="btn btn-xs btn-danger rounded-circle" data-bs-toggle="modal" data-bs-target="#exampleModal" style="width: 40px; height: 40px" onclick="() => { let habitId = {{habit.id}} }">
<i class="bi bi-trash3"></i>
</button>
<div class="col-12">
<div class="progress" style="height: 2px; width: 90%">
<div class="progress-bar" id="progress-bar-{{habit.id}}" role="progressbar" style="width: {{ habit.percentage }};"></div>
</div>
</div>
</li>
{% endfor %}
</ul>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary btn-danger" onclick="deleteHabit(habitId) ">Löschen</button>
</div>
</div>
</div>
</div>
<script>
function sendPostRequest(checkboxId) {
// Get the checkbox element using the provided ID
@ -124,6 +155,11 @@
}).then(function (response) {
// Handle the success response if needed
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) {
// Handle the error if needed
console.error('Error:', error);
@ -132,6 +168,7 @@
function deleteHabit(habitId) {
// Make a POST request to /delete with the habit id
axios.post('/delete', { habitId: habitId }, {
headers: {
'Content-Type': 'application/json'