Merge remote-tracking branch 'origin/master'

# Conflicts:
#	templates/components/habit_lists.html

app.py

@@ -131,7 +131,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."
@@ -152,7 +152,8 @@ def index():
         utc_dt=date,
         habit_lists=habit_lists,
         heatmap_values=heatmap_values,
-        errors={},
+        day=day,
+        errors={}
     )
 
 
@@ -563,14 +564,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 = [100]
@@ -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

@@ -92,7 +92,7 @@
                         {% for user in habit_list.get_users() %}
                         {% if current_user.id != user.id %}
                         <img class="avatar" src="/{{user.profile_image}}" data-toggle="tooltip" data-placement="top"
-                             title="{{user.name}}" alt=""/>
+                             title="{{user.name}}"/>
                         {% endif %}
                         {% endfor %}
                     </div>
@@ -101,11 +101,10 @@
 
                 <!-- Knopf für das Hinzufügen einer Person zur gemeinsamen Liste -->
                 <div class="col">
-                    <a href="/users?habit_list={{habit_list.id}}" style="min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center;"
+                    <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-person-fill-add" style="font-size: 24px;"></i>
                     </a>
-
                 </div>
                 {% else %}
                 <div class="col"></div>
@@ -130,9 +129,9 @@
 
                     <!-- Checkbox -->
                     <div class="col-auto">
-                        <label for="{{ habit.id }}"></label>
                         <input {% if habit.checked %} checked {% endif %} type="checkbox" class="task-checkbox"
-                               id="{{ habit.id }}" onclick="sendPostRequest('{{ habit.id }}')">
+                               id="{{ habit.id }}"
+                               onclick="sendPostRequest('{{ habit.id }}')">
                     </div>
 
                     <!-- Name -->
@@ -188,13 +187,13 @@
 </div>
 
 <script>
-            let selectedHabitId = null;
+            var selectedHabitId = null;
 
             function setSelectedHabitId(habitId) {
                 selectedHabitId = habitId;
             }
 
-            let selectedListId = null;
+            var selectedListId = null;
 
             function setSelectedListId(listId) {
                 selectedlistId = listId;

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>