Erste funktionierende Version

app.py

@@ -24,14 +24,25 @@ def index():
 
 @app.route('/habits', methods=['GET'])
 def get_habits():
-    habits_data = db.all()
+    raw_habits = db.all()
-    # Add completion status for the last 30 days
+    formatted_habits = []
     last_30_days = get_last_30_days()
-    for habit in habits_data:
+    
-        habit['completion_history'] = {}
+    for habit_doc in raw_habits:
+        current_habit_data = {
+            'id': habit_doc.doc_id,
+            'name': habit_doc.get('name'),
+            'completed_dates': habit_doc.get('completed_dates', [])
+        }
+        
+        completion_history = {}
         for date_str in last_30_days:
-            habit['completion_history'][date_str] = date_str in habit.get('completed_dates', [])
+            completion_history[date_str] = date_str in current_habit_data['completed_dates']
-    return jsonify(habits_data)
+        
+        current_habit_data['completion_history'] = completion_history
+        formatted_habits.append(current_habit_data)
+        
+    return jsonify(formatted_habits)
 
 @app.route('/habits', methods=['POST'])
 def add_habit():

habits.json

@@ -1 +1 @@
-{"_default": {"1": {"name": "Zocken", "completed_dates": []}, "2": {"name": "Gehen", "completed_dates": []}}}
+{"_default": {"1": {"name": "Zocken Mega", "completed_dates": ["2025-07-16", "2025-07-14", "2025-08-01", "2025-08-09", "2025-08-17", "2025-07-25", "2025-07-18"]}}}

static/css/style.css

@@ -81,12 +81,29 @@ h1 {
     color: #e0e0e0;
     font-size: 1.5em;
     cursor: pointer;
+    margin-left: 5px;
 }
 
 .habit-actions button:hover {
     color: #666;
 }
 
+.habit-actions button.completed-today {
+    color: #4CAF50;
+}
+
+.habit-actions button.not-completed-today {
+    color: #888;
+}
+
+.habit-actions button.completed-today:hover {
+    color: #45a049;
+}
+
+.habit-actions button.not-completed-today:hover {
+    color: #4CAF50;
+}
+
 .date-grid {
     display: grid;
     grid-template-columns: repeat(30, 1fr); /* Adjust based on your date range */

static/js/script.js

@@ -5,8 +5,11 @@ const dateModal = document.getElementById('dateModal');
 const modalHabitName = document.getElementById('modalHabitName');
 const modalDateGrid = document.getElementById('modalDateGrid');
 const modalCompleteTodayBtn = document.getElementById('modalCompleteTodayBtn');
+const modalEditBtn = document.getElementById('modalEditBtn'); // Neu hinzugefügt
+const modalDeleteBtn = document.getElementById('modalDeleteBtn'); // Neu hinzugefügt
 
-let currentHabitId = null;
+
+let currentHabitId = null; // Stellt sicher, dass diese globale Variable korrekt ist
 
 function getCurrentDate() {
     const today = new Date();
@@ -58,10 +61,21 @@ function renderHabits(habits) {
 
         const habitActions = document.createElement('div');
         habitActions.className = 'habit-actions';
-        const openModalButton = document.createElement('button');
+        
-        openModalButton.innerHTML = '✔'; // Checkmark symbol
+        // Haken-Button für heute abhaken/rückgängig machen
-        openModalButton.onclick = () => openHabitModal(habit.id, habit.name, habit.completed_dates);
+        const todayToggleButton = document.createElement('button');
-        habitActions.appendChild(openModalButton);
+        const today = getCurrentDate();
+        const isCompletedToday = habit.completed_dates && habit.completed_dates.includes(today);
+        todayToggleButton.innerHTML = isCompletedToday ? '✓' : '✓'; // Checkmark symbol
+        todayToggleButton.className = isCompletedToday ? 'completed-today' : 'not-completed-today';
+        todayToggleButton.onclick = () => toggleTodayCompletion(habit.id, today, todayToggleButton);
+        habitActions.appendChild(todayToggleButton);
+        
+        // Drei-Punkte-Menü für erweiterte Optionen
+        const menuButton = document.createElement('button');
+        menuButton.innerHTML = '⋮'; // Vertical ellipsis (drei Punkte)
+        menuButton.onclick = () => openHabitModal(habit.id, habit.name, habit.completed_dates);
+        habitActions.appendChild(menuButton);
         habitHeader.appendChild(habitActions);
         habitItem.appendChild(habitHeader);
 
@@ -108,9 +122,14 @@ async function addHabit() {
 }
 
 async function openHabitModal(habitId, habitName, completedDates) {
-    currentHabitId = habitId;
+    currentHabitId = habitId; // Hier wird die globale Variable gesetzt
     modalHabitName.textContent = habitName;
-    modalCompleteTodayBtn.dataset.habitId = habitId; // Store habit ID for button
+    
+    // Setzen der habitId auf den Buttons im Modal
+    modalCompleteTodayBtn.dataset.habitId = habitId;
+    modalEditBtn.dataset.habitId = habitId; // Wichtig
+    modalDeleteBtn.dataset.habitId = habitId; // Wichtig
+
 
     modalDateGrid.innerHTML = '';
     const today = getCurrentDate();
@@ -132,6 +151,7 @@ async function openHabitModal(habitId, habitName, completedDates) {
             dateCell.classList.add('today');
         }
         dateCell.dataset.date = dateStr;
+        // habitId wird hier korrekt an toggleCompletionForDate übergeben
         dateCell.onclick = (event) => toggleCompletionForDate(event, habitId, dateStr);
         modalDateGrid.appendChild(dateCell);
     }
@@ -141,7 +161,7 @@ async function openHabitModal(habitId, habitName, completedDates) {
 
 function closeModal() {
     dateModal.style.display = 'none';
-    currentHabitId = null;
+    currentHabitId = null; // Zurücksetzen, wenn das Modal geschlossen wird
     fetchHabits(); // Refresh habits after closing modal
 }
 
@@ -160,8 +180,8 @@ async function toggleCompletionForDate(event, habitId, date) {
         data = await response.json();
         if (response.ok) {
             cell.classList.remove('completed');
-            // Update the completion_history in the rendered habits
+            // Hier sollte eventuell auch die completed_dates in der Hauptansicht aktualisiert werden
-            // (You might need to re-fetch or update the local habit data for the main view)
+            // Aber der fetchHabits() beim Schließen des Modals kümmert sich darum
         }
     } else {
         // Mark as completed
@@ -173,13 +193,19 @@ async function toggleCompletionForDate(event, habitId, date) {
         data = await response.json();
         if (response.ok) {
             cell.classList.add('completed');
-            // Update the completion_history
+            // Hier sollte eventuell auch die completed_dates in der Hauptansicht aktualisiert werden
         }
     }
 }
 
 
 async function completeHabitForDate(event, habitId, date) {
+    // Der habitId kommt jetzt direkt vom dataset des Buttons oder der Funktion, die ihn aufruft
+    // Sicherstellen, dass habitId gültig ist
+    if (!habitId) {
+        console.error('Habit ID is undefined for completion.');
+        return;
+    }
     try {
         const response = await fetch(`/habits/${habitId}/complete`, {
             method: 'POST',
@@ -195,8 +221,6 @@ async function completeHabitForDate(event, habitId, date) {
                     cell.classList.add('completed');
                 }
             });
-            // Optionally, disable the "Today erledigen" button if already completed
-            // modalCompleteTodayBtn.disabled = true;
         } else {
             console.error('Failed to complete habit:', data.error);
         }
@@ -206,10 +230,15 @@ async function completeHabitForDate(event, habitId, date) {
 }
 
 async function editHabitName() {
+    // Sicherstellen, dass currentHabitId gesetzt ist
+    if (!currentHabitId) {
+        console.error('No habit selected for editing.');
+        return;
+    }
     const newName = prompt("Neuen Namen für die Gewohnheit eingeben:", modalHabitName.textContent);
     if (newName && newName.trim() !== "") {
         try {
-            const response = await fetch(`/habits/${currentHabitId}`, {
+            const response = await fetch(`/habits/${currentHabitId}`, { // Verwendet currentHabitId
                 method: 'PUT',
                 headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ name: newName.trim() })
@@ -228,9 +257,14 @@ async function editHabitName() {
 }
 
 async function deleteHabitFromModal() {
+    // Sicherstellen, dass currentHabitId gesetzt ist
+    if (!currentHabitId) {
+        console.error('No habit selected for deletion.');
+        return;
+    }
     if (confirm("Bist du sicher, dass du diese Gewohnheit löschen möchtest?")) {
         try {
-            const response = await fetch(`/habits/${currentHabitId}`, {
+            const response = await fetch(`/habits/${currentHabitId}`, { // Verwendet currentHabitId
                 method: 'DELETE'
             });
             const data = await response.json();
@@ -244,4 +278,45 @@ async function deleteHabitFromModal() {
             console.error('Error deleting habit:', error);
         }
     }
+}
+
+async function toggleTodayCompletion(habitId, date, buttonElement) {
+    try {
+        const isCurrentlyCompleted = buttonElement.classList.contains('completed-today');
+        let response;
+        
+        if (isCurrentlyCompleted) {
+            // Mark as uncompleted
+            response = await fetch(`/habits/${habitId}/uncomplete`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ date: date })
+            });
+        } else {
+            // Mark as completed
+            response = await fetch(`/habits/${habitId}/complete`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ date: date })
+            });
+        }
+        
+        const data = await response.json();
+        if (response.ok) {
+            // Update button appearance
+            if (isCurrentlyCompleted) {
+                buttonElement.classList.remove('completed-today');
+                buttonElement.classList.add('not-completed-today');
+            } else {
+                buttonElement.classList.remove('not-completed-today');
+                buttonElement.classList.add('completed-today');
+            }
+            // Refresh the date grid to show updated completion status
+            fetchHabits();
+        } else {
+            console.error('Failed to toggle habit completion:', data.error);
+        }
+    } catch (error) {
+        console.error('Error toggling habit completion:', error);
+    }
 }

templates/index.html

@@ -23,7 +23,7 @@
             <h2 id="modalHabitName"></h2>
             <div id="modalDateGrid" class="date-grid-modal"></div>
             <div class="modal-actions">
-                <button id="modalCompleteTodayBtn" onclick="completeHabitForDate(event, this.dataset.habitId, getCurrentDate())">Heute erledigen</button>
+                <button id="modalCompleteTodayBtn" onclick="completeHabitForDate(event, currentHabitId, getCurrentDate())">Heute erledigen</button>
                 <button id="modalEditBtn" onclick="editHabitName()">Bearbeiten</button>
                 <button id="modalDeleteBtn" onclick="deleteHabitFromModal()">Löschen</button>
             </div>