mirror of
https://github.com/sstent/foodplanner.git
synced 2026-01-25 03:01:35 +00:00
88 lines
4.5 KiB
HTML
88 lines
4.5 KiB
HTML
<!-- 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 class="row">
|
|
<div class="col-md-6">
|
|
<h6>Add Food to Tracked Meal</h6>
|
|
<form id="addFoodToTrackedMealForm">
|
|
<input type="hidden" id="tracked_meal_id_for_food" name="tracked_meal_id">
|
|
<div class="mb-3">
|
|
<label class="form-label">Select Food</label>
|
|
<select class="form-control" id="foodSelectTrackedMeal" 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 (g)</label>
|
|
<input type="number" step="0.01" class="form-control" name="quantity" value="100" placeholder="Enter weight in grams" required>
|
|
</div>
|
|
<button type="button" class="btn btn-success" onclick="addFoodToTrackedMeal()">Add Food</button>
|
|
</form>
|
|
</div>
|
|
<div class="col-md-6">
|
|
<h6>Current Foods in Tracked Meal</h6>
|
|
<div id="editMealFoodsList">
|
|
<!-- Foods will be loaded here -->
|
|
</div>
|
|
</div>
|
|
</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>
|
|
|
|
<script>
|
|
// Function to add food dynamically to the edit meal list
|
|
async function addFoodToTrackedMeal() {
|
|
const foodSelect = document.getElementById('foodSelectTrackedMeal');
|
|
const foodId = foodSelect.value;
|
|
const foodName = foodSelect.options[foodSelect.selectedIndex].text;
|
|
const quantityInput = document.querySelector('#addFoodToTrackedMealForm input[name="quantity"]');
|
|
const quantity = quantityInput.value;
|
|
|
|
if (!foodId || !quantity) {
|
|
alert('Please select a food and enter a quantity.');
|
|
return;
|
|
}
|
|
|
|
const container = document.getElementById('editMealFoodsList');
|
|
// If "No foods added yet" message exists, remove it
|
|
const noFoodsMessage = container.querySelector('em');
|
|
if (noFoodsMessage) {
|
|
noFoodsMessage.remove();
|
|
}
|
|
|
|
const foodDiv = document.createElement('div');
|
|
foodDiv.className = 'd-flex justify-content-between align-items-center mb-2';
|
|
foodDiv.innerHTML = `
|
|
<span>${foodName}</span>
|
|
<div class="input-group w-50">
|
|
<input type="number" step="0.01" class="form-control form-control-sm" value="${parseFloat(quantity).toFixed(2)}" data-food-id="${foodId}" data-item-id="0" data-is-custom="true" data-testid="food-quantity-${foodId}">
|
|
<span class="input-group-text">g</span>
|
|
<button type="button" class="btn btn-sm btn-outline-danger" onclick="removeFoodFromTrackedMeal(${foodId}, true)" data-testid="delete-food-${foodId}">
|
|
<i class="bi bi-trash"></i>
|
|
</button>
|
|
</div>
|
|
`;
|
|
container.appendChild(foodDiv);
|
|
|
|
// Clear the form for next entry
|
|
foodSelect.value = '';
|
|
quantityInput.value = '100'; // Reset to default
|
|
}
|
|
</script> |