jlusiardi
/
rollerverbrauch
1
0
Fork 0
Code Issues 2 Pull Requests Projects Releases 12 Wiki Activity

statistics 3rd

This commit is contained in:
Joachim Lusiardi 2016-07-11 22:15:23 +02:00
parent ca5bd9bb02
commit aa9fda93c0
1 changed files with 134 additions and 140 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

224
app/rollerverbrauch/templates/statistics.html
View File

@ -23,10 +23,26 @@
zoom_chart_{{ hash }}() zoom_chart_{{ hash }}()
{% endmacro %} {% endmacro %}
{% macro chart(data, baseId, unit, link, active)%} {% macro nav_tab(id, text, active) %}
{% set chartID = 'chart_' + baseId %} {#
<div class="tab-pane {% if active %}active{% endif %}" id="{{ baseId }}">
#}
<li class="{% if active %}active{% endif %}">
<a href="#ref_{{id}}" id="id_{{id}}" data-toggle="tab" >
{{ text }}
</a>
</li>
{% endmacro %}
{% macro tab_pane(id, content, active) %}
<div class="tab-pane {% if active %}active{% endif %}" id="ref_{{ id }}">
{{ content }}
</div>
{% endmacro %}
{% macro chart(data, baseId, unit, link) %}
{% if data|length > 0 %} {% if data|length > 0 %}
{% set chartID = 'chart_' + baseId %}
<div id="{{ chartID }}" style="width:100%; height:500px;"></div> <div id="{{ chartID }}" style="width:100%; height:500px;"></div>
<script type="text/javascript"> <script type="text/javascript">
{{ chartScript(chartID, data, unit) }} {{ chartScript(chartID, data, unit) }}
@ -36,49 +52,9 @@
not enough data: <a href="{{ link }}">log a pitstop</a>? not enough data: <a href="{{ link }}">log a pitstop</a>?
</div> </div>
{% endif %} {% endif %}
</div>
{% endmacro %} {% endmacro %}
{% block body %} {% macro print_consumable_table(consumable) %}
<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"> <table class="table table-striped table-bordered table-condensed">
<tr> <tr>
<th>Average Distance:</th> <th>Average Distance:</th>
@ -97,85 +73,103 @@
<td>{{ consumable.average_amount_used | round(2) }} {{ consumable.unit }}/100km</td> <td>{{ consumable.average_amount_used | round(2) }} {{ consumable.unit }}/100km</td>
</tr> </tr>
</table> </table>
{% endmacro %}
{% set ID = vehicle.id|string + '_c' + consumable.id|string %} {% macro print_vehicle_table(vehicle) %}
{% set odometerID = ID + '_odometer' %} <h3>{{vehicle.name}}</h3>
{% set consumptionID = ID + '_consumption' %} <div class="table-responsive">
{% set amountID = ID + '_amount' %} <table class="table table-striped table-bordered table-condensed">
<ul id="charts_{{ID}}_tabs" class="nav nav-tabs" data-tabs="tabs"> <tr>
<li class="active"> <th>Logged Distance:</th>
<a href="#v{{odometerID}}" id="i{{odometerID}}" data-toggle="tab" > <td>{{ vehicle.overall_distance | round(2) }} km</td>
Odometer </tr>
</a> <tr>
</li> <th>Logged Costs:</th>
<li> <td>{{ vehicle.overall_costs | round(2) }} €</td>
<a href="#v{{consumptionID}}" id="i{{consumptionID}}" data-toggle="tab" > </tr>
Consumption </table>
</a> </div>
</li> {% endmacro %}
<li>
<a href="#v{{amountID}}" id="i{{amountID}}" data-toggle="tab" > {% macro tab_script(id) %}
Amount <script type="text/javascript">
</a> jQuery(document).ready(function ($) {
</li> $('#{{id}}').tab();
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click()
}
});
</script>
{% endmacro %}
{% block body %}
<div id="content">
<ul id="vehicle_tabs" class="nav nav-tabs" data-tabs="tabs">
{% for vehicle in data %}
{{ nav_tab(vehicle.id, vehicle.name, loop.first) }}
{% endfor %}
</ul> </ul>
<div id="charts_{{ID}}_tabs-content" class="tab-content"> <div id="vehicle_content" class="tab-content ">
{% set baseId = 'v' + odometerID %} {% for vehicle in data %}
{% set link = url_for('select_consumable_for_new_pitstop', vid=vehicle.id) %} <div class="tab-pane {% if loop.first %}active{% endif %}" id="ref_{{vehicle.id}}">
{{ chart(vehicle.odometers, baseId, 'km', link, true) }} {{ print_vehicle_table(vehicle) }}
<ul id="vehicle_{{vehicle.id}}_tabs" class="nav nav-tabs" data-tabs="tabs">
{{ nav_tab(vehicle.id|string + '_odometer', 'Odometer', true) }}
{% set baseId = 'v' + consumptionID %} {% for consumable in vehicle.consumables %}
{% set link = url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id) %} {{ nav_tab(vehicle.id|string + '_' + consumable.id|string, consumable.name, false) }}
{{ chart(consumable.average_amount, baseId, consumable.unit + '/100km', link, false) }} {% endfor %}
</ul>
<div id="vehicle_{{vehicle.id}}_content" class="tab-content ">
{% set baseId = 'v' + amountID %} {{ tab_pane(
{% set link = url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id) %} vehicle.id|string + '_odometer',
{{ chart(consumable.amounts, baseId, consumable.unit, link, false) }} chart(
vehicle.odometers,
'ref_' + vehicle.id|string + '_odometer',
'km',
url_for('select_consumable_for_new_pitstop', vid=vehicle.id)
),
true
)
}}
{% for consumable in vehicle.consumables %}
<div class="tab-pane" id="ref_{{vehicle.id}}_{{consumable.id}}">
{{ print_consumable_table(consumable) }}
<ul id="consumable_{{vehicle.id}}_{{consumable.id}}_tabs" class="nav nav-tabs" data-tabs="tabs">
{{ nav_tab(vehicle.id|string + '_' + consumable.id|string + '_consumption', 'Consumption', true) }}
{{ nav_tab(vehicle.id|string + '_' + consumable.id|string + '_amount', 'Amount', false) }}
</ul>
<div id="consumable_{{vehicle.id}}_{{consumable.id}}_content" class="tab-content ">
{{ tab_pane(
vehicle.id|string + '_' + consumable.id|string + '_consumption',
chart(
consumable.average_amount,
'ref_' + vehicle.id|string + '_' + consumable.id|string + '_consumption',
consumable.unit + '/100km',
url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id)
),
true
)
}}
{{ tab_pane(
vehicle.id|string + '_' + consumable.id|string + '_amount',
chart(
consumable.amounts,
'ref_' + vehicle.id|string + '_' + consumable.id|string + '_amount',
consumable.unit,
url_for('create_pit_stop_form', vid=vehicle.id, cid=consumable.id)
),
false
)
}}
</div> </div>
<script type="text/javascript"> {{ tab_script('vehicle_' + vehicle.id + '_' + consumable.id + '_tabs') }}
jQuery(document).ready(function ($) {
$('#charts_{{ID}}_tabs').tab();
if(window.location.hash != "") {
$('a[href="' + window.location.hash + '"]').click()
}
});
</script>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{{ tab_script('vehicle_' + vehicle.id + '_tabs') }}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>
{{ tab_script('vehicle_tabs') }}
</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 %} {% endblock %}