Add fancy multichoice selector

Fixes #47

1 files changed, 57 insertions, 31 deletions

diff --git a/app/templates/macros/forms.html b/app/templates/macros/forms.html
index a2b75a7..b23711a 100644
--- a/app/templates/macros/forms.html
+++ b/app/templates/macros/forms.html
@@ -1,42 +1,68 @@
 {% macro render_field(field, label=None, label_visible=true, right_url=None, right_label=None) -%}
-    <div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
-        {% if field.type != 'HiddenField' and label_visible %}
-            {% if not label %}{% set label=field.label.text %}{% endif %}
-            <label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
-        {% endif %}
-        {{ field(class_='form-control', **kwargs) }}
-        {% if field.errors %}
-            {% for e in field.errors %}
-                <p class="help-block">{{ e }}</p>
-            {% endfor %}
-        {% endif %}
-    </div>
+	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
+		{% if field.type != 'HiddenField' and label_visible %}
+			{% if not label %}{% set label=field.label.text %}{% endif %}
+			<label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+		{% endif %}
+		{{ field(class_='form-control', **kwargs) }}
+		{% if field.errors %}
+			{% for e in field.errors %}
+				<p class="help-block">{{ e }}</p>
+			{% endfor %}
+		{% endif %}
+	</div>
 {%- endmacro %}
 
+{% macro form_includes() -%}
+	<link href="/static/jquery-ui.min.css" rel="stylesheet" type="text/css">
+	<script src="/static/jquery.min.js"></script>
+	<script src="/static/jquery-ui.min.js"></script>
+	<script src="/static/tagselector.js"></script>
+{% endmacro %}
+
+{% macro render_multiselect_field(field, label=None, label_visible=true, right_url=None, right_label=None) -%}
+	<div class="form-group {% if field.errors %}has-error{% endif %} {{ kwargs.pop('class_', '') }}">
+		{% if field.type != 'HiddenField' and label_visible %}
+			{% if not label %}{% set label=field.label.text %}{% endif %}
+			<label for="{{ field.id }}" class="control-label">{{ label|safe }}</label>
+		{% endif %}
+		<div class="multichoice_selector">
+			<input type="text" placeholder="Start typing to see suggestions">
+			<div class="clearboth"></div>
+		</div>
+		{{ field(class_='form-control', **kwargs) }}
+		{% if field.errors %}
+			{% for e in field.errors %}
+				<p class="help-block">{{ e }}</p>
+			{% endfor %}
+		{% endif %}
+	</div>
+{% endmacro %}
+
 {% macro render_checkbox_field(field, label=None) -%}
-    {% if not label %}{% set label=field.label.text %}{% endif %}
-    <div class="checkbox">
-        <label>
-            {{ field(type='checkbox', **kwargs) }} {{ label }}
-        </label>
-    </div>
+	{% if not label %}{% set label=field.label.text %}{% endif %}
+	<div class="checkbox">
+		<label>
+			{{ field(type='checkbox', **kwargs) }} {{ label }}
+		</label>
+	</div>
 {%- endmacro %}
 
 {% macro render_radio_field(field) -%}
-    {% for value, label, checked in field.iter_choices() %}
-        <div class="radio">
-            <label>
-                <input type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}"{% if checked %} checked{% endif %}>
-                {{ label }}
-            </label>
-        </div>
-    {% endfor %}
+	{% for value, label, checked in field.iter_choices() %}
+		<div class="radio">
+			<label>
+				<input type="radio" name="{{ field.id }}" id="{{ field.id }}" value="{{ value }}"{% if checked %} checked{% endif %}>
+				{{ label }}
+			</label>
+		</div>
+	{% endfor %}
 {%- endmacro %}
 
 {% macro render_submit_field(field, label=None, tabindex=None) -%}
-    {% if not label %}{% set label=field.label.text %}{% endif %}
-    {#<button type="submit" class="form-control btn btn-default btn-primary">{{label}}</button>#}
-    <input type="submit" value="{{label}}"
-           {% if tabindex %}tabindex="{{ tabindex }}"{% endif %}
-           >
+	{% if not label %}{% set label=field.label.text %}{% endif %}
+	{#<button type="submit" class="form-control btn btn-default btn-primary">{{label}}</button>#}
+	<input type="submit" value="{{label}}"
+		   {% if tabindex %}tabindex="{{ tabindex }}"{% endif %}
+		   >
 {%- endmacro %}