mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-04-24 09:38:35 +02:00
feat: implement django-cotton
This commit is contained in:
Herculino Trotta
7
app/templates/cotton/amount/display.html
Normal file
7
app/templates/cotton/amount/display.html
Normal file
@@ -0,0 +1,7 @@
|
||||
{% load currency_display %}
|
||||
|
||||
<div class="{% if text_end %}text-end{% elif text_start %}text-start{% endif %}">
|
||||
<div class="amount{% if color == 'grey' %} tw-text-gray-500{% elif color == 'green' %} tw-text-green-400{% elif color == 'red' %} tw-text-red-400{% endif %}"
|
||||
data-original-value="{% currency_display amount=amount prefix=prefix suffix=suffix decimal_places=decimal_places %}">
|
||||
</div>
|
||||
</div>
|
||||
@@ -16,7 +16,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.daily_spending_allowance %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -40,7 +44,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.paid_income %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -53,7 +61,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.projected_income %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -77,7 +89,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.paid_expenses %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -90,7 +106,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.projected_expenses %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -114,7 +134,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.total_current %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -126,7 +150,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.total_projected %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -136,7 +164,11 @@
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.total_final %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
|
||||
@@ -26,7 +26,12 @@
|
||||
<div class="d-flex align-items-baseline w-100">
|
||||
<div class="currency-name text-start font-monospace tw-text-gray-300">{{ currency.name }}</div>
|
||||
<div class="dotted-line flex-grow-1"></div>
|
||||
<div class="amount text-end font-monospace" data-original-value="{% currency_display amount=currency.amount prefix=currency.prefix suffix=currency.suffix decimal_places=currency.decimal_places %}"></div>
|
||||
<c-amount.display
|
||||
:amount="currency.amount"
|
||||
:prefix="currency.prefix"
|
||||
:suffix="currency.suffix"
|
||||
:decimal_places="currency.decimal_places"
|
||||
text-end></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
@@ -56,12 +61,21 @@
|
||||
<div class="text-start font-monospace tw-text-gray-300">
|
||||
<span class="hierarchy-line-icon"></span>{{ account_data.name }}</div>
|
||||
<div class="dotted-line flex-grow-1"></div>
|
||||
<div class="amount" data-original-value="{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></div>
|
||||
<c-amount.display
|
||||
:amount="account_data.balance"
|
||||
:prefix="account_data.currency.prefix"
|
||||
:suffix="account_data.currency.suffix"
|
||||
:decimal_places="account_data.currency.decimal_places"></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
{% if account_data.exchange %}
|
||||
<div class="amount text-end tw-text-gray-400" data-original-value=
|
||||
"{% currency_display amount=account_data.exchange.amount prefix=account_data.exchange.prefix suffix=account_data.exchange.suffix decimal_places=account_data.exchange.decimal_places%}"></div>
|
||||
<c-amount.display
|
||||
:amount="account_data.exchange.amount"
|
||||
:prefix="account_data.exchange.prefix"
|
||||
:suffix="account_data.exchange.suffix"
|
||||
:decimal_places="account_data.exchange.decimal_places"
|
||||
color="grey"
|
||||
text-end></c-amount.display>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
@@ -70,13 +84,22 @@
|
||||
<div class="d-flex align-items-baseline w-100">
|
||||
<div class="currency-name text-start font-monospace tw-text-gray-300">{{ account_data.name }}</div>
|
||||
<div class="dotted-line flex-grow-1"></div>
|
||||
<div class="amount" data-original-value="{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></div>
|
||||
{% if account_data.exchange %}
|
||||
<div class="amount text-end tw-text-gray-400" data-original-value=
|
||||
"{% currency_display amount=account_data.balance prefix=account_data.currency.prefix suffix=account_data.currency.suffix decimal_places=account_data.currency.decimal_places%}"></div>
|
||||
{% endif %}
|
||||
<c-amount.display
|
||||
:amount="account_data.balance"
|
||||
:prefix="account_data.currency.prefix"
|
||||
:suffix="account_data.currency.suffix"
|
||||
:decimal_places="account_data.currency.decimal_places"></c-amount.display>
|
||||
</div>
|
||||
</div>
|
||||
{% if account_data.exchange %}
|
||||
<c-amount.display
|
||||
:amount="account_data.exchange.amount"
|
||||
:prefix="account_data.exchange.prefix"
|
||||
:suffix="account_data.exchange.suffix"
|
||||
:decimal_places="account_data.exchange.decimal_places"
|
||||
color="grey"
|
||||
text-end></c-amount.display>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
@@ -66,15 +66,23 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-3 col-12 text-lg-end align-self-end">
|
||||
<div class="{% if transaction.type == "EX" %}tw-text-red-400{% else %}tw-text-green-400{% endif %}">
|
||||
<div class="amount" data-original-value="{% transaction_amount transaction %}"></div>
|
||||
</div>
|
||||
<c-amount.display
|
||||
:amount="transaction.amount"
|
||||
:prefix="transaction.account.currency.prefix"
|
||||
:suffix="transaction.account.currency.suffix"
|
||||
:decimal_places="transaction.account.currency.decimal_places"
|
||||
color="{% if transaction.type == "EX" %}red{% else %}green{% endif %}"
|
||||
text-end></c-amount.display>
|
||||
{# Exchange Rate#}
|
||||
{% with exchanged=transaction.exchanged_amount %}
|
||||
{% if exchanged %}
|
||||
<div class="tw-text-gray-500 amount"
|
||||
data-original-value="{% currency_display amount=exchanged.amount prefix=exchanged.prefix suffix=exchanged.suffix decimal_places=exchanged.decimal_places %}">
|
||||
</div>
|
||||
<c-amount.display
|
||||
:amount="exchanged.amount"
|
||||
:prefix="exchanged.prefix"
|
||||
:suffix="exchanged.suffix"
|
||||
:decimal_places="exchanged.decimal_places"
|
||||
color="grey"
|
||||
text-end></c-amount.display>
|
||||
{% endif %}
|
||||
{% endwith %}
|
||||
<div>{{ transaction.account.name }}</div>
|
||||
|
||||
@@ -16,7 +16,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.daily_spending_allowance %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -40,7 +44,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.paid_income %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -53,7 +61,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.projected_income %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -77,7 +89,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.paid_expenses %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -90,7 +106,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.projected_expenses %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -114,7 +134,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.total_current %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -126,7 +150,11 @@
|
||||
</div>
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.total_projected %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
@@ -136,7 +164,11 @@
|
||||
<div class="d-flex justify-content-end">
|
||||
<div class="text-end font-monospace">
|
||||
{% for entry in totals.total_final %}
|
||||
<div class="amount" data-original-value="{% entry_amount entry %}"></div>
|
||||
<c-amount.display
|
||||
:amount="entry.amount"
|
||||
:prefix="entry.prefix"
|
||||
:suffix="entry.suffix"
|
||||
:decimal_places="entry.decimal_places"></c-amount.display>
|
||||
{% empty %}
|
||||
<div>-</div>
|
||||
{% endfor %}
|
||||
|
||||
@@ -15,6 +15,34 @@
|
||||
|
||||
{% block content %}
|
||||
<div class="container px-md-3 py-3 column-gap-5">
|
||||
<div class="card" style="width: 18rem;">
|
||||
<img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card image">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card Title</h5>
|
||||
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#expandableContent1" aria-expanded="false" aria-controls="expandableContent1">
|
||||
Expand Section 1
|
||||
</button>
|
||||
<div class="collapse" id="expandableContent1">
|
||||
<div class="mt-3">
|
||||
<p>This is the expandable content for section 1. You can add any additional information or elements here.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<button class="btn btn-link" type="button" data-bs-toggle="collapse" data-bs-target="#expandableContent2" aria-expanded="false" aria-controls="expandableContent2">
|
||||
Expand Section 2
|
||||
</button>
|
||||
<div class="collapse" id="expandableContent2">
|
||||
<div class="mt-3">
|
||||
<p>This is the expandable content for section 2. You can add different information or elements here.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{# <div class="row mb-3 gx-xl-4 gy-3 mb-4">#}
|
||||
{# Date picker#}
|
||||
{# <div class="col-12 col-xl-4 flex-row align-items-center d-flex">#}
|
||||
|
||||
Reference in New Issue
Block a user