feat: revamp Yearly Overview

This commit is contained in:
Herculino Trotta
2024-11-02 01:32:52 -03:00
parent c75aa98e21
commit 6ee8e233ca
3 changed files with 103 additions and 76 deletions

View File

@@ -90,77 +90,77 @@
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2">
<div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical">
<input type="hidden" name="month" value="">
<button class="nav-link active"
role="tab"
data-bs-toggle="pill"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-target="#data-content"
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=month]').value = ''">
{% translate 'Year' %}
</button>
{% for month in months %}
<button class="nav-link"
role="tab"
data-bs-toggle="pill"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-target="#data-content"
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=month]').value = '{{ month }}'">
{{ month|month_name }}
</button>
{% endfor %}
</div>
</div>
<hr class="my-4 d-block d-lg-none">
<div class="col-lg-3">
<div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical">
<input type="hidden" name="currency" value="">
<button class="nav-link active"
role="tab"
data-bs-toggle="pill"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-target="#data-content"
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=currency]').value = ''">
{% translate 'All' %}
</button>
{% for currency in currencies %}
<button class="nav-link"
role="tab"
data-bs-toggle="pill"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-target="#data-content"
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=currency]').value = '{{ currency.id }}'">
{{ currency.name }}
</button>
{% endfor %}
</div>
</div>
<div class="row">
<div class="col-lg-2">
<div class="nav flex-column nav-pills" id="month-pills" role="tablist" aria-orientation="vertical">
<input type="hidden" name="month" value="">
<button class="nav-link active"
role="tab"
data-bs-toggle="pill"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-target="#data-content"
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=month]').value = ''">
{% translate 'Year' %}
</button>
{% for month in months %}
<button class="nav-link"
role="tab"
data-bs-toggle="pill"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-target="#data-content"
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=month]').value = '{{ month }}'">
{{ month|month_name }}
</button>
{% endfor %}
</div>
</div>
<hr class="my-4 d-block d-lg-none">
<div class="col-lg-3">
<div class="nav flex-column nav-pills" id="currency-pills" role="tablist" aria-orientation="vertical">
<input type="hidden" name="currency" value="">
<button class="nav-link active"
role="tab"
data-bs-toggle="pill"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-target="#data-content"
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=currency]').value = ''">
{% translate 'All' %}
</button>
{% for currency in currencies %}
<button class="nav-link"
role="tab"
data-bs-toggle="pill"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-target="#data-content"
hx-trigger="click"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML"
onclick="document.querySelector('[name=currency]').value = '{{ currency.id }}'">
{{ currency.name }}
</button>
{% endfor %}
</div>
</div>
<div class="col-lg-7">
<div id="data-content"
class="show-loading"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-trigger="load"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML">
</div>
</div>
</div>
<div class="col-lg-7">
<div id="data-content"
class="show-loading"
hx-get="{% url 'yearly_overview_currency_data' year=year %}"
hx-trigger="load"
hx-include="[name='currency'], [name='month']"
hx-swap="innerHTML">
</div>
</div>
</div>
</div>
{% endblock %}