Add a new "Create" form based on WTForms, i18n'ed with Babel

forms.py

@@ -0,0 +1,63 @@
+from functools import partial
+import itertools
+from flask.ext.wtf import Form
+from wtforms import Form as InsecureForm
+from wtforms import TextField, DecimalField, SelectField, SelectMultipleField, FieldList, FormField
+from wtforms.widgets import TextInput, ListWidget, html_params, HTMLString, CheckboxInput, Select
+from wtforms.validators import DataRequired, Optional, URL, Email, Length
+from flask.ext.babel import Babel, gettext as _
+from settings import STEPS
+
+
+class InputListWidget(ListWidget):
+    def __call__(self, field, **kwargs):
+        kwargs.setdefault('id', field.id)
+        html = ['<%s %s>' % (self.html_tag, html_params(**kwargs))]
+        for subfield in field:
+            html.append('<li>%s</li>' % (subfield()))
+        html.append('</%s>' % self.html_tag)
+        return HTMLString(''.join(html))
+
+class MultiCheckboxField(SelectMultipleField):
+    """
+    A multiple-select, except displays a list of checkboxes.
+
+    Iterating the field will produce subfields, allowing custom rendering of
+    the enclosed checkbox fields.
+    """
+    widget = ListWidget(prefix_label=False)
+    option_widget = CheckboxInput()
+
+class MyFormField(FormField):
+
+    @property
+    def flattened_errors(self):
+        return list(itertools.chain.from_iterable(self.errors.values()))
+
+
+TECHNOLOGIES_CHOICES=(
+    ('ftth', _('FTTH')),
+    ('dsl', _('DSL')),
+    ('wifi', _('Wi-Fi')),
+)
+class CoveredArea(InsecureForm):
+    area_name    = TextField(_(u'name'), widget=partial(TextInput(), class_='input-medium', placeholder=_(u'Area')))
+    technologies = SelectMultipleField(_(u'technologies'), choices=TECHNOLOGIES_CHOICES,
+                                       widget=partial(Select(True), **{'class': 'selectpicker', 'data-title': _(u'Technologies deployed')}))
+#    area          =
+
+
+class ProjectForm(Form):
+    name          = TextField(_(u'full name'), validators=[DataRequired(), Length(min=2)], description=[_(u'E.g. French Data Network')])
+    short_name    = TextField(_(u'short name'), validators=[Optional(), Length(min=2, max=12)], description=[_(u'E.g. FDN')])
+    description   = TextField(_(u'description'), description=[None, _(u'Short text describing the project')])
+    website       = TextField(_(u'website'), validators=[Optional(), URL(require_tld=True)])
+    contact_email = TextField(_(u'contact email'), validators=[Optional(), Email()])
+    chatrooms     = FieldList(TextField(_(u'chatrooms')), min_entries=1, widget=InputListWidget(),
+                              description=[None, _(u'In URI form, e.g. <code>irc://irc.isp.net/#isp</code> or <code>xmpp:isp@chat.isp.net?join</code>')])
+    covered_areas = FieldList(MyFormField(CoveredArea, widget=partial(InputListWidget(), class_='formfield')), min_entries=1, widget=InputListWidget(),
+                                        description=[None, _(u'Descriptive name of the covered areas and technologies deployed')])
+    latitude      = DecimalField(_(u'latitude'), validators=[Optional()],
+                             description=[None, _(u'Geographical coordinates of your registered office or usual meeting location.')])
+    longitude     = DecimalField(_(u'longitude'), validators=[Optional()])
+    step          = SelectField(_(u'step'), choices=[(k, u'%u - %s' % (k, STEPS[k])) for k in STEPS], coerce=int)

main.py

@@ -3,6 +3,7 @@
 
 from flask import Flask, request, session, g, redirect, url_for, abort, \
     render_template, flash, jsonify 
+from flask.ext.babel import Babel, gettext as _
 import sqlite3
 from datetime import date, time, timedelta, datetime
 import locale
@@ -10,9 +11,11 @@ locale.setlocale(locale.LC_ALL, '')
 import string
 
 from settings import *
+import forms
 
 app = Flask(__name__) 
 app.config.from_object(__name__)
+babel = Babel(app)
 
 def connect_db():
     return sqlite3.connect(app.config['DATABASE'])
@@ -91,8 +94,8 @@ def edit_project(projectid):
     project['stepname'] = STEPS[project['step']]
     return render_template('edit_project.html', project=project)
 
-@app.route('/create', methods=['GET', 'POST'])
-def create_project():
+@app.route('/create_old', methods=['GET', 'POST'])
+def create_project_old():
     if request.method == 'POST':
         if request.form['name']:
             if request.form['shortname']:
@@ -114,6 +117,14 @@ def create_project():
             flash(u'Vous devez spécifier un nom.', 'error')
     return render_template('create_project.html')
 
+@app.route('/create', methods=['GET', 'POST'])
+def create_project():
+    form = forms.ProjectForm()
+    if form.validate_on_submit():
+        flash(_(u'Thanks !'))
+        return redirect('/')
+    return render_template('project_form.html', form=form)
+
 @app.route('/search', methods=['GET', 'POST'])
 def search():
     if request.method == 'POST':

requirements.txt

@@ -1,4 +1,6 @@
 Flask==0.10.1
+Flask-Babel==0.9
+Flask-WTF==0.9.1
 Jinja2==2.7.1
 MarkupSafe==0.18
 Werkzeug==0.9.3

static/css/style.css

@@ -0,0 +1,48 @@
+.control-group.required label:before {
+    content: '*';
+    color: red;
+    padding-right: 5px;
+}
+
+.fieldlist, .formfield {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+    display: inline-block;
+}
+
+.fieldlist li {
+    margin: 0 0 2px 0;
+    padding: 0;
+}
+
+.formfield li {
+    display: inline;
+    margin-right: 3px;
+}
+
+.formfield li .bootstrap-select {
+    width: 190px;
+}
+
+.formfield li .bootstrap-select .filter-option {
+    font-size: 0.9em !important;
+}
+
+.formfield li .bootstrap-select .dropdown-menu li {
+    display: list-item;
+}
+
+.input-middle input:first-of-type {
+    border-top-left-radius: 4px;
+    border-bottom-left-radius: 4px;
+}
+
+.input-middle input:last-of-type {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.form-horizontal .help-block {
+    margin-top: 0 !important;
+}

static/js/site.js

@@ -0,0 +1,55 @@
+
+"use strict";
+
+!function($) {
+    $(function () {
+        $('.fieldlist').each(function() {
+            var $this=$(this);
+            var lis=$this.children('li');
+            lis.first().children(':first').after(' <button class="btn btn-mini" type="button"><i class="icon-plus"></i></button>');
+            lis.first().children('button').click(function() {
+                clone_fieldlist($this.children('li:last'));
+            });
+            lis=lis.slice(1);
+            lis.each(function() {
+                append_remove_button($(this));
+            });
+        });
+        $('.selectpicker').selectpicker();
+    });
+
+    function change_input_num(li, new_num, reset=false) {
+        li.find('input,select').each(function() {
+            var id = $(this).attr('id').replace(/^(.*)-\d{1,4}/, '$1-'+new_num);
+            $(this).attr({'name': id, 'id': id});
+            if(reset)
+                $(this).val('').removeAttr('checked');
+        });
+    }
+
+    function append_remove_button(li) {
+        li.children(':first').after(' <button class="btn btn-mini" type="button"><i class="icon-minus"></i></button>');
+        li.children('button').click(function() {
+            var ul=li.parent();
+            li.remove();
+            var i=0;
+            ul.children('li').each(function() {
+                change_input_num($(this), i);
+                i++;
+            });
+        });
+    };
+
+    function clone_fieldlist(el) {
+        var new_element = el.clone(true);
+        var elem_id = new_element.find(':input')[0].id;
+        var elem_num = parseInt(elem_id.replace(/^.*-(\d{1,4})/, '$1')) + 1;
+        change_input_num(new_element, elem_num, true);
+        new_element.children('button').remove();
+        new_element.children('.help-inline.error-list').remove();
+        new_element.find('.bootstrap-select').remove();
+        append_remove_button(new_element);
+        new_element.find('.selectpicker').data('selectpicker', null).selectpicker();
+        el.after(new_element);
+    }
+}(window.jQuery);

templates/layout.html

@@ -6,12 +6,15 @@
     <!-- meta -->
     <!-- icon
     <link rel="shortcut icon" href="favicon.ico"> -->
-    <!-- ma template.css -->
+    <!-- css -->
     <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/bootstrap.css') }}">
-    <!--<link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/cavote.css') }}">-->
-    <!-- css javascript -->
     <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/jquery.ui.all.css') }}">
+    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/bootstrap-select.min.css') }}">
+    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/style.css') }}">
     <!-- javascript -->
+    <script type="text/javascript" src="{{ url_for('static', filename='js/jquery.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/bootstrap-select.min.js') }}"></script>
+    <script type="text/javascript" src="{{ url_for('static', filename='js/site.js') }}"></script>
   </head>
 <body>
 

templates/project_form.html

@@ -0,0 +1,77 @@
+{% extends "layout.html" %}
+{% macro display_errors(errors) -%}
+            {%- if errors -%}
+            <span class="help-inline error-list">
+              <strong>{%- trans ercnt=errors|count %}Error:{% pluralize %}Errors:{% endtrans -%}</strong>{#
+              #}<ul class="inline" style="display: inline;">
+              {%- for e in errors -%}
+                <li>{{ e }}</li>
+              {%- endfor -%}
+              </ul>
+            </span>
+            {%- endif -%}
+{%- endmacro %}
+{% macro render_field(field) -%}
+        <div class="control-group{% if field.flags.required %} required{%endif%}{% if field.errors %} error{% endif %}">
+          <label class="control-label" for="{{ field.name }}">{{ field.label.text|capitalize }}</label>
+          <div class="controls">
+            {{ field(placeholder=field.description.0, **kwargs) if field.description.0 else field(**kwargs) }}
+            {{ display_errors(field.errors) }}
+            {%- if field.description.1 -%}
+            <span class="help-block">{{ field.description.1|safe }}</span>
+            {%- endif %}
+          </div>
+        </div>
+{%- endmacro %}
+{% block body %}
+
+<div class="row">
+  <div class="span11 well">
+    <form action="{{ url_for('test') }}" method="post" class="form-horizontal">
+      {{ form.csrf_token }}
+      <fieldset><legend>{{ _("Add a new project") }}</legend>
+        {{ render_field(form.name) }}
+        {{ render_field(form.short_name) }}
+        {{ render_field(form.description) }}
+        {{ render_field(form.website) }}
+        {{ render_field(form.contact_email) }}
+        {{ render_field(form.chatrooms, class="fieldlist") }}
+{#        {{ render_field(form.covered_areas, class="fieldlist") }}#}
+        <div class="control-group{% if form.covered_areas.errors %} error{% endif %}">
+          <label class="control-label" for="coordinates">{{ form.covered_areas.label.text }}</label>
+          <div class="controls">
+            <ul class="fieldlist">
+              {% for c in form.covered_areas -%}
+              <li>{{ c() }}{{ display_errors(c.flattened_errors) }}</li>
+              {%- endfor %}
+            </ul>
+            {% if form.covered_areas.description.1 -%}
+            <span class="help-block">{{ form.covered_areas.description.1|safe }}</span>
+            {%- endif %}
+          </div>
+        </div>
+        <div class="control-group{% if form.latitude.errors or form.longitude.errors %} error{% endif %}">
+          <label class="control-label" for="coordinates">{{ _("Coordinates") }}</label>
+          <div class="controls">
+            <div class="input-prepend input-append input-middle">
+              {{ form.latitude(class="input-small", placeholder=form.latitude.label.text|capitalize) }}
+              <span class="add-on">:</span>
+              {{ form.longitude(class="input-small", placeholder=form.longitude.label.text|capitalize) }}
+            </div>
+            {{ display_errors(form.latitude.errors+form.longitude.errors) }}
+            {%- if form.latitude.description.1 -%}
+            <span class="help-block">{{ form.latitude.description.1|safe }}</span>
+            {%- endif %}
+          </div>
+        </div>
+        {{ render_field(form.step) }}
+        <div class="form-actions">
+          <input type="submit" class="btn btn-primary" value="{{ _("Submit") }}" />
+          <input type="reset" class="btn" value="{{ _("Cancel") }}" />
+        </div>
+      </fieldset>
+    </form>
+  </div>
+</div>
+
+{% endblock %}