source: OpenWorkouts-current/ow/templates/profile.pt @ dbfab70

currentfeature/docs
Last change on this file since dbfab70 was dbfab70, checked in by borja <borja@…>, 5 years ago

(#7) Show workouts in the profile page related to the highlighted/current month

selected in the yearly chart.

Also, allow users to click on the monthly bars on the chart, to choose that month.
  • Property mode set to 100644
File size: 5.8 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 profile</tal:t>
12  </metal:head-title>
13
14  <metal:content metal:fill-slot="content">
15
16    <div class="user-profile">
17      <tal:c tal:condition="getattr(context, 'picture', None)">
18        <img tal:attributes="src request.resource_path(context, 'picture')"
19             width="450" />
20      </tal:c>
21      <h2>
22          <tal:fullname tal:content="context.fullname"></tal:fullname>
23          <tal:has-nickname tal:condition="context.nickname">
24              (<tal:nickname tal:content="context.nickname"></tal:nickname>)
25          </tal:has-nickname>
26      </h2>
27      <h3>
28        <tal:email tal:content="context.email"></tal:email>
29      </h3>
30      <h4>
31        <a href=""
32           tal:attributes="href request.resource_url(context, 'edit')"
33           i18n:translate="">edit profile</a> |
34        <a href=""
35           tal:attributes="href request.resource_url(context, 'passwd')"
36           i18n:translate="">change password</a>
37      </h4>
38      <div class="profile-info">
39        <ul>
40          <li>
41            <tal:t i18n:translate="">Gender:</tal:t>
42            <tal:c tal:content="getattr(context, 'gender', '-')"></tal:c>
43          </li>
44          <li tal:define="birth_date getattr(context, 'birth_date', None)">
45            <tal:t i18n:translate="">Birth date:</tal:t>
46            <tal:c tal:condition="birth_date"
47                   tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
48            <tal:c tal:condition="birth_date is None">-</tal:c>
49          </li>
50          <li>
51            <tal:t i18n:translate="">Height:</tal:t>
52            <tal:c tal:content="getattr(context, 'height', '-')"></tal:c> meters
53          </li>
54          <li>
55            <tal:t i18n:translate="">Weight:</tal:t>
56            <tal:c tal:content="getattr(context, 'weight', '-')"></tal:c> kg
57          </li>
58        </ul>
59      </div>
60
61      <div class="profile-bio" tal:content="getattr(context, 'bio', '')"></div>
62
63      <div class="profile-workouts">
64        <tal:t i18n:translate="">Total number of workouts</tal:t>:
65        <tal:w tal:replace="context.num_workouts"></tal:w>
66      </div>
67
68      <div class="month-stats js-month-stats">
69        <svg width="600" height="300"></svg>
70        <div class="filters js-filters">
71          <a href="#" class="js-distance" i18n:translate="">distance</a>
72          <a href="#" class="js-time" i18n:translate="">time</a>
73          <a href="#" class="js-elevation" i18n:translate="">elevation</a>
74        </div>
75      </div>
76
77
78      <tal:r tal:repeat="workout workouts">
79
80        <a name="workouts"></a>
81
82
83        <article class="workout-resume">
84
85          <h2 class="workout-title">
86            <a href="" tal:content="workout.title"
87               tal:attributes="href request.resource_url(workout)"></a>
88          </h2>
89
90          <ul class="workout-info">
91            <li>
92              <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
93            </li>
94            <li>
95              <!--! use the properly formatted duration instead of the timedelta object -->
96              <tal:c tal:content="workout._duration"></tal:c>
97            </li>
98            <li tal:condition="workout.distance">
99              <tal:c tal:content="workout.rounded_distance"></tal:c> km
100            </li>
101          </ul>
102
103          <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
104            <li tal:condition="hr">
105              <span i18n:translate="">HR (bpm)</span>:
106              <tal:c tal:content="hr['min']"></tal:c>
107              <tal:t i18n:translate="">Min.</tal:t>,
108              <tal:c tal:content="hr['avg']"></tal:c>
109              <tal:t i18n:translate="">Avg.</tal:t>,
110              <tal:c tal:content="hr['max']"></tal:c>
111              <tal:t i18n:translate="">Max.</tal:t>
112            </li>
113            <li tal:condition="cad">
114              <span i18n:translate="">Cad</span>:
115              <tal:c tal:content="cad['min']"></tal:c>
116              <tal:t i18n:translate="">Min.</tal:t>,
117              <tal:c tal:content="cad['avg']"></tal:c>
118              <tal:t i18n:translate="">Avg.</tal:t>,
119              <tal:c tal:content="cad['max']"></tal:c>
120              <tal:t i18n:translate="">Max.</tal:t>
121            </li>
122          </ul>
123
124          <div class="workout-intro" tal:content="workout.notes"></div>
125
126          <div class="workout-map" tal:condition="workout.has_gpx">
127            <a href="" tal:attributes="href request.resource_url(workout)">
128              <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
129                        alt workout.title; title workout.title">
130            </a>
131          </div>
132
133        </article>
134
135      </tal:r>
136
137    </div>
138
139  </metal:content>
140
141  <metal:body-js metal:fill-slot="body-js">
142
143    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
144    <script src="${request.static_url('ow:static/js/ow.js')}"></script>
145
146    <script type="text/javascript">
147     var y_axis_labels = {
148         "distance": "Kilometers",
149         "time": "Hours",
150         "elevation": "Meters"
151     };
152
153     var year_chart = owjs.year_chart({
154         chart_selector: 'div.js-month-stats svg',
155         filters_selector: 'div.js-month-stats div.js-filters a',
156         url: "${request.resource_url(context, 'yearly')}",
157         current_month: "${current_month}",
158         y_axis_labels: y_axis_labels,
159     });
160     year_chart.render("distance");
161     year_chart.filters_setup();
162    </script>
163
164  </metal:body-js>
165
166</html>
Note: See TracBrowser for help on using the repository browser.