mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-05-20 14:47:12 +02:00
feat: automated replacement
This commit is contained in:
Herculino Trotta
@@ -1,137 +1,57 @@
|
||||
{% extends "layouts/base.html" %}
|
||||
{% extends "yearly_overview/pages/yearly_overview_base.html" %}
|
||||
{% load currency_display %}
|
||||
{% load crispy_forms_tags %}
|
||||
{% load i18n %}
|
||||
{% load month_name %}
|
||||
{% load static %}
|
||||
{% load webpack_loader %}
|
||||
|
||||
{% block title %}{% translate 'Yearly Overview' %} :: {% translate 'By currency' %} :: {{ year }}{% endblock %}
|
||||
{% block overview_type_title %}{% translate 'By currency' %}{% endblock %}
|
||||
|
||||
{% block body_hyperscript %}
|
||||
on keyup[code is 'ArrowLeft' and target.nodeName is 'BODY'] from body trigger 'previous_year' end
|
||||
on keyup[code is 'ArrowRight' and target.nodeName is 'BODY'] from body trigger 'next_year' end
|
||||
{% block previous_year_url %}{% url 'yearly_overview_currency' year=previous_year %}{% endblock %}
|
||||
|
||||
{% block next_year_url %}{% url 'yearly_overview_currency' year=next_year %}{% endblock %}
|
||||
|
||||
{% block data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}
|
||||
|
||||
{% block hx_include %}[name='currency'], [name='month']{% endblock %}
|
||||
|
||||
{% block month_data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}
|
||||
|
||||
{% block month_hx_include %}[name='currency'], [name='month']{% endblock %}
|
||||
|
||||
{% block filter_pills %}
|
||||
<input type="hidden" name="currency" value="">
|
||||
<div class="tw:join tw:join-vertical tw:flex-col" id="filter-pills" role="tablist"
|
||||
hx-indicator="#data-content">
|
||||
<button class="tw:btn tw:btn-outline tw:btn-primary tw:btn-active tw:justify-start tw:join-item"
|
||||
role="tab"
|
||||
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 = ''"
|
||||
_="on click
|
||||
remove .tw:btn-active from <button/> in #filter-pills
|
||||
add .tw:btn-active to me">
|
||||
{% translate 'All' %}
|
||||
</button>
|
||||
{% for currency in currencies %}
|
||||
<button class="tw:btn tw:btn-outline tw:btn-primary tw:justify-start tw:join-item"
|
||||
role="tab"
|
||||
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 }}'"
|
||||
_="on click
|
||||
remove .tw:btn-active from <button/> in #filter-pills
|
||||
add .tw:btn-active to me">
|
||||
{{ currency.name }}
|
||||
</button>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="h-100 text-center mb-4 pt-2">
|
||||
<div class="btn-group gap-3" role="group">
|
||||
<a href="{% url 'yearly_overview_currency' year=year %}" class="btn {% if type != 'currency' %}btn-outline-primary{% else %}btn-primary{% endif %} rounded-5" hx-boost>
|
||||
<i class="fa-solid fa-solid fa-coins fa-fw me-2"></i>{% trans 'Currency' %}
|
||||
</a>
|
||||
{% block content_data_url %}{% url 'yearly_overview_currency_data' year=year %}{% endblock %}
|
||||
|
||||
<a href="{% url 'yearly_overview_account' year=year %}" class="btn {% if type != 'account' %}btn-outline-primary{% else %}btn-primary{% endif %} rounded-5" hx-boost>
|
||||
<i class="fa-solid fa-wallet fa-fw me-2"></i>{% trans 'Account' %}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container px-md-3 py-3 column-gap-5" id="yearly-content">
|
||||
<div class="row mb-3 gx-xl-4 gy-3 mb-4">
|
||||
{# Date picker#}
|
||||
<div class="col-12 col-xl-2 flex-row align-items-center d-flex">
|
||||
<div class="tw:text-base h-100 align-items-center d-flex">
|
||||
<a role="button"
|
||||
class="pe-4 py-2"
|
||||
hx-boost="true"
|
||||
hx-trigger="click, previous_year from:window"
|
||||
href="{% url 'yearly_overview_currency' year=previous_year %}">
|
||||
<i class="fa-solid fa-chevron-left"></i></a>
|
||||
</div>
|
||||
<div class="tw:text-3xl fw-bold font-monospace tw:w-full text-center">
|
||||
{{ year }}
|
||||
</div>
|
||||
<div class="tw:text-base mx-2 h-100 align-items-center d-flex">
|
||||
<a role="button"
|
||||
class="ps-3 py-2"
|
||||
hx-boost="true"
|
||||
hx-trigger="click, next_year from:window"
|
||||
href="{% url 'yearly_overview_currency' year=next_year %}">
|
||||
<i class="fa-solid fa-chevron-right"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{# Action buttons#}
|
||||
<div class="col-12 col-xl-10">
|
||||
{# <c-ui.quick-transactions-buttons#}
|
||||
{# :year="year"#}
|
||||
{# :month="month"#}
|
||||
{# ></c-ui.quick-transactions-buttons>#}
|
||||
</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"
|
||||
hx-indicator="#data-content">
|
||||
<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"
|
||||
hx-indicator="#data-content">
|
||||
<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, every 10m, updated from:window"
|
||||
hx-include="[name='currency'], [name='month']"
|
||||
hx-swap="innerHTML">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<c-ui.transactions_fab></c-ui.transactions_fab>
|
||||
{% endblock %}
|
||||
{% block content_hx_include %}[name='currency'], [name='month']{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user