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

Some more UI changes

This commit is contained in:
Joachim Lusiardi 2016-05-24 06:49:39 +02:00
parent 873a28aa28
commit 293ff50809
8 changed files with 146 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app/rollerverbrauch/static/main.css
View File

@ -1,6 +1,7 @@
body { body {
padding-top: 50px; padding-top: 50px;
} }
.starter-template { .starter-template {
padding-top: 30px; padding-top: 30px;
padding-bottom: 60px; padding-bottom: 60px;
@ -23,11 +24,6 @@ td {
color: #a94442; color: #a94442;
} }
.pitstop {
}
//.navbar-fixed-bottom{
//margin-bottom:20px;
//}
.nav-pills > li > a { .nav-pills > li > a {
border: 1px solid; border: 1px solid;
} }
@ -42,6 +38,7 @@ h2 {
h3 { h3 {
margin-top: 0px; margin-top: 0px;
text-align: center;
} }
h3:before{ h3:before{
content:"― "; content:"― ";
@ -50,8 +47,19 @@ h3:after{
content:" ―"; content:" ―";
} }
.tab-content > .active {
border-left: 1px solid #ddd;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 1px;
padding-top: 15px;
}
.panel-body > p, .panel-body > ul {
text-align: left;
}
// for small devices
@media only screen @media only screen
and (min-device-width : 320px) and (min-device-width : 320px)
and (max-device-width : 568px) { and (max-device-width : 568px) {

68
app/rollerverbrauch/templates/account.html
View File

@ -5,7 +5,7 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Password</div> <div class="panel-heading">Password</div>
<div class="panel-body"> <div class="panel-body">
<a href='{{ url_for('security.change_password') }}'> <a href='{{ url_for('security.change_password') }}' class="btn btn-primary " role="button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Change <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Change
</a> </a>
</div> </div>
@ -13,44 +13,46 @@
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-heading">Vehicles</div> <div class="panel-heading">Vehicles</div>
<div class="panel-body"> <div class="panel-body">
<a href="{{ url_for('create_vehicle') }}"> <a href="{{ url_for('create_vehicle') }}" class="btn btn-primary " role="button">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> create <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> create
</a> </a>
</div> </div>
<table class="table table-striped table-bordered"> <table class="table table-striped table-bordered">
<tr> <tbody>
<th>
Vehicle
</th>
<th>
Info
</th>
<th>
Actions
</th>
</tr>
{% for vehicle in current_user.vehicles %}
<tr> <tr>
<td style="text-align:center"> <th>
{{ vehicle.name }} Vehicle
</td> </th>
<td style="text-align:center"> <th>
{{ vehicle.pitstops | length }} pitstops Info
</td> </th>
<td style="text-align:center"> <th>
<a href="{{ url_for('edit_vehicle', vid=vehicle.id) }}"> Actions
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit </th>
</a>
{% if current_user.vehicles | length > 1 %}
<a href="{{ url_for('delete_vehicle', vid=vehicle.id) }}">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete
</a>
{% else %}
&nbsp;
{% endif %}
</td>
</tr> </tr>
{% endfor %} {% for vehicle in current_user.vehicles %}
<tr>
<td>
{{ vehicle.name }}
</td>
<td>
{{ vehicle.pitstops | length }} pitstops
</td>
<td>
<a href="{{ url_for('edit_vehicle', vid=vehicle.id) }}" class="btn btn-primary " role="button">
<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> edit
</a>
{% if current_user.vehicles | length > 1 %}
<a href="{{ url_for('delete_vehicle', vid=vehicle.id) }}" class="btn btn-primary btn-warning " role="button">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span> delete
</a>
{% else %}
&nbsp;
{% endif %}
</td>
</tr>
{% endfor %}
</tbody>
</table> </table>
</div> </div>
{% endblock %} {% endblock %}

22
app/rollerverbrauch/templates/admin.html
View File

@ -1,12 +1,18 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block body %} {% block body %}
<h3>Admin</h3> <div class="col-md-2" ></div>
We have {{ data.users|length }} users so far: <div class="col-md-8">
<ul> <div class="panel panel-default">
{% for user in data.users %} <div class="panel-body">
<li>{{user.email}}</li> <h3>Admin</h3>
{% endfor %} We have {{ data.users|length }} users so far:
</ul> <ul>
<a href='{{ url_for('security.login', _external=True) }}'>Login</a> {% for user in data.users %}
<li>{{user.email}}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endblock %} {% endblock %}

2
app/rollerverbrauch/templates/deleteVehicleForm.html
View File

@ -5,7 +5,7 @@
<div class="col-md-8"> <div class="col-md-8">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body">
<h3>Delete vehicle '{{vehicle.name}}'</h3> <h3>Delete vehicle '{{vehicle.name}}'?</h3>
<form class='form-horizontal' method="POST"> <form class='form-horizontal' method="POST">
{{ form.hidden_tag() }} {{ form.hidden_tag() }}
{{ render_field_with_errors(form.submit) }} {{ render_field_with_errors(form.submit) }}

2
app/rollerverbrauch/templates/index.html
View File

@ -8,7 +8,7 @@
</div> </div>
<div class="col-md-8"> <div class="col-md-8">
<div class="panel panel-default"> <div class="panel panel-default">
<div class="panel-body"> <div class="panel-body" >
<h1>Join the pitstop community!</h1> <h1>Join the pitstop community!</h1>
<p>There are already {{ data.users}} members with {{ data.vehicles }} vehicles who have logged {{ data.pitstops }} pitstops fuelling {{ data.litres }}l for {{ data.kilometers }}km.</p> <p>There are already {{ data.users}} members with {{ data.vehicles }} vehicles who have logged {{ data.pitstops }} pitstops fuelling {{ data.litres }}l for {{ data.kilometers }}km.</p>

3
app/rollerverbrauch/templates/layout.html
View File

@ -176,7 +176,7 @@
{% endblock %} {% endblock %}
</div> </div>
</div> </div>
{#
<nav class="navbar navbar-inverse navbar-fixed-bottom"> <nav class="navbar navbar-inverse navbar-fixed-bottom">
<div class="container"> <div class="container">
<div class="navbar-footer"> <div class="navbar-footer">
@ -184,5 +184,6 @@
</div> </div>
</div> </div>
</nav> </nav>
#}
</body> </body>
</html> </html>

116
app/rollerverbrauch/templates/pitstops.html
View File

@ -1,4 +1,4 @@
{% extends "layout.html" %} {% extends "layout.html" %}
{% block body %} {% block body %}
<div id="content"> <div id="content">
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs"> <ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
@ -14,60 +14,66 @@
{% for vehicle in current_user.vehicles %} {% for vehicle in current_user.vehicles %}
<div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}"> <div class="tab-pane {% if loop.first %}active{% endif %}" id="v{{vehicle.id}}">
<h3>{{vehicle.name}}</h3> <h3>{{vehicle.name}}</h3>
<div class="table-responsive"> {% if vehicle.pitstops %}
<table class="table table-striped table-bordered table-condensed"> <div class="table-responsive">
<tr> <table class="table table-striped table-bordered table-condensed">
<th> <tr>
Date<br/> <th>
Days Date<br/>
</th> Days
<th> </th>
Odometer<br/> <th>
Distance Odometer<br/>
</th> Distance
<th> </th>
Litres<br/> <th>
Average Litres<br/>
</th> Average
</tr> </th>
{% for pitstop in vehicle.pitstops|reverse %} </tr>
{% if not loop.last %} {% for pitstop in vehicle.pitstops|reverse %}
{% set days = (pitstop.date - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].date).days %} {% if not loop.last %}
{% set distance = pitstop.odometer - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].odometer %} {% set days = (pitstop.date - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].date).days %}
{% set average = (pitstop.litres / distance) * 100 %} {% set distance = pitstop.odometer - vehicle.pitstops[vehicle.pitstops|length - loop.index - 1].odometer %}
<tr class='pitstop'> {% set average = (pitstop.litres / distance) * 100 %}
<td> <tr class='pitstop'>
{{pitstop.date}}<br/> <td>
{{ days }} days {{pitstop.date}}<br/>
</td> {{ days }} days
<td> </td>
{{pitstop.odometer}} km<br/> <td>
{{distance}} km {{pitstop.odometer}} km<br/>
</td> {{distance}} km
<td> </td>
{{pitstop.litres}} l<br/> <td>
{{average | round(2)}} l/100km {{pitstop.litres}} l<br/>
</td> {{average | round(2)}} l/100km
</tr> </td>
{% else %} </tr>
<tr class='pitstop'> {% else %}
<td> <tr class='pitstop'>
{{pitstop.date}}<br/> <td>
-- days {{pitstop.date}}<br/>
</td> -- days
<td> </td>
{{pitstop.odometer}} km<br/> <td>
-- km {{pitstop.odometer}} km<br/>
</td> -- km
<td> </td>
{{pitstop.litres}} l<br/> <td>
-- l/100km {{pitstop.litres}} l<br/>
</td> -- l/100km
</tr> </td>
{% endif %} </tr>
{% endfor %} {% endif %}
</table> {% endfor %}
</div> </table>
</div>
{% else %}
<div class="alert alert-warning" role="alert">
not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
</div>
{% endif %}
</div> </div>
{% endfor %} {% endfor %}
</div> </div>

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

@ -61,14 +61,28 @@
</li> </li>
</ul> </ul>
<div id="charts_tabs-content" class="tab-content"> <div id="charts_tabs-content" class="tab-content">
<div class="tab-pane active" id="v{{vehicle.id}}_c1"> <div class="tab-pane active" id="v{{vehicle.id}}_c3">
{% if vehicle.pitstop_count > 1 %}
<div id="averageUsageDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
<script type="text/javascript">
{{ chartScript('averageUsageDiv'+vehicle.id|str, vehicle.average_litres, 'l/100 km') }}
</script>
{% else %}
<div class="alert alert-warning" role="alert">
not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
</div>
{% endif %}
</div>
<div class="tab-pane " id="v{{vehicle.id}}_c1">
{% if vehicle.pitstop_count > 0 %} {% if vehicle.pitstop_count > 0 %}
<div id="fuelledChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div> <div id="fuelledChartDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
<script type="text/javascript"> <script type="text/javascript">
{{ chartScript('fuelledChartDiv'+vehicle.id|str, vehicle.litres, 'l') }} {{ chartScript('fuelledChartDiv'+vehicle.id|str, vehicle.litres, 'l') }}
</script> </script>
{% else %} {% else %}
not enough data. <div class="alert alert-warning" role="alert">
not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
</div>
{% endif %} {% endif %}
</div> </div>
<div class="tab-pane " id="v{{vehicle.id}}_c2"> <div class="tab-pane " id="v{{vehicle.id}}_c2">
@ -78,17 +92,9 @@
{{ chartScript('odometerChartDiv'+vehicle.id|str, vehicle.odometers, 'km') }} {{ chartScript('odometerChartDiv'+vehicle.id|str, vehicle.odometers, 'km') }}
</script> </script>
{% else %} {% else %}
not enough data. <div class="alert alert-warning" role="alert">
{% endif %} not enough data: <a href="{{ url_for('create_pit_stop_form', vid=vehicle.id) }}">log a pitstop</a>?
</div> </div>
<div class="tab-pane " id="v{{vehicle.id}}_c3">
{% if vehicle.pitstop_count > 1 %}
<div id="averageUsageDiv{{vehicle.id}}" style="width:100%; height:500px;"></div>
<script type="text/javascript">
{{ chartScript('averageUsageDiv'+vehicle.id|str, vehicle.average_litres, 'l/100 km') }}
</script>
{% else %}
not enough data.
{% endif %} {% endif %}
</div> </div>
</div> </div>