Context Navigation

profile.pt @ 5cf5787

currentfeature/docs

Last change on this file since 5cf5787 was 5cf5787, checked in by borja <borja@…>, 5 years ago

Show weekly/monthly versions of the "last 12 months" workout stats chart

in the user profile page.

Property mode set to 100644

File size: 6.4 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 class="switcher js-switcher">
76	<a href="#" class="js-weekly" i18n:translate="">weekly</a>
77	<a href="#" class="js-monthly" i18n:translate="">monthly</a>
78	</div>
79	</div>
80
81
82	<tal:r tal:repeat="workout workouts">
83
84	<a name="workouts"></a>
85
86
87	<article class="workout-resume">
88
89	<h2 class="workout-title">
90	<a href="" tal:content="workout.title"
91	tal:attributes="href request.resource_url(workout)"></a>
92	</h2>
93
94	<ul class="workout-info">
95	<li>
96	<tal:c tal:content="workout.start_in_timezone(context.timezone)"></tal:c>
97	</li>
98	<li>
99	<!--! use the properly formatted duration instead of the timedelta object -->
100	<tal:c tal:content="workout._duration"></tal:c>
101	</li>
102	<li tal:condition="workout.distance">
103	<tal:c tal:content="workout.rounded_distance"></tal:c> km
104	</li>
105	</ul>
106
107	<ul class="workout-info" tal:define="hr workout.hr; cad workout.cad">
108	<li tal:condition="hr">
109	<span i18n:translate="">HR (bpm)</span>:
110	<tal:c tal:content="hr['min']"></tal:c>
111	<tal:t i18n:translate="">Min.</tal:t>,
112	<tal:c tal:content="hr['avg']"></tal:c>
113	<tal:t i18n:translate="">Avg.</tal:t>,
114	<tal:c tal:content="hr['max']"></tal:c>
115	<tal:t i18n:translate="">Max.</tal:t>
116	</li>
117	<li tal:condition="cad">
118	<span i18n:translate="">Cad</span>:
119	<tal:c tal:content="cad['min']"></tal:c>
120	<tal:t i18n:translate="">Min.</tal:t>,
121	<tal:c tal:content="cad['avg']"></tal:c>
122	<tal:t i18n:translate="">Avg.</tal:t>,
123	<tal:c tal:content="cad['max']"></tal:c>
124	<tal:t i18n:translate="">Max.</tal:t>
125	</li>
126	</ul>
127
128	<div class="workout-intro" tal:content="workout.notes"></div>
129
130	<div class="workout-map" tal:condition="workout.has_gpx">
131	<a href="" tal:attributes="href request.resource_url(workout)">
132	<img src="" tal:attributes="src request.static_url(workout.map_screenshot);
133	alt workout.title; title workout.title">
134	</a>
135	</div>
136
137	</article>
138
139	</tal:r>
140
141	</div>
142
143	</metal:content>
144
145	<metal:body-js metal:fill-slot="body-js">
146
147	<script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
148	<script src="${request.static_url('ow:static/js/ow.js')}"></script>
149
150	<script type="text/javascript">
151	var y_axis_labels = {
152	"distance": "Kilometers",
153	"time": "Hours",
154	"elevation": "Meters"
155	};
156
157	var year_chart = owjs.year_chart({
158	chart_selector: 'div.js-month-stats svg',
159	filters_selector: 'div.js-month-stats div.js-filters a',
160	switcher_selector: 'div.js-month-stats div.js-switcher a',
161	urls: {"monthly": "${request.resource_url(context, 'monthly')}",
162	"weekly": "${request.resource_url(context, 'weekly')}"},
163	current_month: "${current_month}",
164	current_week: "${current_week}",
165	y_axis_labels: y_axis_labels,
166	filter_by: "distance",
167	url: "${'monthly' if current_week is None else 'weekly'}",
168	});
169	year_chart.render("distance", "${'monthly' if current_week is None else 'weekly'}");
170	year_chart.filters_setup();
171	year_chart.switcher_setup();
172	</script>
173
174	</metal:body-js>
175
176	</html>

Note: See TracBrowser for help on using the repository browser.

Download in other formats:

Original Format