updated the tracker to have more features

templates/tracker.html

@@ -37,6 +37,9 @@
             <button class="btn btn-primary" onclick="applyTemplate()">
                 <i class="bi bi-upload"></i> Apply Template
             </button>
+            <button class="btn btn-info text-white" onclick="addSingleFood()">
+                <i class="bi bi-plus-circle"></i> Add Single Food
+            </button>
         </div>
 
         <!-- Meal Times -->
@@ -57,16 +60,39 @@
 
                     {% if meals_for_time %}
                         {% for tracked_meal in meals_for_time %}
-                        <div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
-                            <div>
-                                <strong>{{ tracked_meal.meal.name }}</strong>
-                                {% if tracked_meal.quantity != 1.0 %}
-                                <span class="text-muted">({{ "%.1f"|format(tracked_meal.quantity) }}x)</span>
+                        <div class="mb-3 p-3 bg-light rounded">
+                            <div class="d-flex justify-content-between align-items-center mb-2">
+                                <div>
+                                    <strong>{{ tracked_meal.meal.name }}</strong>
+                                    {% if tracked_meal.quantity != 1.0 %}
+                                    <span class="text-muted">({{ "%.1f"|format(tracked_meal.quantity) }}x)</span>
+                                    {% endif %}
+                                </div>
+                                <div>
+                                    <button class="btn btn-sm btn-outline-secondary me-1" onclick="editTrackedMeal({{ tracked_meal.id }})" title="Edit Meal">
+                                        <i class="bi bi-pencil"></i>
+                                    </button>
+                                    <button class="btn btn-sm btn-outline-danger" onclick="removeMeal({{ tracked_meal.id }})">
+                                        <i class="bi bi-trash"></i>
+                                    </button>
+                                </div>
+                            </div>
+                            
+                            <!-- Food Breakdown -->
+                            <div class="ms-3">
+                                {% for meal_food in tracked_meal.meal.meal_foods %}
+                                {% set effective_quantity = meal_food.quantity * tracked_meal.quantity %}
+                                <div class="small text-muted mb-1">
+                                    • {{ meal_food.food.name }}: {{ "%.1f"|format(effective_quantity) }} {{ meal_food.food.serving_unit }}
+                                    {% if meal_food.food.serving_size %}
+                                    ({{ meal_food.food.serving_size }})
+                                    {% endif %}
+                                </div>
+                                {% endfor %}
+                                {% if not tracked_meal.meal.meal_foods %}
+                                <div class="small text-muted">No foods in this meal</div>
                                 {% endif %}
                             </div>
-                            <button class="btn btn-sm btn-outline-danger" onclick="removeMeal({{ tracked_meal.id }})">
-                                <i class="bi bi-trash"></i>
-                            </button>
                         </div>
                         {% endfor %}
                     {% else %}
@@ -241,133 +267,99 @@
     </div>
 </div>
 
+<!-- Edit Tracked Meal Modal -->
+<div class="modal fade" id="editTrackedMealModal" tabindex="-1" aria-labelledby="editTrackedMealModalLabel" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="editTrackedMealModalLabel">Edit Tracked Meal</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <input type="hidden" id="editTrackedMealId" value="">
+                <div id="editMealFoodsList">
+                    <!-- Foods will be loaded here -->
+                </div>
+                <div class="mt-3">
+                    <button class="btn btn-outline-primary" onclick="addFoodToTrackedMeal()">
+                        <i class="bi bi-plus"></i> Add Food
+                    </button>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" onclick="saveTrackedMeal()">Save Changes</button>
+                <button type="button" class="btn btn-success" onclick="saveAsNewMeal()">Save as New Meal</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<!-- Add Single Food Modal -->
+<div class="modal fade" id="addSingleFoodModal" tabindex="-1" aria-labelledby="addSingleFoodModalLabel" aria-hidden="true">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="addSingleFoodModalLabel">Add Single Food</h5>
+                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+            </div>
+            <div class="modal-body">
+                <form id="addSingleFoodForm">
+                    <input type="hidden" name="person" value="{{ person }}">
+                    <input type="hidden" name="date" value="{{ current_date.isoformat() }}">
+                    <div class="mb-3">
+                        <label class="form-label">Select Food</label>
+                        <select class="form-control" name="food_id" required>
+                            <option value="">Choose food...</option>
+                            {% for food in foods %}
+                            <option value="{{ food.id }}">{{ food.name }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Quantity</label>
+                        <input type="number" step="0.1" class="form-control" name="quantity" value="1.0" min="0.1" required>
+                    </div>
+                    <div class="mb-3">
+                        <label class="form-label">Meal Time</label>
+                        <select class="form-control" name="meal_time" required>
+                            {% for meal_time in meal_times %}
+                            <option value="{{ meal_time }}">{{ meal_time }}</option>
+                            {% endfor %}
+                        </select>
+                    </div>
+                </form>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                <button type="button" class="btn btn-primary" onclick="submitAddSingleFood()">Add Food</button>
+            </div>
+        </div>
+    </div>
+</div>
+
 <script>
-// Date navigation
-function navigateDate(date) {
-    const url = new URL(window.location);
-    url.searchParams.set('date', date);
-    window.location.href = url.toString();
-}
-
-// Add meal to specific time
-function addMealToTime(mealTime) {
-    document.getElementById('mealTimeDisplay').textContent = mealTime;
-    document.getElementById('addMealTime').value = mealTime;
-    new bootstrap.Modal(document.getElementById('addMealModal')).show();
-}
-
-// Submit add meal form
-async function submitAddMeal() {
-    const form = document.getElementById('addMealForm');
-    const formData = new FormData(form);
-
-    try {
-        const response = await fetch('/tracker/add_meal', {
-            method: 'POST',
-            body: formData
-        });
-
-        const result = await response.json();
-
-        if (result.status === 'success') {
-            bootstrap.Modal.getInstance(document.getElementById('addMealModal')).hide();
-            location.reload();
-        } else {
-            alert('Error: ' + result.message);
-        }
-    } catch (error) {
-        alert('Error: ' + error.message);
+    // Date navigation
+    function navigateDate(date) {
+        const url = new URL(window.location);
+        url.searchParams.set('date', date);
+        window.location.href = url.toString();
     }
-}
 
-// Remove meal
-async function removeMeal(trackedMealId) {
-    if (confirm('Remove this meal from the tracker?')) {
-        try {
-            const response = await fetch(`/tracker/remove_meal/${trackedMealId}`, {
-                method: 'DELETE'
-            });
-
-            const result = await response.json();
-
-            if (result.status === 'success') {
-                location.reload();
-            } else {
-                alert('Error: ' + result.message);
-            }
-        } catch (error) {
-            alert('Error: ' + error.message);
-        }
+    // Add meal to specific time
+    function addMealToTime(mealTime) {
+        document.getElementById('mealTimeDisplay').textContent = mealTime;
+        document.getElementById('addMealTime').value = mealTime;
+        new bootstrap.Modal(document.getElementById('addMealModal')).show();
     }
-}
 
-// Save as template
-function saveAsTemplate() {
-    new bootstrap.Modal(document.getElementById('saveTemplateModal')).show();
-}
-
-// Submit save template
-async function submitSaveTemplate() {
-    const form = document.getElementById('saveTemplateForm');
-    const formData = new FormData(form);
-
-    try {
-        const response = await fetch('/tracker/save_template', {
-            method: 'POST',
-            body: formData
-        });
-
-        const result = await response.json();
-
-        if (result.status === 'success') {
-            bootstrap.Modal.getInstance(document.getElementById('saveTemplateModal')).hide();
-            alert('Template saved successfully!');
-        } else {
-            alert('Error: ' + result.message);
-        }
-    } catch (error) {
-        alert('Error: ' + error.message);
-    }
-}
-
-// Apply template
-function applyTemplate() {
-    new bootstrap.Modal(document.getElementById('applyTemplateModal')).show();
-}
-
-// Submit apply template
-async function submitApplyTemplate() {
-    const form = document.getElementById('applyTemplateForm');
-    const formData = new FormData(form);
-
-    try {
-        const response = await fetch('/tracker/apply_template', {
-            method: 'POST',
-            body: formData
-        });
-
-        const result = await response.json();
-
-        if (result.status === 'success') {
-            bootstrap.Modal.getInstance(document.getElementById('applyTemplateModal')).hide();
-            location.reload();
-        } else {
-            alert('Error: ' + result.message);
-        }
-    } catch (error) {
-        alert('Error: ' + error.message);
-    }
-}
-
-// Reset to plan
-async function resetToPlan() {
-    if (confirm('Reset this day back to the original plan? All custom changes will be lost.')) {
-        const formData = new FormData();
-        formData.append('person', '{{ person }}');
-        formData.append('date', '{{ current_date.isoformat() }}');
+    // Submit add meal form
+    async function submitAddMeal() {
+        const form = document.getElementById('addMealForm');
+        const formData = new FormData(form);
 
         try {
-            const response = await fetch('/tracker/reset_to_plan', {
+            const response = await fetch('/tracker/add_meal', {
                 method: 'POST',
                 body: formData
             });
@@ -375,6 +367,298 @@ async function resetToPlan() {
             const result = await response.json();
 
             if (result.status === 'success') {
+                bootstrap.Modal.getInstance(document.getElementById('addMealModal')).hide();
+                location.reload();
+            } else {
+                alert('Error: ' + result.message);
+            }
+        } catch (error) {
+            alert('Error: ' + error.message);
+        }
+    }
+
+    // Remove meal
+    async function removeMeal(trackedMealId) {
+        if (confirm('Remove this meal from the tracker?')) {
+            try {
+                const response = await fetch(`/tracker/remove_meal/${trackedMealId}`, {
+                    method: 'DELETE'
+                });
+
+                const result = await response.json();
+
+                if (result.status === 'success') {
+                    location.reload();
+                } else {
+                    alert('Error: ' + result.message);
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+    }
+
+    // Save as template
+    function saveAsTemplate() {
+        new bootstrap.Modal(document.getElementById('saveTemplateModal')).show();
+    }
+
+    // Submit save template
+    async function submitSaveTemplate() {
+        const form = document.getElementById('saveTemplateForm');
+        const formData = new FormData(form);
+
+        try {
+            const response = await fetch('/tracker/save_template', {
+                method: 'POST',
+                body: formData
+            });
+
+            const result = await response.json();
+
+            if (result.status === 'success') {
+                bootstrap.Modal.getInstance(document.getElementById('saveTemplateModal')).hide();
+                alert('Template saved successfully!');
+            } else {
+                alert('Error: ' + result.message);
+            }
+        } catch (error) {
+            alert('Error: ' + error.message);
+        }
+    }
+
+    // Apply template
+    function applyTemplate() {
+        new bootstrap.Modal(document.getElementById('applyTemplateModal')).show();
+    }
+
+    // Submit apply template
+    async function submitApplyTemplate() {
+        const form = document.getElementById('applyTemplateForm');
+        const formData = new FormData(form);
+
+        try {
+            const response = await fetch('/tracker/apply_template', {
+                method: 'POST',
+                body: formData
+            });
+
+            const result = await response.json();
+
+            if (result.status === 'success') {
+                bootstrap.Modal.getInstance(document.getElementById('applyTemplateModal')).hide();
+                location.reload();
+            } else {
+                alert('Error: ' + result.message);
+            }
+        } catch (error) {
+            alert('Error: ' + error.message);
+        }
+    }
+
+    // Reset to plan
+    async function resetToPlan() {
+        if (confirm('Reset this day back to the original plan? All custom changes will be lost.')) {
+            const formData = new FormData();
+            formData.append('person', '{{ person }}');
+            formData.append('date', '{{ current_date.isoformat() }}');
+
+            try {
+                const response = await fetch('/tracker/reset_to_plan', {
+                    method: 'POST',
+                    body: formData
+                });
+
+                const result = await response.json();
+
+                if (result.status === 'success') {
+                    location.reload();
+                } else {
+                    alert('Error: ' + result.message);
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+    }
+
+    // Edit tracked meal
+    function editTrackedMeal(trackedMealId) {
+        document.getElementById('editTrackedMealId').value = trackedMealId;
+        loadTrackedMealFoods(trackedMealId);
+        new bootstrap.Modal(document.getElementById('editTrackedMealModal')).show();
+    }
+
+    // Load foods for editing
+    async function loadTrackedMealFoods(trackedMealId) {
+        try {
+            const response = await fetch(`/tracker/get_tracked_meal_foods/${trackedMealId}`);
+            const data = await response.json();
+            
+            const container = document.getElementById('editMealFoodsList');
+            container.innerHTML = '';
+            
+            if (data.status === 'success') {
+                data.meal_foods.forEach(food => {
+                    const foodDiv = document.createElement('div');
+                    foodDiv.className = 'mb-2 p-2 border rounded';
+                    foodDiv.innerHTML = `
+                        <div class="d-flex justify-content-between align-items-center">
+                            <div>
+                                <strong>${food.food_name}</strong>
+                                <small class="text-muted">(${food.serving_size} ${food.serving_unit})</small>
+                            </div>
+                            <div>
+                                <input type="number" class="form-control w-25 d-inline me-2" value="${food.quantity}" data-food-id="${food.id}" min="0" step="0.1">
+                                <button class="btn btn-sm btn-outline-danger" onclick="removeTrackedFood(${food.id})">
+                                    <i class="bi bi-trash"></i>
+                                </button>
+                            </div>
+                        </div>
+                    `;
+                    container.appendChild(foodDiv);
+                });
+            }
+        } catch (error) {
+            console.error('Error loading meal foods:', error);
+        }
+    }
+
+    // Add food to tracked meal
+    function addFoodToTrackedMeal() {
+        // Implementation for adding new food - would need a food selection modal
+        alert('Add food functionality to be implemented');
+    }
+
+    // Remove tracked food
+    async function removeTrackedFood(trackedFoodId) {
+        if (confirm('Remove this food from the tracked meal?')) {
+            try {
+                const response = await fetch(`/tracker/remove_tracked_food/${trackedFoodId}`, {
+                    method: 'DELETE'
+                });
+                const result = await response.json();
+                
+                if (result.status === 'success') {
+                    loadTrackedMealFoods(document.getElementById('editTrackedMealId').value);
+                } else {
+                    alert('Error: ' + result.message);
+                }
+            } catch (error) {
+                alert('Error: ' + error.message);
+            }
+        }
+    }
+
+    // Save tracked meal changes
+    async function saveTrackedMeal() {
+        const trackedMealId = document.getElementById('editTrackedMealId').value;
+        const inputs = document.querySelectorAll('#editMealFoodsList input[type="number"]');
+        
+        const updates = [];
+        inputs.forEach(input => {
+            updates.push({
+                tracked_food_id: input.dataset.foodId,
+                quantity: parseFloat(input.value)
+            });
+        });
+        
+        try {
+            const response = await fetch('/tracker/update_tracked_meal', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ tracked_meal_id: trackedMealId, updates: updates })
+            });
+            
+            const result = await response.json();
+            
+            if (result.status === 'success') {
+                bootstrap.Modal.getInstance(document.getElementById('editTrackedMealModal')).hide();
+                location.reload();
+            } else {
+                alert('Error: ' + result.message);
+            }
+        } catch (error) {
+            alert('Error: ' + error.message);
+        }
+    }
+
+    // Save as new meal
+    async function saveAsNewMeal() {
+        const mealName = prompt('Enter name for new meal:');
+        if (!mealName) return;
+        
+        const trackedMealId = document.getElementById('editTrackedMealId').value;
+        const inputs = document.querySelectorAll('#editMealFoodsList input[type="number"]');
+        
+        const foods = [];
+        inputs.forEach(input => {
+            foods.push({
+                food_id: input.dataset.foodId,
+                quantity: parseFloat(input.value)
+            });
+        });
+        
+        try {
+            const response = await fetch('/tracker/save_as_new_meal', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    tracked_meal_id: trackedMealId,
+                    new_meal_name: mealName,
+                    foods: foods
+                })
+            });
+            
+            const result = await response.json();
+            
+            if (result.status === 'success') {
+                bootstrap.Modal.getInstance(document.getElementById('editTrackedMealModal')).hide();
+                alert('New meal saved successfully!');
+                location.reload();
+            } else {
+                alert('Error: ' + result.message);
+            }
+        } catch (error) {
+            alert('Error: ' + error.message);
+        }
+    }
+
+    // Update quantity on input change (real-time update)
+    document.addEventListener('input', function(e) {
+        if (e.target.type === 'number' && e.target.dataset.foodId) {
+            const trackedFoodId = e.target.dataset.foodId;
+            const quantity = parseFloat(e.target.value);
+            
+            fetch('/tracker/update_tracked_food', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ tracked_food_id: trackedFoodId, quantity: quantity })
+            }).catch(error => console.error('Error updating quantity:', error));
+        }
+    });
+
+    // Show add single food modal
+    function addSingleFood() {
+        new bootstrap.Modal(document.getElementById('addSingleFoodModal')).show();
+    }
+
+    // Submit add single food form
+    async function submitAddSingleFood() {
+        const form = document.getElementById('addSingleFoodForm');
+        const formData = new FormData(form);
+
+        try {
+            const response = await fetch('/tracker/add_food', {
+                method: 'POST',
+                body: JSON.stringify(Object.fromEntries(formData)), // Convert FormData to JSON
+                headers: { 'Content-Type': 'application/json' }
+            });
+
+            const result = await response.json();
+
+            if (result.status === 'success') {
+                bootstrap.Modal.getInstance(document.getElementById('addSingleFoodModal')).hide();
                 location.reload();
             } else {
                 alert('Error: ' + result.message);
@@ -383,6 +667,5 @@ async function resetToPlan() {
             alert('Error: ' + error.message);
         }
     }
-}
 </script>
 {% endblock %}