mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-04-24 01:28:42 +02:00
feat: revamp Yearly Overview
This commit is contained in:
@@ -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 %}
|
||||
|
||||
Reference in New Issue
Block a user