Changeset 5bdfbfb in OpenWorkouts-current for ow/templates

Timestamp:

Jan 25, 2019, 12:42:33 AM (5 years ago)

Author:

borja <borja@…>

Branches:

current, feature/docs, master

Children:

26220ba, 7783f97

Parents:

421f05f

Message:

(#7) Show year/month/weekly stats in the dashboard for the user,

including a bar chart for activity during the current week

File:

• ow/templates/dashboard.pt (modified) (2 diffs)

ow/templates/dashboard.pt

@@ -142 +142 @@
               </ul>
           </tal:activity_tree>
+
+          <tal:stats>
+
+            <div class="week-stats js-week-stats">
+              <h3><tal:t i18n:translate="">This week</tal:t></h3>
+              <h4 tal:define="totals context.week_totals">
+                <span class="week_totals_left">
+                  <tal:d tal:content="round(totals['distance'])"></tal:d>
+                  <tal:t i18n:translate="">kms</tal:t>
+                </span>
+                <span class="week_totals_right">
+                  <tal:hms tal:define="hms timedelta_to_hms(totals['time'])">
+                    <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
+                    <tal:t i18n:translate="">hours</tal:t>,
+                    <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
+                    <tal:t i18n:translate="">min.</tal:t>
+                  </tal:hms>
+                </span>
+              </h4>
+              <svg width="300" height="200"></svg>
+              <style>
+
+              </style>
+            </div>
+
+            <div class="user-stats">
+              <tal:year-stats tal:repeat="year context.activity_years">
+                <h3><a href="" tal:content="year"></a></h3>
+                <ul tal:define="stats context.stats(year)">
+                  <li>
+                    <span i18n:translate="">Workouts:</span>
+                    <span tal:content="stats['workouts']"></span>
+                  </li>
+                  <li>
+                    <span i18n:translate="">Distance:</span>
+                    <span tal:content="round(stats['distance'])"></span> kms
+                  </li>
+                  <li>
+                    <span i18n:translate="">Time:</span>
+                    <tal:hms tal:define="hms timedelta_to_hms(stats['time'])">
+                      <span>
+                        <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
+                        <tal:t i18n:translate="">hours</tal:t>,
+                        <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
+                        <tal:t i18n:translate="">min.</tal:t>
+                      </span>
+                    </tal:hms>
+                  </li>
+                  <li>
+                    <span i18n:translate="">Elevation:</span>
+                    <span tal:content="stats['elevation']"></span> m
+                  </li>
+                </ul>
+              </tal:year-stats>
+            </div>
+          </tal:stats>
+
       </aside>
 
@@ -148 +205 @@
   </metal:content>
 
+  <metal:body-js metal:fill-slot="body-js">
+    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
+    <script src="${request.static_url('ow:static/js/ow.js')}"></script>
+
+    <script type="text/javascript">
+     var week_chart = owjs.week_chart({
+         chart_selector: 'div.js-week-stats',
+         url: "${request.resource_url(context, 'week')}",
+         current_day_name: "${current_day_name}"
+     });
+     week_chart.render();
+    </script>
+
+  </metal:body-js>
+
 </html>