From 5e71260dbe4a751c4e28d1aabb819b987e737b3f Mon Sep 17 00:00:00 2001 From: Yapollon Date: Thu, 7 Mar 2024 14:28:20 +0100 Subject: [PATCH] Responsive Heatmap! - Deleted the shitty spline model --- app.py | 5 +- models/User.py | 1 - static/script/script-index.js | 173 ++++++++++++++++++++++++++++++ templates/components/heatmap.html | 45 +------- templates/components/scripts.html | 125 --------------------- templates/index.html | 8 +- 6 files changed, 178 insertions(+), 179 deletions(-) create mode 100644 static/script/script-index.js delete mode 100644 templates/components/scripts.html diff --git a/app.py b/app.py index 75dd599..7a5f488 100644 --- a/app.py +++ b/app.py @@ -552,13 +552,14 @@ def check_habit(): habit.reset_statistics() habit.load_statistics() - + heatmap_values = current_user.get_heatmap() return { "habitId": habit_id, "unchecked": not delete_tracking, "percentage": habit.percentage, - "streak": habit.streak + "streak": habit.streak, + "heatmap": heatmap_values } diff --git a/models/User.py b/models/User.py index 86bf580..54ed9fe 100644 --- a/models/User.py +++ b/models/User.py @@ -74,5 +74,4 @@ class User(UserMixin): for day in range (0, 28): value = get_heatmap_value(self.id, day) heatmap.append(value) - heatmap.reverse() return heatmap \ No newline at end of file diff --git a/static/script/script-index.js b/static/script/script-index.js new file mode 100644 index 0000000..79da6c1 --- /dev/null +++ b/static/script/script-index.js @@ -0,0 +1,173 @@ + +// Funktion zum Erstellen der Heatmap +function createHeatmap(data) { + const heatmapContainer = document.getElementById('heatmap'); + + // Aktuelles Datum des Montags + const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So'] + + for (let i = 0; i < 7; i++) { + const dayElement = document.createElement('div'); + dayElement.classList.add('day'); + dayElement.textContent = days[i]; + heatmapContainer.appendChild(dayElement); + // currentDate.setDate(currentDate.getDate() + 1); + } + + // Aktuelles Datum des Montags in der neuen linken Spalte + for (let i = 0; i < 7; i++) { + for (let j = 0; j < 4; j++) { + // console.log(i * 7 + j, data[i * 7 + j], Math.max(...data)); + const opacity = data[i * 7 + j] / (Math.max(...data) <= 0 ? 1 : Math.max(...data)); // Berechne die Opazität basierend auf Aktivitätsanzahl + + if (data[i * 7 + j]) { + const dayElement = document.createElement('div'); + dayElement.classList.add('day'); + dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`; + heatmapContainer.appendChild(dayElement); + } else { + const dayElement = document.createElement('div'); + dayElement.classList.add('day'); + dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`; + heatmapContainer.appendChild(dayElement); + } + } + } +} + +function deleteHeatmap() { + const heatmapContainer = document.getElementById('heatmap'); + const dayElements = heatmapContainer.getElementsByClassName('day'); + + // Convert HTMLCollection to array and iterate to remove each element + Array.from(dayElements).forEach(element => { + element.remove(); + }); +} + +function checkCompletionAndAnimate(habitId, percentage) { + const progressBar = document.getElementById("progress-bar-" + habitId); + const habitBlock = document.getElementById("habit-" + habitId); + + if (percentage === 100) { + progressBar.style.backgroundColor = "green"; + habitBlock.classList.add("animate-bounce"); + setTimeout(function () { + habitBlock.classList.remove("animate-bounce"); + }, 2000); + } else { + progressBar.style.backgroundColor = ""; + habitBlock.classList.remove("animate-bounce"); + } +} + +function sendPostRequest(checkboxId) { + // Get the habit id from the checkbox id attribute + const habitId = checkboxId; + + // Make a POST request to /check with the habit id + axios.post('/check', {habitId: habitId}, { + headers: { + 'Content-Type': 'application/json' + } + }).then(function (response) { + // Handle the success response if needed + console.log(response.data); + + // Set the percentage of the habit. percentage received as integer + const percentage = response.data.percentage; + const progressBar = document.getElementById("progress-bar-" + habitId); + progressBar.style.width = percentage + "%"; + checkCompletionAndAnimate(habitId, percentage); + + const streak = response.data.streak; + const streakSymbol = document.getElementById("streak-" + habitId); + streakSymbol.innerText = streak > 0 ? streak.toString() + " 🔥" : ""; + + const heatmapValues = response.data.heatmap; + deleteHeatmap() + createHeatmap(heatmapValues) + + }).catch(function (error) { + // Handle the error if needed + console.error('Error:', error); + }); +} + +function deleteHabit(habitId) { + // Make a POST request to /delete with the habit id + + axios.post('/delete', {habitId: habitId}, { + headers: { + 'Content-Type': 'application/json' + } + }).then(function (response) { + // Handle the success response if needed + console.log(response.data); + + // Remove the habit from the DOM + const habitElement = document.getElementById("habit-" + habitId); + habitElement.remove(); + }).catch(function (error) { + // Handle the error if needed + console.error('Error:', error); + }); +} + +function deleteList(listId) { + // Make a POST request to /delete with the habit id + + axios.post('/delete-list', {listId: listId}, { + headers: { + 'Content-Type': 'application/json' + } + }).then(function (response) { + // Handle the success response if needed + console.log(response.data); + + // Remove the habit from the DOM + var habitElement = document.getElementById("simple-tabpanel-" + listId); + habitElement.remove(); + var habitElement = document.getElementById("tab-" + listId); + habitElement.remove(); + }).catch(function (error) { + // Handle the error if needed + console.error('Error:', error); + }); +} + +document.addEventListener('DOMContentLoaded', (event) => { + var elements = document.querySelectorAll('.task-list').values() + + // loop through the elements + for (let el of elements) { + Sortable.create(el, { + handle: '.drag-handle', + animation: 150, + onEnd: function (evt) { + var habitId = el.children[evt.newIndex].id.split('-')[1]; + var oldIndex = evt.oldIndex; + var newIndex = evt.newIndex; + + axios.post('/reorder', {habitId: habitId, oldIndex: oldIndex, newIndex: newIndex}, { + headers: { + 'Content-Type': 'application/json' + } + }).then(function (response) { + // Handle the success response if needed + }).catch(function (error) { + // Handle the error if needed + console.error('Error:', error); + }); + } + }); + } +}); + +$(function () { + $('[data-toggle="tooltip"]').tooltip() + +// Erstelle die Heatmap mit den simulierten Daten +createHeatmap(activityData); + +}) \ No newline at end of file diff --git a/templates/components/heatmap.html b/templates/components/heatmap.html index 00f159b..b3ec978 100644 --- a/templates/components/heatmap.html +++ b/templates/components/heatmap.html @@ -7,49 +7,6 @@ \ No newline at end of file diff --git a/templates/components/scripts.html b/templates/components/scripts.html deleted file mode 100644 index 5fc4b2a..0000000 --- a/templates/components/scripts.html +++ /dev/null @@ -1,125 +0,0 @@ - \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 017e75f..16df969 100644 --- a/templates/index.html +++ b/templates/index.html @@ -91,7 +91,6 @@ {% include 'components/heatmap.html' %} {% endif %} - {% if current_user.is_authenticated %} {% include 'components/habit_lists.html' %} {% endif %} @@ -104,13 +103,8 @@ {% include 'components/delete_list.html' %} {% endif %} - {% if not current_user.is_authenticated %} - - - {% endif %} - -{% include 'components/scripts.html' %} + {% endblock %} \ No newline at end of file