app.py

@@ -565,14 +565,13 @@ 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
     }
 
 

models/User.py

@@ -74,4 +74,5 @@ class User(UserMixin):
         for day in range (0, 28):
             value = get_heatmap_value(self.id, day)
             heatmap.append(value)
+        heatmap.reverse()
         return heatmap

static/script/script-index.js

@@ -1,173 +0,0 @@
-
-// 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);
-
-})

templates/components/heatmap.html

@@ -7,6 +7,49 @@
 </div>
 
 <script>
-    // Generates activity based on the Values given by the Backend
+
+    // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
     const activityData = {{ heatmap_values }};
+
+    // 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);
+                }
+            }
+        }
+
+        var left = 7 - (new Date()).getDay();
+    }
+
+    // Erstelle die Heatmap mit den simulierten Daten
+    createHeatmap(activityData);
+
 </script>

templates/components/scripts.html

@@ -0,0 +1,125 @@
+<script>
+    function checkCompletionAndAnimate(habitId, percentage) {
+        var progressBar = document.getElementById("progress-bar-" + habitId);
+        var 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 checkbox element using the provided ID
+        var checkbox = document.getElementById(checkboxId);
+        // console.log(checkbox);
+
+        // Get the habit id from the checkbox id attribute
+        var 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() + " 🔥" : "";
+        }).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
+            var 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()
+    })
+</script>

templates/index.html

@@ -91,6 +91,7 @@
     {% include 'components/heatmap.html' %}
     {% endif %}
 
+
     {% if current_user.is_authenticated %}
     {% include 'components/habit_lists.html' %}
     {% endif %}
@@ -103,8 +104,13 @@
     {% include 'components/delete_list.html' %}
     {% endif %}
 
+    {% if not current_user.is_authenticated %}
+    <script type="module" src="https://unpkg.com/@splinetool/viewer@1.0.55/build/spline-viewer.js"></script>
+    <spline-viewer loading-anim-type="spinner-small-dark" url="https://prod.spline.design/4mCpd7DzpXgN2X9q/scene.splinecode"></spline-viewer>
+    {% endif %}
+
 </div>
 
-<script src="../static/script/script-index.js"></script>
+{% include 'components/scripts.html' %}
 
 {% endblock %}