mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-09-13 13:22:03 +02:00
Herculino Trotta
82211567d0
Categories, Tags and Entities Overview are merged into one Overview page. Levels are chips that can be dragged (or moved with the arrow keys) to set the hierarchy and clicked to switch off, so any ordering of the three is reachable from the same page. Only the results reload on change; the controls stay in place. The chip order is kept in the session and defaults to categories by tags, matching the old Categories Overview.
148 lines
7.7 KiB
HTML
148 lines
7.7 KiB
HTML
{% extends "layouts/base.html" %}
|
|
{% load crispy_forms_tags %}
|
|
{% load i18n %}
|
|
|
|
{% block title %}{% translate 'Insights' %}{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container-fluid">
|
|
<div class="row gy-3">
|
|
<div class="col-12 md:col-3 gy-3">
|
|
<div class="flex flex-col gap-3">
|
|
<div class="card bg-base-100 card-borderS">
|
|
<div class="card-body">
|
|
<div class="">
|
|
<div class="mb-2 w-full lg:inline-flex grid gap-2 flex-wrap lg:justify-center" role="group"
|
|
_="on change
|
|
set type to event.target.value
|
|
add .hidden to <#picker-form > div:not(.hidden)/>
|
|
|
|
if type == 'month'
|
|
remove .hidden from #month-form
|
|
end
|
|
if type == 'year'
|
|
remove .hidden from #year-form
|
|
end
|
|
if type == 'month-range'
|
|
remove .hidden from #month-range-form
|
|
end
|
|
if type == 'year-range'
|
|
remove .hidden from #year-range-form
|
|
end
|
|
if type == 'date-range'
|
|
remove .hidden from #date-range-form
|
|
end
|
|
then trigger updated"
|
|
id="picker-type">
|
|
<input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="month" id="monthradio" autocomplete="off" aria-label="{% translate 'Month' %}" checked>
|
|
|
|
<input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="year" id="yearradio" autocomplete="off" aria-label="{% translate 'Year' %}">
|
|
|
|
<input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="month-range" id="monthrangeradio" autocomplete="off" aria-label="{% translate 'Month Range' %}">
|
|
|
|
<input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="year-range" id="yearrangeradio" autocomplete="off" aria-label="{% translate 'Year Range' %}">
|
|
|
|
<input type="radio" class="join-item btn btn-sm btn-outline btn-primary flex-grow" name="type" value="date-range" id="daterangeradio" autocomplete="off" aria-label="{% translate 'Date Range' %}">
|
|
</div>
|
|
<form id="picker-form"
|
|
_="install init_datepicker
|
|
on change trigger updated">
|
|
<div id="month-form" class="">
|
|
{% crispy month_form %}
|
|
</div>
|
|
<div id="year-form" class="hidden">
|
|
{% crispy year_form %}
|
|
</div>
|
|
<div id="month-range-form" class="hidden">
|
|
{% crispy month_range_form %}
|
|
</div>
|
|
<div id="year-range-form" class="hidden">
|
|
{% crispy year_range_form %}
|
|
</div>
|
|
<div id="date-range-form" class="hidden">
|
|
{% crispy date_range_form %}
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<div class="flex flex-col gap-1 insights-list" role="tablist"
|
|
hx-indicator="#tab-content"
|
|
hx-target="#tab-content"
|
|
hx-sync="#tab-content:replace"
|
|
hx-include="#picker-form, #picker-type"
|
|
_="on click
|
|
remove .btn-active from <.insights-list button/>
|
|
add .btn-active to event.target
|
|
set event.target's @aria-selected to 'true'">
|
|
<button class="btn btn-ghost btn-free justify-start text-start"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'insights_sankey_by_account' %}">
|
|
{% trans 'Account Flow' %}
|
|
</button>
|
|
<button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'insights_sankey_by_currency' %}"
|
|
>{% trans 'Currency Flow' %}
|
|
</button>
|
|
<button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'category_explorer_index' %}">
|
|
{% trans 'Category Explorer' %}
|
|
</button>
|
|
<button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'insights_overview' %}"
|
|
>{% trans 'Overview' %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-base-100 card-border">
|
|
<div class="card-body">
|
|
<div class="flex flex-col gap-1 insights-list" role="tablist"
|
|
hx-indicator="#tab-content"
|
|
hx-target="#tab-content"
|
|
hx-sync="#tab-content:replace"
|
|
_="on click
|
|
remove .btn-active from <.insights-list button/>
|
|
add .btn-active to event.target
|
|
set event.target's @aria-selected to 'true'">
|
|
<button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'insights_late_transactions' %}">
|
|
{% trans 'Late Transactions' %}
|
|
</button>
|
|
<button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'insights_latest_transactions' %}">
|
|
{% trans 'Latest Transactions' %}
|
|
</button>
|
|
<button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'insights_emergency_fund' %}">
|
|
{% trans 'Emergency Fund' %}
|
|
</button>
|
|
<button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'insights_year_by_year' %}">
|
|
{% trans 'Year by Year' %}
|
|
</button>
|
|
<button class="btn btn-ghost btn-free justify-start text-start" data-bs-target="#v-pills-content"
|
|
type="button" role="tab" aria-controls="v-pills-content" aria-selected="false"
|
|
hx-get="{% url 'insights_month_by_month' %}">
|
|
{% trans 'Month by Month' %}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<hr class="xl:hidden hr">
|
|
|
|
<div class="col-12 md:col-9 gy-3">
|
|
<div id="tab-content" class="show-loading"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|