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