Add new daily log dashboard and macro summary

Introduces a new route and template for an enhanced daily log dashboard with macro nutrient summary. Refactors FoodItem model to add type annotations and a macros() method, and updates form handling to default missing values to zero. Also adds a navigation link to the new dashboard in the base template.
This commit is contained in:
2025-08-14 02:49:06 +02:00
parent c7395b07d9
commit 85297daaaf
6 changed files with 133 additions and 24 deletions

View File

@@ -0,0 +1,55 @@
{% extends 'base.html' %}
{% block title %}Daily Calorie Dashboard{% endblock %}
{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/macros.css') }}">
<div class="container my-4">
<h2 class="mb-3">Daily Calorie Dashboard</h2>
<!-- Macro Summary -->
<div class="card p-3 mb-3">
<h5>Macros</h5>
{% for macro in macros %}
<div class="mb-2">
<span class="macro-text">{{ macro.name }}: {{ macro.current }} / {{ macro.target }}</span>
<div class="progress rounded" style="height: 24px;">
<div class="progress-bar bg-danger macro-bar" role="progressbar"
style="width: {{ macro.percent - 100 if macro.percent > 100 else 0}}%">
{{ macro.current }}{{ macro.unit }}
</div>
<div class="progress-bar bg-success macro-bar" role="progressbar"
style="width: {{ 0 if macro.percent > 200 else 200 - macro.percent if macro.percent > 100 else macro.percent }}%">
{{ macro.current }}{{ macro.unit }}
</div>
</div>
</div>
{% endfor %}
</div>
<!-- Items List -->
<div class="card p-3">
<h5>Items Eaten Today</h5>
<div class="list-group list-group-flush">
{% for log in logs %}
<div class="list-group-item item-row d-flex justify-content-between align-items-center bg-dark text-light">
{{ log.food_item.name }}
<span>{{ log.food_item.energy_100 }} kcal, {{ log.food_item.protein_100 }}g P, {{
log.food_item.carbs_100 }}g C,
{{ log.food_item.fat_100 }}g F</span>
</div>
{% endfor %}
</div>
</div>
</div>
<!-- Bottom Navigation Buttons -->
<div class="container my-4">
<div class="d-flex justify-content-between">
<a href="" class="btn btn-outline-light flex-fill me-1">Previous Day</a>
<a href="" class="btn btn-outline-light flex-fill mx-1">+ Add Item</a>
<a href="" class="btn btn-outline-light flex-fill ms-1">Next Day</a>
</div>
</div>
{% endblock %}