Farben der Habits wälbarmachen

static/js/script.js

@@ -12,6 +12,7 @@ const modalDeleteBtn = document.getElementById('modalDeleteBtn'); // Neu hinzuge
 let currentHabitId = null; // Stellt sicher, dass diese globale Variable korrekt ist
 let currentModalDate = new Date(); // Aktueller Monat im Modal
 let currentHabitCompletedDates = []; // Completed dates für das aktuelle Habit
+let currentHabitColor = '#4CAF50'; // Current habit color
 
 function getCurrentDate() {
     const today = new Date();
@@ -38,23 +39,23 @@ function calculateStreak(completedDates) {
     if (!completedDates || completedDates.length === 0) {
         return 0;
     }
-    
+
     // Sort dates in descending order (newest first)
     const sortedDates = completedDates.sort((a, b) => new Date(b) - new Date(a));
     const today = getCurrentDate();
-    
+
     let streak = 0;
     let currentDate = new Date();
-    
+
     // Check if today is completed, if not, start from yesterday
     if (!sortedDates.includes(today)) {
         currentDate.setDate(currentDate.getDate() - 1);
     }
-    
+
     // Count consecutive days backwards from today (or yesterday)
     while (true) {
         const dateStr = `${currentDate.getFullYear()}-${String(currentDate.getMonth() + 1).padStart(2, '0')}-${String(currentDate.getDate()).padStart(2, '0')}`;
-        
+
         if (sortedDates.includes(dateStr)) {
             streak++;
             currentDate.setDate(currentDate.getDate() - 1);
@@ -62,7 +63,7 @@ function calculateStreak(completedDates) {
             break;
         }
     }
-    
+
     return streak;
 }
 
@@ -85,6 +86,10 @@ function renderHabits(habits) {
         habitItem.className = 'habit-item';
         habitItem.dataset.id = habit.id; // Store habit ID
 
+        // Apply custom color to the habit item
+        const habitColor = habit.color || '#4CAF50';
+        habitItem.style.setProperty('--habit-color', habitColor);
+
         const habitHeader = document.createElement('div');
         habitHeader.className = 'habit-header';
 
@@ -108,7 +113,7 @@ function renderHabits(habits) {
         // 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);
+        menuButton.onclick = () => openHabitModal(habit.id, habit.name, habit.completed_dates, habitColor);
         habitActions.appendChild(menuButton);
         habitHeader.appendChild(habitActions);
         habitItem.appendChild(habitHeader);
@@ -130,16 +135,16 @@ function renderHabits(habits) {
         // Streak Counter hinzufügen
         const streakContainer = document.createElement('div');
         streakContainer.className = 'streak-container';
-        
+
         const flameIcon = document.createElement('span');
         flameIcon.className = 'flame-icon';
         flameIcon.innerHTML = '🔥'; // Flammen-Emoji
-        
+
         const streakCount = document.createElement('span');
         streakCount.className = 'streak-count';
         const currentStreak = calculateStreak(habit.completed_dates);
         streakCount.textContent = `${currentStreak} Tag${currentStreak !== 1 ? 'e' : ''}`;
-        
+
         streakContainer.appendChild(flameIcon);
         streakContainer.appendChild(streakCount);
         habitItem.appendChild(streakContainer);
@@ -172,9 +177,10 @@ async function addHabit() {
     }
 }
 
-async function openHabitModal(habitId, habitName, completedDates) {
+async function openHabitModal(habitId, habitName, completedDates, habitColor = '#4CAF50') {
     currentHabitId = habitId;
     currentHabitCompletedDates = completedDates;
+    currentHabitColor = habitColor;
     currentModalDate = new Date(); // Reset to current month
     modalHabitName.textContent = habitName;
 
@@ -183,6 +189,16 @@ async function openHabitModal(habitId, habitName, completedDates) {
     modalEditBtn.dataset.habitId = habitId;
     modalDeleteBtn.dataset.habitId = habitId;
 
+    // Set color picker to current habit color
+    document.getElementById('habitColorPicker').value = habitColor;
+
+    // Set CSS variable for modal elements
+    dateModal.style.setProperty('--current-habit-color', habitColor);
+
+    // Set contrast color for text on colored backgrounds
+    const contrastColor = getContrastColor(habitColor);
+    dateModal.style.setProperty('--current-habit-text-color', contrastColor);
+
     renderModalCalendar();
     dateModal.style.display = 'flex';
 }
@@ -404,4 +420,61 @@ async function toggleTodayCompletion(habitId, date, buttonElement) {
     } catch (error) {
         console.error('Error toggling habit completion:', error);
     }
+}
+
+async function updateHabitColor() {
+    if (!currentHabitId) {
+        console.error('No habit selected for color update.');
+        return;
+    }
+
+    const newColor = document.getElementById('habitColorPicker').value;
+    currentHabitColor = newColor;
+
+    try {
+        const response = await fetch(`/habits/${currentHabitId}`, {
+            method: 'PUT',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ color: newColor })
+        });
+        const data = await response.json();
+        if (response.ok) {
+            // Update CSS variable for modal elements
+            dateModal.style.setProperty('--current-habit-color', newColor);
+
+            // Update contrast color for text on colored backgrounds
+            const contrastColor = getContrastColor(newColor);
+            dateModal.style.setProperty('--current-habit-text-color', contrastColor);
+
+            // Update modal calendar colors immediately
+            updateModalColors(newColor);
+            // Refresh habits list to show new color
+            fetchHabits();
+        } else {
+            console.error('Failed to update habit color:', data.error);
+        }
+    } catch (error) {
+        console.error('Error updating habit color:', error);
+    }
+}
+
+function updateModalColors(color) {
+    // Update completed date cells in modal
+    const completedCells = modalDateGrid.querySelectorAll('.date-cell.completed');
+    completedCells.forEach(cell => {
+        cell.style.backgroundColor = color;
+    });
+}
+
+function getContrastColor(hexColor) {
+    // Convert hex to RGB
+    const r = parseInt(hexColor.slice(1, 3), 16);
+    const g = parseInt(hexColor.slice(3, 5), 16);
+    const b = parseInt(hexColor.slice(5, 7), 16);
+
+    // Calculate luminance
+    const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
+
+    // Return dark text for light colors, light text for dark colors
+    return luminance > 0.5 ? '#333333' : '#ffffff';
 }