mirror of
https://github.com/sstent/foodplanner.git
synced 2026-04-05 20:43:51 +00:00
working models
This commit is contained in:
@@ -6,6 +6,7 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Meal Planner</title>
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
|
||||
<style>
|
||||
.nav-tabs .nav-link.active {
|
||||
background-color: #0d6efd;
|
||||
@@ -28,6 +29,18 @@
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
.modal-lg {
|
||||
max-width: 800px;
|
||||
}
|
||||
.btn i {
|
||||
margin-right: 4px;
|
||||
}
|
||||
.table th, .table td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
.badge {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
@@ -39,20 +52,30 @@
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<h1 class="mt-3 mb-4">Meal Planner</h1>
|
||||
<h1 class="mt-3 mb-4">
|
||||
<i class="bi bi-calendar-check"></i> Meal Planner
|
||||
</h1>
|
||||
|
||||
<ul class="nav nav-tabs" id="myTab" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" onclick="location.href='/foods'">Foods</button>
|
||||
<button class="nav-link" onclick="location.href='/foods'">
|
||||
<i class="bi bi-apple"></i> Foods
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" onclick="location.href='/meals'">Meals</button>
|
||||
<button class="nav-link" onclick="location.href='/meals'">
|
||||
<i class="bi bi-egg-fried"></i> Meals
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" onclick="location.href='/plan'">Plan A</button>
|
||||
<button class="nav-link" onclick="location.href='/plan'">
|
||||
<i class="bi bi-calendar-week"></i> Plan
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" onclick="location.href='/detailed'">Detailed Planner</button>
|
||||
<button class="nav-link" onclick="location.href='/detailed'">
|
||||
<i class="bi bi-calendar-day"></i> Detailed
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
@@ -69,6 +92,21 @@
|
||||
currentUrl.searchParams.set('person', person);
|
||||
window.location.href = currentUrl.toString();
|
||||
}
|
||||
|
||||
// Set active tab based on current URL
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const currentPath = window.location.pathname;
|
||||
const tabs = document.querySelectorAll('.nav-link');
|
||||
|
||||
tabs.forEach(tab => {
|
||||
const href = tab.getAttribute('onclick');
|
||||
if (href && href.includes(currentPath)) {
|
||||
tab.classList.add('active');
|
||||
} else {
|
||||
tab.classList.remove('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -1,64 +1,204 @@
|
||||
<!-- templates/detailed.html -->
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<h3>Detailed View for {{ person }}</h3>
|
||||
<form method="get">
|
||||
<form method="get" class="d-flex">
|
||||
<input type="hidden" name="person" value="{{ person }}">
|
||||
<div class="input-group mb-3">
|
||||
<input type="date" class="form-control" name="plan_date" value="{{ selected_date }}">
|
||||
<button class="btn btn-primary" type="submit">View Date</button>
|
||||
</div>
|
||||
<select class="form-control me-2" name="plan_day">
|
||||
{% for day in days %}
|
||||
<option value="{{ day }}" {% if day == selected_day %}selected{% endif %}>{{ day }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<button class="btn btn-primary" type="submit">
|
||||
<i class="bi bi-search"></i> View
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-6 text-end">
|
||||
<h4 class="mb-0">{{ selected_day }}</h4>
|
||||
<small class="text-muted">Detailed nutritional breakdown</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4>{{ selected_date.strftime('%A, %B %d, %Y') }}</h4>
|
||||
<style>
|
||||
.meal-card {
|
||||
margin-bottom: 1.5rem;
|
||||
border: 1px solid #dee2e6;
|
||||
border-radius: 0.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.meal-header {
|
||||
background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
|
||||
color: white;
|
||||
padding: 0.75rem 1rem;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.meal-table {
|
||||
margin-bottom: 0;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.meal-table th {
|
||||
background-color: #f8f9fa;
|
||||
border-top: none;
|
||||
font-size: 0.8em;
|
||||
font-weight: 600;
|
||||
padding: 0.5rem 0.75rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.meal-table td {
|
||||
padding: 0.5rem 0.75rem;
|
||||
vertical-align: middle;
|
||||
border-top: 1px solid #f1f3f4;
|
||||
}
|
||||
|
||||
.meal-table tbody tr:hover {
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
|
||||
.food-name {
|
||||
font-weight: 500;
|
||||
color: #495057;
|
||||
}
|
||||
|
||||
.serving-info {
|
||||
font-size: 0.8em;
|
||||
color: #6c757d;
|
||||
}
|
||||
|
||||
.nutrient-value {
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.meal-totals {
|
||||
background-color: #e3f2fd;
|
||||
border-top: 2px solid #1976d2;
|
||||
}
|
||||
|
||||
.meal-totals td {
|
||||
font-weight: 600;
|
||||
background-color: #e3f2fd;
|
||||
}
|
||||
|
||||
.day-totals {
|
||||
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
|
||||
color: white;
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.day-totals-table {
|
||||
color: white;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.day-totals-table th,
|
||||
.day-totals-table td {
|
||||
border-color: rgba(255, 255, 255, 0.3);
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.day-totals-table th {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.macro-pct {
|
||||
font-size: 0.8em;
|
||||
opacity: 0.9;
|
||||
}
|
||||
</style>
|
||||
|
||||
{% for meal_detail in meal_details %}
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<strong>{{ meal_detail.plan.meal.name }}</strong> - {{ meal_detail.plan.meal.meal_type.title() }}
|
||||
<div class="meal-card">
|
||||
<div class="meal-header">
|
||||
<span>
|
||||
<i class="bi bi-egg-fried"></i> {{ meal_detail.plan.meal.name }} - {{ meal_detail.plan.meal.meal_type.title() }}
|
||||
</span>
|
||||
<span class="badge bg-light text-dark">{{ "%.0f"|format(meal_detail.nutrition.calories) }} cal</span>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6>Foods:</h6>
|
||||
<ul>
|
||||
|
||||
<table class="table meal-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 35%;">Food Item</th>
|
||||
<th style="width: 15%;">Serving</th>
|
||||
<th style="width: 8%;">Cal</th>
|
||||
<th style="width: 8%;">Protein</th>
|
||||
<th style="width: 8%;">Carbs</th>
|
||||
<th style="width: 8%;">Fat</th>
|
||||
<th style="width: 8%;">Fiber</th>
|
||||
<th style="width: 10%;">Sodium</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for meal_food in meal_detail.foods %}
|
||||
<li>{{ meal_food.quantity }} × {{ meal_food.food.name }}
|
||||
({{ meal_food.food.serving_size }} {{ meal_food.food.serving_unit }})
|
||||
</li>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="food-name">{{ meal_food.food.name }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="serving-info">
|
||||
{{ meal_food.quantity }} × {{ meal_food.food.serving_size }}{{ meal_food.food.serving_unit }}
|
||||
</div>
|
||||
</td>
|
||||
<td class="nutrient-value">{{ "%.0f"|format(meal_food.food.calories * meal_food.quantity) }}</td>
|
||||
<td class="nutrient-value">{{ "%.1f"|format(meal_food.food.protein * meal_food.quantity) }}g</td>
|
||||
<td class="nutrient-value">{{ "%.1f"|format(meal_food.food.carbs * meal_food.quantity) }}g</td>
|
||||
<td class="nutrient-value">{{ "%.1f"|format(meal_food.food.fat * meal_food.quantity) }}g</td>
|
||||
<td class="nutrient-value">{{ "%.1f"|format((meal_food.food.fiber or 0) * meal_food.quantity) }}g</td>
|
||||
<td class="nutrient-value">{{ "%.0f"|format((meal_food.food.sodium or 0) * meal_food.quantity) }}mg</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<div class="nutrition-grid">
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.0f"|format(meal_detail.nutrition.calories) }}</strong><br>
|
||||
<small>Calories</small>
|
||||
<!-- Meal Totals Row -->
|
||||
<tr class="meal-totals">
|
||||
<td><strong><i class="bi bi-calculator"></i> Meal Totals</strong></td>
|
||||
<td class="text-center"><small>-</small></td>
|
||||
<td class="nutrient-value">{{ "%.0f"|format(meal_detail.nutrition.calories) }}</td>
|
||||
<td class="nutrient-value">
|
||||
{{ "%.1f"|format(meal_detail.nutrition.protein) }}g
|
||||
<div class="macro-pct">({{ meal_detail.nutrition.protein_pct or 0 }}%)</div>
|
||||
</td>
|
||||
<td class="nutrient-value">
|
||||
{{ "%.1f"|format(meal_detail.nutrition.carbs) }}g
|
||||
<div class="macro-pct">({{ meal_detail.nutrition.carbs_pct or 0 }}%)</div>
|
||||
</td>
|
||||
<td class="nutrient-value">
|
||||
{{ "%.1f"|format(meal_detail.nutrition.fat) }}g
|
||||
<div class="macro-pct">({{ meal_detail.nutrition.fat_pct or 0 }}%)</div>
|
||||
</td>
|
||||
<td class="nutrient-value">{{ "%.1f"|format(meal_detail.nutrition.fiber) }}g</td>
|
||||
<td class="nutrient-value">{{ "%.0f"|format(meal_detail.nutrition.sodium) }}mg</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Additional Nutrients Row -->
|
||||
<div class="px-3 py-2" style="background-color: #f8f9fa; border-top: 1px solid #dee2e6; font-size: 0.85em;">
|
||||
<div class="row text-center">
|
||||
<div class="col-3">
|
||||
<strong>Net Carbs:</strong> {{ "%.1f"|format(meal_detail.nutrition.net_carbs or 0) }}g
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.1f"|format(meal_detail.nutrition.protein) }}g</strong><br>
|
||||
<small>Protein ({{ meal_detail.nutrition.protein_pct or 0 }}%)</small>
|
||||
<div class="col-3">
|
||||
<strong>Sugar:</strong> {{ "%.1f"|format(meal_detail.nutrition.sugar) }}g
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.1f"|format(meal_detail.nutrition.carbs) }}g</strong><br>
|
||||
<small>Carbs ({{ meal_detail.nutrition.carbs_pct or 0 }}%)</small>
|
||||
<div class="col-3">
|
||||
<strong>Calcium:</strong> {{ "%.0f"|format(meal_detail.nutrition.calcium) }}mg
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.1f"|format(meal_detail.nutrition.fat) }}g</strong><br>
|
||||
<small>Fat ({{ meal_detail.nutrition.fat_pct or 0 }}%)</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.1f"|format(meal_detail.nutrition.net_carbs or 0) }}g</strong><br>
|
||||
<small>Net Carbs</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.0f"|format(meal_detail.nutrition.calcium) }}mg</strong><br>
|
||||
<small>Calcium</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.0f"|format(meal_detail.nutrition.sodium) }}mg</strong><br>
|
||||
<small>Sodium</small>
|
||||
<div class="col-3">
|
||||
<strong>Ratio:</strong>
|
||||
<span class="text-muted">
|
||||
{{ meal_detail.nutrition.protein_pct or 0 }}:{{ meal_detail.nutrition.carbs_pct or 0 }}:{{ meal_detail.nutrition.fat_pct or 0 }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -66,47 +206,60 @@
|
||||
{% endfor %}
|
||||
|
||||
<!-- Day Totals -->
|
||||
<div class="card bg-light">
|
||||
<div class="card-header">
|
||||
<strong>Daily Totals</strong>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="nutrition-grid">
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.0f"|format(day_totals.calories) }}</strong><br>
|
||||
<small>Total Calories</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.1f"|format(day_totals.protein) }}g</strong><br>
|
||||
<small>Protein ({{ day_totals.protein_pct or 0 }}%)</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.1f"|format(day_totals.carbs) }}g</strong><br>
|
||||
<small>Carbs ({{ day_totals.carbs_pct or 0 }}%)</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.1f"|format(day_totals.fat) }}g</strong><br>
|
||||
<small>Fat ({{ day_totals.fat_pct or 0 }}%)</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.1f"|format(day_totals.net_carbs or 0) }}g</strong><br>
|
||||
<small>Net Carbs</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.0f"|format(day_totals.calcium) }}mg</strong><br>
|
||||
<small>Total Calcium</small>
|
||||
</div>
|
||||
<div class="nutrition-item">
|
||||
<strong>{{ "%.0f"|format(day_totals.sodium) }}mg</strong><br>
|
||||
<small>Total Sodium</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="day-totals">
|
||||
<h5 class="mb-3 text-center">
|
||||
<i class="bi bi-calendar-check"></i> Daily Totals - {{ "%.0f"|format(day_totals.calories) }} Total Calories
|
||||
</h5>
|
||||
|
||||
<table class="table day-totals-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Calories</th>
|
||||
<th>Protein</th>
|
||||
<th>Carbs</th>
|
||||
<th>Fat</th>
|
||||
<th>Fiber</th>
|
||||
<th>Net Carbs</th>
|
||||
<th>Sodium</th>
|
||||
<th>Calcium</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="font-size: 1.2em;">{{ "%.0f"|format(day_totals.calories) }}</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="font-size: 1.1em;">{{ "%.1f"|format(day_totals.protein) }}g</div>
|
||||
<div class="macro-pct">({{ day_totals.protein_pct or 0 }}%)</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="font-size: 1.1em;">{{ "%.1f"|format(day_totals.carbs) }}g</div>
|
||||
<div class="macro-pct">({{ day_totals.carbs_pct or 0 }}%)</div>
|
||||
</td>
|
||||
<td>
|
||||
<div style="font-size: 1.1em;">{{ "%.1f"|format(day_totals.fat) }}g</div>
|
||||
<div class="macro-pct">({{ day_totals.fat_pct or 0 }}%)</div>
|
||||
</td>
|
||||
<td>{{ "%.1f"|format(day_totals.fiber) }}g</td>
|
||||
<td>{{ "%.1f"|format(day_totals.net_carbs or 0) }}g</td>
|
||||
<td>{{ "%.0f"|format(day_totals.sodium) }}mg</td>
|
||||
<td>{{ "%.0f"|format(day_totals.calcium) }}mg</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="text-center mt-2">
|
||||
<small>
|
||||
<strong>Daily Macro Ratio:</strong>
|
||||
{{ day_totals.protein_pct or 0 }}% Protein : {{ day_totals.carbs_pct or 0 }}% Carbs : {{ day_totals.fat_pct or 0 }}% Fat
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if not meal_details %}
|
||||
<div class="alert alert-info">
|
||||
No meals planned for this date. Go to the Plan A tab to add meals.
|
||||
<i class="bi bi-info-circle"></i> No meals planned for this date. Go to the Plan tab to add meals.
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -11,64 +11,9 @@
|
||||
<button type="submit" class="btn btn-secondary mb-4">Upload CSV</button>
|
||||
</form>
|
||||
|
||||
<h3>Add New Food</h3>
|
||||
<form action="/foods/add" method="post">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" name="name" required>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Serving Size</label>
|
||||
<input type="text" class="form-control" name="serving_size" required>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Unit</label>
|
||||
<input type="text" class="form-control" name="serving_unit" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Calories</label>
|
||||
<input type="number" step="0.1" class="form-control" name="calories" required>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Protein (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="protein" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Carbs (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="carbs" required>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Fat (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="fat" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Fiber (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="fiber" value="0">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Sugar (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="sugar" value="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Sodium (mg)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="sodium" value="0">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">Calcium (mg)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="calcium" value="0">
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary mt-3">Add Food</button>
|
||||
</form>
|
||||
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#addFoodModal">
|
||||
<i class="bi bi-plus-circle"></i> Add New Food
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8" id="upload-results" style="display: none;">
|
||||
@@ -86,6 +31,7 @@
|
||||
<table class="table table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Select</th>
|
||||
<th>Name</th>
|
||||
<th>Serving</th>
|
||||
<th>Cal</th>
|
||||
@@ -95,6 +41,7 @@
|
||||
<th>Fiber</th>
|
||||
<th>Sodium</th>
|
||||
<th>Calcium</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -110,15 +57,252 @@
|
||||
<td>{{ "%.2f"|format(food.fiber) }}g</td>
|
||||
<td>{{ "%.2f"|format(food.sodium) }}mg</td>
|
||||
<td>{{ "%.2f"|format(food.calcium) }}mg</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary"
|
||||
onclick="editFood({{ food.id }}, '{{ food.name }}', '{{ food.serving_size }}', '{{ food.serving_unit }}', {{ food.calories }}, {{ food.protein }}, {{ food.carbs }}, {{ food.fat }}, {{ food.fiber }}, {{ food.sugar }}, {{ food.sodium }}, {{ food.calcium }})">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="btn btn-danger mt-3" onclick="deleteSelectedFoods()">
|
||||
<i class="bi bi-trash"></i> Delete Selected Foods
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Add Food Modal -->
|
||||
<div class="modal fade" id="addFoodModal" tabindex="-1" aria-labelledby="addFoodModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="addFoodModalLabel">Add New Food</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="addFoodForm" action="/foods/add" method="post">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" name="name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Serving Size</label>
|
||||
<input type="text" class="form-control" name="serving_size" required>
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Unit</label>
|
||||
<input type="text" class="form-control" name="serving_unit" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Calories</label>
|
||||
<input type="number" step="0.1" class="form-control" name="calories" required>
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Protein (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="protein" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Carbs (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="carbs" required>
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Fat (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="fat" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Fiber (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="fiber" value="0">
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Sugar (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="sugar" value="0">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Sodium (mg)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="sodium" value="0">
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Calcium (mg)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="calcium" value="0">
|
||||
</div>
|
||||
</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="submitFoodForm('add')">Add Food</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Food Modal -->
|
||||
<div class="modal fade" id="editFoodModal" tabindex="-1" aria-labelledby="editFoodModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editFoodModalLabel">Edit Food</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editFoodForm" action="/foods/edit" method="post">
|
||||
<input type="hidden" name="food_id" id="edit_food_id">
|
||||
<div class="row">
|
||||
<div class="col-12 mb-3">
|
||||
<label class="form-label">Name</label>
|
||||
<input type="text" class="form-control" name="name" id="edit_name" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Serving Size</label>
|
||||
<input type="text" class="form-control" name="serving_size" id="edit_serving_size" required>
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Unit</label>
|
||||
<input type="text" class="form-control" name="serving_unit" id="edit_serving_unit" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Calories</label>
|
||||
<input type="number" step="0.1" class="form-control" name="calories" id="edit_calories" required>
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Protein (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="protein" id="edit_protein" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Carbs (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="carbs" id="edit_carbs" required>
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Fat (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="fat" id="edit_fat" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Fiber (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="fiber" id="edit_fiber">
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Sugar (g)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="sugar" id="edit_sugar">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Sodium (mg)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="sodium" id="edit_sodium">
|
||||
</div>
|
||||
<div class="col-6 mb-3">
|
||||
<label class="form-label">Calcium (mg)</label>
|
||||
<input type="number" step="0.1" class="form-control" name="calcium" id="edit_calcium">
|
||||
</div>
|
||||
</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="submitFoodForm('edit')">Update Food</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Edit food function
|
||||
function editFood(id, name, serving_size, serving_unit, calories, protein, carbs, fat, fiber, sugar, sodium, calcium) {
|
||||
document.getElementById('edit_food_id').value = id;
|
||||
document.getElementById('edit_name').value = name;
|
||||
document.getElementById('edit_serving_size').value = serving_size;
|
||||
document.getElementById('edit_serving_unit').value = serving_unit;
|
||||
document.getElementById('edit_calories').value = calories;
|
||||
document.getElementById('edit_protein').value = protein;
|
||||
document.getElementById('edit_carbs').value = carbs;
|
||||
document.getElementById('edit_fat').value = fat;
|
||||
document.getElementById('edit_fiber').value = fiber;
|
||||
document.getElementById('edit_sugar').value = sugar;
|
||||
document.getElementById('edit_sodium').value = sodium;
|
||||
document.getElementById('edit_calcium').value = calcium;
|
||||
|
||||
new bootstrap.Modal(document.getElementById('editFoodModal')).show();
|
||||
}
|
||||
|
||||
// Submit food form (add or edit)
|
||||
async function submitFoodForm(action) {
|
||||
const form = document.getElementById(action + 'FoodForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
const response = await fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
// Close modal and reload page
|
||||
bootstrap.Modal.getInstance(document.getElementById(action + 'FoodModal')).hide();
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error submitting form: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Delete selected foods
|
||||
async function deleteSelectedFoods() {
|
||||
const selected = Array.from(document.querySelectorAll('input[name="selected_foods"]:checked'))
|
||||
.map(checkbox => checkbox.value);
|
||||
|
||||
if (selected.length === 0) {
|
||||
alert('Please select foods to delete');
|
||||
return;
|
||||
}
|
||||
|
||||
if (confirm(`Delete ${selected.length} selected foods?`)) {
|
||||
try {
|
||||
const response = await fetch('/foods/delete', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify({food_ids: selected})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
} else {
|
||||
alert(`Delete failed: ${result.message || response.status}`);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Delete failed: ' + error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// CSV upload handling
|
||||
document.querySelector('form[action="/foods/upload"]').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
@@ -139,7 +323,6 @@ document.querySelector('form[action="/foods/upload"]').addEventListener('submit'
|
||||
|
||||
const results = await response.json();
|
||||
|
||||
// Always show results div even if no changes
|
||||
resultsDiv.style.display = 'block';
|
||||
document.getElementById('created-count').textContent = results.created || 0;
|
||||
document.getElementById('updated-count').textContent = results.updated || 0;
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
<!-- templates/meals.html -->
|
||||
{% extends "base.html" %}
|
||||
{% block content %}
|
||||
<div class="row">
|
||||
@@ -12,52 +11,9 @@
|
||||
<button type="submit" class="btn btn-secondary mb-4">Upload CSV</button>
|
||||
</form>
|
||||
|
||||
<h3>Create New Meal</h3>
|
||||
<form action="/meals/add" method="post">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Meal Name</label>
|
||||
<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>
|
||||
</select>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-primary">Create Meal</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-4">
|
||||
<h4>Add Food to Meal</h4>
|
||||
<form id="addFoodForm">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Meal</label>
|
||||
<select class="form-control" id="mealSelect">
|
||||
<option value="">Choose meal...</option>
|
||||
{% for meal in meals %}
|
||||
<option value="{{ meal.id }}">{{ meal.name }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Food</label>
|
||||
<select class="form-control" id="foodSelect">
|
||||
<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</label>
|
||||
<input type="number" step="0.1" class="form-control" id="quantity" value="1">
|
||||
</div>
|
||||
<button type="button" onclick="addFoodToMeal()" class="btn btn-success">Add Food</button>
|
||||
</form>
|
||||
</div>
|
||||
<button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#addMealModal">
|
||||
<i class="bi bi-plus-circle"></i> Create New Meal
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="col-md-8">
|
||||
@@ -70,6 +26,7 @@
|
||||
<th>Name</th>
|
||||
<th>Type</th>
|
||||
<th>Food Items</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
@@ -89,26 +46,267 @@
|
||||
<em>No foods added</em>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<button type="button" class="btn btn-sm btn-outline-primary"
|
||||
onclick="editMeal({{ meal.id }}, '{{ meal.name }}', '{{ meal.meal_type }}')">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</button>
|
||||
<button type="button" class="btn btn-sm btn-outline-success"
|
||||
onclick="manageMealFoods({{ meal.id }}, '{{ meal.name }}')">
|
||||
<i class="bi bi-list"></i> Foods
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<button class="btn btn-danger mt-3" onclick="deleteSelectedMeals()" style="margin-top: 20px !important;">
|
||||
<button class="btn btn-danger mt-3" onclick="deleteSelectedMeals()">
|
||||
<i class="bi bi-trash"></i> Delete Selected Meals
|
||||
</button>
|
||||
100| </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">Create New Meal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="addMealForm" action="/meals/add" method="post">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Meal Name</label>
|
||||
<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>
|
||||
</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="submitMealForm('add')">Create Meal</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Meal Modal -->
|
||||
<div class="modal fade" id="editMealModal" tabindex="-1" aria-labelledby="editMealModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editMealModalLabel">Edit Meal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<form id="editMealForm" action="/meals/edit" method="post">
|
||||
<input type="hidden" name="meal_id" id="edit_meal_id">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Meal Name</label>
|
||||
<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>
|
||||
</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="submitMealForm('edit')">Update Meal</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manage Meal Foods Modal -->
|
||||
<div class="modal fade" id="manageMealFoodsModal" tabindex="-1" aria-labelledby="manageMealFoodsModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="manageMealFoodsModalLabel">Manage Foods for Meal</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6>Add Food to Meal</h6>
|
||||
<form id="addFoodToMealForm">
|
||||
<input type="hidden" id="meal_id_for_food" name="meal_id">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Food</label>
|
||||
<select class="form-control" id="foodSelect" 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</label>
|
||||
<input type="number" step="0.01" class="form-control" name="quantity" value="1" required>
|
||||
</div>
|
||||
<button type="button" class="btn btn-success" onclick="addFoodToMeal()">Add Food</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6>Current Foods</h6>
|
||||
<div id="currentMealFoods">
|
||||
<!-- This will be populated dynamically -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleAllMeals(source) {
|
||||
console.log('Toggling all meals');
|
||||
const checkboxes = document.querySelectorAll('input[name="selected_meals"]');
|
||||
checkboxes.forEach(checkbox => checkbox.checked = source.checked);
|
||||
}
|
||||
|
||||
// Edit meal function
|
||||
function editMeal(id, name, meal_type) {
|
||||
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();
|
||||
}
|
||||
|
||||
// Manage meal foods function
|
||||
async function manageMealFoods(mealId, mealName) {
|
||||
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();
|
||||
}
|
||||
|
||||
// Load current meal foods
|
||||
async function loadCurrentMealFoods(mealId) {
|
||||
try {
|
||||
const response = await fetch(`/meals/${mealId}/foods`);
|
||||
const foods = await response.json();
|
||||
|
||||
const container = document.getElementById('currentMealFoods');
|
||||
if (foods.length === 0) {
|
||||
container.innerHTML = '<em>No foods added yet</em>';
|
||||
} 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>
|
||||
`).join('');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading meal foods:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Add food to meal
|
||||
async function addFoodToMeal() {
|
||||
const form = document.getElementById('addFoodToMealForm');
|
||||
const formData = new FormData(form);
|
||||
const mealId = formData.get('meal_id');
|
||||
|
||||
try {
|
||||
const response = await fetch(`/meals/${mealId}/add_food`, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
// Reset form and reload current foods
|
||||
form.reset();
|
||||
document.getElementById('meal_id_for_food').value = mealId;
|
||||
await loadCurrentMealFoods(mealId);
|
||||
} else {
|
||||
alert('Error adding food: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error adding food: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove food from meal
|
||||
async function removeFoodFromMeal(mealFoodId) {
|
||||
if (confirm('Remove this food from the meal?')) {
|
||||
try {
|
||||
const response = await fetch(`/meals/remove_food/${mealFoodId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
const mealId = document.getElementById('meal_id_for_food').value;
|
||||
await loadCurrentMealFoods(mealId);
|
||||
} else {
|
||||
alert('Error removing food: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error removing food: ' + error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Submit meal form (add or edit)
|
||||
async function submitMealForm(action) {
|
||||
const form = document.getElementById(action + 'MealForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
const response = await fetch(form.action, {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
// Close modal and reload page
|
||||
bootstrap.Modal.getInstance(document.getElementById(action + 'MealModal')).hide();
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error submitting form: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Delete selected meals
|
||||
async function deleteSelectedMeals() {
|
||||
console.log('Delete selected meals called');
|
||||
const selected = Array.from(document.querySelectorAll('input[name="selected_meals"]:checked'))
|
||||
.map(checkbox => checkbox.value);
|
||||
|
||||
@@ -119,7 +317,6 @@ async function deleteSelectedMeals() {
|
||||
|
||||
if (confirm(`Delete ${selected.length} selected meals?`)) {
|
||||
try {
|
||||
console.log('Deleting meals:', selected);
|
||||
const response = await fetch('/meals/delete', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
@@ -127,7 +324,6 @@ async function deleteSelectedMeals() {
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
console.log('Delete response:', result);
|
||||
|
||||
if (response.ok) {
|
||||
window.location.reload();
|
||||
@@ -135,7 +331,6 @@ async function deleteSelectedMeals() {
|
||||
alert(`Delete failed: ${result.message || response.status}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Delete failed:', error);
|
||||
alert('Delete failed: ' + error.message);
|
||||
}
|
||||
}
|
||||
@@ -183,4 +378,4 @@ document.querySelector('form[action="/meals/upload"]').addEventListener('submit'
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
@@ -6,36 +6,40 @@
|
||||
<table class="table table-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Meals</th>
|
||||
<th>Calories</th>
|
||||
<th>Protein</th>
|
||||
<th>Carbs</th>
|
||||
<th>Fat</th>
|
||||
<th>Net Carbs</th>
|
||||
<th>Calcium</th>
|
||||
<th>Sodium</th>
|
||||
<th>Actions</th>
|
||||
<th style="width: 10%;">Day</th>
|
||||
<th style="width: 25%;">Meals</th>
|
||||
<th style="width: 10%;">Calories</th>
|
||||
<th style="width: 12%;">Protein</th>
|
||||
<th style="width: 12%;">Carbs</th>
|
||||
<th style="width: 12%;">Fat</th>
|
||||
<th style="width: 9%;">Net Carbs</th>
|
||||
<th style="width: 10%;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for date in dates %}
|
||||
{% for day in days %}
|
||||
<tr>
|
||||
<td>{{ date.strftime('%m/%d') }}</td>
|
||||
<td><strong>{{ day }}</strong></td>
|
||||
<td>
|
||||
{% for plan in plans[date] %}
|
||||
{% for plan in plans[day] %}
|
||||
<span class="badge bg-secondary me-1">{{ plan.meal.name }}</span>
|
||||
{% endfor %}
|
||||
{% if not plans[day] %}
|
||||
<em class="text-muted">No meals</em>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ "%.0f"|format(daily_totals[date].calories or 0) }}</td>
|
||||
<td>{{ "%.1f"|format(daily_totals[date].protein or 0) }}g ({{ daily_totals[date].protein_pct or 0 }}%)</td>
|
||||
<td>{{ "%.1f"|format(daily_totals[date].carbs or 0) }}g ({{ daily_totals[date].carbs_pct or 0 }}%)</td>
|
||||
<td>{{ "%.1f"|format(daily_totals[date].fat or 0) }}g ({{ daily_totals[date].fat_pct or 0 }}%)</td>
|
||||
<td>{{ "%.1f"|format(daily_totals[date].net_carbs or 0) }}g</td>
|
||||
<td>{{ "%.0f"|format(daily_totals[date].calcium or 0) }}mg</td>
|
||||
<td>{{ "%.0f"|format(daily_totals[date].sodium or 0) }}mg</td>
|
||||
<td>{{ "%.0f"|format(daily_totals[day].calories or 0) }}</td>
|
||||
<td>{{ "%.1f"|format(daily_totals[day].protein or 0) }}g<br><small class="text-muted">({{ daily_totals[day].protein_pct or 0 }}%)</small></td>
|
||||
<td>{{ "%.1f"|format(daily_totals[day].carbs or 0) }}g<br><small class="text-muted">({{ daily_totals[day].carbs_pct or 0 }}%)</small></td>
|
||||
<td>{{ "%.1f"|format(daily_totals[day].fat or 0) }}g<br><small class="text-muted">({{ daily_totals[day].fat_pct or 0 }}%)</small></td>
|
||||
<td>{{ "%.1f"|format(daily_totals[day].net_carbs or 0) }}g</td>
|
||||
<td>
|
||||
<button class="btn btn-sm btn-primary" onclick="addMealToDay('{{ date }}')">Add Meal</button>
|
||||
<button class="btn btn-sm btn-primary" onclick="editDay('{{ day }}', '{{ person }}')">
|
||||
<i class="bi bi-pencil"></i> Edit
|
||||
</button>
|
||||
<button class="btn btn-sm btn-outline-success" onclick="quickAddMeal('{{ day }}')">
|
||||
<i class="bi bi-plus"></i> Add
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
@@ -43,17 +47,17 @@
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Add Meal Modal -->
|
||||
<div class="modal fade" id="addMealModal" tabindex="-1">
|
||||
<!-- Quick Add Meal Modal -->
|
||||
<div class="modal fade" id="quickAddMealModal" tabindex="-1" aria-labelledby="quickAddMealModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">Add Meal to Plan</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
<h5 class="modal-title" id="quickAddMealModalLabel">Add Meal to <span id="quickAddDay"></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="planDate" name="plan_date">
|
||||
<form id="quickAddMealForm">
|
||||
<input type="hidden" id="quickAddPlanDay" name="plan_day">
|
||||
<input type="hidden" name="person" value="{{ person }}">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Select Meal</label>
|
||||
@@ -68,20 +72,73 @@
|
||||
</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="submitMealToPlan()">Add Meal</button>
|
||||
<button type="button" class="btn btn-primary" onclick="submitQuickAddMeal()">Add Meal</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Edit Day Modal -->
|
||||
<div class="modal fade" id="editDayModal" tabindex="-1" aria-labelledby="editDayModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="editDayModalLabel">Edit Meals for <span id="editDayName"></span></h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<h6><i class="bi bi-list"></i> Current Meals</h6>
|
||||
<div id="currentDayMeals" class="mb-3">
|
||||
<!-- This will be populated dynamically -->
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<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>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<button type="button" class="btn btn-success btn-sm" onclick="addMealToCurrentDay()">
|
||||
<i class="bi bi-plus"></i> Add Selected Meal
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<h6><i class="bi bi-calculator"></i> Day Preview</h6>
|
||||
<div id="dayNutritionPreview" class="p-3 bg-light rounded">
|
||||
<!-- This will show live nutrition totals -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function addMealToDay(date) {
|
||||
document.getElementById('planDate').value = date;
|
||||
new bootstrap.Modal(document.getElementById('addMealModal')).show();
|
||||
let currentEditingDay = null;
|
||||
let currentEditingPerson = null;
|
||||
|
||||
// Quick add meal function
|
||||
function quickAddMeal(day) {
|
||||
document.getElementById('quickAddDay').textContent = day;
|
||||
document.getElementById('quickAddPlanDay').value = day;
|
||||
new bootstrap.Modal(document.getElementById('quickAddMealModal')).show();
|
||||
}
|
||||
|
||||
function submitMealToPlan() {
|
||||
const form = document.getElementById('addMealForm');
|
||||
function submitQuickAddMeal() {
|
||||
const form = document.getElementById('quickAddMealForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
fetch('/plan/add', {
|
||||
@@ -91,9 +148,126 @@ function submitMealToPlan() {
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
if (data.status === 'success') {
|
||||
bootstrap.Modal.getInstance(document.getElementById('quickAddMealModal')).hide();
|
||||
location.reload();
|
||||
} else {
|
||||
alert('Error: ' + data.message);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('Error: ' + error.message);
|
||||
});
|
||||
}
|
||||
|
||||
// Edit day function
|
||||
async function editDay(day, person) {
|
||||
currentEditingDay = day;
|
||||
currentEditingPerson = person;
|
||||
|
||||
document.getElementById('editDayName').textContent = day;
|
||||
document.getElementById('editDayPerson').value = person;
|
||||
document.getElementById('editDayValue').value = day;
|
||||
|
||||
// Load current meals for this day
|
||||
await loadCurrentDayMeals(person, day);
|
||||
|
||||
new bootstrap.Modal(document.getElementById('editDayModal')).show();
|
||||
}
|
||||
|
||||
// Load current meals for the day
|
||||
async function loadCurrentDayMeals(person, day) {
|
||||
try {
|
||||
const response = await fetch(`/plan/${person}/${day}`);
|
||||
const meals = await response.json();
|
||||
|
||||
const container = document.getElementById('currentDayMeals');
|
||||
if (meals.length === 0) {
|
||||
container.innerHTML = '<em class="text-muted">No meals planned</em>';
|
||||
} 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>
|
||||
<button class="btn btn-sm btn-outline-danger" onclick="removeMealFromDay(${meal.id})">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
// Update nutrition preview
|
||||
updateDayNutritionPreview(meals);
|
||||
} catch (error) {
|
||||
console.error('Error loading day meals:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Add meal to current day
|
||||
async function addMealToCurrentDay() {
|
||||
const form = document.getElementById('addMealToDayForm');
|
||||
const formData = new FormData(form);
|
||||
|
||||
try {
|
||||
const response = await fetch('/plan/add', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
// Reset meal selector
|
||||
document.getElementById('mealSelectForDay').value = '';
|
||||
|
||||
// Reload current meals
|
||||
await loadCurrentDayMeals(currentEditingPerson, currentEditingDay);
|
||||
} else {
|
||||
alert('Error adding meal: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error adding meal: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove meal from day
|
||||
async function removeMealFromDay(planId) {
|
||||
if (confirm('Remove this meal from the day?')) {
|
||||
try {
|
||||
const response = await fetch(`/plan/${planId}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.status === 'success') {
|
||||
await loadCurrentDayMeals(currentEditingPerson, currentEditingDay);
|
||||
} else {
|
||||
alert('Error removing meal: ' + result.message);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('Error removing meal: ' + error.message);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Update nutrition preview (simplified - you could enhance this with actual calculations)
|
||||
function updateDayNutritionPreview(meals) {
|
||||
const preview = document.getElementById('dayNutritionPreview');
|
||||
preview.innerHTML = `
|
||||
<div class="text-center">
|
||||
<div class="mb-2">
|
||||
<strong>${meals.length}</strong> meals planned
|
||||
</div>
|
||||
<small class="text-muted">
|
||||
Nutrition totals will be calculated when page reloads
|
||||
</small>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
// Handle modal cleanup
|
||||
document.getElementById('editDayModal').addEventListener('hidden.bs.modal', function () {
|
||||
// Reload the page to refresh all totals
|
||||
location.reload();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user