source: OpenWorkouts-current/ow/templates/dashboard.pt @ f556d1e

currentfeature/docs
Last change on this file since f556d1e was f556d1e, checked in by Segundo Fdez <segun.2@…>, 5 years ago

fix #55 Replace the "no map" temporary image with something nicer

  • Property mode set to 100644
File size: 9.3 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="">My dashboard</tal:t>
12  </metal:head-title>
13
14  <!--!
15      <metal:title metal:fill-slot="title">
16        <tal:t i18n:translate="">dashboard for user</tal:t>
17        <tal:user tal:content="context.fullname"></tal:user>
18      </metal:title>
19      -->
20
21  <metal:content metal:fill-slot="content">
22
23    <div class="workout-content">
24
25      <section class="workout-list">
26
27        <h3 tal:condition="viewing_month is not None">
28          <tal:d tal:content="month_name[viewing_month] + ' ' + str(viewing_year)"></tal:d> -
29          <tal:n tal:content="len(workouts)"></tal:n>
30          <tal:t i18n:translate="">Workouts</tal:t>
31        </h3>
32
33        <tal:no-workouts tal:condition="context.num_workouts == 0">
34            <div class="warning">
35                <p i18n:translate="">You haven't added any workouts yet</p>
36                <p>
37                    <a href="" i18n:translate=""
38                       tal:attributes="href request.resource_url(context, 'add-workout')">
39                        Upload one</a> |
40                    <a href="" i18n:translate=""
41                       tal:attributes="href request.resource_url(context, 'add-workout-manually')">
42                        Add one manually</a>
43                </p>
44            </div>
45        </tal:no-workouts>
46
47        <tal:r tal:repeat="workout workouts">
48
49          <article class="workout-resume">
50
51            <h2 class="workout-title">
52              <a href="" tal:content="workout.title"
53                 tal:attributes="href request.resource_url(workout)"></a>
54            </h2>
55
56            <ul class="workout-info">
57              <li>
58                <tal:c tal:content="workout.sport"></tal:c>
59              </li>
60              <li>
61                <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
62              </li>
63              <li>
64                <!--! use the properly formatted duration instead of the timedelta object -->
65                <tal:c tal:content="workout._duration"></tal:c>
66              </li>
67              <li tal:condition="workout.distance">
68                <tal:c tal:content="workout.rounded_distance"></tal:c> km
69              </li>
70              <li tal:condition="workout.uphill">
71                +<tal:c tal:content="workout.uphill"></tal:c> m
72              </li>
73            </ul>
74
75            <div class="workout-intro">
76              <p tal:repeat="paragraph workout.trimmed_notes.split('\n')"
77                 tal:content="paragraph"></p>
78            </div>
79
80            <div class="workout-map" tal:condition="workout.has_gpx">
81              <a href="" tal:attributes="href request.resource_url(workout)">
82                <tal:has-screenshot tal:condition="workout.map_screenshot is not None">
83                  <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
84                            alt workout.title; title workout.title">
85                </tal:has-screenshot>
86                <tal:has-not-screenshot tal:condition="workout.map_screenshot is None">
87                  <img src="" tal:attributes="src request.static_url('ow:static/media/img/no_map.gif');
88                            alt workout.title; title workout.title; class 'js-needs-map'">
89                </tal:has-not-screenshot>
90              </a>
91            </div>
92
93          </article>
94
95        </tal:r>
96
97      </section>
98
99      <aside class="workout-aside">
100        <div class="aside-profile">
101          <tal:c tal:condition="getattr(context, 'picture', None)">
102            <a href="" tal:attributes="href request.resource_url(context, 'profile')">
103              <img tal:attributes="src request.resource_path(context, 'picture', query={'size': 200})"
104                   width="450" />
105            </a>
106          </tal:c>
107          <h2>
108            <a href="" tal:attributes="href request.resource_url(context, 'profile')"
109               tal:content="context.fullname">
110            </a>
111          </h2>
112          <ul>
113            <li>
114              <tal:n tal:content="context.num_workouts"></tal:n> <tal:t i18n:translate="">workouts</tal:t>
115            </li>
116          </ul>
117        </div>
118          <div class="week-stats js-week-stats">
119            <h3><tal:t i18n:translate="">This week</tal:t></h3>
120            <p tal:define="totals context.week_totals">
121              <span class="week-stats-distance">
122                <tal:d tal:content="round(totals['distance'])"></tal:d>
123                <tal:t i18n:translate="">kms</tal:t> |
124              </span>
125              <span class="week-stats-time">
126                <tal:hms tal:define="hms timedelta_to_hms(totals['time'])">
127                  <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
128                  <tal:t i18n:translate="">hours</tal:t>,
129                  <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
130                  <tal:t i18n:translate="">min.</tal:t>
131                </tal:hms>
132              </span>
133            </p>
134            <div class="svg-cotent">
135              <svg width="300" height="200" viewBox="0 0 300 200"></svg>
136            </div>
137          </div>
138
139          <tal:activity_tree tal:condition="context.num_workouts > 0">
140              <ul class="workout-activity-tree" tal:define="tree context.activity_dates_tree">
141                  <tal:years tal:repeat="year sorted(tree.keys(), reverse=True )">
142                      <li tal:define="is_viewing_year year == viewing_year">
143                          <a href="" tal:content="year"
144                             tal:attributes="href request.resource_url(context, query={'year': year});
145                                             class 'js-year viewing-year' if is_viewing_year  else 'js-year'">
146                          </a>
147                          <ul tal:define="stats context.stats(year)" tal:attributes="class 'workout-activity-summary' if is_viewing_year  else 'workout-activity-summary hidden'">
148                            <li>
149                              <span i18n:translate="">Workouts:</span>
150                              <span tal:content="stats['workouts']"></span>
151                            </li>
152                            <li>
153                              <span i18n:translate="">Distance:</span>
154                              <span> <tal:kms tal:content="round(stats['distance'])"></tal:kms> km</span>
155                            </li>
156                            <li>
157                              <span i18n:translate="">Time:</span>
158                              <tal:hms tal:define="hms timedelta_to_hms(stats['time'])">
159                                <span>
160                                  <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
161                                  <tal:t i18n:translate="">hours</tal:t>,
162                                  <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
163                                  <tal:t i18n:translate="">min.</tal:t>
164                                </span>
165                              </tal:hms>
166                            </li>
167                            <li>
168                              <span i18n:translate="">Elevation:</span>
169                              <span> <tal:m tal:content="stats['elevation']"></tal:m> m</span>
170                            </li>
171                          </ul>
172                          <ul class="workout-activity-tree-year"
173                              tal:attributes="class 'workout-activity-tree-year' if is_viewing_year  else 'workout-activity-tree-year hidden'">
174                              <tal:months tal:repeat="month sorted(tree[year].keys())">
175                                  <li tal:define="is_viewing_month is_viewing_year and month == viewing_month">
176                                      <a href=""
177                                         tal:attributes="href request.resource_url(context, query={'year': year, 'month': month});
178                                                         class 'viewing-month' if is_viewing_month else ''">
179                                           <span tal:content="month_name[month]"></span>
180                                           <span tal:content="sum([tree[year][month][sport] for sport in tree[year][month]])"></span>
181                                      </a>
182                                  </li>
183                              </tal:months>
184                          </ul>
185                      </li>
186                  </tal:years>
187              </ul>
188          </tal:activity_tree>
189
190      </aside>
191
192    </div>
193
194  </metal:content>
195
196  <metal:body-js metal:fill-slot="body-js">
197    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
198    <script src="${request.static_url('ow:static/js/ow.js')}"></script>
199
200    <script type="text/javascript">
201
202     var map_shots = owjs.map_shots({
203         img_selector: 'img.js-needs-map',
204     })
205     map_shots.run();
206
207     var week_chart = owjs.week_chart({
208         chart_selector: 'div.js-week-stats svg',
209         url: "${request.resource_url(context, 'week')}",
210         current_day_name: "${current_day_name}"
211     });
212     week_chart.render();
213    </script>
214
215  </metal:body-js>
216
217</html>
Note: See TracBrowser for help on using the repository browser.