91 lines
2.5 KiB
HTML
91 lines
2.5 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
{{ super() }}
|
||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js" integrity="sha256-SiHXR50l06UwJvHhFY4e5vzwq75vEHH+8fFNpkXePr0=" crossorigin="anonymous"></script>
|
||
|
|
|
||
|
|
<script type="text/javascript">
|
||
|
|
Chart.defaults.global.hover.mode = 'nearest';
|
||
|
|
var ctx = document.getElementById("transchart").getContext('2d');
|
||
|
|
var myChart = new Chart(ctx, {
|
||
|
|
type: 'line',
|
||
|
|
data: {
|
||
|
|
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
|
||
|
|
datasets: [{
|
||
|
|
label: "History",
|
||
|
|
data: {{ translist }},
|
||
|
|
fill: false,
|
||
|
|
borderColor: "rgb(75, 192, 192)",
|
||
|
|
lineTension:0.1 }]
|
||
|
|
},
|
||
|
|
options: {
|
||
|
|
hover: {
|
||
|
|
// Overrides the global setting
|
||
|
|
mode: 'index'
|
||
|
|
},
|
||
|
|
scales: {
|
||
|
|
yAxes: [{
|
||
|
|
ticks: {
|
||
|
|
beginAtZero:true
|
||
|
|
}
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block page_content %}
|
||
|
|
<div class="row">
|
||
|
|
<div class="col-md-12">
|
||
|
|
<div class="panel panel-info">
|
||
|
|
<div class="panel-heading">Transactions</div>
|
||
|
|
<div class="panel-body">
|
||
|
|
|
||
|
|
<canvas id="transchart" height="80"></canvas>
|
||
|
|
|
||
|
|
<div class="table-responsive">
|
||
|
|
<table class="table table-hover table-striped table-condensed cf">
|
||
|
|
<thead>
|
||
|
|
<tr>
|
||
|
|
<th></th>
|
||
|
|
<th>Description</th>
|
||
|
|
<th>Amount</th>
|
||
|
|
<th>Date</th>
|
||
|
|
</tr>
|
||
|
|
</thead>
|
||
|
|
|
||
|
|
<tbody>
|
||
|
|
{% for transaction in transactions %}
|
||
|
|
{% if transaction.value > 0 %}
|
||
|
|
<tr class="success">
|
||
|
|
<td><span class="glyphicon glyphicon-plus"></span></td>
|
||
|
|
<td>{{ transaction.description }}</td>
|
||
|
|
<td>{{ transaction.value }} {{ transaction.currency }}</td>
|
||
|
|
<td>{{ transaction.date_created.strftime('%d %b %Y - %H:%m') }}</td>
|
||
|
|
{% else %}
|
||
|
|
<tr class="danger">
|
||
|
|
<td><span class="glyphicon glyphicon-minus"></span></td>
|
||
|
|
<td>{{ transaction.description }}</td>
|
||
|
|
<td>{{ transaction.value }} {{ transaction.currency }}</td>
|
||
|
|
<td>{{ transaction.date_created.strftime('%d %b %Y - %H:%m') }}</td>
|
||
|
|
{% endif %}
|
||
|
|
</tr>
|
||
|
|
</tbody>
|
||
|
|
{% endfor %}
|
||
|
|
</table>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|