poprawki w jogice js, progressbar warstwowy i fix w notatkach

This commit is contained in:
Mateusz Gruszczyński
2025-08-06 13:42:20 +02:00
parent 6bb0c97c37
commit 3abad9e151
5 changed files with 82 additions and 70 deletions

View File

@@ -73,16 +73,14 @@
</h5>
<div class="progress progress-dark position-relative">
<div id="progress-bar" class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
</div>
<div id="progress-bar-purchased" class="progress-bar bg-success" role="progressbar"></div>
<div id="progress-bar-not-purchased" class="progress-bar bg-danger" role="progressbar"></div>
<div id="progress-bar-remaining" class="progress-bar bg-transparent" role="progressbar"></div>
<span id="progress-label" class="progress-label small fw-bold
{% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
{{ percent|round(0) }}%
</span>
<span id="progress-label" class="progress-label small fw-bold"></span>
</div>
{% if total_expense > 0 %}
<div id="total-expense2" class="text-success fw-bold mb-3">
💸 Łącznie wydano: {{ '%.2f'|format(total_expense) }} PLN

View File

@@ -99,17 +99,31 @@
</div>
<div class="progress progress-dark progress-thin mt-2 position-relative">
<div class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
</div>
{# Kupione #}
<div class="progress-bar bg-success" role="progressbar"
style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
aria-valuemax="100"></div>
{# Niekupione #}
{% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
<div class="progress-bar bg-danger" role="progressbar"
style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
aria-valuemax="100"></div>
{# Pozostałe #}
<div class="progress-bar bg-transparent" role="progressbar"
style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
aria-valuemin="0" aria-valuemax="100"></div>
<span class="progress-label small fw-bold
{% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
{% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
{% if l.total_expense > 0 %}
— 💸 {{ '%.2f'|format(l.total_expense) }} PLN
— 💸 {{ '%.2f'|format(l.total_expense) }} PLN
{% endif %}
</span>
</div>
</li>
{% endfor %}
</ul>
@@ -141,17 +155,31 @@
<a href="/guest-list/{{ l.id }}" class="btn btn-sm btn-outline-light">📄 Otwórz</a>
</div>
<div class="progress progress-dark progress-thin mt-2 position-relative">
<div class="progress-bar bg-warning text-dark" role="progressbar" style="width: {{ percent }}%;"
aria-valuenow="{{ percent }}" aria-valuemin="0" aria-valuemax="100">
</div>
{# Kupione #}
<div class="progress-bar bg-success" role="progressbar"
style="width: {{ (purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
aria-valuemax="100"></div>
{# Niekupione #}
{% set not_purchased_count = l.not_purchased_count if l.total_count else 0 %}
<div class="progress-bar bg-danger" role="progressbar"
style="width: {{ (not_purchased_count / total_count * 100) if total_count > 0 else 0 }}%" aria-valuemin="0"
aria-valuemax="100"></div>
{# Pozostałe #}
<div class="progress-bar bg-transparent" role="progressbar"
style="width: {{ 100 - ((purchased_count + not_purchased_count) / total_count * 100) if total_count > 0 else 100 }}%"
aria-valuemin="0" aria-valuemax="100"></div>
<span class="progress-label small fw-bold
{% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
{% if percent < 50 %}text-white{% else %}text-dark{% endif %}">
Produkty: {{ purchased_count }}/{{ total_count }} ({{ percent|round(0) }}%)
{% if l.total_expense > 0 %}
— 💸 {{ '%.2f'|format(l.total_expense) }} PLN
— 💸 {{ '%.2f'|format(l.total_expense) }} PLN
{% endif %}
</span>
</div>
</li>
{% endfor %}
</ul>