mirror of
https://github.com/StefBuwalda/cal_counter.git
synced 2025-10-29 19:00:00 +00:00
e934633370
* Adjusted GUI of daily dashboard to better deal with float values * Change password + New base (#10) * created a new Base template to test with * Changed out the base and added a new password page * Password change works, UI needs redisgn * Daily log now sums up amount per item in a day
81 lines
2.7 KiB
HTML
81 lines
2.7 KiB
HTML
{% extends 'base.html' %}
|
||
|
||
{% block title %}Daily Calorie Dashboard{% endblock %}
|
||
|
||
{% block content %}
|
||
<div class="container my-4">
|
||
<h2 class="mb-3">Daily Calorie Dashboard ({{ today }})</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 | int }} / {{ macro.target }}</span>
|
||
<div class="progress rounded" style="height: 24px;">
|
||
<div class="progress-bar bg-danger macro-bar" role="progressbar"
|
||
style="width: {{ macro.bar_width_overflow }}%">
|
||
{{ (macro.current - macro.target) | int}}{{ macro.unit }}
|
||
</div>
|
||
<div class="progress-bar bg-success macro-bar" role="progressbar" style="width: {{ macro.bar_width }}%">
|
||
{{ min(macro.current, macro.target) | int }}{{ 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 food_item, amount in logs %}
|
||
<div class="list-group-item d-flex align-items-center">
|
||
<!-- Weight: fixed width, right-aligned -->
|
||
<span class="text-end" style="width: 6ch; flex-shrink: 0;">
|
||
({{ amount | int }}g)
|
||
</span>
|
||
|
||
<!-- Food name: flexible, truncates if too long -->
|
||
<span class="text-truncate flex-grow-1"
|
||
style="min-width: 0; margin-left: 0.5rem; margin-right: 0.5rem;">
|
||
{{ food_item.name }}
|
||
</span>
|
||
|
||
<!-- kcal: fixed width, right-aligned, pushed to the right -->
|
||
<span class="d-inline-block text-end ms-auto" style="width: 9ch; flex-shrink: 0;">
|
||
{{ (food_item.energy_100 * amount / 100) | int }} kcal
|
||
</span>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
<!-- Bottom Navigation Buttons -->
|
||
<div class="container-fluid fixed-bottom py-2">
|
||
<div class="d-flex p-3">
|
||
<!-- Left Button -->
|
||
<a href="" class="btn card flex-fill me-2 rounded-pill">
|
||
‹ Previous
|
||
</a>
|
||
|
||
<!-- Center Button (highlighted) -->
|
||
<a id="set_link_date" href="{{ url_for('add_meal.find_item') }}"
|
||
class="btn btn-success flex-fill mx-2 fw-bold rounded-pill">
|
||
＋ Add Item
|
||
</a>
|
||
|
||
<!-- Right Button -->
|
||
<a href="" class="btn card flex-fill ms-2 rounded-pill">
|
||
Next ›
|
||
</a>
|
||
</div>
|
||
</div>
|
||
|
||
{% endblock %} |