source: OpenWorkouts-current/ow/templates/workout.pt @ d1c4782

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

Show a capture of the workout map, as an image, in the dashboard:

  • Added a view to render the tracking map of a workout full screen
  • Added a small shell script that uses chrome to grabs a screenshot of the full screen map view of a workout, then uses imagemagick convert to crop/resize it and finally saves it in a given location
  • Added a static/maps directory to store maps captures
  • Added static/maps to the boring/ignore file
  • Added a tool in utilities.py to call the shell script that captures the screenshot of the map
  • Added a method to the Workout model, that returns the static path to the workout map capture (valid to use with request.static_url()). If there is no capture yet, call the tool to make one
  • Added code to dashboard.pt to show the capture of the map
  • Added a new parameter to te ow maps js code, allowing us to hide/show the zoom controls of the map when building a new one
  • Property mode set to 100644
File size: 6.5 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="">Workout details</tal:t>:
12    <tal:c tal:content="context.title"></tal:c>
13  </metal:head-title>
14
15  <metal:css metal:fill-slot="css">
16    <link rel="stylesheet" tal:condition="context.has_gpx"
17          href="${request.static_url('ow:static/components/Leaflet/leaflet.css')}" />
18    <link rel="stylesheet" tal:condition="context.has_gpx"
19          href="${request.static_url('ow:static/components/Leaflet.Elevation/dist/leaflet.elevation-0.0.4.css')}" />
20  </metal:css>
21
22  <metal:title metal:fill-slot="title">
23    <tal:t i18n:translate="">Workout details</tal:t>
24  </metal:title>
25
26  <metal:content metal:fill-slot="content">
27
28    <!--! Track map -->
29    <div id="map" tal:condition="context.has_gpx"></div>
30
31    <!--! Additional map controls -->
32
33    <div id="ow-analysis">
34
35      <!--!
36          FIXME: the list of available charts should come from the workout
37          details, based on which data this workout has
38        -->
39      <!--! All those ids are needed for the leaflet openworkouts plugin -->
40      <tal:r tal:repeat="chart ['elevation', 'heartrate', 'cadence', 'temperature']">
41        <div id="ow-" tal:attributes="id 'ow-' + chart">
42          <div class="ow-average" id=""
43               tal:attributes="id 'ow-' + chart + '-average'"></div>
44          <div class="ow-chart" id=""
45               tal:attributes="id 'ow-' + chart + '-chart'"></div>
46          <div class="ow-current" id=""
47               tal:attributes="id 'ow-' + chart + '-current'"></div>
48        </div>
49      </tal:r>
50
51    </div>
52
53    <div id="workout">
54      <h3 tal:content="context.title"></h3>
55      <h4>
56        <a href="" i18n:translate=""
57           tal:attributes="href request.resource_url(context, 'edit')">
58          (edit workout)
59        </a> |
60        <a href="" i18n:translate=""
61           tal:attributes="href request.resource_url(context, 'update-from-file')">
62          (update with tracking file)
63        </a> |
64        <a href="" i18n:translate=""
65           tal:attributes="href request.resource_url(context, 'delete')">
66          (delete)
67        </a>
68      </h4>
69
70      <ul id="" tal:attributes="id 'workout-' + context.workout_id + '-details'"
71          tal:define="hr context.hr; cad context.cad; atemp context.atemp; timezone context.owner.timezone">
72        <li>
73          <tal:t i18n:translate="">Start:</tal:t>
74          <tal:c tal:content="context.start_in_timezone(timezone)"></tal:c>
75        </li>
76        <li>
77          <tal:t i18n:translate="">End:</tal:t>
78          <tal:c tal:content="context.end_in_timezone(timezone)"></tal:c>
79        </li>
80        <li>
81          <tal:t i18n:translate="">Duration:</tal:t>
82          <!--! use the properly formatted duration instead of the timedelta object -->
83          <tal:c tal:content="context._duration"></tal:c>
84        </li>
85        <li tal:condition="context.distance">
86          <tal:t i18n:translate="">Distance:</tal:t>
87          <tal:c tal:content="context.rounded_distance"></tal:c> km
88        </li>
89        <li tal:condition="context.speed">
90          <tal:t i18n:translate="">Speed:</tal:t>
91          <tal:t i18n:translate="">Avg.</tal:t>
92          <tal:c tal:content="round(context.speed['avg'], 1)"></tal:c> km/h |
93          <tal:t i18n:translate="">Max.</tal:t>
94          <tal:c tal:content="round(context.speed['max'], 1)"></tal:c> km/h
95        </li>
96        <li tal:condition="hr">
97          <tal:t i18n:translate="">Heart Rate:</tal:t>
98          <tal:t i18n:translate="">Min.</tal:t>
99          <tal:c tal:content="hr['min']"></tal:c> bpm |
100          <tal:t i18n:translate="">Avg.</tal:t>
101          <tal:c tal:content="hr['avg']"></tal:c> bpm |
102          <tal:t i18n:translate="">Max.</tal:t>
103          <tal:c tal:content="hr['max']"></tal:c> bpm
104        </li>
105        <li tal:condition="cad">
106          <tal:t i18n:translate="">Cadence:</tal:t>
107          <tal:t i18n:translate="">Min.</tal:t>
108          <tal:c tal:content="cad['min']"></tal:c> |
109          <tal:t i18n:translate="">Avg.</tal:t>
110          <tal:c tal:content="cad['avg']"></tal:c> |
111          <tal:t i18n:translate="">Max.</tal:t>
112          <tal:c tal:content="cad['max']"></tal:c>
113        </li>
114        <li tal:condition="atemp">
115          <tal:t i18n:translate="">Temperature:</tal:t>
116          <tal:t i18n:translate="">Min.</tal:t>
117          <tal:c tal:content="atemp['min']"></tal:c> |
118          <tal:t i18n:translate="">Avg.</tal:t>
119          <tal:c tal:content="atemp['avg']"></tal:c> |
120          <tal:t i18n:translate="">Max.</tal:t>
121          <tal:c tal:content="atemp['max']"></tal:c>
122        </li>
123
124      </ul>
125      <div id="" tal:content="context.notes"
126           tal:attributes="id 'workout-' + context.workout_id + '-notes'">
127      </div>
128    </div>
129  </metal:content>
130
131  <metal:body-js metal:fill-slot="body-js">
132
133
134    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
135    <!--
136    <script src="${request.static_url('ow:static/d3/d3.min.js')}"
137            tal:condition="context.has_gpx"></script>
138    -->
139
140    <script src="${request.static_url('ow:static/components/Leaflet/leaflet.js')}"
141            tal:condition="context.has_gpx"></script>
142
143    <script src="${request.static_url('ow:static/components/leaflet-gpx/gpx.js')}"
144            tal:condition="context.has_gpx"></script>
145
146    <script src="${request.static_url('ow:static/components/Leaflet.Elevation/dist/leaflet.elevation-0.0.4.min.js')}"
147            tal:condition="context.has_gpx"></script>
148
149    <script src="${request.static_url('ow:static/js/ow.js')}"
150            tal:condition="context.has_gpx"></script>
151
152    <script type="text/javascript" tal:condition="context.has_gpx">
153     var workout_map = owjs.map({
154         map_id: 'map',
155         latitude: ${start_point['latitude']},
156         longitude: ${start_point['longitude']},
157         zoom: 11,
158         gpx_url: '${request.resource_url(context, 'gpx')}',
159         start_icon: '${request.static_url('ow:static/components/leaflet-gpx/pin-icon-start.png')}',
160         end_icon: '${request.static_url('ow:static/components/leaflet-gpx/pin-icon-end.png')}',
161         shadow: '${request.static_url('ow:static/components/leaflet-gpx/pin-shadow.png')}',
162         elevation: true,
163         zoom_control: true
164     });
165     workout_map.render();
166    </script>
167  </metal:body-js>
168
169</html>
Note: See TracBrowser for help on using the repository browser.