heatmap current day marked

app.py

@@ -130,7 +130,7 @@ def index():
     if current_user.is_authenticated:
         habit_lists = current_user.get_habitLists()
         name = "Hallo " + current_user.name
-        heatmap_values = current_user.get_heatmap()
+        heatmap_values, day = current_user.get_heatmap()
     else:
         habit_lists = []
         name = "Bitte melde dich an."
@@ -151,7 +151,8 @@ def index():
         utc_dt=date,
         habit_lists=habit_lists,
         heatmap_values=heatmap_values,
-        errors={},
+        day=day,
+        errors={}
     )
 
 
@@ -565,14 +566,15 @@ def check_habit():
         habit.reset_statistics()
 
     habit.load_statistics()
-    heatmap_values = current_user.get_heatmap()
+    heatmap_values, day = current_user.get_heatmap()
 
     return {
         "habitId": habit_id,
         "unchecked": not delete_tracking,
         "percentage": habit.percentage,
         "streak": habit.streak,
-        "heatmap": heatmap_values
+        "heatmap": heatmap_values,
+        "day": day
     }
 
 

models/User.py

@@ -62,7 +62,7 @@ class User(UserMixin):
 
 
     # Returns all heatmap-values from the last 28 days
-    def get_heatmap(self) -> list:
+    def get_heatmap(self) -> tuple:
         # get current day of week as integer. monday is 0 and sunday is 6
         weekday = datetime.today().weekday()
         heatmap = []
@@ -75,4 +75,5 @@ class User(UserMixin):
             value = get_heatmap_value(self.id, day)
             heatmap.append(value)
         heatmap.reverse()
-        return heatmap
+        day = 27-weekday
+        return heatmap, day

static/script/script-index.js

@@ -1,6 +1,6 @@
 
 // Funktion zum Erstellen der Heatmap
-function createHeatmap(data) {
+function createHeatmap(data, day) {
     const heatmapContainer = document.getElementById('heatmap');
 
     const days = ['Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa', 'So']
@@ -22,11 +22,19 @@ function createHeatmap(data) {
                 const dayElement = document.createElement('div');
                 dayElement.classList.add('day');
                 dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
+                if (day == i * 7 + j){
+                    dayElement.style.borderColor = `rgba(255, 0, 0)`;
+                    dayElement.style.borderWidth = "2px";
+                }
                 heatmapContainer.appendChild(dayElement);
             } else {
                 const dayElement = document.createElement('div');
                 dayElement.classList.add('day');
                 dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
+                if (day == i * 7 + j){
+                    dayElement.style.borderColor = `rgba(255, 0, 0)`;
+                    dayElement.style.borderWidth = "2px";
+                }
                 heatmapContainer.appendChild(dayElement);
             }
         }
@@ -84,7 +92,7 @@ function sendPostRequest(checkboxId) {
 
         const heatmapValues = response.data.heatmap;
         deleteHeatmap()
-        createHeatmap(heatmapValues)
+        createHeatmap(heatmapValues, day)
 
     }).catch(function (error) {
         // Handle the error if needed
@@ -165,7 +173,8 @@ document.addEventListener('DOMContentLoaded', (event) => {
 $(function () {
     $('[data-toggle="tooltip"]').tooltip()
 
-// Erstelle die Heatmap mit den simulierten Daten
-createHeatmap(activityData);
-
 })
+console.log(activityData, day)
+// Erstelle die Heatmap mit den simulierten Daten
+createHeatmap(activityData, day);
+

templates/components/habit_lists.html

@@ -104,7 +104,7 @@
                     <a href="/users?habit_list={{habit_list.id}}" style="width: 40px; height: 40px; min-height: 3em;"
                        data-toggle="tooltip" data-placement="top" title="Benutzer einladen">
 
-                        <i class="bi bi-plus-circle"></i>
+                        <i class="bi bi-person-fill-add"></i>
 
                     </a>
                 </div>

templates/components/heatmap.html

@@ -9,4 +9,5 @@
 <script>
     // Generates activity based on the Values given by the Backend
     const activityData = {{ heatmap_values }};
+    const day = {{ day }};
 </script>