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

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

Fixed broken selectors in the last-12-months chart in the user profile page

  • Property mode set to 100644
File size: 7.5 KB
RevLine 
[5ec3a0b]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">
[67fc2ed]17      <div class="user-profile-account">
[ffd6bb5]18        <div>
19          <tal:c tal:condition="getattr(context, 'picture', None)">
20            <img tal:attributes="src request.resource_path(context, 'picture')"
21                 width="450" />
22          </tal:c>
23          <div>
24            <h2>
25                <tal:fullname tal:content="context.fullname"></tal:fullname>
26            </h2>
27            <p>
28              <tal:has-nickname tal:condition="context.nickname">
29                  <tal:nickname tal:content="context.nickname"></tal:nickname>
30              </tal:has-nickname> |
31              <span><tal:email tal:content="context.email"></tal:email></span>
32            </p>
[eed2019]33            <div class="profile-bio">
34              <p tal:repeat="paragraph getattr(context, 'bio', '').split('\n')"
35                 tal:content="paragraph"></p>
36            </div>
[ffd6bb5]37            <ul class="workout-options">
38              <li><a href=""
[eed2019]39                     tal:attributes="href request.resource_url(context, 'edit')"
40                     i18n:translate="">edit profile</a></li>
[ffd6bb5]41              <li><a href=""
[eed2019]42                     tal:attributes="href request.resource_url(context, 'passwd')"
43                     i18n:translate="">change password</a></li>
[ffd6bb5]44            </ul>
45          </div>
46        </div>
[6993c72]47
[5ec3a0b]48      </div>
49
[ffd6bb5]50      <div class="workout-content">
51        <div class="workout-list">
52          <div class="total-workouts">
53            <tal:w tal:replace="context.num_workouts"></tal:w>
54            <tal:t i18n:translate="">workouts</tal:t>
55          </div>
[dbfab70]56
[ffd6bb5]57          <div class="month-stats js-month-stats">
58            <div class="svg-cotent">
59              <svg width="900" height="180" viewBox="0 0 900 180"></svg>
60            </div>
[d24a64a]61            <div class="center">
62              <ul class="workout-options filters js-filters">
63                <li><a href="#" class="js-distance is-active" i18n:translate="">distance</a></li>
64                <li><a href="#" class="js-time" i18n:translate="">time</a></li>
65                <li><a href="#" class="js-elevation" i18n:translate="">elevation</a></li>
66              </ul>
[ffd6bb5]67
[d24a64a]68              <ul class="workout-options switcher js-switcher">
69                <li><a href="#" class="js-weekly" i18n:translate="">weekly</a></li>
70                <li><a href="#" class="js-monthly is-active" i18n:translate="">monthly</a></li>
71              </ul>
72            </div>
[5ec3a0b]73          </div>
74
[dbfab70]75
[ffd6bb5]76          <tal:r tal:repeat="workout workouts">
77
78            <article class="workout-resume">
79
80              <h2 class="workout-title">
81                <a href="" tal:content="workout.title"
82                   tal:attributes="href request.resource_url(workout)"></a>
83              </h2>
84
85              <ul class="workout-info">
86                <li>
87                  <tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
88                </li>
89                <li>
90                  <!--! use the properly formatted duration instead of the timedelta object -->
91                  <tal:c tal:content="workout._duration"></tal:c>
92                </li>
93                <li tal:condition="workout.distance">
94                  <tal:c tal:content="workout.rounded_distance"></tal:c> km
95                </li>
96              </ul>
97
98              <ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
99                <li tal:condition="hr">
100                  <span i18n:translate="">HR (bpm)</span>:
101                  <tal:c tal:content="hr['min']"></tal:c>
102                  <tal:t i18n:translate="">Min.</tal:t>,
103                  <tal:c tal:content="hr['avg']"></tal:c>
104                  <tal:t i18n:translate="">Avg.</tal:t>,
105                  <tal:c tal:content="hr['max']"></tal:c>
106                  <tal:t i18n:translate="">Max.</tal:t>
107                </li>
108                <li tal:condition="cad">
109                  <span i18n:translate="">Cad</span>:
110                  <tal:c tal:content="cad['min']"></tal:c>
111                  <tal:t i18n:translate="">Min.</tal:t>,
112                  <tal:c tal:content="cad['avg']"></tal:c>
113                  <tal:t i18n:translate="">Avg.</tal:t>,
114                  <tal:c tal:content="cad['max']"></tal:c>
115                  <tal:t i18n:translate="">Max.</tal:t>
116                </li>
117              </ul>
118
[eed2019]119              <div class="workout-intro">
120                <p tal:repeat="paragraph workout.notes.split('\n')"
121                   tal:content="paragraph"></p>
122              </div>
[ffd6bb5]123
124              <div class="workout-map" tal:condition="workout.has_gpx">
125                <a href="" tal:attributes="href request.resource_url(workout)">
126                  <img src="" tal:attributes="src request.static_url(workout.map_screenshot);
127                            alt workout.title; title workout.title">
128                </a>
129              </div>
130
131            </article>
132
133          </tal:r>
134        </div>
[d24a64a]135
136        <div class="workout-aside">
137          <ul class="profile-data">
138            <li>
139              <span><tal:t i18n:translate="">Gender:</tal:t></span>
140              <tal:c tal:content="getattr(context, 'gender', '-')"></tal:c>
141            </li>
142            <li tal:define="birth_date getattr(context, 'birth_date', None)">
143              <span><tal:t i18n:translate="">Birth date:</tal:t></span>
144              <tal:c tal:condition="birth_date"
145                     tal:content="birth_date.strftime('%d/%m/%Y')"></tal:c>
146              <tal:c tal:condition="birth_date is None">-</tal:c>
147            </li>
148            <li>
149              <span><tal:t i18n:translate="">Height:</tal:t></span>
150              <tal:c tal:content="getattr(context, 'height', '-')"></tal:c> meters
151            </li>
152            <li>
153              <span><tal:t i18n:translate="">Weight:</tal:t></span>
154              <tal:c tal:content="getattr(context, 'weight', '-')"></tal:c> kg
155            </li>
156          </ul>
157        </div>
[ffd6bb5]158      </div>
[5ec3a0b]159    </div>
160
161  </metal:content>
162
[bd8eeb4]163  <metal:body-js metal:fill-slot="body-js">
164
165    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
166    <script src="${request.static_url('ow:static/js/ow.js')}"></script>
167
168    <script type="text/javascript">
169     var y_axis_labels = {
170         "distance": "Kilometers",
171         "time": "Hours",
172         "elevation": "Meters"
173     };
174
175     var year_chart = owjs.year_chart({
[594fbe8]176         chart_selector: '.js-month-stats svg',
177         filters_selector: '.js-month-stats .js-filters a',
[6993c72]178         switcher_selector: '.js-month-stats .js-switcher a',
[40ee398]179         is_active_class: 'is-active',
[5cf5787]180         urls: {"monthly": "${request.resource_url(context, 'monthly')}",
181                "weekly": "${request.resource_url(context, 'weekly')}"},
[bd8eeb4]182         current_month: "${current_month}",
[5cf5787]183         current_week: "${current_week}",
[bd8eeb4]184         y_axis_labels: y_axis_labels,
[5cf5787]185         filter_by: "distance",
186         url: "${'monthly' if current_week is None else 'weekly'}",
[bd8eeb4]187     });
[5cf5787]188     year_chart.render("distance", "${'monthly' if current_week is None else 'weekly'}");
[bd8eeb4]189     year_chart.filters_setup();
[5cf5787]190     year_chart.switcher_setup();
[bd8eeb4]191    </script>
192
193  </metal:body-js>
194
[5ec3a0b]195</html>
Note: See TracBrowser for help on using the repository browser.