improved design of the form elements

app/rollerverbrauch/__init__.py

@@ -38,6 +38,9 @@ from rollerverbrauch.entities import \
     Pitstop, \
     Vehicle
 
+# required to activate the filters
+import rollerverbrauch.filters
+
 
 user_datastore = SQLAlchemyUserDatastore(db, User, Role)
 security = Security(app, user_datastore)
@@ -82,7 +85,7 @@ def edit_vehicle(vid):
     form = EditVehicleForm()
 
     if form.validate_on_submit():
-        vehicle.name = form.name.data;
+        vehicle.name = form.name.data
         db.session.commit()
         return redirect(url_for('get_account_page'))
 

app/rollerverbrauch/filters.py

@@ -0,0 +1,9 @@
+from rollerverbrauch import app
+
+
+@app.template_filter('none_filter')
+def none_filter(value):
+    if value is None:
+        return ''
+    else:
+        return value

app/rollerverbrauch/forms.py

@@ -1,5 +1,5 @@
 from flask_wtf import Form
-from wtforms import DateField, IntegerField, DecimalField, StringField, SelectField
+from wtforms import DateField, IntegerField, DecimalField, StringField, SelectField, SubmitField
 from wtforms.validators import ValidationError, Length
 
 
@@ -20,12 +20,14 @@ def litres_check(form, field):
 
 class SelectVehicleForm(Form):
     vehicle = SelectField('Vehicle', coerce=int)
+    submit = SubmitField(label='Do it!')
 
 
 class CreatePitstopForm(Form):
     date = DateField('Date of Pitstop', validators=[date_check])
     odometer = IntegerField('Odometer (km)', validators=[odometer_check])
-    litres = DecimalField('Litres (l)', places=1, validators=[litres_check])
+    litres = DecimalField('Litres (l)', places=2, validators=[litres_check])
+    submit = SubmitField(label='Do it!')
     pitstop = None
 
     def set_pitstop(self, pitstop):
@@ -34,7 +36,8 @@ class CreatePitstopForm(Form):
 
 class EditVehicleForm(Form):
     name = StringField('Name', validators=[Length(1, 255)])
+    submit = SubmitField(label='Do it!')
 
 
 class DeleteVehicleForm(Form):
-    pass
+    submit = SubmitField(label='Do it!')

app/rollerverbrauch/templates/createVehicleForm.html

@@ -5,7 +5,7 @@
 <form class='form-horizontal' method="POST">
     {{ form.hidden_tag() }}
     {{ render_field_with_errors(form.name) }}
-    <input type="submit" value="Go">
+    {{ render_field_with_errors(form.submit) }}
 </form>
 
 

app/rollerverbrauch/templates/deleteVehicleForm.html

@@ -4,7 +4,7 @@
 <h3>Delete vehicle '{{vehicle.name}}'</h3>
 <form class='form-horizontal' method="POST">
     {{ form.hidden_tag() }}
-    <input type="submit" value="Go">
+    {{ render_field_with_errors(form.submit) }}
 </form>
 
 

app/rollerverbrauch/templates/editVehicleForm.html

@@ -3,9 +3,9 @@
 {% block body %}
 <h3>Edit vehicle</h3>
 <form class='form-horizontal' method="POST">
-  {{ form.hidden_tag() }}
+    {{ form.hidden_tag() }}
-  {{ render_field_with_errors(form.name) }}
+    {{ render_field_with_errors(form.name) }}
-    <input type="submit" value="Go">
+    {{ render_field_with_errors(form.submit) }}
 </form>
 
 

app/rollerverbrauch/templates/layout.html

@@ -15,19 +15,46 @@
 
 {% macro render_field_with_errors(field) %}
 <div class="form-group">
-	<label class="col-sm-6 control-label">
+	{% if field.type == 'SubmitField' %}
-  	{{ field.label }}
+		<div class="col-sm-12" style="align:center">
-	</label>
+			<input id="{{ field.id }}" name="{{ field.id }}" class="btn btn-default" type="submit" value="{{ field.label.text }}">
-  <div class="col-sm-2">
+		</div>
-  {{ field(**kwargs)|safe }}
+	{% else %}
-  {% if field.errors %}
+		<label class="col-sm-6 control-label">
-	<p class='error'>
+			{{ field.label }}
-    {% for error in field.errors %}
+		</label>
-      {{ error }}
+		<div class="col-sm-2">
-    {% endfor %}
+			{% if field.type == 'SelectField' %}
-	</p>
+				<select id="{{ field.id }}" name="{{ field.id }}" class="form-control">
-  {% endif %}
+					{% for choice in field.choices %}
-  </div>
+						<option value="{{ choice[0] }}">{{ choice[1] }}</option>
+					{% endfor %}
+				</select>
+			{% elif field.type == 'BooleanField' %}
+				<input class="form-control" type="checkbox" id="{{ field.id }}" name="{{ field.id }}" value="{{ field.default|none_filter }}" />
+			{% elif field.type == 'StringField' %}
+				<input class="form-control" type="text" id="{{ field.id }}" name="{{ field.id }}" value="{{ field.default|none_filter  }}" />
+			{% elif field.type == 'PasswordField' %}
+				<input class="form-control" type="password" id="{{ field.id }}" name="{{ field.id }}" value="{{ field.default|none_filter  }}" />
+			{% elif field.type == 'DateField' %}
+				<input class="form-control" type="date" id="{{ field.id }}" name="{{ field.id }}" value="{{ field.default|none_filter  }}" />
+			{% elif field.type == 'IntegerField' %}
+				<input class="form-control" type="number" id="{{ field.id }}" name="{{ field.id }}" value="{{ field.default|none_filter  }}" step="1" />
+			{% elif field.type == 'DecimalField' %}
+				<input class="form-control" type="number" id="{{ field.id }}" name="{{ field.id }}" value="{{ field.default|none_filter  }}" step="{{ 1 / 10 ** field.places}}" />
+			{% else %}
+				{{ field(**kwargs)|safe }}
+			{% endif %}
+			{% if field.errors %}
+				<p class='error'>
+					{% for error in field.errors %}
+						{{ error }}
+					{% endfor %}
+				</p>
+			{% endif %}
+		</div>
+	{% endif %}
+
 </div>
 {% endmacro %}
 

app/rollerverbrauch/templates/newPitStopForm.html

@@ -3,11 +3,11 @@
 {% block body %}
 <h3>New Pitstop for '{{ vehicle.name }}'</h3>
 <form class='form-horizontal' method="POST">
-  {{ form.hidden_tag() }}
+    {{ form.hidden_tag() }}
-  {{ render_field_with_errors(form.date) }}
+    {{ render_field_with_errors(form.date) }}
 	{{ render_field_with_errors(form.odometer) }}
 	{{ render_field_with_errors(form.litres) }}
-    <input type="submit" value="Go">
+    {{ render_field_with_errors(form.submit) }}
 </form>
 
 

app/rollerverbrauch/templates/security/change_password.html

@@ -8,6 +8,6 @@
   {{ render_field_with_errors(change_password_form.password) }}
   {{ render_field_with_errors(change_password_form.new_password) }}
   {{ render_field_with_errors(change_password_form.new_password_confirm) }}
-  {{ render_field(change_password_form.submit) }}
+  {{ render_field_with_errors(change_password_form.submit) }}
 </form>
 {% endblock %}

app/rollerverbrauch/templates/security/forgot_password.html

@@ -6,6 +6,6 @@
 <form class='form-horizontal' action="{{ url_for_security('forgot_password') }}" method="POST" name="forgot_password_form">
     {{ forgot_password_form.hidden_tag() }}
     {{ render_field_with_errors(forgot_password_form.email) }}
-    {{ render_field(forgot_password_form.submit) }}
+    {{ render_field_with_errors(forgot_password_form.submit) }}
 </form>
 {% endblock %}

app/rollerverbrauch/templates/security/login_user.html

@@ -9,7 +9,7 @@
     {{ render_field_with_errors(login_user_form.password) }}
     {{ render_field_with_errors(login_user_form.remember) }}
     {{ render_field(login_user_form.next) }}
-    {{ render_field(login_user_form.submit) }}
+    {{ render_field_with_errors(login_user_form.submit) }}
     {% if security.recoverable %}
         <a href="{{ url_for_security('forgot_password') }}">Forgot password</a>
     {% endif %}

app/rollerverbrauch/templates/security/register_user.html

@@ -10,6 +10,6 @@
     {% if register_user_form.password_confirm %}
         {{ render_field_with_errors(register_user_form.password_confirm) }}
     {% endif %}
-    {{ render_field(register_user_form.submit) }}
+    {{ render_field_with_errors(register_user_form.submit) }}
 </form>
 {% endblock %}

app/rollerverbrauch/templates/selectVehice.html

@@ -1,10 +1,11 @@
 {% extends "layout.html" %}
 
 {% block body %}
+<h3>Select Vehicle</h3>
 <form class='form-horizontal' method="POST">
   {{ form.hidden_tag() }}
   {{ render_field_with_errors(form.vehicle) }}
-  <input type="submit" value="Go">
+  {{ render_field_with_errors(form.submit) }}
 </form>
 
 {% endblock %}