mirror of
https://github.com/sstent/foodplanner.git
synced 2026-01-25 11:11:36 +00:00
fixed add meal item
This commit is contained in:
@@ -365,6 +365,18 @@ function addFoodToMeal() {
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Meal Time</label>
|
||||
<select class="form-control" name="meal_time" required>
|
||||
<option value="Breakfast">Breakfast</option>
|
||||
<option value="Lunch">Lunch</option>
|
||||
<option value="Dinner">Dinner</option>
|
||||
<option value="Snack 1">Snack 1</option>
|
||||
<option value="Snack 2">Snack 2</option>
|
||||
<option value="Beverage 1">Beverage 1</option>
|
||||
<option value="Beverage 2">Beverage 2</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
|
||||
@@ -13,7 +13,6 @@
|
||||
<tr>
|
||||
<th><input type="checkbox" id="select-all-meals" onclick="toggleAllMeals(this)"></th>
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Food Items</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
@@ -23,7 +22,6 @@
|
||||
<tr>
|
||||
<td><input type="checkbox" name="selected_meals" value="{{ meal.id }}"></td>
|
||||
<td>{{ meal.name }}</td>
|
||||
<td>{{ meal.meal_type.title() }}</td>
|
||||
<td>
|
||||
{% if meal.meal_foods %}
|
||||
<ul class="list-unstyled">
|
||||
@@ -37,11 +35,11 @@
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary"
|
||||
onclick="editMeal({{ meal.id }}, '{{ meal.name }}', '{{ meal.meal_type }}')">
|
||||
onclick="editMeal({{ meal.id }})">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-success"
|
||||
onclick="manageMealFoods({{ meal.id }}, '{{ meal.name }}')">
|
||||
onclick="manageMealFoods({{ meal.id }})">
|
||||
<i class="bi bi-list"></i> Foods
|
||||
</button>
|
||||
</td>
|
||||
@@ -71,13 +69,16 @@
|
||||
<input type="text" class="form-control" name="name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Meal Type</label>
|
||||
<select class="form-control" name="meal_type" required>
|
||||
<option value="breakfast">Breakfast</option>
|
||||
<option value="lunch">Lunch</option>
|
||||
<option value="dinner">Dinner</option>
|
||||
<option value="snack">Snack</option>
|
||||
<option value="custom">Custom</option>
|
||||
<label class="form-label">Meal Time</label>
|
||||
<select class="form-control" name="meal_time" required>
|
||||
<option value="Breakfast">Breakfast</option>
|
||||
<option value="Lunch">Lunch</option>
|
||||
<option value="Dinner">Dinner</option>
|
||||
<option value="Snack 1">Snack 1</option>
|
||||
<option value="Snack 2">Snack 2</option>
|
||||
<option value="Beverage 1">Beverage 1</option>
|
||||
<option value="Beverage 2">Beverage 2</option>
|
||||
<option value="Custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
@@ -106,13 +107,16 @@
|
||||
<input type="text" class="form-control" name="name" id="edit_meal_name" required>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Meal Type</label>
|
||||
<select class="form-control" name="meal_type" id="edit_meal_type" required>
|
||||
<option value="breakfast">Breakfast</option>
|
||||
<option value="lunch">Lunch</option>
|
||||
<option value="dinner">Dinner</option>
|
||||
<option value="snack">Snack</option>
|
||||
<option value="custom">Custom</option>
|
||||
<label class="form-label">Meal Time</label>
|
||||
<select class="form-control" name="meal_time" id="edit_meal_time" required>
|
||||
<option value="Breakfast">Breakfast</option>
|
||||
<option value="Lunch">Lunch</option>
|
||||
<option value="Dinner">Dinner</option>
|
||||
<option value="Snack 1">Snack 1</option>
|
||||
<option value="Snack 2">Snack 2</option>
|
||||
<option value="Beverage 1">Beverage 1</option>
|
||||
<option value="Beverage 2">Beverage 2</option>
|
||||
<option value="Custom">Custom</option>
|
||||
</select>
|
||||
</div>
|
||||
</form>
|
||||
@@ -177,23 +181,44 @@ function toggleAllMeals(source) {
|
||||
}
|
||||
|
||||
// Edit meal function
|
||||
function editMeal(id, name, meal_type) {
|
||||
async function editMeal(id) {
|
||||
document.getElementById('edit_meal_id').value = id;
|
||||
document.getElementById('edit_meal_name').value = name;
|
||||
document.getElementById('edit_meal_type').value = meal_type;
|
||||
|
||||
new bootstrap.Modal(document.getElementById('editMealModal')).show();
|
||||
|
||||
try {
|
||||
const response = await fetch(`/meals/${id}`); // Assuming an endpoint /meals/{id} exists to get meal details
|
||||
const meal = await response.json();
|
||||
|
||||
if (meal.status === 'success') {
|
||||
document.getElementById('edit_meal_name').value = meal.name;
|
||||
document.getElementById('edit_meal_time').value = meal.meal_time;
|
||||
new bootstrap.Modal(document.getElementById('editMealModal')).show();
|
||||
} else {
|
||||
alert('Error fetching meal details: ' + meal.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error fetching meal details: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Manage meal foods function
|
||||
async function manageMealFoods(mealId, mealName) {
|
||||
async function manageMealFoods(mealId) {
|
||||
document.getElementById('meal_id_for_food').value = mealId;
|
||||
document.getElementById('manageMealFoodsModalLabel').textContent = `Manage Foods for: ${mealName}`;
|
||||
|
||||
// Load current meal foods
|
||||
await loadCurrentMealFoods(mealId);
|
||||
|
||||
new bootstrap.Modal(document.getElementById('manageMealFoodsModal')).show();
|
||||
|
||||
try {
|
||||
const response = await fetch(`/meals/${mealId}`); // Assuming an endpoint /meals/{id} exists to get meal details
|
||||
const meal = await response.json();
|
||||
|
||||
if (meal.status === 'success') {
|
||||
document.getElementById('manageMealFoodsModalLabel').textContent = `Manage Foods for: ${meal.name}`;
|
||||
// Load current meal foods
|
||||
await loadCurrentMealFoods(mealId);
|
||||
new bootstrap.Modal(document.getElementById('manageMealFoodsModal')).show();
|
||||
} else {
|
||||
alert('Error fetching meal details: ' + meal.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error fetching meal details: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Load current meal foods
|
||||
|
||||
@@ -42,10 +42,25 @@
|
||||
<small class="text-muted">{{ day.display }}</small>
|
||||
</td>
|
||||
<td>
|
||||
{% set meals_by_time = {} %}
|
||||
{% for plan in plans[day.date.isoformat()] %}
|
||||
<span class="badge bg-secondary me-1" title="{{ plan.meal_time }}">
|
||||
<small>{{ plan.meal_time }}:</small> {{ plan.meal.name }}
|
||||
</span>
|
||||
{% if plan.meal_time not in meals_by_time %}
|
||||
{% set _ = meals_by_time.update({plan.meal_time: []}) %}
|
||||
{% endif %}
|
||||
{% set _ = meals_by_time[plan.meal_time].append(plan) %}
|
||||
{% endfor %}
|
||||
|
||||
{% for meal_time in ["Breakfast", "Lunch", "Dinner", "Snack 1", "Snack 2", "Beverage 1", "Beverage 2"] %}
|
||||
<div class="mb-1">
|
||||
<strong>{{ meal_time }}:</strong>
|
||||
{% if meals_by_time[meal_time] %}
|
||||
{% for plan in meals_by_time[meal_time] %}
|
||||
<span class="badge bg-info me-1">{{ plan.meal.name }}</span>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<em class="text-muted">No meals</em>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
{% if not plans[day.date.isoformat()] %}
|
||||
<em class="text-muted">No meals</em>
|
||||
@@ -80,14 +95,14 @@
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="quickAddMealForm">
|
||||
<input type="hidden" id="quickAddPlanDay" name="plan_day">
|
||||
<input type="hidden" id="quickAddPlanDay" name="plan_date">
|
||||
<input type="hidden" name="person" value="{{ person }}">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Meal</label>
|
||||
<select class="form-control" name="meal_id" required>
|
||||
<option value="">Choose meal...</option>
|
||||
{% for meal in meals %}
|
||||
<option value="{{ meal.id }}">{{ meal.name }} ({{ meal.meal_type }})</option>
|
||||
<option value="{{ meal.id }}">{{ meal.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
@@ -132,12 +147,12 @@
|
||||
<h6><i class="bi bi-plus-circle"></i> Add Meal</h6>
|
||||
<form id="addMealToDayForm">
|
||||
<input type="hidden" id="editDayPerson" name="person">
|
||||
<input type="hidden" id="editDayValue" name="plan_day">
|
||||
<input type="hidden" id="editDayValue" name="plan_date">
|
||||
<div class="mb-3">
|
||||
<select class="form-control" id="mealSelectForDay" name="meal_id" required>
|
||||
<option value="">Choose meal...</option>
|
||||
{% for meal in meals %}
|
||||
<option value="{{ meal.id }}">{{ meal.name }} ({{ meal.meal_type }})</option>
|
||||
<option value="{{ meal.id }}">{{ meal.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
@@ -247,7 +262,9 @@ async function editDay(date, person) {
|
||||
async function loadCurrentDayMeals(person, date) {
|
||||
try {
|
||||
const response = await fetch(`/plan/${person}/${date}`);
|
||||
const meals = await response.json();
|
||||
const data = await response.json(); // Now data contains both meals and day_totals
|
||||
const meals = data.meals;
|
||||
const dayTotals = data.day_totals;
|
||||
|
||||
const container = document.getElementById('currentDayMeals');
|
||||
if (meals.length === 0) {
|
||||
@@ -255,7 +272,7 @@ async function loadCurrentDayMeals(person, date) {
|
||||
} else {
|
||||
container.innerHTML = meals.map(meal => `
|
||||
<div class="d-flex justify-content-between align-items-center mb-2 p-2 bg-light rounded">
|
||||
<span><strong>${meal.meal_name}</strong> <small class="text-muted">(${meal.meal_type})</small></span>
|
||||
<span><strong>${meal.meal_time}:</strong> ${meal.meal_name}</span>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="removeMealFromDay(${meal.id})">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
@@ -263,8 +280,8 @@ async function loadCurrentDayMeals(person, date) {
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Update nutrition preview
|
||||
updateDayNutritionPreview(meals);
|
||||
// Update nutrition preview with actual totals
|
||||
updateDayNutritionPreview(dayTotals);
|
||||
} catch (error) {
|
||||
console.error('Error loading day meals:', error);
|
||||
}
|
||||
@@ -319,16 +336,29 @@ async function removeMealFromDay(planId) {
|
||||
}
|
||||
|
||||
// Update nutrition preview (simplified - you could enhance this with actual calculations)
|
||||
function updateDayNutritionPreview(meals) {
|
||||
function updateDayNutritionPreview(dayTotals) {
|
||||
const preview = document.getElementById('dayNutritionPreview');
|
||||
preview.innerHTML = `
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<strong>${meals.length}</strong> meals planned
|
||||
<div class="row text-center">
|
||||
<div class="col-6 mb-2">
|
||||
<strong>${dayTotals.calories ? dayTotals.calories.toFixed(0) : 0}</strong><br>
|
||||
<small>Calories</small>
|
||||
</div>
|
||||
<div class="col-6 mb-2">
|
||||
<strong>${dayTotals.protein ? dayTotals.protein.toFixed(1) : 0}g</strong><br>
|
||||
<small>Protein (${dayTotals.protein_pct ? dayTotals.protein_pct.toFixed(1) : 0}%)</small>
|
||||
</div>
|
||||
<div class="col-6 mb-2">
|
||||
<strong>${dayTotals.carbs ? dayTotals.carbs.toFixed(1) : 0}g</strong><br>
|
||||
<small>Carbs (${dayTotals.carbs_pct ? dayTotals.carbs_pct.toFixed(1) : 0}%)</small>
|
||||
</div>
|
||||
<div class="col-6 mb-2">
|
||||
<strong>${dayTotals.fat ? dayTotals.fat.toFixed(1) : 0}g</strong><br>
|
||||
<small>Fat (${dayTotals.fat_pct ? dayTotals.fat_pct.toFixed(1) : 0}%)</small>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<strong>Net Carbs:</strong> ${dayTotals.net_carbs ? dayTotals.net_carbs.toFixed(1) : 0}g
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
Nutrition totals will be calculated when page reloads
|
||||
</small>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user