feat: US-009 - Frontend - Edit habit modal

dashboard/habits.html

@@ -853,6 +853,15 @@
         function showAddHabitModal() {
             const modal = document.getElementById('habitModal');
             const form = document.getElementById('habitForm');
+            const modalTitle = document.querySelector('.modal-title');
+            const submitBtnText = document.getElementById('submitBtnText');
+            
+            // Reset editing state
+            editingHabitId = null;
+            
+            // Reset modal title and button text to create mode
+            modalTitle.textContent = 'Add Habit';
+            submitBtnText.textContent = 'Create Habit';
             
             // Reset form
             form.reset();
@@ -877,6 +886,9 @@
         function closeHabitModal() {
             const modal = document.getElementById('habitModal');
             modal.classList.remove('active');
+            
+            // Reset editing state
+            editingHabitId = null;
         }
         
         // Close modal when clicking outside
@@ -1004,6 +1016,9 @@
             const submitBtn = document.getElementById('submitHabitBtn');
             const submitBtnText = document.getElementById('submitBtnText');
             
+            // Determine if we're creating or editing
+            const isEditing = editingHabitId !== null;
+            
             // Get form values
             const name = document.getElementById('habitName').value.trim();
             const category = document.getElementById('habitCategory').value;
@@ -1061,11 +1076,14 @@
             
             // Show loading state
             submitBtn.disabled = true;
-            submitBtnText.textContent = 'Creating...';
+            submitBtnText.textContent = isEditing ? 'Saving...' : 'Creating...';
             
             try {
-                const response = await fetch('/echo/api/habits', {
-                    method: 'POST',
+                const url = isEditing ? `/echo/api/habits/${editingHabitId}` : '/echo/api/habits';
+                const method = isEditing ? 'PUT' : 'POST';
+                
+                const response = await fetch(url, {
+                    method: method,
                     headers: {
                         'Content-Type': 'application/json'
                     },
@@ -1078,16 +1096,16 @@
                 }
                 
                 // Success
-                showToast('Habit created successfully!', 'success');
+                showToast(isEditing ? 'Habit updated!' : 'Habit created successfully!', 'success');
                 closeHabitModal();
                 await loadHabits();
                 
             } catch (error) {
-                console.error('Failed to create habit:', error);
-                showToast('Failed to create habit: ' + error.message, 'error');
+                console.error(`Failed to ${isEditing ? 'update' : 'create'} habit:`, error);
+                showToast(`Failed to ${isEditing ? 'update' : 'create'} habit: ` + error.message, 'error');
             } finally {
                 submitBtn.disabled = false;
-                submitBtnText.textContent = 'Create Habit';
+                submitBtnText.textContent = isEditing ? 'Save Changes' : 'Create Habit';
             }
         }
         
@@ -1108,9 +1126,71 @@
             }, 3000);
         }
         
-        // Show edit habit modal (placeholder)
+        // Show edit habit modal
+        let editingHabitId = null; // Track which habit we're editing
+        
         function showEditHabitModal(habitId) {
-            alert('Edit Habit modal - coming in next story!');
+            const habit = habits.find(h => h.id === habitId);
+            if (!habit) {
+                showToast('Habit not found', 'error');
+                return;
+            }
+            
+            editingHabitId = habitId;
+            
+            const modal = document.getElementById('habitModal');
+            const form = document.getElementById('habitForm');
+            const modalTitle = document.querySelector('.modal-title');
+            const submitBtn = document.getElementById('submitHabitBtn');
+            const submitBtnText = document.getElementById('submitBtnText');
+            
+            // Change modal title and button text
+            modalTitle.textContent = 'Edit Habit';
+            submitBtnText.textContent = 'Save Changes';
+            
+            // Pre-populate form fields
+            document.getElementById('habitName').value = habit.name;
+            document.getElementById('habitCategory').value = habit.category || 'health';
+            document.getElementById('habitPriority').value = habit.priority || 3;
+            document.getElementById('habitNotes').value = habit.notes || '';
+            document.getElementById('frequencyType').value = habit.frequency?.type || 'daily';
+            document.getElementById('reminderTime').value = habit.reminderTime || '';
+            
+            // Set selected color and icon
+            selectedColor = habit.color || '#3B82F6';
+            selectedIcon = habit.icon || 'dumbbell';
+            
+            // Initialize color picker with current selection
+            initColorPicker();
+            
+            // Initialize icon picker with current selection
+            initIconPicker();
+            
+            // Update frequency params and pre-populate
+            updateFrequencyParams();
+            
+            // Pre-populate frequency params based on type
+            const frequencyType = habit.frequency?.type;
+            if (frequencyType === 'specific_days' && habit.frequency.days) {
+                const dayCheckboxes = document.querySelectorAll('input[name="day"]');
+                dayCheckboxes.forEach(cb => {
+                    cb.checked = habit.frequency.days.includes(parseInt(cb.value));
+                });
+            } else if (frequencyType === 'x_per_week' && habit.frequency.count) {
+                const xPerWeekInput = document.getElementById('xPerWeek');
+                if (xPerWeekInput) {
+                    xPerWeekInput.value = habit.frequency.count;
+                }
+            } else if (frequencyType === 'custom' && habit.frequency.interval) {
+                const customIntervalInput = document.getElementById('customInterval');
+                if (customIntervalInput) {
+                    customIntervalInput.value = habit.frequency.interval;
+                }
+            }
+            
+            // Show modal
+            modal.classList.add('active');
+            lucide.createIcons();
         }
         
         // Delete habit (placeholder)