mirror of
https://github.com/sstent/foodplanner.git
synced 2026-01-25 11:11:36 +00:00
670 lines
28 KiB
HTML
670 lines
28 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<div class="row">
|
|
<div class="col-md-8">
|
|
<!-- Date Navigation -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4">
|
|
<button class="btn btn-outline-secondary" onclick="navigateDate('{{ prev_date }}')">
|
|
<i class="bi bi-chevron-left"></i> Yesterday
|
|
</button>
|
|
<div class="text-center">
|
|
<h3>{{ current_date.strftime('%A, %B %d, %Y') }}</h3>
|
|
{% if is_modified %}
|
|
<span class="badge bg-warning text-dark">Custom</span>
|
|
{% else %}
|
|
<span class="badge bg-success">As Planned</span>
|
|
{% endif %}
|
|
</div>
|
|
<button class="btn btn-outline-secondary" onclick="navigateDate('{{ next_date }}')">
|
|
Tomorrow <i class="bi bi-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Reset to Plan Button (only show if modified) -->
|
|
{% if is_modified %}
|
|
<div class="d-flex justify-content-center mb-4">
|
|
<button class="btn btn-outline-primary" onclick="resetToPlan()">
|
|
<i class="bi bi-arrow-counterclockwise"></i> Reset to Plan
|
|
</button>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Template Actions -->
|
|
<div class="d-flex gap-2 mb-4">
|
|
<button class="btn btn-success" onclick="saveAsTemplate()">
|
|
<i class="bi bi-save"></i> Save as Template
|
|
</button>
|
|
<button class="btn btn-primary" onclick="applyTemplate()">
|
|
<i class="bi bi-upload"></i> Apply Template
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Meal Times -->
|
|
{% set meal_times = ["Breakfast", "Lunch", "Dinner", "Snack 1", "Snack 2", "Beverage 1", "Beverage 2"] %}
|
|
{% for meal_time in meal_times %}
|
|
<div class="card mb-3">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">{{ meal_time }}</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div id="meals-{{ meal_time|lower|replace(' ', '-') }}">
|
|
{% set meals_for_time = [] %}
|
|
{% for tracked_meal in tracked_meals %}
|
|
{% if tracked_meal.meal_time == meal_time %}
|
|
{% set _ = meals_for_time.append(tracked_meal) %}
|
|
{% endif %}
|
|
{% endfor %}
|
|
|
|
{% if meals_for_time %}
|
|
{% for tracked_meal in meals_for_time %}
|
|
<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>
|
|
</div>
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="text-muted mb-0">No meals tracked</p>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Add Meal Button -->
|
|
<div class="d-flex gap-2 mt-2">
|
|
<button class="btn btn-sm btn-outline-success" onclick="addMealToTime('{{ meal_time }}')">
|
|
<i class="bi bi-plus"></i> Add Meal
|
|
</button>
|
|
<button class="btn btn-sm btn-info text-white" onclick="addSingleFoodToTime('{{ meal_time }}')">
|
|
<i class="bi bi-plus-circle"></i> Add Food
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Right Column - Nutrition Totals -->
|
|
<div class="col-md-4">
|
|
<div class="card sticky-top" style="top: 20px;">
|
|
<div class="card-header">
|
|
<h5 class="mb-0">Daily Totals</h5>
|
|
</div>
|
|
<div class="card-body">
|
|
<div class="row text-center">
|
|
<div class="col-6 mb-3">
|
|
<div class="border rounded p-2">
|
|
<strong class="h4 text-primary">{{ "%.0f"|format(day_totals.calories) }}</strong>
|
|
<div class="small text-muted">Calories</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<div class="border rounded p-2">
|
|
<strong class="h4 text-success">{{ "%.1f"|format(day_totals.protein) }}g</strong>
|
|
<div class="small text-muted">Protein ({{ day_totals.protein_pct }}%)</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<div class="border rounded p-2">
|
|
<strong>{{ "%.1f"|format(day_totals.carbs) }}g</strong>
|
|
<div class="small text-muted">Carbs ({{ day_totals.carbs_pct }}%)</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<div class="border rounded p-2">
|
|
<strong class="h4 text-danger">{{ "%.1f"|format(day_totals.fat) }}g</strong>
|
|
<div class="small text-muted">Fat ({{ day_totals.fat_pct }}%)</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<div class="border rounded p-2">
|
|
<strong>{{ "%.1f"|format(day_totals.fiber) }}g</strong>
|
|
<div class="small text-muted">Fiber</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<div class="border rounded p-2">
|
|
<strong class="h4 text-warning">{{ "%.1f"|format(day_totals.net_carbs) }}g</strong>
|
|
<div class="small text-muted">Net Carbs</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<div class="border rounded p-2">
|
|
<strong>{{ "%.0f"|format(day_totals.sugar) }}g</strong>
|
|
<div class="small text-muted">Sugar</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-6 mb-3">
|
|
<div class="border rounded p-2">
|
|
<strong>{{ "%.0f"|format(day_totals.sodium) }}mg</strong>
|
|
<div class="small text-muted">Sodium</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Add Meal Modal -->
|
|
<div class="modal fade" id="addMealModal" tabindex="-1" aria-labelledby="addMealModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="addMealModalLabel">Add Meal to <span id="mealTimeDisplay"></span></h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="addMealForm">
|
|
<input type="hidden" id="addMealTime" name="meal_time">
|
|
<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 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 }}</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="submitAddMeal()">Add Meal</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Save Template Modal -->
|
|
<div class="modal fade" id="saveTemplateModal" tabindex="-1" aria-labelledby="saveTemplateModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="saveTemplateModalLabel">Save Day as Template</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="saveTemplateForm">
|
|
<input type="hidden" name="person" value="{{ person }}">
|
|
<input type="hidden" name="date" value="{{ current_date.isoformat() }}">
|
|
<div class="mb-3">
|
|
<label class="form-label">Template Name</label>
|
|
<input type="text" class="form-control" name="template_name" required placeholder="e.g., High Protein Day">
|
|
</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-success" onclick="submitSaveTemplate()">Save Template</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Apply Template Modal -->
|
|
<div class="modal fade" id="applyTemplateModal" tabindex="-1" aria-labelledby="applyTemplateModalLabel" aria-hidden="true">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h5 class="modal-title" id="applyTemplateModalLabel">Apply Template</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form id="applyTemplateForm">
|
|
<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 Template</label>
|
|
<select class="form-control" name="template_id" required>
|
|
<option value="">Choose template...</option>
|
|
{% for template in templates %}
|
|
<option value="{{ template.id }}">{{ template.name }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</div>
|
|
<div class="alert alert-warning">
|
|
<strong>Warning:</strong> This will replace all meals currently tracked for this day.
|
|
</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="submitApplyTemplate()">Apply Template</button>
|
|
</div>
|
|
</div>
|
|
</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 (g)</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);
|
|
}
|
|
}
|
|
|
|
// 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 and pre-select meal time
|
|
function addSingleFoodToTime(mealTime) {
|
|
document.querySelector('#addSingleFoodModal select[name="meal_time"]').value = mealTime;
|
|
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);
|
|
}
|
|
} catch (error) {
|
|
alert('Error: ' + error.message);
|
|
}
|
|
}
|
|
</script>
|
|
{% endblock %} |