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

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

(#7) Yearly (last 12 months) per month chart in the user profile

with filters to see the chart for distance, time or elevation

  • Property mode set to 100644
File size: 4.2 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', '')">
62      </div>
63
64      <div class="workouts">
65        <tal:t i18n:translate="">Total number of workouts</tal:t>:
66        <tal:w tal:replace="context.num_workouts"></tal:w>
67      </div>
68
69      <div class="latest-workouts">
70        <p i18n:translate="">Latest workouts</p>
71        <tal:r tal:repeat="workout context.workouts()[:5]">
72          <div class="workout">
73            <tal:c tal:content="workout.sport"></tal:c> -
74            <a href="" tal:content="workout.title"
75               tal:attributes="href request.resource_url(workout)"></a>
76            (<tal:c tal:content="workout.start"></tal:c>,
77            <tal:c tal:content="workout.duration"></tal:c>,
78            <tal:c tal:content="workout.rounded_distance"></tal:c> km)
79          </div>
80        </tal:r>
81      </div>
82
83      <div class="month-stats js-month-stats">
84        <svg width="600" height="300"></svg>
85        <div class="filters js-filters">
86          <a href="#" class="js-distance" i18n:translate="">distance</a>
87          <a href="#" class="js-time" i18n:translate="">time</a>
88          <a href="#" class="js-elevation" i18n:translate="">elevation</a>
89        </div>
90      </div>
91
92    </div>
93
94  </metal:content>
95
96  <metal:body-js metal:fill-slot="body-js">
97
98    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
99    <script src="${request.static_url('ow:static/js/ow.js')}"></script>
100
101    <script type="text/javascript">
102     var y_axis_labels = {
103         "distance": "Kilometers",
104         "time": "Hours",
105         "elevation": "Meters"
106     };
107
108     var year_chart = owjs.year_chart({
109         chart_selector: 'div.js-month-stats svg',
110         filters_selector: 'div.js-month-stats div.js-filters a',
111         url: "${request.resource_url(context, 'yearly')}",
112         current_month: "${current_month}",
113         y_axis_labels: y_axis_labels,
114     });
115     year_chart.render("distance");
116     year_chart.filters_setup();
117    </script>
118
119  </metal:body-js>
120
121</html>
Note: See TracBrowser for help on using the repository browser.