87 lines
2.5 KiB
HTML
87 lines
2.5 KiB
HTML
{% extends "expenses/base.html" %}
|
||
|
||
{% block title %}
|
||
Repostajes
|
||
{% endblock %}
|
||
|
||
{% block content %}
|
||
|
||
<h1>Mis repostajes</h1>
|
||
|
||
<a class="btn" href="{% url 'fuel_create' %}">➕ Nuevo repostaje</a>
|
||
|
||
</div>
|
||
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>Fecha</th>
|
||
<th>Kilometraje</th>
|
||
<th>Litros</th>
|
||
<th>Gasto</th>
|
||
<th>€/L</th>
|
||
<th>Km desde anterior</th>
|
||
<th></th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
{% for fuel in fuels %}
|
||
<tr>
|
||
<td>{{ fuel.expense.date }}</td>
|
||
<td>{{ fuel.odometer }}</td>
|
||
<td>{{ fuel.liters }}</td>
|
||
<td>{{ fuel.expense.amount }}</td>
|
||
<td>{{ fuel.price_per_liter|floatformat:2 }}</td>
|
||
<td>{{ fuel.km_since_previous }}</td>
|
||
<td class="table-actions">
|
||
<a href="{% url 'fuel_edit' fuel.expense.id %}?next={{ request.get_full_path|urlencode }}">Editar</a>
|
||
<a href="{% url 'fuel_delete' fuel.expense.id %}?next={{ request.get_full_path|urlencode }}" class="danger">Eliminar</a>
|
||
</td>
|
||
</tr>
|
||
{% endfor %}
|
||
</tbody>
|
||
</table>
|
||
|
||
<form method="get">
|
||
<select name="year" onchange="this.form.submit()">
|
||
{% for y in year_list %}
|
||
<option value="{{ y }}" {% if y == selected_year %}selected{% endif %}>
|
||
{{ y }}
|
||
</option>
|
||
{% endfor %}
|
||
</select>
|
||
</form>
|
||
|
||
<canvas id="monthlyChart"></canvas>
|
||
<canvas id="kmChart"></canvas>
|
||
|
||
<script>
|
||
const monthlyData = {{ monthly_data|safe }};
|
||
|
||
new Chart(document.getElementById('monthlyChart'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: ['Ene','Feb','Mar','Abr','May','Jun','Jul','Ago','Sep','Oct','Nov','Dic'],
|
||
datasets: [{
|
||
label: 'Gasto mensual',
|
||
data: monthlyData
|
||
}]
|
||
}
|
||
});
|
||
|
||
const kmData = {{ km_data|safe }};
|
||
const kmDates = {{ km_dates|safe }};
|
||
|
||
new Chart(document.getElementById('kmChart'), {
|
||
type: 'line',
|
||
data: {
|
||
labels: kmDates,
|
||
datasets: [{
|
||
label: 'Km entre repostajes',
|
||
data: kmData
|
||
}]
|
||
}
|
||
});
|
||
</script>
|
||
|
||
{% endblock %} |