source: OpenWorkouts-current/ow/templates/add_workout.pt @ c82fe79

current
Last change on this file since c82fe79 was c82fe79, checked in by Borja Lopez <borja@…>, 5 years ago

(#84) Show a "loading" spinner while adding a workout by uploading a track file

  • Property mode set to 100644
File size: 4.9 KB
Line 
1<html xmlns="http://www.w3.org/1999/xhtml"
2      xml:lang="en"
3      xmlns:tal="http://xml.zope.org/namespaces/tal"
4      xmlns:metal="http://xml.zope.org/namespaces/metal"
5      xmlns:i18n="http://xml.zope.org/namespaces/i18n"
6      i18n:domain="OpenWorkouts"
7      metal:use-macro="load: base.pt"
8      tal:attributes="lang request.locale_name">
9
10  <metal:head-title metal:fill-slot="head-title">
11    <tal:t i18n:translate="">Upload workout file</tal:t>
12  </metal:head-title>
13
14  <metal:title metal:fill-slot="title">
15    <tal:t i18n:translate="">Upload workout file</tal:t>
16  </metal:title>
17
18  <metal:content metal:fill-slot="content">
19
20    <div class="uploading-workout hidden">
21      <h2 i18n:translate="">Uploading workout, please wait...</h2>
22      <p i18n:translate="">
23        This can take a moment, depending on the size of your tracking file and your connection speed. Be patient and please don't hit the stop or go back buttons on your browser.
24      </p>
25      <img src="" alt="Loading workout" i18n:attributes="alt"
26           tal:attributes="src request.static_url('ow:static/media/img/loading.gif')">
27    </div>
28
29    <div class="upload-workout ow-forms">
30      <a href="" class="back"
31         tal:attributes="href request.resource_url(context)"
32         i18n:translate="">Back</a>
33      <h2 i18n:translate="">Upload workout file</h2>
34      ${form.begin(multipart=True)}
35      ${form.csrf_token()}
36
37      <tal:is_duplicate tal:condition="duplicate is not None">
38        <article class="workout-resume">
39
40          <h2 class="workout-title">
41            <tal:warning i18n:translate="">THIS MAY BE A DUPLICATE OF:</tal:warning>
42            <a href="" tal:content="duplicate.title"
43               tal:attributes="href request.resource_url(duplicate)"></a>
44          </h2>
45
46          <ul class="workout-info">
47            <li>
48              <tal:c tal:content="duplicate.sport"></tal:c>
49            </li>
50            <li>
51              <tal:c tal:content="duplicate.start_in_timezone(context.timezone)"></tal:c>
52            </li>
53            <li>
54              <!--! use the properly formatted duration instead of the timedelta object -->
55              <tal:c tal:content="duplicate._duration"></tal:c>
56            </li>
57            <li tal:condition="duplicate.distance">
58              <tal:c tal:content="duplicate.rounded_distance"></tal:c> km
59            </li>
60            <li tal:condition="duplicate.uphill">
61              +<tal:c tal:content="duplicate.uphill"></tal:c> m
62            </li>
63          </ul>
64
65          <div class="workout-map" tal:condition="duplicate.has_gpx">
66            <a href="" tal:attributes="href request.resource_url(duplicate)">
67              <tal:has-screenshot tal:condition="duplicate.map_screenshot is not None">
68                <img src="" tal:attributes="src request.static_url(duplicate.map_screenshot);
69                          alt duplicate.title; title duplicate.title">
70              </tal:has-screenshot>
71              <tal:has-not-screenshot tal:condition="duplicate.map_screenshot is None">
72                <img src="" tal:attributes="src request.static_url('ow:static/media/img/no_map.gif');
73                          alt duplicate.title; title duplicate.title; class 'js-needs-map'">
74              </tal:has-not-screenshot>
75            </a>
76          </div>
77
78        </article>
79
80        <div>
81      </tal:is_duplicate>
82
83      <fieldset>
84
85        <p>
86          <label for="title" i18n:translate="">Title</label>
87          ${form.errorlist('title')}
88          ${form.text('title')}
89        </p>
90
91        <p>
92          <label for="notes" i18n:translate="">Notes</label>
93          ${form.errorlist('notes')}
94          ${form.textarea('notes', rows=10, cols=50)}
95        </p>
96
97        <p>
98          <label for="tracking_file" i18n:translate="">
99            Workout file (gpx, fit)</label>
100          ${form.errorlist('tracking_file')}
101          ${form.file('tracking_file')}
102        </p>
103
104        <p tal:condition="duplicate is not None">
105          <label for="allow_duplicates" i18n:translate="">Allow duplicated workouts</label>
106          <small i18n:translate="">
107            Mark this checkbox if you want to add to override the mechanism not allowing duplicated workouts
108          </small>
109          <input type="checkbox" name="allow_duplicates">
110        </p>
111
112      </fieldset>
113
114      <tal:with-localizer tal:define="localizer get_localizer(request)">
115        ${form.submit("submit", localizer.translate(_('Save')),  **{'class':"button button-normal"})}
116      </tal:with-localizer>
117
118      ${form.end()}
119        </div>
120
121  </metal:content>
122
123  <metal:body-js metal:fill-slot="body-js">
124    <script>
125        $(document).ready(function(){
126            $("div.upload-workout form").on("submit", function(){
127                console.log('Showing spinner');
128                $("div.upload-workout").fadeOut();
129                $("div.uploading-workout").fadeIn();
130            });
131        });
132    </script>
133  </metal:body-js>
134
135
136</html>
Note: See TracBrowser for help on using the repository browser.