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 { return {
"habitId": habit_id, "habitId": habit_id,
"unchecked": not delete_tracking "unchecked": not delete_tracking,
"percentage": habit.percentage,
} }
@app.route('/delete', methods=['POST']) @app.route('/delete', methods=['POST'])

49
templates/index.html
View File

@ -13,8 +13,8 @@
} }
.day { .day {
width: 50px; /* Ändere die Breite nach Bedarf */ width: 50px;
height: 50px; /* Ändere die Höhe nach Bedarf */ height: 50px;
border: 1px solid #ccc; border: 1px solid #ccc;
display: flex; display: flex;
align-items: center; align-items: center;
@ -24,7 +24,10 @@
<div class="row"> <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> <script>
// Funktion zur Rückgabe des Montagsdatums // Funktion zur Rückgabe des Montagsdatums
function getMonday(date) { function getMonday(date) {
@ -34,7 +37,7 @@
} }
// Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten) // 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 // Funktion zum Erstellen der Heatmap
function createHeatmap(data) { function createHeatmap(data) {
@ -74,9 +77,11 @@
// Erstelle die Heatmap mit den simulierten Daten // Erstelle die Heatmap mit den simulierten Daten
createHeatmap(activityData); createHeatmap(activityData);
</script> </script>
<div class="col-sm-12 col-md-7 col-12"> <div class="col-md-7 col-12">
<div class="row mb-3"> <div class="row mb-3">
<h2 class="col-10">Task List</h2> <h2 class="col-10">Task List</h2>
<a class="col-2 btn btn-primary" role="button" href="/habit"> <a class="col-2 btn btn-primary" role="button" href="/habit">
@ -99,14 +104,40 @@
{{ habit.note }} {{ habit.note }}
</div> </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> <i class="bi bi-trash3"></i>
</button> </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> </li>
{% endfor %} {% endfor %}
</ul> </ul>
</div> </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> <script>
function sendPostRequest(checkboxId) { function sendPostRequest(checkboxId) {
// Get the checkbox element using the provided ID // Get the checkbox element using the provided ID
@ -124,6 +155,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);
@ -132,6 +168,7 @@
function deleteHabit(habitId) { function deleteHabit(habitId) {
// Make a POST request to /delete with the habit id // Make a POST request to /delete with the habit id
axios.post('/delete', { habitId: habitId }, { axios.post('/delete', { habitId: habitId }, {
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'