From 3e2d62b28fe386a98501058cd0d3bf1ab97c5d4e Mon Sep 17 00:00:00 2001
From: Joachim Lusiardi <joachim@lusiardi.de>
Date: Wed, 27 Apr 2016 07:23:28 +0200
Subject: [PATCH] improved design of the form elements

---
 app/rollerverbrauch/__init__.py               |  5 +-
 app/rollerverbrauch/filters.py                |  9 ++++
 app/rollerverbrauch/forms.py                  |  9 ++--
 .../templates/createVehicleForm.html          |  2 +-
 .../templates/deleteVehicleForm.html          |  2 +-
 .../templates/editVehicleForm.html            |  6 +--
 app/rollerverbrauch/templates/layout.html     | 53 ++++++++++++++-----
 .../templates/newPitStopForm.html             |  6 +--
 .../templates/security/change_password.html   |  2 +-
 .../templates/security/forgot_password.html   |  2 +-
 .../templates/security/login_user.html        |  2 +-
 .../templates/security/register_user.html     |  2 +-
 .../templates/selectVehice.html               |  3 +-
 13 files changed, 73 insertions(+), 30 deletions(-)
 create mode 100644 app/rollerverbrauch/filters.py

diff --git a/app/rollerverbrauch/__init__.py b/app/rollerverbrauch/__init__.py
index 8a959cd..e2eea31 100644
--- a/app/rollerverbrauch/__init__.py
+++ b/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'))
 
diff --git a/app/rollerverbrauch/filters.py b/app/rollerverbrauch/filters.py
new file mode 100644
index 0000000..00a0e59
--- /dev/null
+++ b/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
diff --git a/app/rollerverbrauch/forms.py b/app/rollerverbrauch/forms.py
index d8a708f..2f2b87f 100644
--- a/app/rollerverbrauch/forms.py
+++ b/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!')
diff --git a/app/rollerverbrauch/templates/createVehicleForm.html b/app/rollerverbrauch/templates/createVehicleForm.html
index d09daa8..4ea3b84 100644
--- a/app/rollerverbrauch/templates/createVehicleForm.html
+++ b/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>
 
 
diff --git a/app/rollerverbrauch/templates/deleteVehicleForm.html b/app/rollerverbrauch/templates/deleteVehicleForm.html
index 73678cf..5e957c3 100644
--- a/app/rollerverbrauch/templates/deleteVehicleForm.html
+++ b/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>
 
 
diff --git a/app/rollerverbrauch/templates/editVehicleForm.html b/app/rollerverbrauch/templates/editVehicleForm.html
index 3d7958a..627a24f 100644
--- a/app/rollerverbrauch/templates/editVehicleForm.html
+++ b/app/rollerverbrauch/templates/editVehicleForm.html
@@ -3,9 +3,9 @@
 {% block body %}
 <h3>Edit vehicle</h3>
 <form class='form-horizontal' method="POST">
-  {{ form.hidden_tag() }}
-  {{ render_field_with_errors(form.name) }}
-    <input type="submit" value="Go">
+    {{ form.hidden_tag() }}
+    {{ render_field_with_errors(form.name) }}
+    {{ render_field_with_errors(form.submit) }}
 </form>
 
 
diff --git a/app/rollerverbrauch/templates/layout.html b/app/rollerverbrauch/templates/layout.html
index 4f6a810..e44af45 100644
--- a/app/rollerverbrauch/templates/layout.html
+++ b/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">
-  	{{ field.label }}
-	</label>
-  <div class="col-sm-2">
-  {{ field(**kwargs)|safe }}
-  {% if field.errors %}
-	<p class='error'>
-    {% for error in field.errors %}
-      {{ error }}
-    {% endfor %}
-	</p>
-  {% endif %}
-  </div>
+	{% if field.type == 'SubmitField' %}
+		<div class="col-sm-12" style="align:center">
+			<input id="{{ field.id }}" name="{{ field.id }}" class="btn btn-default" type="submit" value="{{ field.label.text }}">
+		</div>
+	{% else %}
+		<label class="col-sm-6 control-label">
+			{{ field.label }}
+		</label>
+		<div class="col-sm-2">
+			{% if field.type == 'SelectField' %}
+				<select id="{{ field.id }}" name="{{ field.id }}" class="form-control">
+					{% for choice in field.choices %}
+						<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 %}
 
diff --git a/app/rollerverbrauch/templates/newPitStopForm.html b/app/rollerverbrauch/templates/newPitStopForm.html
index e82133e..849432e 100644
--- a/app/rollerverbrauch/templates/newPitStopForm.html
+++ b/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() }}
-  {{ render_field_with_errors(form.date) }}
+    {{ form.hidden_tag() }}
+    {{ 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>
 
 
diff --git a/app/rollerverbrauch/templates/security/change_password.html b/app/rollerverbrauch/templates/security/change_password.html
index 27f5d62..4cc83e1 100644
--- a/app/rollerverbrauch/templates/security/change_password.html
+++ b/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 %}
diff --git a/app/rollerverbrauch/templates/security/forgot_password.html b/app/rollerverbrauch/templates/security/forgot_password.html
index 556f254..729b28f 100644
--- a/app/rollerverbrauch/templates/security/forgot_password.html
+++ b/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 %}
diff --git a/app/rollerverbrauch/templates/security/login_user.html b/app/rollerverbrauch/templates/security/login_user.html
index 9bc86c2..081f13f 100644
--- a/app/rollerverbrauch/templates/security/login_user.html
+++ b/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 %}
diff --git a/app/rollerverbrauch/templates/security/register_user.html b/app/rollerverbrauch/templates/security/register_user.html
index 9cad77d..b269de4 100644
--- a/app/rollerverbrauch/templates/security/register_user.html
+++ b/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 %}
diff --git a/app/rollerverbrauch/templates/selectVehice.html b/app/rollerverbrauch/templates/selectVehice.html
index f3677bf..f46075d 100644
--- a/app/rollerverbrauch/templates/selectVehice.html
+++ b/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 %}