119 lines
3.3 KiB
HTML
119 lines
3.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Account {{account.account_name}}{% endblock title %}
|
|
{% block body %}
|
|
<div class="flex">
|
|
<span class="text-lg grow">{{account.account_name}}</span>
|
|
<div>
|
|
<a href="/accounts/id/{{account.account_id}}/transactions/add">+</a>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<h2>Net amount</h2>
|
|
<div class="ars-input">
|
|
<label>
|
|
Dates
|
|
<input id="amount-date-range" onselect="onDateChange(event)"/>
|
|
</label>
|
|
</div>
|
|
<div style="height: 400px; width: 800px; position: relative;">
|
|
<canvas id="amount-trend"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<h2>Last transactions</h2>
|
|
<table width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th width="40%">Description</th>
|
|
<th width="20%">Date</th>
|
|
<th width="10%">Amount</th>
|
|
<th width="10%">Acc</th>
|
|
<th width="15%">Category</th>
|
|
<th width="5%">Link</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{% for tx in transactions %}
|
|
<tr>
|
|
<td>{{tx.description}}</td>
|
|
<td>{{tx.tx_date}}</td>
|
|
<td>{{tx.amount/100}}</td>
|
|
<td>{{tx.accumulated/100}}</td>
|
|
<td>{% if tx.category %}{{categories[tx.category]}}{% endif %}</td>
|
|
<td><a href="/transaction/{{ tx.transaction_id }}">Go to</a></td>
|
|
</tr>
|
|
{% endfor %}
|
|
</tbody>
|
|
</table>
|
|
<div class="flex">
|
|
<div class="flex grow flex-row justify-evenly">
|
|
<div>
|
|
<a href="/accounts/id/{{account.account_id}}?entries={{n_entries}}&page={{prev_page}}"><</a>
|
|
</div>
|
|
<div>{{curr_page}}</div>
|
|
<div>
|
|
<a href="/accounts/id/{{account.account_id}}?entries={{n_entries}}&page={{next_page}}">></a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<select onchange="onSelect(event)">
|
|
<option {% if n_entries == 10 %}selected="selected"{% endif %}>10</option>
|
|
<option {% if n_entries == 20 %}selected="selected"{% endif %}>20</option>
|
|
<option {% if n_entries == 50 %}selected="selected"{% endif %}>50</option>
|
|
<option {% if n_entries == 100 %}selected="selected"{% endif %}>100</option>
|
|
<option {% if n_entries == 200 %}selected="selected"{% endif %}>200</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
table {
|
|
border-spacing: 0.2rem;
|
|
}
|
|
</style>
|
|
<script src="https://cdn.jsdelivr.net/npm/litepicker/dist/litepicker.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
function onDateChange(e) {
|
|
console.log(e);
|
|
}
|
|
|
|
function onSelect(e) {
|
|
let params = new URLSearchParams();
|
|
params.set("entries", e.target.value);
|
|
window.location.search = params.toString();
|
|
}
|
|
|
|
const dateEl = document.getElementById('amount-date-range');
|
|
|
|
const picker = new Litepicker({
|
|
element: dateEl,
|
|
singleMode: false,
|
|
maxDate: new Date(),
|
|
startDate: "{{date_from}}",
|
|
endDate: "{{date_to}}"
|
|
});
|
|
|
|
dateEl.addEventListener('input', (e) => console.log(e));
|
|
|
|
function formatDate(date) {
|
|
return date.substr(0, date.indexOf('T'));
|
|
}
|
|
|
|
const data = [
|
|
{% for txag in tx_agg -%}
|
|
{x: formatDate("{{txag.tx_date}}"), y: {{txag.accumulated/100}} },
|
|
{% endfor %}
|
|
];
|
|
|
|
const ctx = document.getElementById('amount-trend');
|
|
|
|
const chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [{label: 'Account', data: data}],
|
|
},
|
|
});
|
|
</script>
|
|
{% endblock body %}
|
|
|