updated the tracker to have more features

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>
-                    <button class="btn btn-sm btn-outline-danger" onclick="removeFoodFromMeal(${mf.id})">
-                        <i class="bi bi-trash"></i>
-                    </button>
+                    <div class="input-group">
+                        <input type="number" step="0.01" class="form-control" value="${mf.quantity}" data-meal-food-id="${mf.id}" onchange="updateFoodQuantity(this)">
+                        <span class="input-group-text">${mf.food_name}</span>
+                        <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 %}