mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-07-15 09:12:39 +02:00
feat: another batch
This commit is contained in:
Herculino Trotta
@@ -4,101 +4,121 @@
|
||||
{% load i18n %}
|
||||
{% load month_name %}
|
||||
{% load static %}
|
||||
|
||||
{% block title %}{% if type == "current" %}{% translate 'Current Net Worth' %}{% else %}{% translate 'Projected Net Worth' %}{% endif %}{% endblock %}
|
||||
|
||||
{% block title %}
|
||||
{% if type == "current" %}
|
||||
{% translate "Current Net Worth" %}
|
||||
{% else %}
|
||||
{% translate "Projected Net Worth" %}
|
||||
{% endif %}
|
||||
{% endblock title %}
|
||||
{% block content %}
|
||||
<div hx-trigger="every 60m, updated from:window" hx-include="#view-type" class="show-loading" hx-get=""
|
||||
<div hx-trigger="every 60m, updated from:window"
|
||||
hx-include="#view-type"
|
||||
class="show-loading"
|
||||
hx-get=""
|
||||
hx-target="body">
|
||||
<div class="h-full text-center mb-4 pt-2">
|
||||
<div class="join" role="group" id="view-type" _="on change trigger updated">
|
||||
<input type="radio"
|
||||
class="join-item btn btn-outline btn-primary rounded-full"
|
||||
name="view_type"
|
||||
aria-label="{% trans 'Current' %}"
|
||||
autocomplete="off"
|
||||
value="current"
|
||||
{% if type == "current" %}checked{% endif %}>
|
||||
|
||||
<div class="h-full text-center mb-4 pt-2 w-full">
|
||||
<div class="tabs tabs-box mx-auto w-fit"
|
||||
id="view-type"
|
||||
_="on change trigger updated">
|
||||
<input type="radio"
|
||||
class="join-item btn btn-outline btn-primary rounded-full"
|
||||
name="view_type"
|
||||
aria-label="{% trans 'Projected' %}"
|
||||
autocomplete="off"
|
||||
class="tab"
|
||||
aria-label="{% trans "Current" %}"
|
||||
value="current"
|
||||
{% if type == "current" %}checked{% endif %} />
|
||||
<input type="radio"
|
||||
name="view_type"
|
||||
class="tab"
|
||||
aria-label="{% trans "Projected" %}"
|
||||
value="projected"
|
||||
{% if type == "projected" %}checked{% endif %}>
|
||||
{% if type == "projected" %}checked{% endif %} />
|
||||
</div>
|
||||
{% comment %} <div class="gap-3" role="group" id="view-type" _="on change trigger updated">
|
||||
<input type="radio" class="btn btn-outline btn-primary rounded-full" name="view_type" aria-label="{% trans "Current" %}" autocomplete="off" value="current" {% if type == "current" %}checked{% endif %} />
|
||||
<i class="fa-solid fa-circle-plus fa-fw"></i>{% trans "Current" %}
|
||||
</input />
|
||||
<input type="radio" class="btn btn-outline btn-primary rounded-full" name="view_type" aria-label="{% trans "Projected" %}" autocomplete="off" value="projected" {% if type == "projected" %}checked{% endif %} />
|
||||
</div> {% endcomment %}
|
||||
</div>
|
||||
<div class="container px-md-3 py-3"
|
||||
_="init call initializeAccountChart() then initializeCurrencyChart() then initializeMonthlyDifferenceChart() end">
|
||||
<div class="row gap-y-3">
|
||||
<div class="col lg:col-5">
|
||||
<div>
|
||||
<c-ui.info-card color="yellow" icon="fa-solid fa-coins" title="{% trans 'By currency' %}"
|
||||
title_css_classes="cursor-pointer"
|
||||
_="on click showAllDatasetsCurrency()">
|
||||
{% for currency in currency_net_worth.values %}
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="flex items-baseline w-full">
|
||||
<div class="currency-name text-start font-mono text-base-content cursor-pointer"
|
||||
_="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
|
||||
{{ currency.currency.name }}
|
||||
</div>
|
||||
<div class="dotted-line flex-grow"></div>
|
||||
<div>
|
||||
<c-amount.display
|
||||
:amount="currency.total_final"
|
||||
:prefix="currency.currency.prefix"
|
||||
:suffix="currency.currency.suffix"
|
||||
:decimal_places="currency.currency.decimal_places"
|
||||
color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}"
|
||||
text-end></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if currency.exchanged and currency.exchanged.total_final %}
|
||||
<div>
|
||||
<c-amount.display
|
||||
:amount="currency.exchanged.total_final"
|
||||
:prefix="currency.exchanged.currency.prefix"
|
||||
:suffix="currency.exchanged.currency.suffix"
|
||||
:decimal_places="currency.exchanged.currency.decimal_places"
|
||||
text-end
|
||||
color="grey"></c-amount.display>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div>
|
||||
<c-ui.info-card color="yellow" icon="fa-solid fa-coins" title="{% trans "By currency" %}" title_css_classes="cursor-pointer" _="on click showAllDatasetsCurrency()">
|
||||
<ul class="menu bg-base-100 w-full rounded-box">
|
||||
{% for currency in currency_net_worth.values %}
|
||||
<li>
|
||||
{% if currency.consolidated and currency.consolidated.total_final != currency.total_final %}
|
||||
<div class="flex items-baseline w-full">
|
||||
<div class="account-name text-start font-mono text-base-content/60">
|
||||
<span class="hierarchy-line-icon"></span>{% trans 'Consolidated' %}</div>
|
||||
<div class="dotted-line flex-grow"></div>
|
||||
<div class="">
|
||||
<c-amount.display
|
||||
:amount="currency.consolidated.total_final"
|
||||
:prefix="currency.consolidated.currency.prefix"
|
||||
:suffix="currency.consolidated.currency.suffix"
|
||||
:decimal_places="currency.consolidated.currency.decimal_places"
|
||||
color="{% if currency.consolidated.total_final > 0 %}green{% elif currency.consolidated.total_final < 0 %}red{% endif %}"
|
||||
text-end></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
<a class="cursor-pointer flex justify-between items-center w-full"
|
||||
_="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
|
||||
<span class="currency-name text-start font-mono flex-shrink text-ellipsis">{{ currency.currency.name }}</span>
|
||||
<span class="text-end flex-shrink-0">
|
||||
<div>
|
||||
<c-amount.display :amount="currency.total_final" :prefix="currency.currency.prefix" :suffix="currency.currency.suffix" :decimal_places="currency.currency.decimal_places" color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}" text-end></c-amount.display>
|
||||
</div>
|
||||
{% if currency.exchanged and currency.exchanged.total_final %}
|
||||
<div>
|
||||
<c-amount.display :amount="currency.exchanged.total_final" :prefix="currency.exchanged.currency.prefix" :suffix="currency.exchanged.currency.suffix" :decimal_places="currency.exchanged.currency.decimal_places" text-end color="grey"></c-amount.display>
|
||||
</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
<ul>
|
||||
<li>
|
||||
<a class="text-base-content/60">
|
||||
<span class="text-start font-mono flex-shrink">{% trans "Consolidated" %}</span>
|
||||
<span class="text-end flex-shrink-0">
|
||||
<c-amount.display :amount="currency.consolidated.total_final" :prefix="currency.consolidated.currency.prefix" :suffix="currency.consolidated.currency.suffix" :decimal_places="currency.consolidated.currency.decimal_places" color="{% if currency.consolidated.total_final > 0 %}green{% elif currency.consolidated.total_final < 0 %}red{% endif %}" text-end></c-amount.display>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
{% else %}
|
||||
<a class="cursor-pointer flex justify-between items-center w-full"
|
||||
_="on click showOnlyCurrencyDataset('{{ currency.currency.name }}')">
|
||||
<span class="currency-name text-start font-mono flex-shrink">{{ currency.currency.name }}</span>
|
||||
<span class="text-end flex-shrink-0">
|
||||
<div>
|
||||
<c-amount.display :amount="currency.total_final" :prefix="currency.currency.prefix" :suffix="currency.currency.suffix" :decimal_places="currency.currency.decimal_places" color="{% if currency.total_final > 0 %}green{% elif currency.total_final < 0 %}red{% endif %}" text-end></c-amount.display>
|
||||
</div>
|
||||
{% if currency.exchanged and currency.exchanged.total_final %}
|
||||
<div>
|
||||
<c-amount.display :amount="currency.exchanged.total_final" :prefix="currency.exchanged.currency.prefix" :suffix="currency.exchanged.currency.suffix" :decimal_places="currency.exchanged.currency.decimal_places" text-end color="grey"></c-amount.display>
|
||||
</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</c-ui.info-card>
|
||||
</div>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</c-ui.info-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col lg:col-7">
|
||||
<div class="card bg-base-100">
|
||||
<div class="card-body">
|
||||
<div role="tablist" class="tabs tabs-border w-full" id="myTab">
|
||||
<input type="radio" name="networth_tabs" role="tab" class="tab" aria-label="{% trans 'Evolution' %}" id="tab-evolution" checked="checked" />
|
||||
<input type="radio"
|
||||
name="networth_tabs"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="{% trans 'Evolution' %}"
|
||||
id="tab-evolution"
|
||||
checked="checked" />
|
||||
<div role="tabpanel" class="tab-content p-4" id="evolution-tab-pane">
|
||||
<div class="chart-container relative min-h-[40vh] h-full w-full">
|
||||
<canvas id="currencyBalanceChart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<input type="radio" name="networth_tabs" role="tab" class="tab" aria-label="{% trans 'Difference' %}" id="tab-diff" />
|
||||
<input type="radio"
|
||||
name="networth_tabs"
|
||||
role="tab"
|
||||
class="tab"
|
||||
aria-label="{% trans 'Difference' %}"
|
||||
id="tab-diff" />
|
||||
<div role="tabpanel" class="tab-content p-4" id="diff-tab-pane">
|
||||
<div class="chart-container relative min-h-[40vh] h-full w-full">
|
||||
<canvas id="monthlyDifferenceChart"></canvas>
|
||||
@@ -109,82 +129,66 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<hr class="hr my-6">
|
||||
<hr class="hr my-6" />
|
||||
<div class="row gap-y-3">
|
||||
<div class="col lg:col-5">
|
||||
<div>
|
||||
<c-ui.info-card color="blue" icon="fa-solid fa-wallet" title="{% trans 'By account' %}"
|
||||
title_css_classes="cursor-pointer"
|
||||
_="on click showAllDatasetsAccount()">
|
||||
{% regroup account_net_worth.values by account.group as account_data %}
|
||||
{% for data in account_data %}
|
||||
{% if data.grouper %}
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="flex items-baseline w-full">
|
||||
<div class="text-start font-mono text-base-content"><span class="badge badge-primary">
|
||||
{{ data.grouper }}</span></div>
|
||||
</div>
|
||||
</div>
|
||||
{% for account in data.list %}
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="flex items-baseline w-full">
|
||||
<div class="account-name text-start font-mono text-base-content cursor-pointer"
|
||||
<div>
|
||||
<c-ui.info-card color="blue" icon="fa-solid fa-wallet" title="{% trans "By account" %}" title_css_classes="cursor-pointer" _="on click showAllDatasetsAccount()">
|
||||
<ul class="menu bg-base-100 w-full rounded-box">
|
||||
{% regroup account_net_worth.values by account.group as account_data %}
|
||||
{% for data in account_data %}
|
||||
{% if data.grouper %}
|
||||
<li>
|
||||
<details open>
|
||||
<summary class="font-mono">
|
||||
<span class="badge badge-primary">{{ data.grouper }}</span>
|
||||
</summary>
|
||||
<ul>
|
||||
{% for account in data.list %}
|
||||
<li>
|
||||
<a class="cursor-pointer flex justify-between items-center w-full"
|
||||
_="on click showOnlyAccountDataset('{{ account.account.name }}')">
|
||||
<span class="hierarchy-line-icon"></span>{{ account.account.name }}</div>
|
||||
<div class="dotted-line flex-grow"></div>
|
||||
<div class="">
|
||||
<c-amount.display
|
||||
:amount="account.total_final"
|
||||
:prefix="account.currency.prefix"
|
||||
:suffix="account.currency.suffix"
|
||||
:decimal_places="account.currency.decimal_places"
|
||||
color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if account.exchanged and account.exchanged.total_final %}
|
||||
<c-amount.display
|
||||
:amount="account.exchanged.total_final"
|
||||
:prefix="account.exchanged.currency.prefix"
|
||||
:suffix="account.exchanged.currency.suffix"
|
||||
:decimal_places="account.exchanged.currency.decimal_places"
|
||||
color="grey"
|
||||
text-end></c-amount.display>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
{% for account in data.list %}
|
||||
<div class="flex justify-between mt-2">
|
||||
<div class="flex items-baseline w-full">
|
||||
<div class="account-name text-start font-mono text-base-content cursor-pointer"
|
||||
_="on click showOnlyAccountDataset('{{ account.account.name }}')">
|
||||
{{ account.account.name }}
|
||||
</div>
|
||||
<div class="dotted-line flex-grow"></div>
|
||||
<span class="account-name text-start font-mono flex-shrink text-ellipsis">{{ account.account.name }}</span>
|
||||
<span class="text-end flex-shrink-0">
|
||||
<div>
|
||||
<c-amount.display :amount="account.total_final" :prefix="account.currency.prefix" :suffix="account.currency.suffix" :decimal_places="account.currency.decimal_places" color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
|
||||
</div>
|
||||
{% if account.exchanged and account.exchanged.total_final %}
|
||||
<div>
|
||||
<c-amount.display :amount="account.exchanged.total_final" :prefix="account.exchanged.currency.prefix" :suffix="account.exchanged.currency.suffix" :decimal_places="account.exchanged.currency.decimal_places" color="grey" text-end></c-amount.display>
|
||||
</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</details>
|
||||
</li>
|
||||
{% else %}
|
||||
{% for account in data.list %}
|
||||
<li>
|
||||
<a class="cursor-pointer flex justify-between items-center w-full"
|
||||
_="on click showOnlyAccountDataset('{{ account.account.name }}')">
|
||||
<span class="account-name text-start font-mono flex-shrink">{{ account.account.name }}</span>
|
||||
<span class="text-end flex-shrink-0">
|
||||
<div>
|
||||
<c-amount.display
|
||||
:amount="account.total_final"
|
||||
:prefix="account.currency.prefix"
|
||||
:suffix="account.currency.suffix"
|
||||
:decimal_places="account.currency.decimal_places"
|
||||
color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
|
||||
<c-amount.display :amount="account.total_final" :prefix="account.currency.prefix" :suffix="account.currency.suffix" :decimal_places="account.currency.decimal_places" color="{% if account.total_final > 0 %}green{% elif account.total_final < 0 %}red{% endif %}"></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% if account.exchanged and account.exchanged.total_final %}
|
||||
<c-amount.display
|
||||
:amount="account.exchanged.total_final"
|
||||
:prefix="account.exchanged.currency.prefix"
|
||||
:suffix="account.exchanged.currency.suffix"
|
||||
:decimal_places="account.exchanged.currency.decimal_places"
|
||||
color="grey"
|
||||
text-end></c-amount.display>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</c-ui.info-card>
|
||||
</div>
|
||||
{% if account.exchanged and account.exchanged.total_final %}
|
||||
<div>
|
||||
<c-amount.display :amount="account.exchanged.total_final" :prefix="account.exchanged.currency.prefix" :suffix="account.exchanged.currency.suffix" :decimal_places="account.exchanged.currency.decimal_places" color="grey" text-end></c-amount.display>
|
||||
</div>
|
||||
{% endif %}
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</c-ui.info-card>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col lg:col-7">
|
||||
<div class="chart-container relative min-h-[40vh] h-full card bg-base-100">
|
||||
@@ -195,7 +199,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
var currencyChart;
|
||||
|
||||
@@ -258,7 +261,6 @@
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script id="accountBalanceChartScript">
|
||||
var accountChart;
|
||||
|
||||
@@ -323,7 +325,6 @@
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script id="monthlyDifferenceChartScript">
|
||||
var monthlyDifferenceChart;
|
||||
|
||||
@@ -363,7 +364,10 @@
|
||||
stacked: true,
|
||||
ticks: {
|
||||
display: false,
|
||||
format: {maximumFractionDigits: 40, minimumFractionDigits: 0}
|
||||
format: {
|
||||
maximumFractionDigits: 40,
|
||||
minimumFractionDigits: 0
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
@@ -371,7 +375,6 @@
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<script type="text/hyperscript">
|
||||
def showOnlyAccountDataset(datasetName)
|
||||
for dataset in accountChart.data.datasets
|
||||
@@ -416,4 +419,4 @@
|
||||
</script>
|
||||
</div>
|
||||
<c-ui.transactions_fab></c-ui.transactions_fab>
|
||||
{% endblock %}
|
||||
{% endblock content %}
|
||||
|
||||
Reference in New Issue
Block a user