card Tabs

(cherry picked from commit 5c0a2b588644b4d8ad6148c2582a551d770f4261)

templates/index.html

@@ -1,15 +1,17 @@
 {% extends 'layouts/main.html' %}
 
 {% block content %}
-    <h1>{{ title }}</h1>
-    <h3>{{ utc_dt }}</h3>
+<h1>{{ title }}</h1>
+<h3>{{ utc_dt }}</h3>
 
 
-    <style>
+<style>
     #heatmap {
         display: grid;
         grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
         gap: 5px;
+        width: 100%;
+        table-layout: fixed;
     }
 
     .day {
@@ -19,25 +21,23 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        table-layout: fixed;
     }
-    </style>
+</style>
 
-    <div class="row">
-
-        <div class="col-md-5 col-12">
+<div class="d-flex flex-column gap-5">
+    <div class="d-flex gap-3">
+        <div class="flex-md-fill col-md-4 col-12 card bg-light mb-6">
+            <div class="card-body">
+                <h5 class="card-title">Heatmap</h5>
                 <div id="heatmap"></div>
             </div>
+        </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) {
@@ -56,9 +56,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');
@@ -67,31 +67,60 @@
                             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
             createHeatmap(activityData);
 
-
         </script>
 
-        <div class="col-md-7 col-12">
+
+        <div class="flex-fill col-md-8 col-12 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" role="button" href="/habit-list">Neue Liste erstellen</a>
+                <a class="col-3 btn btn-primary p" role="button" href="/habit-list">Neue Liste erstellen</a>
             </div>
 
+
+            <div class="card-header">
+                <ul class="nav nav-tabs card-header-tabs">
+
+                    {% for habit_list in habit_lists %}
+                    <li class="nav-item">
+                        {% if habit_list == habit_lists[0] %}
+                        <a class="nav-link active" aria-current="true">{{ habit_list.name }}</a>
+                        {% else %}
+                        <a class="nav-link">{{ habit_list.name }}</a>
+                        {% endif %}
+
+                    </li>
+                    {% endfor %}
+
+                </ul>
+            </div>
+
+            <div class="card-body text-center">
+                <h5 class="card-title">Special title treatment</h5>
+                <p class="card-text">
+                    With supporting text below as a natural lead-in to additional content.
+                </p>
+            </div>
+
+
             {% for habit_list in habit_lists %}
 
             <div class="row mb-3">
                 <h2 class="col-9">{{ habit_list.name }}</h2>
-                    <a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">Gewohnheit erstellen</a>
+                <a class="col-3 btn btn-primary" role="button" href="/habit?list={{ habit_list.id }}">Gewohnheit
+                    erstellen</a>
             </div>
 
             <ul class="task-list row">
@@ -110,12 +139,16 @@
                         {{ habit.name }}
                     </div>
 
-                            <div class="col-6" 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>
 
                     <div class="col-2" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
                         {% if habit %}
+
+                        {% else %}
                         5 🔥
                         {% endif %}
 
@@ -177,14 +210,11 @@
                 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);
-                }
-
-                if (percentage >= 100) {
-                    progressBar.style.backgroundColor = "green";
                 } else {
                     progressBar.style.backgroundColor = "";
                     habitBlock.classList.remove("animate-bounce");
@@ -212,9 +242,7 @@
                     var percentage = response.data.percentage;
                     var progressBar = document.getElementById("progress-bar-" + habitId);
                     progressBar.style.width = percentage + "%";
-                    if (response.data.unchecked) {
                     checkCompletionAndAnimate(habitId, percentage);
-                    }
                 }).catch(function (error) {
                     // Handle the error if needed
                     console.error('Error:', error);
@@ -242,8 +270,9 @@
             }
         </script>
     </div>
+</div>
 
-    <script>
+<script>
     document.addEventListener('DOMContentLoaded', (event) => {
         var el = document.querySelector('.task-list');
         Sortable.create(el, {
@@ -267,5 +296,7 @@
             }
         });
     });
-    </script>
+</script>
+
+
 {% endblock %}