updated the tracker to have more features

app/api/routes/meals.py

@@ -205,6 +205,21 @@ async def remove_food_from_meal(meal_food_id: int, db: Session = Depends(get_db)
         db.rollback()
         return {"status": "error", "message": str(e)}
 
+@router.post("/meals/update_food_quantity")
+async def update_meal_food_quantity(meal_food_id: int = Form(...), quantity: float = Form(...), db: Session = Depends(get_db)):
+    """Update the quantity of a food in a meal"""
+    try:
+        meal_food = db.query(MealFood).filter(MealFood.id == meal_food_id).first()
+        if not meal_food:
+            return {"status": "error", "message": "Meal food not found"}
+        
+        meal_food.quantity = quantity
+        db.commit()
+        return {"status": "success"}
+    except Exception as e:
+        db.rollback()
+        return {"status": "error", "message": str(e)}
+
 @router.post("/meals/clone/{meal_id}")
 async def clone_meal(meal_id: int, db: Session = Depends(get_db)):
     """Clone an existing meal"""

templates/meals.html

@@ -121,10 +121,13 @@ async function loadCurrentMealFoods(mealId) {
         } else {
             container.innerHTML = foods.map(mf => `
                 <div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
-                    <span>${mf.quantity} × ${mf.food_name}</span>
+                    <div class="input-group">
-                    <button class="btn btn-sm btn-outline-danger" onclick="removeFoodFromMeal(${mf.id})">
+                        <input type="number" step="0.01" class="form-control" value="${mf.quantity}" data-meal-food-id="${mf.id}" onchange="updateFoodQuantity(this)">
-                        <i class="bi bi-trash"></i>
+                        <span class="input-group-text">${mf.food_name}</span>
-                    </button>
+                        <button class="btn btn-outline-danger" onclick="removeFoodFromMeal(${mf.id})">
+                            <i class="bi bi-trash"></i>
+                        </button>
+                    </div>
                 </div>
             `).join('');
         }
@@ -281,5 +284,26 @@ async function cloneMeal(mealId) {
         }
     }
 }
+// Update food quantity
+async function updateFoodQuantity(input) {
+    const mealFoodId = input.dataset.mealFoodId;
+    const quantity = input.value;
+    const formData = new FormData();
+    formData.append('meal_food_id', mealFoodId);
+    formData.append('quantity', quantity);
+
+    try {
+        const response = await fetch('/meals/update_food_quantity', {
+            method: 'POST',
+            body: formData
+        });
+        const result = await response.json();
+        if (result.status !== 'success') {
+            alert('Error updating quantity: ' + result.message);
+        }
+    } catch (error) {
+        alert('Error updating quantity: ' + error.message);
+    }
+}
 </script>
 {% endblock %}

templates/modals/manage_meal.html

@@ -44,6 +44,9 @@
                         <div id="currentMealFoods">
                             <!-- This will be populated dynamically -->
                         </div>
+                        <div class="mt-3">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                        </div>
                     </div>
                 </div>
             </div>