rollerverbrauch/app/rollerverbrauch/templates/statistics.html

{% extends "layout.html" %}

{% macro chartScript(divId, data, unit)%}
    {% set hash = divId | md5 %}

    data_{{ hash }} = [{% for stop in data %}{
                                "date": "{{stop.date}}",
                                "value": {{stop.value}}
                            }{% if not loop.last %},{%endif%}
                            {% endfor%}
                            ]
    var chart_{{ hash }} = createChart('{{divId}}', data_{{ hash }}, '{{unit}}');

    function zoom_chart_{{ hash }}() {
        chart_{{ hash }}.zoomToIndexes(
            chart_{{ hash }}.dataProvider.length - 40,
            chart_{{ hash }}.dataProvider.length - 1
        );
    }

    chart_{{ hash }}.addListener("rendered", zoom_chart_{{ hash }});

    zoom_chart_{{ hash }}()
{% endmacro %}

{% macro chart(data, baseId, unit, link, active)%}
    {% set chartID = 'chart_' + baseId %}
    <div class="tab-pane {% if active %}active{% endif %}" id="{{ baseId }}">
        {% if data|length > 0 %}
            <div id="{{ chartID }}" style="width:100%; height:500px;"></div>
            <script type="text/javascript">
                {{ chartScript(chartID, data, unit) }}
            </script>
        {% else %}
            <div class="alert alert-warning" role="alert">
                not enough data: <a href="{{ link }}">log a pitstop</a>?
            </div>
        {% endif %}
    </div>
{% endmacro %}

{% block body %}
    <div id="content">
        <ul id="vehicle_tabs" class="nav nav-tabs" data-tabs="tabs">
            {% for vehicle in data %}
                <li {% if loop.first %}class="active" {%endif %}>
                    <a href="#v{{vehicle.id}}" id="i{{vehicle.id}}" data-toggle="tab">
                        {{ vehicle.name }}
                    </a>
                </li>
            {% endfor %}
        </ul>
        <div id="vehicle_content" class="tab-content ">
            {% for vehicle in data %}
                <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
                    <h3>{{vehicle.name}}</h3>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-condensed">
							<tr>
								<th>Logged Distance:</th>
								<td>{{ vehicle.overall_distance | round(2) }} km</td>
							</tr>
							<tr>
								<th>Logged Costs:</th>
								<td>{{ vehicle.overall_costs | round(2) }} €</td>
							</tr>
						</table>
					</div>

<ul id="consumable_tabs" class="nav nav-tabs" data-tabs="tabs">
    {% for consumable in vehicle.consumables %}
        <li class="{% if loop.first %}active{% endif %}">
            <a href="#v{{vehicle.id}}_c{{consumable.id}}" id="i{{vehicle.id}}_c{{consumable.id}}" data-toggle="tab" >
                {{ consumable.name }}
            </a>
        </li>
    {% endfor %}
</ul>
<div id="consumable_tabs-content" class="tab-content">
    {% for consumable in vehicle.consumables %}
        <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}_c{{consumable.id}}">
            <table class="table table-striped table-bordered table-condensed">
                <tr>
                    <th>Average Distance:</th>
                    <td>{{ consumable.average_distance | round(2) }} km</td>
                </tr>
                <tr>
                    <th>Amount fuelled:</th>
                    <td>{{ consumable.overall_amount | round(2) }} {{ consumable.unit }}</td>
                </tr>
                <tr>
                    <th>Average Amount fuelled:</th>
                    <td>{{ consumable.average_amount_fuelled | round(2) }} {{ consumable.unit }}</td>
                </tr>
                <tr>
                    <th>Average Amount used:</th>
                    <td>{{ consumable.average_amount_used | round(2) }} {{ consumable.unit }}/100km</td>
                </tr>
            </table>

{% set ID = vehicle.id|string + '_c' + consumable.id|string %}
{% set odometerID = ID + '_odometer' %}
{% set consumptionID = ID + '_consumption' %}
{% set amountID = ID + '_amount' %}
<ul id="charts_{{ID}}_tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active">
        <a href="#v{{odometerID}}" id="i{{odometerID}}" data-toggle="tab" >
            Odometer
        </a>
    </li>
    <li>
        <a href="#v{{consumptionID}}" id="i{{consumptionID}}" data-toggle="tab" >
            Consumption
        </a>
    </li>
    <li>
        <a href="#v{{amountID}}" id="i{{amountID}}" data-toggle="tab" >
            Amount
        </a>
    </li>
</ul>
<div id="charts_{{ID}}_tabs-content" class="tab-content">
    {% set baseId = 'v' + odometerID %}
    {% set link = url_for('select_consumable_for_new_pitstop', vid=vehicle.id) %}
    {{ chart(vehicle.odometers, baseId, 'km', link, true) }}


    {% set baseId = 'v' + consumptionID %}
    {% set link = url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id) %}
    {{ chart(consumable.average_amount, baseId, consumable.unit + '/100km', link, false) }}


    {% set baseId = 'v' + amountID %}
    {% set link = url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id) %}
    {{ chart(consumable.amounts, baseId, consumable.unit, link, false) }}
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
    $('#charts_{{ID}}_tabs').tab();
    if(window.location.hash != "") {
        $('a[href="' + window.location.hash + '"]').click()
    }
});
</script>

        </div>
    {% endfor %}
</div>


                </div>
            {% endfor %}
        </div>
    </div>


    <script type="text/javascript">
        jQuery(document).ready(function ($) {
            $('#vehicle_tabs').tab();
            if(window.location.hash != "") {
                  $('a[href="' + window.location.hash + '"]').click()
            }
          });
        jQuery(document).ready(function ($) {
            $('#consumable_tabs').tab();
            if(window.location.hash != "") {
                  $('a[href="' + window.location.hash + '"]').click()
            }
          });
        jQuery(document).ready(function ($) {
            $('#charts_tabs').tab();
            if(window.location.hash != "") {
                  $('a[href="' + window.location.hash + '"]').click()
            }
          });

    </script>



{% endblock %}