mirror of
https://github.com/StefBuwalda/cal_counter.git
synced 2025-10-29 19:00:00 +00:00
Stef
85297daaaf
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.
55 lines
2.1 KiB
HTML
55 lines
2.1 KiB
HTML
{% 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 %} |