expenses_manager/expenses_manager/expenses/templates/fuel/list.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>

    <div class="table-wrap">
    <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>
    </div>

    <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 }};
        const monthlyChartColors = getChartColors();

        const monthlyChart = 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,
                    backgroundColor: monthlyChartColors.primaryColor
                }]
            },
            options: {
                scales: {
                    x: {
                        grid: { color: monthlyChartColors.gridColor },
                        ticks: { color: monthlyChartColors.tickColor }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: monthlyChartColors.gridColor },
                        ticks: { color: monthlyChartColors.tickColor }
                    }
                }
            }
        });

        registerThemedChart(monthlyChart, function (chart, colors) {
            chart.data.datasets[0].backgroundColor = colors.primaryColor;
            applyCartesianColors(chart, colors);
        });

        const kmData = {{ km_data|safe }};
        const kmDates = {{ km_dates|safe }};
        const kmChartColors = getChartColors();

        const kmChart = new Chart(document.getElementById('kmChart'), {
            type: 'line',
            data: {
                labels: kmDates,
                datasets: [{
                    label: 'Km entre repostajes',
                    data: kmData,
                    borderColor: kmChartColors.primaryColor,
                    backgroundColor: kmChartColors.primaryFill
                }]
            },
            options: {
                scales: {
                    x: {
                        grid: { color: kmChartColors.gridColor },
                        ticks: { color: kmChartColors.tickColor }
                    },
                    y: {
                        beginAtZero: true,
                        grid: { color: kmChartColors.gridColor },
                        ticks: { color: kmChartColors.tickColor }
                    }
                }
            }
        });

        registerThemedChart(kmChart, function (chart, colors) {
            chart.data.datasets[0].borderColor = colors.primaryColor;
            chart.data.datasets[0].backgroundColor = colors.primaryFill;
            applyCartesianColors(chart, colors);
        });
    </script>

{% endblock %}