Erste funktionierende Version

2025-07-16 18:43:11 +02:00
parent 08ed4906cc
commit c78e825f2f
5 changed files with 126 additions and 23 deletions
--- a/app.py
+++ b/app.py
@@ -24,14 +24,25 @@ def index():

@app.route('/habits', methods=['GET'])
 def get_habits():
-    habits_data = db.all()
-    # Add completion status for the last 30 days
+    raw_habits = db.all()
+    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', [])
-    return jsonify(habits_data)
+            completion_history[date_str] = date_str in current_habit_data['completed_dates']
+        
+        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():
--- a/habits.json
+++ b/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"]}}}
--- a/static/css/style.css
+++ b/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 */
--- a/static/js/script.js
+++ b/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 = '&#x2714;'; // Checkmark symbol
-        openModalButton.onclick = () => openHabitModal(habit.id, habit.name, habit.completed_dates);
-        habitActions.appendChild(openModalButton);
+        
+        // Haken-Button für heute abhaken/rückgängig machen
+        const todayToggleButton = document.createElement('button');
+        const today = getCurrentDate();
+        const isCompletedToday = habit.completed_dates && habit.completed_dates.includes(today);
+        todayToggleButton.innerHTML = isCompletedToday ? '&#x2713;' : '&#x2713;'; // 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 = '&#x22EE;'; // 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
-            // (You might need to re-fetch or update the local habit data for the main view)
+            // Hier sollte eventuell auch die completed_dates in der Hauptansicht aktualisiert werden
+            // 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();
@@ -245,3 +279,44 @@ async function deleteHabitFromModal() {
        }
    }
 }
+
+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);
+    }
+}
--- a/templates/index.html
+++ b/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>