From 095c687bb818776da7ce703fec3e29e1d37ad348 Mon Sep 17 00:00:00 2001
From: nikolaswollenberg <nikolas.wollenberg@gmail.com>
Date: Tue, 23 Jan 2024 11:17:24 +0100
Subject: [PATCH] Heatmap tasks udn task abruf

---
 templates/habit.html              |  25 ++++--
 templates/index.html              | 143 +++++++++++++++++++-----------
 templates/layouts/indextest2.html |  63 +++----------
 templates/layouts/main.html       |   3 +
 4 files changed, 126 insertions(+), 108 deletions(-)

diff --git a/templates/habit.html b/templates/habit.html
index 280f06c..71b81ba 100644
--- a/templates/habit.html
+++ b/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>
-            <select class="form-select" id="unit" name="unit">
+            <label for="unit" class="form-label">Im Zeitraum</label>
+            <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>
 
diff --git a/templates/index.html b/templates/index.html
index ef4604e..75b9c47 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -5,61 +5,102 @@
 <h3>{{ utc_dt }}</h3>
 
 
-<div class="heatmap" id="heatmap"></div>
-
-<script>
-    // 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];
-
-    // Funktion zum Erstellen der Heatmap
-    function createHeatmap(data) {
-        const heatmapContainer = document.getElementById('heatmap');
-
-        for (let i = 0; i < data.length; i++) {
-            const opacity = data[i] / 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);
-        }
+<style>
+    #heatmap {
+        display: grid;
+        grid-template-columns: repeat(7, 0fr); /* 7 Tage in einer Woche */
+        gap: 5px;
     }
 
-    // Erstelle die Heatmap mit den simulierten Daten
-    createHeatmap(activityData);
+    .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>
 
-
-
-
-
-
-
-</script>
 <div class="row">
-    <h2 class="col-10">Task List</h2>
-    <a class="col-2 btn btn-primary" role="button" href="/habit">
-        Task erstellen
-    </a>
+
+    <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 = [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');
+
+            // Aktuelles Datum des Montags
+            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">
+                Task erstellen
+            </a>
+        </div>
+
+        <ul class="task-list row">
+            {% for habit in habits %}
+            <li class="row col-md-4">
+                <div class="col-auto">
+                    <input type="checkbox" class="task-checkbox" id="{{habit.id}}">
+                </div>
+
+                <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                    {{ habit.name }}
+                </div>
+
+            </li>
+
+            <div class="col-md-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
+                {{ habit.note }}
+            </div>
+
+            {% endfor %}
+        </ul>
+    </div>
 </div>
 
-<ul class="task-list row">
-    {% for habit in habits %}
-    <li class="row col-md-4">
-        <div class="col-auto">
-            <input type="checkbox" class="task-checkbox">
-        </div>
-
-        <div class="col" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-            {{ habit.name }} hhhbhghbhjndjksbeujsdkfheuwaihgkjfgfjnsidkgjnkdghujds
-        </div>
-
-    </li>
-
-    <div class="col-md-8" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis">
-        {{ habit.note }}
-    </div>
-
-    {% endfor %}
-</ul>
-
-
 {% endblock %}
\ No newline at end of file
diff --git a/templates/layouts/indextest2.html b/templates/layouts/indextest2.html
index 03cbc40..ef4604e 100644
--- a/templates/layouts/indextest2.html
+++ b/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>
-    #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>
+<div class="heatmap" 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
-        const currentDate = new Date();
-        const mondayDate = getMonday(currentDate);
-
-        for (let i = 0; i < 7; i++) {
+        for (let i = 0; i < data.length; i++) {
+            const opacity = data[i] / Math.max(...data); // Berechne die Opazität basierend auf Aktivitätsanzahl
             const dayElement = document.createElement('div');
             dayElement.classList.add('day');
-            dayElement.textContent = currentDate.toLocaleDateString('de-DE', { weekday: 'short' });
+            dayElement.style.backgroundColor = `rgba(0, 255, 0, ${opacity})`;
             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">
diff --git a/templates/layouts/main.html b/templates/layouts/main.html
index b36d401..26465fa 100644
--- a/templates/layouts/main.html
+++ b/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">