first shot

app/templates/statistics.html

@@ -25,7 +25,14 @@
 
 {% macro nav_tab(id, text, active) %}
     {#
+        Create a UI element to select the shown pane of a tabbed view
 
+        id:
+            id of the pane to select
+        text:
+            the text in the UI element
+        active:
+            boolean stating if the tab is active or not
     #}
     <li class="{% if active %}active{% endif %}">
         <a href="#ref_{{id}}" id="id_{{id}}" data-toggle="tab" >
@@ -87,7 +94,15 @@
                 <th>Logged Costs:</th>
                 <td>{{ vehicle.overall_costs | round(2) }} €</td>
             </tr>
-        </table>
+            <tr>
+                <th>Logged Costs per km:</th>
+                {% if vehicle.costs_per_distance != 'N/A' %}
+                    <td>{{ vehicle.costs_per_distance  | round(2) }} €/100km</td>
+                {% else %}
+                   <td>{{ vehicle.costs_per_distance }}</td>
+                {% endif %}
+            </tr>
+       </table>
     </div>
 {% endmacro %}
 
@@ -115,6 +130,7 @@
                     {{ 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) }}
+                        {{ nav_tab(vehicle.id|string + '_costs', 'Costs', false) }}
                         {% for consumable in vehicle.consumables %}
                             {{ nav_tab(vehicle.id|string + '_' + consumable.id|string, consumable.name, false) }}
                         {% endfor %}
@@ -131,6 +147,17 @@
                             true
                             )
                         }}
+                        {{ tab_pane(
+                            vehicle.id|string + '_costs',
+                            chart(
+                                vehicle.costs,
+                                'ref_' + vehicle.id|string + '_costs',
+                                '€',
+                                url_for('select_consumable_for_new_pitstop', vid=vehicle.id)
+                            ),
+                            false
+                            )
+                        }}
                         {% for consumable in vehicle.consumables %}
                             <div class="tab-pane" id="ref_{{vehicle.id}}_{{consumable.id}}">
                                 {{ print_consumable_table(consumable) }}