From aa9fda93c0eb8f506167cfc6307282366013ad04 Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Mon, 11 Jul 2016 22:15:23 +0200
Subject: [PATCH] statistics 3rd

---
 app/rollerverbrauch/templates/statistics.html | 274 +++++++++---------
 1 file changed, 134 insertions(+), 140 deletions(-)

diff --git a/app/rollerverbrauch/templates/statistics.html b/app/rollerverbrauch/templates/statistics.html
index 0b3ceb4..f559fec 100644
--- a/app/rollerverbrauch/templates/statistics.html
+++ b/app/rollerverbrauch/templates/statistics.html
@@ -23,159 +23,153 @@
     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 %}
+{% macro nav_tab(id, text, active) %}
+    {#
+
+    #}
+    <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 %}
+        {% set chartID = 'chart_' + baseId %}
+        <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 %}
+{% endmacro %}
+
+{% macro print_consumable_table(consumable) %}
+    <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>
+{% endmacro %}
+
+{% macro print_vehicle_table(vehicle) %}
+    <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>
 {% endmacro %}
 
+{% macro tab_script(id) %}
+    <script type="text/javascript">
+        jQuery(document).ready(function ($) {
+            $('#{{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 %}
-                <li {% if loop.first %}class="active" {%endif %}>
-                    <a href="#v{{vehicle.id}}" id="i{{vehicle.id}}" data-toggle="tab">
-                        {{ vehicle.name }}
-                    </a>
-                </li>
+                {{ nav_tab(vehicle.id, vehicle.name, loop.first) }}
             {% 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 class="tab-pane {% if loop.first %}active{% endif %}" id="ref_{{vehicle.id}}">
+                    {{ 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) }}
+                        {% for consumable in vehicle.consumables %}
+                            {{ nav_tab(vehicle.id|string + '_' + consumable.id|string, consumable.name, false) }}
+                        {% endfor %}
+                    </ul>
+                    <div id="vehicle_{{vehicle.id}}_content" class="tab-content ">
+                        {{ tab_pane(
+                            vehicle.id|string + '_odometer',
+                            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>
+                                {{ tab_script('vehicle_' + vehicle.id + '_' + consumable.id + '_tabs') }}
+                            </div>
+                        {% endfor %}
+                    </div>
+                    {{ tab_script('vehicle_' + vehicle.id + '_tabs') }}
                 </div>
             {% endfor %}
         </div>
+        {{ tab_script('vehicle_tabs') }}
     </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 %}