Moved the bar width calculation from jinja to the dashboard values generation

This commit is contained in:
2025-08-14 03:15:02 +02:00
parent 85297daaaf
commit 2454bc61cb
2 changed files with 41 additions and 21 deletions

View File

@@ -25,39 +25,47 @@ user_bp = Blueprint(
def macro_arr_to_json(data: list[float]): def macro_arr_to_json(data: list[float]):
assert len(data) == 4 assert len(data) == 4
cal = data[0]
pro = data[3]
car = data[2]
fat = data[1]
macros = [ macros = [
{ {
"name": "Calories", "name": "Calories",
"current": data[0], "current": cal,
"target": 2000, "target": 2000,
"percent": data[0] / 20, "bar_width": 100 - abs(cal / 20 - 100),
"bar_width_overflow": max(0, cal / 20 - 100),
"unit": " kcal", "unit": " kcal",
"color": "bg-calories", "color": "bg-calories",
"overflow_color": "bg-calories-dark", "overflow_color": "bg-calories-dark",
}, },
{ {
"name": "Protein", "name": "Protein",
"current": data[3], "current": pro,
"target": 150, "target": 150,
"percent": data[3] / 1.5, "bar_width": 100 - abs(pro / 1.5 - 100),
"bar_width_overflow": max(0, pro / 1.5 - 100),
"unit": "g", "unit": "g",
"color": "bg-protein", "color": "bg-protein",
"overflow_color": "bg-protein-dark", "overflow_color": "bg-protein-dark",
}, },
{ {
"name": "Carbs", "name": "Carbs",
"current": data[2], "current": car,
"target": 250, "target": 250,
"percent": data[2] / 2.5, "bar_width": 100 - abs(car / 2.5 - 100),
"bar_width_overflow": max(0, car / 2.5 - 100),
"unit": "g", "unit": "g",
"color": "bg-carbs", "color": "bg-carbs",
"overflow_color": "bg-carbs-dark", "overflow_color": "bg-carbs-dark",
}, },
{ {
"name": "Fat", "name": "Fat",
"current": data[1], "current": fat,
"target": 70, "target": 70,
"percent": data[1] / 0.7, "bar_width": 100 - abs(fat / 0.7 - 100),
"bar_width_overflow": max(0, fat / 0.7 - 100),
"unit": "g", "unit": "g",
"color": "bg-fat", "color": "bg-fat",
"overflow_color": "bg-fat-dark", "overflow_color": "bg-fat-dark",

View File

@@ -16,11 +16,10 @@
<span class="macro-text">{{ macro.name }}: {{ macro.current }} / {{ macro.target }}</span> <span class="macro-text">{{ macro.name }}: {{ macro.current }} / {{ macro.target }}</span>
<div class="progress rounded" style="height: 24px;"> <div class="progress rounded" style="height: 24px;">
<div class="progress-bar bg-danger macro-bar" role="progressbar" <div class="progress-bar bg-danger macro-bar" role="progressbar"
style="width: {{ macro.percent - 100 if macro.percent > 100 else 0}}%"> style="width: {{ macro.bar_width_overflow }}%">
{{ macro.current }}{{ macro.unit }} {{ macro.current - macro.target }}{{ macro.unit }}
</div> </div>
<div class="progress-bar bg-success macro-bar" role="progressbar" <div class="progress-bar bg-success macro-bar" role="progressbar" style="width: {{ macro.bar_width }}%">
style="width: {{ 0 if macro.percent > 200 else 200 - macro.percent if macro.percent > 100 else macro.percent }}%">
{{ macro.current }}{{ macro.unit }} {{ macro.current }}{{ macro.unit }}
</div> </div>
</div> </div>
@@ -34,22 +33,35 @@
<div class="list-group list-group-flush"> <div class="list-group list-group-flush">
{% for log in logs %} {% for log in logs %}
<div class="list-group-item item-row d-flex justify-content-between align-items-center bg-dark text-light"> <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.amount }}g) {{ log.food_item.name }}</span>
<span>{{ log.food_item.energy_100 }} kcal, {{ log.food_item.protein_100 }}g P, {{ <span>{{ log.food_item.energy_100 }} kcal</span>
log.food_item.carbs_100 }}g C,
{{ log.food_item.fat_100 }}g F</span>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
</div> </div>
</div> </div>
<!-- Bottom Navigation Buttons --> <!-- Bottom Navigation Buttons -->
<div class="container my-4"> <div class="container-fluid fixed-bottom py-2">
<div class="d-flex justify-content-between"> <div class="d-flex p-3">
<a href="" class="btn btn-outline-light flex-fill me-1">Previous Day</a> <!-- Left Button -->
<a href="" class="btn btn-outline-light flex-fill mx-1">+ Add Item</a> <a href="" class="btn btn-outline-light flex-fill me-2 rounded-pill">
<a href="" class="btn btn-outline-light flex-fill ms-1">Next Day</a> Previous
</a>
<!-- Center Button (highlighted) -->
<a href="{{ url_for('add_meal.step1', meal_type=0) }}"
class="btn btn-success flex-fill mx-2 fw-bold rounded-pill">
Add Item
</a>
<!-- Right Button -->
<a href="" class="btn btn-outline-light flex-fill ms-2 rounded-pill">
Next
</a>
</div> </div>
</div> </div>
{% endblock %} {% endblock %}