gap for spacing and heatmap but unfinished

# Conflicts:
#	templates/index.html

app.py

@@ -136,6 +136,7 @@ def index():
         title=name,
         utc_dt=datetime.datetime.now().strftime("%d.%m.%Y %H:%M %A"),
         habit_lists=habit_lists,
+        heatmap_values=current_user.get_heatmap(),
         errors={},
     )
 

models/Habit.py

@@ -80,6 +80,9 @@ class Habit:
         count = 0
         self.checked = False
         for tracking in self.get_habitTrackings():
+            if tracking.created_at.date() == datetime.today().date():
+                self.checked = True
+
             # day
             if self.unit == 0:
                 if tracking.created_at.date() == datetime.today().date():

models/User.py

@@ -1,8 +1,8 @@
 from datetime import datetime
 
 from flask_login import UserMixin
-from db.SQLiteClient import create_user, get_user, get_user_by_email, get_habits, delete_user, update_user, \
-    get_habitLists
+from db.SQLiteClient import create_user, get_user, get_user_by_email, delete_user, update_user, \
+    get_habitLists, get_heatmap_value
 
 
 class User(UserMixin):
@@ -43,3 +43,10 @@ class User(UserMixin):
             habitLists.append(habitList)
 
         return habitLists
+
+    def get_heatmap(self):
+        heatmap = []
+        for day in range(0, 28):
+            value = get_heatmap_value(self.id, day)
+            heatmap.append(value)
+        return heatmap

templates/index.html

@@ -21,9 +21,10 @@
         justify-content: center;
     }
 </style>
-<div class="row">
 
-    <div class="col-md-4 col-12 card bg-light mb-6">
+<div class="d-flex flex-column gap-5">
+    <div class="d-flex gap-3">
+        <div class="flex-fill col-5 card bg-light mb-6">
             <div class="card-body">
                 <h5 class="card-title">Heatmap</h5>
                 <div id="heatmap"></div>
@@ -31,15 +32,9 @@
         </div>
 
         <script>
-        // Funktion zur Rückgabe des Montagsdatums
-        function getMonday(date) {
-            const day = date.getDay();
-            const diff = date.getDate() - day + (day === 0 ? -6 : 1); // Anpassung für Sonntag
-            return new Date(date.setDate(diff));
-        }
 
             // Simulierte Aktivitätsdaten (ersetze dies durch deine echten Daten)
-        const activityData = [5, 3, 10, 5, 24, 2, 10, 47, 32, 45, 9, 5, 11, 39, 24, 2, 10, 47, 32, 45];
+            const activityData = {{heatmap_values}};
 
             // Funktion zum Erstellen der Heatmap
             function createHeatmap(data) {
@@ -58,9 +53,9 @@
 
                 // Aktuelles Datum des Montags in der neuen linken Spalte
                 for (let i = 0; i < 7; i++) {
-                for (let j = 0; j < 7; j++) {
+                    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); // Berechne die Opazität basierend auf Aktivitätsanzahl
+                        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');
@@ -69,12 +64,14 @@
                             heatmapContainer.appendChild(dayElement);
                         } else {
                             const dayElement = document.createElement('div');
-                        // dayElement.classList.add('day');
-                        // dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
+                            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
@@ -83,7 +80,7 @@
         </script>
 
 
-    <div class="col-md-7 col-12 card gap-3 bg-light p-6 offset-md-1 mb-6">
+        <div class="flex-fill col-7 card bg-light p-6 mb-6">
             <div class="row mb-3 ">
                 <h2 class="col-9">Gewohnheiten</h2>
                 <a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
@@ -113,8 +110,8 @@
                         {{ habit.name }}
                     </div>
 
-                <div class="col-5 text-black text-opacity-50" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-
+                    <div class="col-5 text-black text-opacity-50"
+                         style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                         {{ habit.note }}
 
                     </div>
@@ -244,6 +241,7 @@
             }
         </script>
     </div>
+</div>
 
 <script>
     document.addEventListener('DOMContentLoaded', (event) => {