switched to bootstrap
This commit is contained in:
joachim lusiardi
parent
927abf425e
commit
a8b6789295
5
main.py
5
main.py
|
|
@ -1,9 +1,9 @@
|
||||||
import sqlite3
|
import sqlite3
|
||||||
|
from datetime import datetime
|
||||||
from flask import Flask
|
from flask import Flask
|
||||||
from flask import render_template
|
from flask import render_template
|
||||||
from flask import url_for
|
from flask import url_for
|
||||||
from flask import request, redirect, g
|
from flask import request, redirect, g
|
||||||
import datetime
|
|
||||||
|
|
||||||
app = Flask(__name__)
|
app = Flask(__name__)
|
||||||
DATABASE = '/tmp/rollerverbrauch.db'
|
DATABASE = '/tmp/rollerverbrauch.db'
|
||||||
|
|
@ -61,6 +61,9 @@ def preparePitStops(pitstops):
|
||||||
curr = pitstops[index]
|
curr = pitstops[index]
|
||||||
curr['distance'] = curr['odometer'] - last['odometer']
|
curr['distance'] = curr['odometer'] - last['odometer']
|
||||||
curr['average'] = round(100 * curr['litres']/curr['distance'], 2)
|
curr['average'] = round(100 * curr['litres']/curr['distance'], 2)
|
||||||
|
last_date = datetime.strptime(last['date'], '%Y-%m-%d')
|
||||||
|
curr_date = datetime.strptime(curr['date'], '%Y-%m-%d')
|
||||||
|
curr['days'] = (curr_date - last_date).days
|
||||||
return pitstops
|
return pitstops
|
||||||
|
|
||||||
def getLastPitStop():
|
def getLastPitStop():
|
||||||
|
|
|
||||||
479
static/main.css
479
static/main.css
|
|
@ -1,476 +1,19 @@
|
||||||
/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */
|
|
||||||
|
|
||||||
html {
|
|
||||||
color: #222;
|
|
||||||
font-size: 1em;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-moz-selection {
|
|
||||||
background: #b3d4fc;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
background: #b3d4fc;
|
|
||||||
text-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
display: block;
|
|
||||||
height: 1px;
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid #ccc;
|
|
||||||
margin: 1em 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
audio,
|
|
||||||
canvas,
|
|
||||||
iframe,
|
|
||||||
img,
|
|
||||||
svg,
|
|
||||||
video {
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
border: 0;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
resize: vertical;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browserupgrade {
|
|
||||||
margin: 0.2em 0;
|
|
||||||
background: #ccc;
|
|
||||||
color: #000;
|
|
||||||
padding: 0.2em 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* ===== Initializr Styles ==================================================
|
|
||||||
Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font: 16px/26px Helvetica, Helvetica Neue, Arial;
|
padding-top: 50px;
|
||||||
}
|
}
|
||||||
|
.starter-template {
|
||||||
.wrapper {
|
padding: 40px 15px;
|
||||||
width: 90%;
|
|
||||||
margin: 0 5%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===================
|
|
||||||
ALL: Orange Theme
|
|
||||||
=================== */
|
|
||||||
|
|
||||||
.header-container {
|
|
||||||
border-bottom: 20px solid #e44d26;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-container,
|
|
||||||
.main aside {
|
|
||||||
border-top: 20px solid #e44d26;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-container,
|
|
||||||
.footer-container,
|
|
||||||
.main aside {
|
|
||||||
background: graytext;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==============
|
|
||||||
MOBILE: Menu
|
|
||||||
============== */
|
|
||||||
|
|
||||||
nav ul {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
display: block;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
padding: 15px 0;
|
|
||||||
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-decoration: none;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
color: white;
|
|
||||||
background: #e44d26;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
nav a:hover,
|
th {
|
||||||
nav a:visited {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==============
|
|
||||||
MOBILE: Main
|
|
||||||
============== */
|
|
||||||
|
|
||||||
.main {
|
|
||||||
padding: 30px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main article h1 {
|
|
||||||
font-size: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main aside {
|
|
||||||
color: white;
|
|
||||||
padding: 0px 5% 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.footer-container footer {
|
|
||||||
color: white;
|
|
||||||
padding: 20px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ===============
|
|
||||||
ALL: IE Fixes
|
|
||||||
=============== */
|
|
||||||
|
|
||||||
.ie7 .title {
|
|
||||||
padding-top: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Author's custom styles
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Media Queries
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@media only screen and (min-width: 480px) {
|
|
||||||
|
|
||||||
/* ====================
|
|
||||||
INTERMEDIATE: Menu
|
|
||||||
==================== */
|
|
||||||
|
|
||||||
nav a {
|
|
||||||
float: left;
|
|
||||||
width: 27%;
|
|
||||||
margin: 0 1.7%;
|
|
||||||
padding: 25px 2%;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav li:first-child a {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav li:last-child a {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ========================
|
|
||||||
INTERMEDIATE: IE Fixes
|
|
||||||
======================== */
|
|
||||||
|
|
||||||
nav ul li {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.oldie nav a {
|
|
||||||
margin: 0 0.7%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 768px) {
|
|
||||||
|
|
||||||
/* ====================
|
|
||||||
WIDE: CSS3 Effects
|
|
||||||
==================== */
|
|
||||||
|
|
||||||
.header-container,
|
|
||||||
.main aside {
|
|
||||||
-webkit-box-shadow: 0 5px 10px #aaa;
|
|
||||||
-moz-box-shadow: 0 5px 10px #aaa;
|
|
||||||
box-shadow: 0 5px 10px #aaa;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============
|
|
||||||
WIDE: Menu
|
|
||||||
============ */
|
|
||||||
|
|
||||||
.title {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
float: right;
|
|
||||||
width: 38%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ============
|
|
||||||
WIDE: Main
|
|
||||||
============ */
|
|
||||||
|
|
||||||
.main article {
|
|
||||||
float: left;
|
|
||||||
width: 57%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main aside {
|
|
||||||
float: right;
|
|
||||||
width: 28%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (min-width: 1140px) {
|
|
||||||
|
|
||||||
/* ===============
|
|
||||||
Maximal Width
|
|
||||||
=============== */
|
|
||||||
|
|
||||||
.wrapper {
|
|
||||||
width: 1026px; /* 1140px - 10% for margins */
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Helper classes
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
.hidden {
|
|
||||||
display: none !important;
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visuallyhidden {
|
|
||||||
border: 0;
|
|
||||||
clip: rect(0 0 0 0);
|
|
||||||
height: 1px;
|
|
||||||
margin: -1px;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0;
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.visuallyhidden.focusable:active,
|
|
||||||
.visuallyhidden.focusable:focus {
|
|
||||||
clip: auto;
|
|
||||||
height: auto;
|
|
||||||
margin: 0;
|
|
||||||
overflow: visible;
|
|
||||||
position: static;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.invisible {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:before,
|
|
||||||
.clearfix:after {
|
|
||||||
content: " ";
|
|
||||||
display: table;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix:after {
|
|
||||||
clear: both;
|
|
||||||
}
|
|
||||||
|
|
||||||
.clearfix {
|
|
||||||
*zoom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* ==========================================================================
|
|
||||||
Print styles
|
|
||||||
========================================================================== */
|
|
||||||
|
|
||||||
@media print {
|
|
||||||
*,
|
|
||||||
*:before,
|
|
||||||
*:after {
|
|
||||||
background: transparent !important;
|
|
||||||
color: #000 !important;
|
|
||||||
box-shadow: none !important;
|
|
||||||
text-shadow: none !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
a,
|
|
||||||
a:visited {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
|
|
||||||
a[href]:after {
|
|
||||||
content: " (" attr(href) ")";
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr[title]:after {
|
|
||||||
content: " (" attr(title) ")";
|
|
||||||
}
|
|
||||||
|
|
||||||
a[href^="#"]:after,
|
|
||||||
a[href^="javascript:"]:after {
|
|
||||||
content: "";
|
|
||||||
}
|
|
||||||
|
|
||||||
pre,
|
|
||||||
blockquote {
|
|
||||||
border: 1px solid #999;
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
thead {
|
|
||||||
display: table-header-group;
|
|
||||||
}
|
|
||||||
|
|
||||||
tr,
|
|
||||||
img {
|
|
||||||
page-break-inside: avoid;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100% !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
p,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
orphans: 3;
|
|
||||||
widows: 3;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
page-break-after: avoid;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.form ul {
|
|
||||||
width:750px;
|
|
||||||
list-style-type:none;
|
|
||||||
list-style-position:outside;
|
|
||||||
margin:0px;
|
|
||||||
padding:0px;
|
|
||||||
}
|
|
||||||
.form li{
|
|
||||||
padding:12px;
|
|
||||||
border-bottom:1px solid #eee;
|
|
||||||
position:relative;
|
|
||||||
}
|
|
||||||
.form label {
|
|
||||||
width:125px;
|
|
||||||
margin-top: 3px;
|
|
||||||
display:inline-block;
|
|
||||||
float:left;
|
|
||||||
padding:3px;
|
|
||||||
}
|
|
||||||
.form input {
|
|
||||||
height:20px;
|
|
||||||
width:220px;
|
|
||||||
padding:5px 8px;
|
|
||||||
}
|
|
||||||
.form textarea {padding:8px; width:300px;}
|
|
||||||
.form button {margin-left:156px;}
|
|
||||||
.form button.submit {
|
|
||||||
background-color: #68b12f;
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
|
|
||||||
background: -webkit-linear-gradient(top, #68b12f, #50911e);
|
|
||||||
background: -moz-linear-gradient(top, #68b12f, #50911e);
|
|
||||||
background: -ms-linear-gradient(top, #68b12f, #50911e);
|
|
||||||
background: -o-linear-gradient(top, #68b12f, #50911e);
|
|
||||||
background: linear-gradient(top, #68b12f, #50911e);
|
|
||||||
border: 1px solid #509111;
|
|
||||||
border-bottom: 1px solid #5b992b;
|
|
||||||
border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-ms-border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
box-shadow: inset 0 1px 0 0 #9fd574;
|
|
||||||
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
|
|
||||||
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
|
|
||||||
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
|
|
||||||
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 6px 20px;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
text-shadow: 0 -1px 0 #396715;
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
}
|
}
|
||||||
.form button.submit:hover {
|
|
||||||
opacity:.85;
|
td {
|
||||||
cursor: pointer;
|
text-align: right;
|
||||||
}
|
padding-left: 10px;
|
||||||
.form button.submit:active {
|
padding-right: 10px;
|
||||||
border: 1px solid #20911e;
|
|
||||||
box-shadow: 0 0 10px 5px #356b0b inset;
|
|
||||||
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
|
|
||||||
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
|
|
||||||
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
|
|
||||||
-o-box-shadow: 0 0 10px 5px #356b0b inset;
|
|
||||||
}
|
|
||||||
.form a {
|
|
||||||
background-color: #68b12f;
|
|
||||||
background: -webkit-gradient(linear, left top, left bottom, from(#68b12f), to(#50911e));
|
|
||||||
background: -webkit-linear-gradient(top, #68b12f, #50911e);
|
|
||||||
background: -moz-linear-gradient(top, #68b12f, #50911e);
|
|
||||||
background: -ms-linear-gradient(top, #68b12f, #50911e);
|
|
||||||
background: -o-linear-gradient(top, #68b12f, #50911e);
|
|
||||||
background: linear-gradient(top, #68b12f, #50911e);
|
|
||||||
border: 1px solid #509111;
|
|
||||||
border-bottom: 1px solid #5b992b;
|
|
||||||
border-radius: 3px;
|
|
||||||
-webkit-border-radius: 3px;
|
|
||||||
-moz-border-radius: 3px;
|
|
||||||
-ms-border-radius: 3px;
|
|
||||||
-o-border-radius: 3px;
|
|
||||||
box-shadow: inset 0 1px 0 0 #9fd574;
|
|
||||||
-webkit-box-shadow: 0 1px 0 0 #9fd574 inset ;
|
|
||||||
-moz-box-shadow: 0 1px 0 0 #9fd574 inset;
|
|
||||||
-ms-box-shadow: 0 1px 0 0 #9fd574 inset;
|
|
||||||
-o-box-shadow: 0 1px 0 0 #9fd574 inset;
|
|
||||||
color: white;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 6px 20px;
|
|
||||||
text-align: center;
|
|
||||||
text-shadow: 0 -1px 0 #396715;
|
|
||||||
}
|
|
||||||
.form a:hover {
|
|
||||||
opacity:.85;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.form a:active {
|
|
||||||
border: 1px solid #20911e;
|
|
||||||
box-shadow: 0 0 10px 5px #356b0b inset;
|
|
||||||
-webkit-box-shadow:0 0 10px 5px #356b0b inset ;
|
|
||||||
-moz-box-shadow: 0 0 10px 5px #356b0b inset;
|
|
||||||
-ms-box-shadow: 0 0 10px 5px #356b0b inset;
|
|
||||||
-o-box-shadow: 0 0 10px 5px #356b0b inset;
|
|
||||||
}
|
}
|
||||||
|
|
@ -9,46 +9,52 @@
|
||||||
<title>Rollerverbrauch</title>
|
<title>Rollerverbrauch</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="apple-touch-icon" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
|
<!-- <link rel="apple-touch-icon" href="{{ url_for('static', filename='apple-touch-icon.png') }}">
|
||||||
|
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='normalize.min.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='normalize.min.css') }}">
|
||||||
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
|
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
|
||||||
|
|
||||||
<script src="{{ url_for('static', filename='modernizr-2.8.3-respond-1.4.2.min.js') }}"></script>
|
<script src="{{ url_for('static', filename='modernizr-2.8.3-respond-1.4.2.min.js') }}"></script>-->
|
||||||
|
|
||||||
|
|
||||||
|
<!-- Latest compiled and minified CSS -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
|
||||||
|
|
||||||
|
<!-- Optional theme -->
|
||||||
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
|
||||||
|
|
||||||
|
<!-- Latest compiled and minified JavaScript -->
|
||||||
|
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="{{ url_for('static', filename='main.css') }}">
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
<nav class="navbar navbar-inverse navbar-fixed-top">
|
||||||
|
<div class="container">
|
||||||
<div class="header-container">
|
<div class="navbar-header">
|
||||||
<header class="wrapper clearfix">
|
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||||
<h1 class="title">Rollerverbrauch</h1>
|
<span class="sr-only">Toggle navigation</span>
|
||||||
<nav>
|
<span class="icon-bar"></span>
|
||||||
<ul>
|
<span class="icon-bar"></span>
|
||||||
|
<span class="icon-bar"></span>
|
||||||
|
</button>
|
||||||
|
<a class="navbar-brand" href="{{ url_for('getPitStops') }}">Rollerverbrauch</a>
|
||||||
|
</div>
|
||||||
|
<div id="navbar" class="collapse navbar-collapse">
|
||||||
|
<ul class="nav navbar-nav">
|
||||||
{% block navigation %}
|
{% block navigation %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</div><!--/.nav-collapse -->
|
||||||
</header>
|
|
||||||
</div>
|
</div>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
<div class="main-container">
|
<div class="starter-template">
|
||||||
<div class="main wrapper clearfix">
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</div> <!-- #main -->
|
|
||||||
</div> <!-- #main-container -->
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
<div class="footer-container">
|
|
||||||
<footer class="wrapper">
|
|
||||||
<h3>RollerVerbrauch ©2015 by Joachim Lusiardi</h3>
|
|
||||||
</footer>
|
|
||||||
</div>
|
</div>
|
||||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
|
</div>
|
||||||
<script>window.jQuery || document.write('<script src="{{ url_for('static', filename='jquery-1.11.2.min.js') }}"><\/script>')</script>
|
|
||||||
<script src="{{ url_for('static', filename='main.js') }}"></script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
|
|
||||||
{% block navigation %}
|
{% block navigation %}
|
||||||
|
<li><a href='{{ url_for('getPitStops') }}'>Home</a></li>
|
||||||
|
<li><a href='{{ url_for('createPitStopForm') }}' class="active">Create Pitstop</a></li>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
{% block body %}
|
{% block body %}
|
||||||
|
|
@ -9,24 +11,46 @@
|
||||||
<p class='error'><strong>Error:</strong> {{ data.error }}</p>
|
<p class='error'><strong>Error:</strong> {{ data.error }}</p>
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<form class="form" action="{{ url_for('createPitStop') }}" method='post'>
|
<form class="form-horizontal" id='createPitStop' action="{{ url_for('createPitStop') }}" method='post'>
|
||||||
<ul>
|
<fieldset>
|
||||||
<li>
|
|
||||||
<label for='date'>Date of Pitstop:</label>
|
<!-- Form Name -->
|
||||||
<input type='date' name='date' id='date' value='{{ data.last.date }}'/>
|
<legend>Create Pitstop</legend>
|
||||||
</li>
|
|
||||||
<li>
|
<!-- Text input-->
|
||||||
<label for='odometer'>Odometer:</label>
|
<div class="control-group">
|
||||||
<input type='text' name='odometer' id='odometer' value='{{ data.last.odometer }}'/>
|
<label class="control-label" for="date">Date of Pitstop</label>
|
||||||
</li>
|
<div class="controls">
|
||||||
<li>
|
<input id="date" name="date" placeholder="" class="input-large" required="" type="date" value='{{ data.last.date }}' />
|
||||||
<label for='litres'>Litres fuelled:</label>
|
</div>
|
||||||
<input type='text' name='litres' id='litres' value='{{ data.last.litres }}'/>
|
</div>
|
||||||
</li>
|
|
||||||
<li>
|
<!-- Text input-->
|
||||||
<button class="submit" type="submit">Log pit stop</button>
|
<div class="control-group">
|
||||||
<a href="{{ url_for('getPitStops') }}">Abort</a>
|
<label class="control-label" for="odometer">Odometer</label>
|
||||||
</li>
|
<div class="controls">
|
||||||
</ul>
|
<input id="odometer" name="odometer" placeholder="" class="input-large" required="" type="text" value='{{ data.last.odometer }}' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Text input-->
|
||||||
|
<div class="control-group">
|
||||||
|
<label class="control-label" for="litres">Litres</label>
|
||||||
|
<div class="controls">
|
||||||
|
<input id="litres" name="litres" placeholder="" class="input-large" required="" type="text" value='{{ data.last.litres }}' />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Button (Double) -->
|
||||||
|
<div class="control-group">
|
||||||
|
<label class="control-label" for="buttonLogId"></label>
|
||||||
|
<div class="controls">
|
||||||
|
<button id="buttonLogId" name="buttonLogId" class="btn btn-success" onclick="document.getElementById('createPitStop').submit();">Log Pitstop</button>
|
||||||
|
<button id="buttonAbortId" type="button" name="buttonAbortId" class="btn btn-warning" onclick="window.location.href='{{ url_for('getPitStops') }}'">Abort</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</fieldset>
|
||||||
</form>
|
</form>
|
||||||
|
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
{% extends "layout.html" %}
|
{% extends "layout.html" %}
|
||||||
|
|
||||||
{% block navigation %}
|
{% block navigation %}
|
||||||
|
<li><a href='{{ url_for('getPitStops') }}' class="active">Home</a></li>
|
||||||
<li><a href='{{ url_for('createPitStopForm') }}'>Create Pitstop</a></li>
|
<li><a href='{{ url_for('createPitStopForm') }}'>Create Pitstop</a></li>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
||||||
|
|
@ -10,6 +11,9 @@
|
||||||
<th>
|
<th>
|
||||||
Date
|
Date
|
||||||
</th>
|
</th>
|
||||||
|
<th>
|
||||||
|
Day
|
||||||
|
</th>
|
||||||
<th>
|
<th>
|
||||||
Odometer
|
Odometer
|
||||||
</th>
|
</th>
|
||||||
|
|
@ -28,16 +32,19 @@
|
||||||
<td>
|
<td>
|
||||||
{{pitstop.date}}
|
{{pitstop.date}}
|
||||||
</td>
|
</td>
|
||||||
<td class='right-aligned'>
|
<td>
|
||||||
|
{% if pitstop.days %}{{pitstop.days}}{% else %} --{% endif %} days
|
||||||
|
</td>
|
||||||
|
<td>
|
||||||
{{pitstop.odometer}} km
|
{{pitstop.odometer}} km
|
||||||
</td>
|
</td>
|
||||||
<td class='right-aligned'>
|
<td>
|
||||||
{% if pitstop.distance %}{{pitstop.distance}}{% else %} --{% endif %} km
|
{% if pitstop.distance %}{{pitstop.distance}}{% else %} --{% endif %} km
|
||||||
</td>
|
</td>
|
||||||
<td class='right-aligned'>
|
<td>
|
||||||
{{pitstop.litres}} l
|
{{pitstop.litres}} l
|
||||||
</td>
|
</td>
|
||||||
<td class='right-aligned'>
|
<td>
|
||||||
{% if pitstop.average %}{{pitstop.average}}{% else %} --{% endif %} l/100km
|
{% if pitstop.average %}{{pitstop.average}}{% else %} --{% endif %} l/100km
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue