mirror of
https://github.com/sstent/foodplanner.git
synced 2025-12-06 08:01:47 +00:00
523 lines
20 KiB
HTML
523 lines
20 KiB
HTML
<!-- templates/base.html -->
|
||
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<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">
|
||
<style>
|
||
.nav-tabs .nav-link.active {
|
||
background-color: #0d6efd;
|
||
color: white;
|
||
}
|
||
.nutrition-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
|
||
gap: 10px;
|
||
margin: 10px 0;
|
||
}
|
||
.nutrition-item {
|
||
text-align: center;
|
||
padding: 8px;
|
||
background-color: #f8f9fa;
|
||
border-radius: 4px;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="container-fluid">
|
||
<!-- <h1 class="mt-3 mb-4">Meal Planner</h1> -->
|
||
|
||
<div class="d-flex justify-content-between align-items-center">
|
||
<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>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" onclick="location.href='/meals'">Meals</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" onclick="location.href='/plan'">Plan A</button>
|
||
</li>
|
||
<li class="nav-item" role="presentation">
|
||
<button class="nav-link" onclick="location.href='/detailed'">Detailed Planner</button>
|
||
</li>
|
||
</ul>
|
||
<div class="person-toggle">
|
||
<select id="personSelect" class="form-select" onchange="switchPerson()">
|
||
<option value="Sarah" {% if person == "Sarah" %}selected{% endif %}>Sarah</option>
|
||
<option value="Stuart" {% if person == "Stuart" %}selected{% endif %}>Stuart</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-content mt-3">
|
||
{% block content %}{% endblock %}
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script>
|
||
function switchPerson() {
|
||
const person = document.getElementById('personSelect').value;
|
||
localStorage.setItem('selectedPerson', person);
|
||
const currentUrl = new URL(window.location);
|
||
currentUrl.searchParams.set('person', person);
|
||
window.location.href = currentUrl.toString();
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
<!-- templates/index.html -->
|
||
{% extends "base.html" %}
|
||
{% block content %}
|
||
<div class="row">
|
||
<div class="col-12">
|
||
<h2>Welcome to Meal Planner</h2>
|
||
<p>Use the tabs above to navigate:</p>
|
||
<ul>
|
||
<li><strong>Foods</strong> - Manage your food database with nutritional information</li>
|
||
<li><strong>Meals</strong> - Create meals by combining foods</li>
|
||
<li><strong>Plan A</strong> - Create 2-week meal plans with daily totals</li>
|
||
<li><strong>Detailed Planner</strong> - View detailed breakdown for a specific day</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
<!-- templates/foods.html -->
|
||
{% extends "base.html" %}
|
||
{% block content %}
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<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>
|
||
</div>
|
||
|
||
<div class="col-md-8">
|
||
<h3>Foods Database</h3>
|
||
<div class="table-responsive">
|
||
<table class="table table-striped">
|
||
<thead>
|
||
<tr>
|
||
<th>Name</th>
|
||
<th>Serving</th>
|
||
<th>Cal</th>
|
||
<th>Protein</th>
|
||
<th>Carbs</th>
|
||
<th>Fat</th>
|
||
<th>Fiber</th>
|
||
<th>Sodium</th>
|
||
<th>Calcium</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for food in foods %}
|
||
<tr>
|
||
<td>{{ food.name }}</td>
|
||
<td>{{ food.serving_size }} {{ food.serving_unit }}</td>
|
||
<td>{{ "%.1f"|format(food.calories) }}</td>
|
||
<td>{{ "%.1f"|format(food.protein) }}g</td>
|
||
<td>{{ "%.1f"|format(food.carbs) }}g</td>
|
||
<td>{{ "%.1f"|format(food.fat) }}g</td>
|
||
<td>{{ "%.1f"|format(food.fiber) }}g</td>
|
||
<td>{{ "%.1f"|format(food.sodium) }}mg</td>
|
||
<td>{{ "%.1f"|format(food.calcium) }}mg</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
<!-- templates/meals.html -->
|
||
{% extends "base.html" %}
|
||
{% block content %}
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<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>
|
||
</div>
|
||
|
||
<div class="col-md-8">
|
||
<h3>Meals</h3>
|
||
{% for meal in meals %}
|
||
<div class="card mb-3">
|
||
<div class="card-header">
|
||
<strong>{{ meal.name }}</strong> - {{ meal.meal_type.title() }}
|
||
</div>
|
||
<div class="card-body">
|
||
{% if meal.meal_foods %}
|
||
<ul>
|
||
{% for meal_food in meal.meal_foods %}
|
||
<li>{{ meal_food.quantity }} × {{ meal_food.food.name }}</li>
|
||
{% endfor %}
|
||
</ul>
|
||
{% else %}
|
||
<em>No foods added yet</em>
|
||
{% endif %}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function addFoodToMeal() {
|
||
const mealId = document.getElementById('mealSelect').value;
|
||
const foodId = document.getElementById('foodSelect').value;
|
||
const quantity = document.getElementById('quantity').value;
|
||
|
||
if (!mealId || !foodId || !quantity) {
|
||
alert('Please fill all fields');
|
||
return;
|
||
}
|
||
|
||
const formData = new FormData();
|
||
formData.append('food_id', foodId);
|
||
formData.append('quantity', quantity);
|
||
|
||
fetch(`/meals/${mealId}/add_food`, {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
location.reload();
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
{% endblock %}
|
||
|
||
<!-- templates/plan.html -->
|
||
{% extends "base.html" %}
|
||
{% block content %}
|
||
<h3>2-Week Plan for {{ person }}</h3>
|
||
|
||
<div class="table-responsive">
|
||
<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>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for date in dates %}
|
||
<tr>
|
||
<td>{{ date.strftime('%m/%d') }}</td>
|
||
<td>
|
||
{% for plan in plans[date] %}
|
||
<span class="badge bg-secondary me-1">{{ plan.meal.name }}</span>
|
||
{% endfor %}
|
||
</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>
|
||
<button class="btn btn-sm btn-primary" onclick="addMealToDay('{{ date }}')">Add Meal</button>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
<!-- Add Meal Modal -->
|
||
<div class="modal fade" id="addMealModal" tabindex="-1">
|
||
<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>
|
||
</div>
|
||
<div class="modal-body">
|
||
<form id="addMealForm">
|
||
<input type="hidden" id="planDate" 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>
|
||
{% 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">
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
function addMealToDay(date) {
|
||
document.getElementById('planDate').value = date;
|
||
new bootstrap.Modal(document.getElementById('addMealModal')).show();
|
||
}
|
||
|
||
function submitMealToPlan() {
|
||
const form = document.getElementById('addMealForm');
|
||
const formData = new FormData(form);
|
||
|
||
fetch('/plan/add', {
|
||
method: 'POST',
|
||
body: formData
|
||
})
|
||
.then(response => response.json())
|
||
.then(data => {
|
||
if (data.status === 'success') {
|
||
location.reload();
|
||
}
|
||
});
|
||
}
|
||
</script>
|
||
{% endblock %}
|
||
|
||
<!-- templates/detailed.html -->
|
||
{% extends "base.html" %}
|
||
{% block content %}
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<h3>Detailed View for {{ person }}</h3>
|
||
<form method="get">
|
||
<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>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<h4>{{ selected_date.strftime('%A, %B %d, %Y') }}</h4>
|
||
|
||
{% 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>
|
||
<div class="card-body">
|
||
<h6>Foods:</h6>
|
||
<ul>
|
||
{% 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>
|
||
{% endfor %}
|
||
</ul>
|
||
|
||
<div class="nutrition-grid">
|
||
<div class="nutrition-item">
|
||
<strong>{{ "%.0f"|format(meal_detail.nutrition.calories) }}</strong><br>
|
||
<small>Calories</small>
|
||
</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>
|
||
<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>
|
||
<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>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{% 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>
|
||
</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.
|
||
</div>
|
||
{% endif %}
|
||
|
||
{% endblock %} |