rollerverbrauch/app/rollerverbrauch/templates/statistics.html

{% extends "layout.html" %}

{% 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.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>
        </div>
    {% endfor %}
</div>

<ul id="charts_tabs" class="nav nav-tabs" data-tabs="tabs">
    <li class="active">
        <a href="#v{{vehicle.id}}_codometer" id="i{{vehicle.id}}_codometer" data-toggle="tab" >
            Odometer
        </a>
    </li>
    {% for consumable in vehicle.consumables %}
        <li>
            <a href="#v{{vehicle.id}}_c{{consumable.id}}_consumption" id="i{{vehicle.id}}_c{{consumable.id}}_consumption" data-toggle="tab" >
                {{ consumable.name }} consumption
            </a>
        </li>
    {% endfor %}
</ul>
<div id="charts_tabs-content" class="tab-content">
    <div class="tab-pane active" id="v{{vehicle.id}}_codometer">
        {% if vehicle.odometers|length > 0 %}
            <div id="odometerChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
            <script type="text/javascript">
                {{ chartScript('odometerChartDiv'+vehicle.id|str, vehicle.odometers, 'km') }}
            </script>
        {% else %}
            <div class="alert alert-warning" role="alert">
                not enough data: <a href="{{ url_for('select_consumable_for_new_pitstop', vid=vehicle.id) }}">log a pitstop</a>?
            </div>
        {% endif %}
    </div>
    {% for consumable in vehicle.consumables %}
        <div class="tab-pane active" id="v{{vehicle.id}}_c{{consumable.id}}_consumption">
            {% if consumable.average_amount|length > 0 %}
                <div id="consumptionChartDiv{{vehicle.id}}_c{{consumable.id}}" style="width:100%; height:500px;"></div>
                <script type="text/javascript">
                    {{ chartScript('consumptionChartDiv'+vehicle.id|str+'_c'+consumable.id|str, consumable.average_amount, consumable.unit+'/100km') }}
                </script>
            {% else %}
                <div class="alert alert-warning" role="alert">
                    not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id) }}">log a pitstop</a>?
                </div>
            {% endif %}
        </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 %}