Blame view

flaskr/templates/estimation-request.html 8.93 KB
c1421d65   Goutte   Add the `estimate...
1
2
{% extends "base.html" %}

fef4a9fd   Goutte   Rework the templa...
3
4
5

{% block title %}Request an estimation of your travel footprint{% endblock %}

c1421d65   Goutte   Add the `estimate...
6
7

{% block hero %}
fef4a9fd   Goutte   Rework the templa...
8
9
<div class="jumbotron">
    <h1>{{ content.estimate.hero.title | safe }}</h1>
1f7dc110   Antoine Goutenoir   Provide sample fi...
10
    {{ content.estimate.hero.description | markdown | safe }}
fef4a9fd   Goutte   Rework the templa...
11
</div>
c1421d65   Goutte   Add the `estimate...
12
13
{% endblock %}

fef4a9fd   Goutte   Rework the templa...
14

77e86148   Antoine Goutenoir   Fake support for ...
15
16

{#############################################################################}
9e44bb98   Antoine Goutenoir   Support file uplo...
17
{# MACROS ####################################################################}
77e86148   Antoine Goutenoir   Fake support for ...
18
19


c1421d65   Goutte   Add the `estimate...
20
21
22
23
24
25
26
27
28
{% macro render_field(field) %}
<dt>
    {{ field.label }}
    {% if not field.flags.optional %}
    <span class="required-asterisk" title="This field is required.">*</span>
    {% endif %}
</dt>
<dd>
    {{ field(title=field.description, class_="form-control", **kwargs) | safe }}
77e86148   Antoine Goutenoir   Fake support for ...
29

c1421d65   Goutte   Add the `estimate...
30
    {% if field.errors -%}
77e86148   Antoine Goutenoir   Fake support for ...
31
    <ul class="errors text-danger has-error">
c1421d65   Goutte   Add the `estimate...
32
33
34
35
36
37
38
39
    {% for error in field.errors %}
        <li>{{ error }}</li>
    {% endfor %}
    </ul>
    {%- endif %}
</dd>
{% endmacro %}

c1421d65   Goutte   Add the `estimate...
40

fef4a9fd   Goutte   Rework the templa...
41
42
43
44
45
46
{% macro render_checkbox(field) %}
{{ field(class="form-check-input") }}
{{ field.label(
    class="form-check-label",
    title=field.description
) }}
77e86148   Antoine Goutenoir   Fake support for ...
47
48

{% if field.errors -%}
7b5e18c3   Antoine Goutenoir   Fix the error mes...
49
<p class="text-danger help-block">{{ field.errors[0] | safe }}</p>
77e86148   Antoine Goutenoir   Fake support for ...
50
{%- endif %}
fef4a9fd   Goutte   Rework the templa...
51
{% endmacro %}
c1421d65   Goutte   Add the `estimate...
52

fef4a9fd   Goutte   Rework the templa...
53

77e86148   Antoine Goutenoir   Fake support for ...
54
55
56
57
58

{#############################################################################}
{# BODY ######################################################################}


fef4a9fd   Goutte   Rework the templa...
59
60
61
62
{% block body %}
<div class="row">
    <div class="col-md-2"></div>
    <div class="col-md-8">
9e44bb98   Antoine Goutenoir   Support file uplo...
63
        <form role="form" action="{{ url_for('.estimate') }}" method="post" enctype="multipart/form-data">
fef4a9fd   Goutte   Rework the templa...
64
65
            {{ form.hidden_tag() }}

f47a875d   Antoine Goutenoir   Remove the email ...
66
67
68
69
{#            <div class="form-group">#}
{#                {{ render_field(form.email) }}#}
{#                <small class="form-text text-muted">We will never share your email with anyone.</small>#}
{#            </div>#}
fef4a9fd   Goutte   Rework the templa...
70
71
72
            <div class="form-group row">
                <div class="col-md-6">
                {{ render_field(form.first_name) }}
a1f12452   Antoine Goutenoir   Add the new conte...
73
                <small class="form-text text-muted">{{ content.estimate.help.first_name | safe }}</small>
c1421d65   Goutte   Add the `estimate...
74
                </div>
fef4a9fd   Goutte   Rework the templa...
75
76
                <div class="col-md-6">
                {{ render_field(form.last_name) }}
a1f12452   Antoine Goutenoir   Add the new conte...
77
                <small class="form-text text-muted">{{ content.estimate.help.last_name | safe }}</small>
c1421d65   Goutte   Add the `estimate...
78
                </div>
fef4a9fd   Goutte   Rework the templa...
79
80
81
82
            </div>
            <div class="form-group">
                {{ render_field(form.institution) }}
            </div>
9e44bb98   Antoine Goutenoir   Support file uplo...
83
84
85
86
87
88

            <div class="row">
                <div class="col-7">
                    <div class="form-group">
                        {{ render_field(form.origin_addresses) }}
                        <small class="form-text text-muted">
09fab4a4   Antoine Goutenoir   Add the airports ...
89
                            {{ content.estimate.help.origin_addresses | markdown | safe }}
9e44bb98   Antoine Goutenoir   Support file uplo...
90
91
92
93
94
95
96
97
98
99
100
101
                        </small>
                    </div>
                </div>
                <div class="col-1">
                    <br>
                    <br>
                    OR
                </div>
                <div class="col-4">
                    <div class="form-group">
                        {{ render_field(form.origin_addresses_file) }}
                        <small class="form-text text-muted">
09fab4a4   Antoine Goutenoir   Add the airports ...
102
                            {{ content.estimate.help.origin_addresses_file | markdown | safe }}
9e44bb98   Antoine Goutenoir   Support file uplo...
103
104
105
                        </small>
                    </div>
                </div>
fef4a9fd   Goutte   Rework the templa...
106
            </div>
9e44bb98   Antoine Goutenoir   Support file uplo...
107
108
109
110
111
112

            <div class="row">
                <div class="col-7">
                    <div class="form-group">
                        {{ render_field(form.destination_addresses) }}
                        <small class="form-text text-muted">
09fab4a4   Antoine Goutenoir   Add the airports ...
113
                            {{ content.estimate.help.destination_addresses | markdown | safe }}
9e44bb98   Antoine Goutenoir   Support file uplo...
114
115
116
117
118
119
120
121
122
123
124
125
                        </small>
                    </div>
                </div>
                <div class="col-1">
                    <br>
                    <br>
                    OR
                </div>
                <div class="col-4">
                    <div class="form-group">
                        {{ render_field(form.destination_addresses_file) }}
                        <small class="form-text text-muted">
09fab4a4   Antoine Goutenoir   Add the airports ...
126
                            {{ content.estimate.help.destination_addresses_file | markdown | safe }}
9e44bb98   Antoine Goutenoir   Support file uplo...
127
128
129
                        </small>
                    </div>
                </div>
fef4a9fd   Goutte   Rework the templa...
130
            </div>
4276f1aa   Antoine Goutenoir   Support train emi...
131

b9fc86c3   Antoine Goutenoir   Secure the admin ...
132
133
134
{#            <div class="form-check form-group">#}
{#                {{ render_checkbox(form.compute_optimal_destination) }}#}
{#            </div>#}
7f7c6b10   Antoine Goutenoir   Disable RFI in th...
135
136
137
138
{#            <div class="form-check form-group">#}
{#                {{ render_checkbox(form.use_atmosfair_rfi) }}#}
{#                <small class="form-text text-muted">Disabled. Work in Progress. RFI=1.9</small>#}
{#            </div>#}
77e86148   Antoine Goutenoir   Fake support for ...
139
140

            <div class="form-group">
d6b76029   Antoine Goutenoir   Add some explanat...
141
142
143
144
145
146
147
                <h6>Emission Models to consider</h6>
                <div class="form-check">
                    {% for model in models %}
                    <div>
                    {{ render_checkbox(form['use_model_'~model.slug]) }}
                    </div>
                    {% endfor %}
77e86148   Antoine Goutenoir   Fake support for ...
148
                </div>
d6b76029   Antoine Goutenoir   Add some explanat...
149
150
151
152
153
154
155
156
157
158
                <small class="form-text text-muted">
                    We will use a mean of the selected models.
                    &nbsp;
                    Please select at least one.
                    <br>
                    The meaning of <acronym title="Radiative Forcing Index">RFI</acronym>
                    is detailed
                    <a href="{{ url_for('.home') }}#rfi">here</a>
                    .
                </small>
77e86148   Antoine Goutenoir   Fake support for ...
159
160
            </div>

fef4a9fd   Goutte   Rework the templa...
161
            <div class="form-group">
4276f1aa   Antoine Goutenoir   Support train emi...
162
                {{ render_field(form.use_train_below_km) }}
1f7dc110   Antoine Goutenoir   Provide sample fi...
163
164
165
                <small class="form-text text-muted">
                    {{ content.estimate.help.use_train_below_km | safe }}
                </small>
4276f1aa   Antoine Goutenoir   Support train emi...
166
167
168
            </div>

            <div class="form-group">
fef4a9fd   Goutte   Rework the templa...
169
170
                {{ render_field(form.comment) }}
            </div>
c1421d65   Goutte   Add the `estimate...
171

8ae021a2   Antoine Goutenoir   Merge shelved cha...
172
173
174
175
176
177
178
            <hr>

            <div class="form-group">
                {{ render_field(form.run_name) }}
                <small class="form-text text-muted">{{ content.estimate.help.run_name | safe }}</small>
            </div>

cb22e72e   Antoine Goutenoir   Add a Captcha and...
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
            <div class="form-group">
                <dt>
                    {{ form.captcha.label }}
                    <span class="required-asterisk" title="This field is required.">*</span>
                </dt>
                <dd>
                    {{ captcha() }}
                    <br><br>

                    {{ form.captcha(
                        title=form.captcha.description,
                        class_="form-control",
                        placeholder="Please write the numbers you see in the image above."
                    ) | safe }}

                    {% if form.captcha.errors -%}
                    <ul class="errors text-danger has-error">
                    {% for error in form.captcha.errors %}
                        <li>{{ error }}</li>
                    {% endfor %}
                    </ul>
                    {%- endif %}
                </dd>
            </div>

fef4a9fd   Goutte   Rework the templa...
204
205
206
207
            <button type="submit" class="btn btn-primary">
                Submit a Request
            </button>
        </form>
c1421d65   Goutte   Add the `estimate...
208
    </div>
fef4a9fd   Goutte   Rework the templa...
209
210
    <div class="col-md-2"></div>
</div>
c1421d65   Goutte   Add the `estimate...
211
{% endblock %}
d79d2488   Antoine Goutenoir   Work around iPad'...
212
213
214
215
216
217

{% block js %}
<script type="text/javascript">

// Multiline placeholders for textarea shim (eg: iPad)
// https://github.com/EmilMoe/multiline-placeholder
cb22e72e   Antoine Goutenoir   Add a Captcha and...
218
219
// This breaks accessibility and form input retention,
// so we're trying to only enable it for the iDiot platforms.
d79d2488   Antoine Goutenoir   Work around iPad'...
220
$(function() {
c1d895b1   Antoine Goutenoir   Extend usage of t...
221
    var isHell = navigator.platform.match(/(iPhone|iP[ao]d|Mac|Pike)/i);
cb22e72e   Antoine Goutenoir   Add a Captcha and...
222

c1d895b1   Antoine Goutenoir   Extend usage of t...
223
    if (isHell) {
a289e7f7   Antoine Goutenoir   fix: another horr...
224
        var style = $('<style>textarea[data-placeholder].active { color: #666; }</style>');
cb22e72e   Antoine Goutenoir   Add a Captcha and...
225
226
227
228
229
230
231
232
233
234
235
236
237
238
        $('html > head').append(style);

        $('textarea[placeholder]').each(function (index) {
            var text = $(this).attr('placeholder');
            var match = /\r|\n/.exec(text);

            if (!match) return;

            $(this).attr('placeholder', '');
            $(this).attr('data-placeholder', text);
            $(this).addClass('active');
            $(this).val(text);
        });

a289e7f7   Antoine Goutenoir   fix: another horr...
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
        $('textarea[data-placeholder]')
            .on('focus', function () {
                if ($(this).attr('data-placeholder') === $(this).val()) {
                    $(this).attr('data-placeholder', $(this).val());
                    $(this).val('');
                    $(this).removeClass('active');
                }
            })
            .on('blur', function () {
                if ($(this).val() === '') {
                    $(this).val($(this).attr('data-placeholder'));
                    $(this).addClass('active');
                }
            })
        ;
cb22e72e   Antoine Goutenoir   Add a Captcha and...
254
    }
d79d2488   Antoine Goutenoir   Work around iPad'...
255
256
});

a289e7f7   Antoine Goutenoir   fix: another horr...
257
258
259
260
261
262
263
264
265
266
267
268
269

// Make sure the lists of cities are not required if we set files instead.
$(() => {
    $("#origin_addresses_file").change(() => {
        $("#origin_addresses").attr('required', null);
    });
    $("#destination_addresses_file").change(() => {
        $("#destination_addresses").attr('required', null);
    });
});



d79d2488   Antoine Goutenoir   Work around iPad'...
270
271
</script>
{% endblock %}