proxadmin/app/templates/uinvoice/transactions.html
2017-06-25 17:11:52 +03:00

109 lines
2.8 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: {{ labelslist | safe }},
datasets: [{
data: {{ translist }},
fill: false,
borderColor: "rgb(75, 192, 192)",
lineTension:0.1 }]
},
options: {
hover: {
// Overrides the global setting
mode: 'index'
},
legend: {
display: false
},
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
</script>
{% endblock %}
{% block page_content %}
<div class="row">
{% block sidebar %}
<div class="col-md-12">
<div class="row">
</div>
</div>
{% endblock %}
<div class="row">
<div class="col-md-4">
{% include "/settings/acc_avatar.html" %}
</div>
<div class="col-md-8">
<div class="panel panel-info">
<div class="panel-heading">Wallet Graph</div>
<div class="panel-body">
<canvas id="transchart" height="80"></canvas>
</div></div></div>
<div class="col-md-12">
<div class="panel panel-info">
<div class="panel-heading">Transactions</div>
<div class="panel-body">
<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>{{ moment(transaction.date_created).format('lll') }}</td>
{% else %}
<tr class="danger">
<td><span class="glyphicon glyphicon-minus"></span></td>
<td>{{ transaction.description }}</td>
<td>{{ transaction.value }} {{ transaction.currency }}</td>
<td>{{ moment(transaction.date_created).format('lll') }}</td>
{% endif %}
</tr>
</tbody>
{% endfor %}
</table>
</div>
</div>
</div>
</div>
</div>
{% endblock %}