Heatmap tasks udn task abruf

templates/habit.html

@@ -2,31 +2,44 @@
 
 {% block content %}
 
+<h1 class="mt-5">Habit erstellen📋</h1>
 
-<form>
+<form action="/habit" method="POST">
     <div class="mb-3">
         <label for="name" class="form-label">Name der Gewohnheit</label>
-        <input type="text" class="form-control" id="name" name="name">
+        <input type="text" class="form-control {% if errors.get('name') %} is-invalid {% endif %}" id="name" name="name">
+        <div class="invalid-feedback">
+            {{ errors.get('name', '') }}
+        </div>
     </div>
     <div class="mb-3">
         <label for="note" class="form-label">Beschreibung</label>
-        <input type="text" class="form-control" id="note" name="note">
+        <input type="text" class="form-control {% if errors.get('note') %} is-invalid {% endif %}" id="note" name="note">
+        <div class="invalid-feedback">
+            {{ errors.get('note', '') }}
+        </div>
     </div>
 
     <div class="row">
         <div class="mb-3 col-2">
             <label for="times" class="form-label">Häufigkeit</label>
-            <input type="number" min="1" class="form-control" id="times" name="times">
+            <input type="number" min="1" class="form-control {% if errors.get('times') %} is-invalid {% endif %}" id="times" name="times">
+            <div class="invalid-feedback">
+                {{ errors.get('times', '') }}
+            </div>
         </div>
         <div class="mb-3 col-10">
-            <label for="note" class="form-label">Im Zeitraum</label>
+            <label for="unit" class="form-label">Im Zeitraum</label>
-            <select class="form-select" id="unit" name="unit">
+            <select class="form-select {% if errors.get('unit') %} is-invalid {% endif %}" id="unit" name="unit">
                 <option selected value="Woche">Woche</option>
                 <option value="Tag">Tag</option>
                 <option value="Monat">Monat</option>
                 <option value="Jahr">Jahr</option>
 
             </select>
+            <div class="invalid-feedback">
+                {{ errors.get('unit', '') }}
+            </div>
         </div>
     </div>
 

templates/index.html

@@ -5,35 +5,75 @@
 <h3>{{ utc_dt }}</h3>
 
 
-<div class="heatmap" id="heatmap"></div>
+<style>
+    #heatmap {
+        display: grid;
+        grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
+        gap: 5px;
+    }
 
+    .day {
+        width: 50px; /* Ändere die Breite nach Bedarf */
+        height: 50px; /* Ändere die Höhe nach Bedarf */
+        border: 1px solid #ccc;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+</style>
+
+<div class="row">
+
+    <div class="col-md-4 col-12" id="heatmap"></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 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1, 9, 5, 36, 75, 8, 9, 1, 0, 23, 0, 0, 0, 64, 0, 0, 64, 0, 0, 19, 84];
+        const activityData = [9, 5, 4, 3, 2, 1, 9, 5, 36, 75, 8, 9, 1, 0, 23, 0, 0, 0, 64, 0, 0, 64, 0, 0, 19, 84];
 
         // Funktion zum Erstellen der Heatmap
         function createHeatmap(data) {
             const heatmapContainer = document.getElementById('heatmap');
 
-        for (let i = 0; i < data.length; i++) {
+            // Aktuelles Datum des Montags
-            const opacity = data[i] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
+            const currentDate = new Date();
+            const mondayDate = getMonday(currentDate);
+
+            for (let i = 0; i < 7; i++) {
+                const dayElement = document.createElement('div');
+                dayElement.classList.add('day');
+                dayElement.textContent = currentDate.toLocaleDateString('de-DE', {weekday: 'short'});
+                heatmapContainer.appendChild(dayElement);
+                currentDate.setDate(currentDate.getDate() + 1);
+            }
+
+            // Aktuelles Datum des Montags in der neuen linken Spalte
+            for (let i = 0; i < 7; i++) {
+                const dayElement = document.createElement('div');
+                dayElement.classList.add('day');
+                //dayElement.textContent = mondayDate.toLocaleDateString('de-DE');
+                heatmapContainer.appendChild(dayElement);
+
+                for (let j = 0; j < 4; j++) {
+                    const opacity = data[i * 7 + j] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
                     const dayElement = document.createElement('div');
                     dayElement.classList.add('day');
                     dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
                     heatmapContainer.appendChild(dayElement);
                 }
             }
+        }
 
         // Erstelle die Heatmap mit den simulierten Daten
         createHeatmap(activityData);
-
-
-
-
-
-
-
     </script>
+
+    <div class="col-md-8 col-12">
         <div class="row">
             <h2 class="col-10">Task List</h2>
             <a class="col-2 btn btn-primary" role="button" href="/habit">
@@ -45,11 +85,11 @@
             {% for habit in habits %}
             <li class="row col-md-4">
                 <div class="col-auto">
-            <input type="checkbox" class="task-checkbox">
+                    <input type="checkbox" class="task-checkbox" id="{{habit.id}}">
                 </div>
 
                 <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-            {{ habit.name }} hhhbhghbhjndjksbeujsdkfheuwaihgkjfgfjnsidkgjnkdghujds
+                    {{ habit.name }}
                 </div>
 
             </li>
@@ -60,6 +100,7 @@
 
             {% endfor %}
         </ul>
-
+    </div>
+</div>
 
 {% endblock %}

templates/layouts/indextest2.html

@@ -1,37 +1,13 @@
-2{% extends 'layouts/main.html' %}
+{% extends 'layouts/main.html' %}
 
 {% block content %}
 <h1>{{ title }}</h1>
 <h3>{{ utc_dt }}</h3>
 
 
-<style>
+<div class="heatmap" id="heatmap"></div>
-    #heatmap {
-        display: grid;
-        grid-template-columns: repeat(7, 1fr); /* 7 Tage in einer Woche */
-        gap: 5px;
-    }
-
-    .day {
-        width: 50px; /* Ändere die Breite nach Bedarf */
-        height: 50px; /* Ändere die Höhe nach Bedarf */
-        border: 1px solid #ccc;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-    }
-</style>
-
-    <div id="heatmap"></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 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 5, 4, 3, 2, 1, 9, 5, 36, 75, 8, 9, 1, 0, 23, 0, 0, 0, 64, 0, 0, 64, 0, 0, 19, 84];
 
@@ -39,40 +15,25 @@
     function createHeatmap(data) {
         const heatmapContainer = document.getElementById('heatmap');
 
-        // Aktuelles Datum des Montags
+        for (let i = 0; i < data.length; i++) {
-        const currentDate = new Date();
+            const opacity = data[i] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
-        const mondayDate = getMonday(currentDate);
-
-        for (let i = 0; i < 7; i++) {
-            const dayElement = document.createElement('div');
-            dayElement.classList.add('day');
-            dayElement.textContent = currentDate.toLocaleDateString('de-DE', { weekday: 'short' });
-            heatmapContainer.appendChild(dayElement);
-            currentDate.setDate(currentDate.getDate() + 1);
-        }
-
-        // Aktuelles Datum des Montags in der neuen linken Spalte
-        for (let i = 0; i < 5; i++) {
-            const dayElement = document.createElement('div');
-            dayElement.classList.add('day');
-            dayElement.textContent = mondayDate.toLocaleDateString('de-DE');
-            heatmapContainer.appendChild(dayElement);
-
-            for (let j = 0; j < 7; j++) {
-                const opacity = data[i * 7 + j] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
             const dayElement = document.createElement('div');
             dayElement.classList.add('day');
             dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
             heatmapContainer.appendChild(dayElement);
         }
     }
-    }
 
     // Erstelle die Heatmap mit den simulierten Daten
     createHeatmap(activityData);
+
+
+
+
+
+
+
 </script>
-
-
 <div class="row">
     <h2 class="col-10">Task List</h2>
     <a class="col-2 btn btn-primary" role="button" href="/habit">

templates/layouts/main.html

@@ -8,6 +8,9 @@
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="/static/main.css">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+
+    <!-- Axios Libary-->
+    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 </head>
 <body style="background-color: White">