sstent/foodplanner
1
0
Fork 0
mirror of https://github.com/sstent/foodplanner.git synced 2026-01-25 11:11:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

adding macro details to tracker, changing charts to stacked bar chart of macros

Browse Source
This commit is contained in:
sstent
2026-01-06 06:49:43 -08:00
parent e91611d441
commit 70b45ede71
5 changed files with 339 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
templates/charts.html
View File

@@ -5,7 +5,7 @@
{% block content %}
<div class="container mt-4 d-flex flex-column min-vh-100">
<h2><i class="bi bi-graph-up"></i> Daily Calories Chart</h2>
<div class="row mb-4">
<div class="col-md-6">
<div class="card">
@@ -22,7 +22,7 @@
</div>
</div>
</div>
<div class="row flex-grow-1">
<div class="col-md-12 h-100">
<div class="card h-100">
@@ -40,8 +40,10 @@
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script>
let chart;
const MACRO_KEYS = ['net_carbs', 'fat', 'protein'];
function resizeChart() {
const container = document.getElementById('chartContainer');
@@ -51,7 +53,12 @@
}
}
document.addEventListener('DOMContentLoaded', function() {
document.addEventListener('DOMContentLoaded', function () {
// Register the plugin
if (typeof ChartDataLabels !== 'undefined') {
Chart.register(ChartDataLabels);
}
const daysSelect = document.getElementById('daysSelect');
const loadBtn = document.getElementById('loadChartBtn');
const ctx = document.getElementById('caloriesChart').getContext('2d');
@@ -63,7 +70,7 @@
// Default load for 7 days
loadChart(7);
loadBtn.addEventListener('click', function() {
loadBtn.addEventListener('click', function () {
const selectedDays = parseInt(daysSelect.value);
loadChart(selectedDays);
});
@@ -76,7 +83,14 @@
data.sort((a, b) => new Date(a.date) - new Date(b.date));
const labels = data.map(item => item.date);
const calories = data.map(item => item.calories);
// Calculate calories from macros
// Protein: 4 cals/g
// Fat: 9 cals/g
// Net Carbs: 4 cals/g
const proteinCals = data.map(item => item.protein * 4);
const fatCals = data.map(item => item.fat * 9);
const netCarbsCals = data.map(item => item.net_carbs * 4);
if (chart) {
chart.destroy();
@@ -86,17 +100,32 @@
resizeChart();
chart = new Chart(ctx, {
type: 'line',
type: 'bar', // Switch to bar chart
data: {
labels: labels,
datasets: [{
label: 'Calories',
data: calories,
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.2)',
tension: 0.1,
fill: true
}]
datasets: [
{
label: 'Net Carbs',
data: netCarbsCals,
backgroundColor: 'rgba(255, 193, 7, 0.8)', // Bootstrap warning (Yellow)
borderColor: '#ffc107',
borderWidth: 1
},
{
label: 'Fat',
data: fatCals,
backgroundColor: 'rgba(220, 53, 69, 0.8)', // Bootstrap danger (Red)
borderColor: '#dc3545',
borderWidth: 1
},
{
label: 'Protein',
data: proteinCals,
backgroundColor: 'rgba(25, 135, 84, 0.8)', // Bootstrap success (Green)
borderColor: '#198754',
borderWidth: 1
}
]
},
options: {
responsive: true,
@@ -104,17 +133,69 @@
scales: {
y: {
beginAtZero: true,
stacked: true, // Enable stacking for Y axis
title: {
display: true,
text: 'Calories'
}
},
x: {
stacked: true, // Enable stacking for X axis
title: {
display: true,
text: 'Date'
}
}
},
plugins: {
tooltip: {
callbacks: {
label: function (context) {
let label = context.dataset.label || '';
if (label) {
label += ': ';
}
if (context.parsed.y !== null) {
const dayData = data[context.dataIndex];
const macroKey = MACRO_KEYS[context.datasetIndex];
const grams = dayData[macroKey];
label += Math.round(context.parsed.y) + ' cals (' + Math.round(grams) + 'g)';
}
return label;
}
}
},
datalabels: {
color: 'white',
font: {
weight: 'bold',
size: 11
},
display: function (context) {
const dayData = data[context.dataIndex];
const pC = dayData.protein * 4;
const fC = dayData.fat * 9;
const ncC = dayData.net_carbs * 4;
const calcTotal = pC + fC + ncC;
const value = context.dataset.data[context.dataIndex];
return calcTotal > 0 && (value / calcTotal) > 0.05;
},
formatter: function (value, context) {
const dayData = data[context.dataIndex];
const pC = dayData.protein * 4;
const fC = dayData.fat * 9;
const ncC = dayData.net_carbs * 4;
const calcTotal = pC + fC + ncC;
const totalCals = calcTotal || 1;
const percent = Math.round((value / totalCals) * 100);
const macroKey = MACRO_KEYS[context.datasetIndex];
const grams = Math.round(dayData[macroKey]);
return grams + 'g\n' + percent + '%';
}
}
}
}
});

261
templates/tracker.html
View File

@@ -4,7 +4,8 @@
<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 }}')" data-testid="navigate-yesterday">
<button class="btn btn-outline-secondary" onclick="navigateDate('{{ prev_date }}')"
data-testid="navigate-yesterday">
<i class="bi bi-chevron-left"></i> Yesterday
</button>
<div class="text-center">
@@ -15,7 +16,8 @@
<span class="badge bg-success">As Planned</span>
{% endif %}
</div>
<button class="btn btn-outline-secondary" onclick="navigateDate('{{ next_date }}')" data-testid="navigate-tomorrow">
<button class="btn btn-outline-secondary" onclick="navigateDate('{{ next_date }}')"
data-testid="navigate-tomorrow">
Tomorrow <i class="bi bi-chevron-right"></i>
</button>
</div>
@@ -45,10 +47,12 @@
<div class="card-header d-flex justify-content-between align-items-center">
<h5 class="mb-0">{{ meal_time }}</h5>
<div class="d-flex gap-2">
<button class="btn btn-sm btn-outline-success" onclick="addMealToTime('{{ meal_time }}')" data-testid="add-meal-{{ meal_time|slugify }}">
<button class="btn btn-sm btn-outline-success" onclick="addMealToTime('{{ meal_time }}')"
data-testid="add-meal-{{ meal_time|slugify }}">
<i class="bi bi-plus"></i> Add Meal
</button>
<button class="btn btn-sm btn-info text-white" onclick="addSingleFoodToTime('{{ meal_time }}')" data-testid="add-food-{{ meal_time|slugify }}">
<button class="btn btn-sm btn-info text-white" onclick="addSingleFoodToTime('{{ meal_time }}')"
data-testid="add-food-{{ meal_time|slugify }}">
<i class="bi bi-plus-circle"></i> Add Food
</button>
</div>
@@ -57,89 +61,166 @@
<div id="meals-{{ meal_time|slugify }}">
{% 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 %}
{% 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 %}
{# 1. Create stable slugs #}
{% set meal_time_slug = meal_time|slugify %}
{% set meal_name_safe = tracked_meal.meal.name|slugify %}
{# 2. Construct the core Unique Meal ID for non-ambiguous locating #}
{% set unique_meal_id = meal_time_slug + '-' + meal_name_safe + '-' + loop.index|string %}
<div class="mb-3 p-3 bg-light rounded" data-testid="meal-card-{{ unique_meal_id }}">
<div class="d-flex justify-content-between align-items-center mb-2">
<div>
<strong data-testid="meal-name-{{ unique_meal_id }}">{{ tracked_meal.meal.name }}</strong>
</div>
<div>
<button class="btn btn-sm btn-outline-secondary me-1" onclick="editTrackedMeal('{{ tracked_meal.id }}')" title="Edit Meal" data-testid="edit-meal-{{ unique_meal_id }}">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-outline-danger" onclick="removeMeal('{{ tracked_meal.id }}')" data-testid="delete-meal-{{ unique_meal_id }}">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
<!-- Food Breakdown -->
<div class="ms-3">
<div class="row row-cols-1 row-cols-sm-2">
{% set overrides = {} %}
{% set all_override_ids = [] %}
{% set deleted_food_ids = [] %}
{% for tmf in tracked_meal.tracked_foods %}
{% if not tmf.is_deleted %}
{% set _ = overrides.update({tmf.food_id: tmf}) %}
{% else %}
{% set _ = deleted_food_ids.append(tmf.food_id) %}
{% endif %}
{% set _ = all_override_ids.append(tmf.food_id) %}
{% endfor %}
{% for tracked_meal in meals_for_time %}
{# 1. Create stable slugs #}
{% set meal_time_slug = meal_time|slugify %}
{% set meal_name_safe = tracked_meal.meal.name|slugify %}
{% set displayed_food_ids = [] %}
{# Display base meal foods, applying overrides #}
{% for meal_food in tracked_meal.meal.meal_foods %}
{# Only show base meal food if it's not deleted and there's no active override for it #}
{% if meal_food.food_id not in deleted_food_ids and meal_food.food_id not in overrides.keys() %}
<div class="col">
{% set food_name_safe = meal_food.food.name|slugify %}
<div class="d-flex justify-content-between small text-muted" data-testid="food-display-{{ unique_meal_id }}-{{ food_name_safe }}-{{ loop.index }}">
<span>• {{ meal_food.food.name }}</span>
<span class="text-end">{{ meal_food.quantity }} {{ meal_food.food.serving_unit }}</span>
</div>
</div>
{% else %}
<!-- DEBUG: meal_food {{ meal_food.food_id }} - {{ meal_food.food.name }} - in deleted_food_ids: {{ meal_food.food_id in deleted_food_ids }}, in overrides: {{ meal_food.food_id in overrides.keys() }} -->
{% endif %}
{% set _ = displayed_food_ids.append(meal_food.food_id) %}
{% endfor %}
{# Display overridden and new foods #}
{% for food_id, tmf in overrides.items() %}
{% set food_name_safe = tmf.food.name|slugify %}
<div class="col">
<div class="d-flex justify-content-between small text-muted" data-testid="food-display-{{ unique_meal_id }}-{{ food_name_safe }}-{{ loop.index }}">
<span>• {{ tmf.food.name }}</span>
<span class="text-end">{{ tmf.quantity }} g</span>
</div>
</div>
{% endfor %}
</div>
{% if not tracked_meal.meal.meal_foods %}
<div class="col-12">
<div class="small text-muted">No foods in this meal</div>
</div>
{% endif %}
{# 2. Construct the core Unique Meal ID for non-ambiguous locating #}
{% set unique_meal_id = meal_time_slug + '-' + meal_name_safe + '-' + loop.index|string %}
<div class="mb-3 p-3 bg-light rounded" data-testid="meal-card-{{ unique_meal_id }}">
<div class="d-flex justify-content-between align-items-center mb-2">
<div>
<strong data-testid="meal-name-{{ unique_meal_id }}">{{ tracked_meal.meal.name
}}</strong>
</div>
<div>
<button class="btn btn-sm btn-outline-secondary me-1"
onclick="editTrackedMeal('{{ tracked_meal.id }}')" title="Edit Meal"
data-testid="edit-meal-{{ unique_meal_id }}">
<i class="bi bi-pencil"></i>
</button>
<button class="btn btn-sm btn-outline-danger"
onclick="removeMeal('{{ tracked_meal.id }}')"
data-testid="delete-meal-{{ unique_meal_id }}">
<i class="bi bi-trash"></i>
</button>
</div>
</div>
{% endfor %}
<!-- Food Breakdown -->
<div class="ms-3">
{% set overrides = {} %}
{% set all_override_ids = [] %}
{% set deleted_food_ids = [] %}
{% for tmf in tracked_meal.tracked_foods %}
{% if not tmf.is_deleted %}
{% set _ = overrides.update({tmf.food_id: tmf}) %}
{% else %}
{% set _ = deleted_food_ids.append(tmf.food_id) %}
{% endif %}
{% set _ = all_override_ids.append(tmf.food_id) %}
{% endfor %}
{% set meal_totals = {'carbs': 0, 'fiber': 0, 'fat': 0, 'protein': 0, 'calories': 0} %}
{% set state = {'has_foods': False} %}
<div class="table-responsive">
<table class="table table-sm table-striped small mb-0">
<thead>
<tr>
<th style="width: 40%">Food</th>
<th class="text-end">Carbs</th>
<th class="text-end">Net Carbs</th>
<th class="text-end">Fat</th>
<th class="text-end">Protein</th>
<th class="text-end">Cals</th>
</tr>
</thead>
<tbody>
{# Display base meal foods, applying overrides #}
{% for meal_food in tracked_meal.meal.meal_foods %}
{% if meal_food.food_id not in deleted_food_ids and meal_food.food_id not in
overrides.keys() %}
{% set _ = state.update({'has_foods': True}) %}
{% set food = meal_food.food %}
{% set qty = meal_food.quantity %}
{% set mult = qty / food.serving_size if food.serving_size > 0 else 0 %}
{% set row_carbs = (food.carbs or 0) * mult %}
{% set row_fiber = (food.fiber or 0) * mult %}
{% set row_fat = (food.fat or 0) * mult %}
{% set row_protein = (food.protein or 0) * mult %}
{% set row_cals = (food.calories or 0) * mult %}
{# Accumulate Totals #}
{% set _ = meal_totals.update({'carbs': meal_totals.carbs + row_carbs}) %}
{% set _ = meal_totals.update({'fiber': meal_totals.fiber + row_fiber}) %}
{% set _ = meal_totals.update({'fat': meal_totals.fat + row_fat}) %}
{% set _ = meal_totals.update({'protein': meal_totals.protein + row_protein}) %}
{% set _ = meal_totals.update({'calories': meal_totals.calories + row_cals}) %}
{% set food_name_safe = food.name|slugify %}
<tr data-testid="food-row-{{ unique_meal_id }}-{{ food_name_safe }}">
<td>
{{ food.name }}
<span class="text-muted ms-1">({{ qty|round(1) }} {{ food.serving_unit
}})</span>
</td>
<td class="text-end">{{ "%.1f"|format(row_carbs) }}g</td>
<td class="text-end">{{ "%.1f"|format(row_carbs - row_fiber) }}g</td>
<td class="text-end">{{ "%.1f"|format(row_fat) }}g</td>
<td class="text-end">{{ "%.1f"|format(row_protein) }}g</td>
<td class="text-end fw-bold">{{ "%.0f"|format(row_cals) }}</td>
</tr>
{% endif %}
{% endfor %}
{# Display overridden/new foods #}
{% for food_id, tmf in overrides.items() %}
{% set _ = state.update({'has_foods': True}) %}
{% set food = tmf.food %}
{% set qty = tmf.quantity %}
{# Overrides are always in grams #}
{% set mult = qty / food.serving_size if food.serving_size > 0 else 0 %}
{% set row_carbs = (food.carbs or 0) * mult %}
{% set row_fiber = (food.fiber or 0) * mult %}
{% set row_fat = (food.fat or 0) * mult %}
{% set row_protein = (food.protein or 0) * mult %}
{% set row_cals = (food.calories or 0) * mult %}
{# Accumulate Totals #}
{% set _ = meal_totals.update({'carbs': meal_totals.carbs + row_carbs}) %}
{% set _ = meal_totals.update({'fiber': meal_totals.fiber + row_fiber}) %}
{% set _ = meal_totals.update({'fat': meal_totals.fat + row_fat}) %}
{% set _ = meal_totals.update({'protein': meal_totals.protein + row_protein}) %}
{% set _ = meal_totals.update({'calories': meal_totals.calories + row_cals}) %}
{% set food_name_safe = food.name|slugify %}
<tr class="table-info"
data-testid="food-row-{{ unique_meal_id }}-{{ food_name_safe }}">
<td>
{{ food.name }} <i class="bi bi-pencil-fill x-small text-muted"
title="Custom Quantity"></i>
<span class="text-muted ms-1">({{ qty|round(1) }} g)</span>
</td>
<td class="text-end">{{ "%.1f"|format(row_carbs) }}g</td>
<td class="text-end">{{ "%.1f"|format(row_carbs - row_fiber) }}g</td>
<td class="text-end">{{ "%.1f"|format(row_fat) }}g</td>
<td class="text-end">{{ "%.1f"|format(row_protein) }}g</td>
<td class="text-end fw-bold">{{ "%.0f"|format(row_cals) }}</td>
</tr>
{% endfor %}
{% if not state.has_foods %}
<tr>
<td colspan="6" class="text-center text-muted">No foods in this meal</td>
</tr>
{% else %}
{# Summary Row #}
<tr class="table-secondary fw-bold">
<td>Total</td>
<td class="text-end">{{ "%.1f"|format(meal_totals.carbs) }}g</td>
<td class="text-end">{{ "%.1f"|format(meal_totals.carbs - meal_totals.fiber)
}}g</td>
<td class="text-end">{{ "%.1f"|format(meal_totals.fat) }}g</td>
<td class="text-end">{{ "%.1f"|format(meal_totals.protein) }}g</td>
<td class="text-end">{{ "%.0f"|format(meal_totals.calories) }}</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
{% endfor %}
{% else %}
<p class="text-muted mb-0">No meals tracked</p>
<p class="text-muted mb-0">No meals tracked</p>
{% endif %}
</div>
@@ -380,10 +461,10 @@
const response = await fetch(`/tracker/get_tracked_meal_foods/${trackedMealId}`);
const data = await response.json();
console.log('Response from get_tracked_meal_foods:', data);
const container = document.getElementById('editMealFoodsList');
container.innerHTML = '';
if (data.status === 'success') {
if (data.meal_foods.length === 0) {
container.innerHTML = '<em>No foods added yet</em>';
@@ -434,7 +515,7 @@
async function saveTrackedMeal() {
const trackedMealId = document.getElementById('editTrackedMealId').value;
const inputs = document.querySelectorAll('#editMealFoodsList input[type="number"]');
const foods = [];
inputs.forEach(input => {
const foodData = {
@@ -453,7 +534,7 @@
};
console.log('Payload being sent to /tracker/update_tracked_meal_foods:', JSON.stringify(payload, null, 2));
try {
const response = await fetch('/tracker/update_tracked_meal_foods', {
method: 'POST',
@@ -477,10 +558,10 @@
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({
@@ -488,7 +569,7 @@
quantity: parseFloat(input.value) // Quantity is now grams
});
});
try {
const response = await fetch('/tracker/save_as_new_meal', {
method: 'POST',
@@ -499,9 +580,9 @@
foods: foods
})
});
const result = await response.json();
if (result.status === 'success') {
bootstrap.Modal.getInstance(document.getElementById('editTrackedMealModal')).hide();
alert('New meal saved successfully!');
@@ -545,7 +626,7 @@
alert('Error: ' + error.message);
}
}
// Reset page (clear all meals and foods)
async function resetPage() {
if (confirm('Are you sure you want to clear all meals and foods for this day? This action cannot be undone.')) {