diff --git a/app.py b/app.py index 8fd2a7e..8b9449e 100644 --- a/app.py +++ b/app.py @@ -32,7 +32,8 @@ def get_habits(): current_habit_data = { 'id': habit_doc.doc_id, 'name': habit_doc.get('name'), - 'completed_dates': habit_doc.get('completed_dates', []) + 'completed_dates': habit_doc.get('completed_dates', []), + 'color': habit_doc.get('color', '#4CAF50') } completion_history = {} @@ -48,11 +49,12 @@ def get_habits(): def add_habit(): data = request.json name = data.get('name') + color = data.get('color', '#4CAF50') # Default green color if not name: return jsonify({'error': 'Habit name is required'}), 400 - habit_id = db.insert({'name': name, 'completed_dates': []}) - return jsonify({'id': habit_id, 'name': name, 'completed_dates': []}), 201 + habit_id = db.insert({'name': name, 'completed_dates': [], 'color': color}) + return jsonify({'id': habit_id, 'name': name, 'completed_dates': [], 'color': color}), 201 @app.route('/habits//complete', methods=['POST']) def complete_habit(habit_id): @@ -86,16 +88,23 @@ def uncomplete_habit(habit_id): def update_habit(habit_id): data = request.json name = data.get('name') + color = data.get('color') - if not name: - return jsonify({'error': 'Habit name is required'}), 400 + if not name and not color: + return jsonify({'error': 'Habit name or color is required'}), 400 habit = db.get(doc_id=habit_id) if not habit: return jsonify({'error': 'Habit not found'}), 404 - db.update({'name': name}, doc_ids=[habit_id]) - return jsonify({'message': f'Habit {habit_id} updated', 'name': name}) + update_data = {} + if name: + update_data['name'] = name + if color: + update_data['color'] = color + + db.update(update_data, doc_ids=[habit_id]) + return jsonify({'message': f'Habit {habit_id} updated', **update_data}) @app.route('/habits/', methods=['DELETE']) def delete_habit(habit_id): diff --git a/habits.json b/habits.json index cfc7851..9957886 100644 --- a/habits.json +++ b/habits.json @@ -1 +1 @@ -{"_default": {"1": {"name": "Zocken Mega", "completed_dates": ["2025-07-16", "2025-07-14", "2025-08-01", "2025-08-09", "2025-08-17", "2025-07-15", "2025-07-01", "2025-06-29", "2025-06-19", "2025-06-20", "2025-07-13", "2025-07-12"]}, "2": {"name": "Laufen", "completed_dates": []}}} \ No newline at end of file +{"_default": {"1": {"name": "Zocken Mega", "completed_dates": ["2025-07-14", "2025-08-01", "2025-08-09", "2025-08-17", "2025-07-15", "2025-07-01", "2025-06-29", "2025-06-19", "2025-06-20", "2025-07-13", "2025-07-12", "2025-07-16"], "color": "#08680c"}, "2": {"name": "Laufen", "completed_dates": ["2025-07-16", "2025-07-02"], "color": "#1a3ed1"}}} \ No newline at end of file diff --git a/static/css/style.css b/static/css/style.css index 15f805a..5a3062b 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -89,7 +89,7 @@ h1 { } .habit-actions button.completed-today { - color: #4CAF50; + color: var(--habit-color, #4CAF50); } .habit-actions button.not-completed-today { @@ -97,11 +97,12 @@ h1 { } .habit-actions button.completed-today:hover { - color: #45a049; + color: var(--habit-color, #45a049); + filter: brightness(0.9); } .habit-actions button.not-completed-today:hover { - color: #4CAF50; + color: var(--habit-color, #4CAF50); } .date-grid { @@ -133,7 +134,7 @@ h1 { } .date-square.completed { - background-color: #4CAF50; + background-color: var(--habit-color, #4CAF50); } /* Modal Styles */ @@ -188,7 +189,7 @@ h1 { #modalHabitName { text-align: center; - color: #4CAF50; + color: var(--current-habit-color, #4CAF50); margin-bottom: 20px; } @@ -200,8 +201,8 @@ h1 { } .month-navigation button { - background-color: #4CAF50; - color: white; + background-color: var(--current-habit-color, #4CAF50); + color: var(--current-habit-text-color, white); border: none; border-radius: 5px; padding: 8px 12px; @@ -210,7 +211,9 @@ h1 { } .month-navigation button:hover { - background-color: #45a049; + background-color: var(--current-habit-color, #45a049); + color: var(--current-habit-text-color, white); + filter: brightness(0.9); } #currentMonthYear { @@ -226,7 +229,7 @@ h1 { margin-bottom: 10px; text-align: center; font-weight: bold; - color: #4CAF50; + color: var(--current-habit-color, #4CAF50); } .weekdays-header div { @@ -251,7 +254,8 @@ h1 { } .date-cell.completed { - background-color: #4CAF50; + background-color: var(--current-habit-color, #4CAF50); + color: var(--current-habit-text-color, white); } .date-cell.today { @@ -304,12 +308,14 @@ h1 { } #modalCompleteTodayBtn { - background-color: #4CAF50; - color: white; + background-color: var(--current-habit-color, #4CAF50); + color: var(--current-habit-text-color, white); } #modalCompleteTodayBtn:hover { - background-color: #45a049; + background-color: var(--current-habit-color, #45a049); + color: var(--current-habit-text-color, white); + filter: brightness(0.9); } #modalEditBtn { @@ -328,4 +334,26 @@ h1 { #modalDeleteBtn:hover { background-color: #c82333; +} + +.color-picker-section { + display: flex; + align-items: center; + justify-content: center; + margin-bottom: 20px; + gap: 10px; +} + +.color-picker-section label { + color: #e0e0e0; + font-weight: bold; +} + +#habitColorPicker { + width: 40px; + height: 40px; + border: none; + border-radius: 50%; + cursor: pointer; + background: none; } \ No newline at end of file diff --git a/static/js/script.js b/static/js/script.js index 24af1bc..46442bf 100644 --- a/static/js/script.js +++ b/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'; } \ No newline at end of file diff --git a/templates/index.html b/templates/index.html index 748e9d2..24bac71 100644 --- a/templates/index.html +++ b/templates/index.html @@ -36,6 +36,10 @@
So
+
+ + +