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

- Deleted the shitty spline model

app.py

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

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

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);
+
+})

templates/components/heatmap.html

@@ -7,49 +7,6 @@
 </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

@@ -1,125 +0,0 @@
-<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,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 %}
-    <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>
 
-{% include 'components/scripts.html' %}
+<script src="../static/script/script-index.js"></script>
 
 {% endblock %}