Changeset 778d53d in OpenWorkouts-current for ow/templates


Ignore:
Timestamp:
Mar 5, 2019, 11:45:32 PM (5 years ago)
Author:
Borja Lopez <borja@…>
Branches:
current
Children:
aa6dcaf
Parents:
35953eb
Message:

(#7) Show per-sport stats in the profile page:

  • Show a dropdown list of sports for which the user has activities. By default we choose the sport with most activities.
  • Show a dropdown list of years for which the user has activities. By default we show stats for the current year. If the user picks up a different year, we show the totals (distance, time, elevation, number of workouts) for that year.
  • Show the totals of all time for the chosen sport
File:
1 edited

Legend:

Unmodified
Added
Removed

  • ow/templates/profile.pt

    r35953eb r778d53d  
    1111    <tal:t i18n:translate="">My profile</tal:t>
    1212  </metal:head-title>
     13
     14  <metal:css metal:fill-slot="css">
     15    <link rel="stylesheet" href="${request.static_url('ow:static/components/jquery-dropdown/jquery.dropdown.css')}" />
     16  </metal:css>
    1317
    1418  <metal:content metal:fill-slot="content">
    … …  
    168172
    169173        <div class="workout-aside">
     174
     175          <h3 i18n:translate="">Profile info</h3>
     176
    170177          <ul class="profile-data">
    171178            <li>
    … …  
    188195            </li>
    189196          </ul>
     197
     198          <tal:has-workouts tal:condition="profile_stats['sports']">
     199
     200            <h3 i18n:translate="">Workout stats</h3>
     201
     202            <p>
     203              <a href="" data-jq-dropdown="#jq-dropdown-sports"
     204                 class="profile-dropdown-sports js-jq-dropdown-sel-sports">
     205                <strong tal:content="profile_stats['current_sport']"></strong>
     206                <i class="arrow down"></i>
     207              </a>
     208            </p>
     209
     210            <tal:sports tal:repeat="sport profile_stats['sports']">
     211              <div class="" tal:attributes="class 'js-sport-stats js-' + sport">
     212
     213                <a href="" data-jq-dropdown=""
     214                   tal:attributes="data-jq-dropdown '#jq-dropdown-' + sport;
     215                         class 'profile-dropdown-years js-jq-dropdown-sel-' + sport">
     216                  <strong tal:content="profile_stats['current_year']"></strong>
     217                  <i class="arrow down"></i>
     218                </a>
     219
     220                <tal:years tal:repeat="year profile_stats['years']">
     221                  <div class="" tal:attributes="class 'js-year-stats js-' + sport + '-' + str(year)">
     222                    <ul class="profile-data"
     223                        tal:define="sport_totals context.sport_totals(sport, year)">
     224                      <li>
     225                        <span>
     226                          <tal:t i18n:translate="">Workouts</tal:t>
     227                        </span>
     228                        <tal:w tal:replace="sport_totals['workouts']"></tal:w>
     229                      </li>
     230                      <li>
     231                        <span>
     232                          <tal:t i18n:translate="">Time</tal:t>
     233                        </span>
     234                        <tal:hms tal:define="hms timedelta_to_hms(sport_totals['time'])">
     235                          <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
     236                          <tal:t i18n:translate="">hours</tal:t>,
     237                          <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
     238                          <tal:t i18n:translate="">min.</tal:t>
     239                        </tal:hms>
     240                      </li>
     241                      <li>
     242                        <span>
     243                          <tal:t i18n:translate="">Distance</tal:t>
     244                        </span>
     245                        <tal:w tal:replace="round(sport_totals['distance'])"></tal:w>
     246                        <tal:t i18n:translate="">km</tal:t>
     247                      </li>
     248                      <li>
     249                        <span>
     250                          <tal:t i18n:translate="">Elevation</tal:t>
     251                        </span>
     252                        <tal:w tal:replace="round(sport_totals['elevation'])"></tal:w>
     253                        <tal:t i18n:translate="">m</tal:t>
     254                      </li>
     255                    </ul>
     256                  </div>
     257                </tal:years>
     258
     259                <strong i18n:translate="">All time</strong>
     260                <ul class="profile-data"
     261                    tal:define="sport_totals context.sport_totals(sport)">
     262                  <li>
     263                    <span>
     264                      <tal:t i18n:translate="">Workouts</tal:t>
     265                    </span>
     266                    <tal:w tal:replace="sport_totals['workouts']"></tal:w>
     267                  </li>
     268                  <li>
     269                    <span>
     270                      <tal:t i18n:translate="">Time</tal:t>
     271                    </span>
     272                    <tal:hms tal:define="hms timedelta_to_hms(sport_totals['time'])">
     273                      <tal:h tal:content="str(hms[0]).zfill(2)"></tal:h>
     274                      <tal:t i18n:translate="">hours</tal:t>,
     275                      <tal:h tal:content="str(hms[1]).zfill(2)"></tal:h>
     276                      <tal:t i18n:translate="">min.</tal:t>
     277                    </tal:hms>
     278                  </li>
     279                  <li>
     280                    <span>
     281                      <tal:t i18n:translate="">Distance</tal:t>
     282                    </span>
     283                    <tal:w tal:replace="round(sport_totals['distance'])"></tal:w>
     284                    <tal:t i18n:translate="">km</tal:t>
     285                  </li>
     286                  <li>
     287                    <span>
     288                      <tal:t i18n:translate="">Elevation</tal:t>
     289                    </span>
     290                    <tal:w tal:replace="round(sport_totals['elevation'])"></tal:w>
     291                    <tal:t i18n:translate="">m</tal:t>
     292                  </li>
     293                </ul>
     294              </div>
     295            </tal:sports>
     296
     297          </tal:has-workouts>
     298
    190299        </div>
    191300      </div>
    192301    </div>
    193302
     303      <div id="jq-dropdown-sports" class="jq-dropdown jq-dropdown-tip">
     304        <ul class="jq-dropdown-menu">
     305          <tal:sports tal:repeat="sport profile_stats['sports']">
     306            <li>
     307              <a href="#" class="" tal:content="sport"
     308                 tal:attributes="class 'js-choose-sport-stats js-' + sport">
     309              </a>
     310            </li>
     311          </tal:sports>
     312        </ul>
     313      </div>
     314
     315
     316    <tal:sports tal:repeat="sport profile_stats['sports']">
     317      <div id="" class="jq-dropdown jq-dropdown-tip"
     318           tal:attributes="id 'jq-dropdown-' + sport">
     319        <ul class="jq-dropdown-menu">
     320          <tal:years tal:repeat="year profile_stats['years']">
     321            <li>
     322              <a href="#" class="" tal:content="year"
     323                 tal:attributes="class 'js-choose-year-stats js-' + sport + '-' + str(year)">
     324              </a>
     325            </li>
     326          </tal:years>
     327        </ul>
     328      </div>
     329    </tal:sports>
     330
     331
    194332  </metal:content>
    195333
    196334  <metal:body-js metal:fill-slot="body-js">
    197335
     336    <script src="${request.static_url('ow:static/components/jquery-dropdown/jquery.dropdown.js')}"></script>
    198337    <script src="${request.static_url('ow:static/components/d3/d3.min.js')}"></script>
    199338    <script src="${request.static_url('ow:static/js/ow.js')}"></script>
    … …  
    204343     })
    205344     map_shots.run();
     345
     346     var sport_stats = owjs.sport_stats({
     347         link_selector: 'a.js-choose-sport-stats',
     348         stats_selector: 'div.js-sport-stats',
     349         selected: 'div.js-sport-stats.js-${profile_stats['current_sport']}',
     350         dropdown_selector: 'a.js-jq-dropdown-sel-sports',
     351         current_year: '${profile_stats['current_year']}',
     352         year_link_selector: 'a.js-choose-year-stats.js-'
     353     })
     354     sport_stats.setup();
     355
     356     var year_stats = owjs.year_stats({
     357         link_selector: 'a.js-choose-year-stats',
     358         stats_selector: 'div.js-year-stats',
     359         selected: 'div.js-year-stats.js-${profile_stats['current_sport']}-${profile_stats['current_year']}',
     360         dropdown_selector: 'a.js-jq-dropdown-sel-'
     361     })
     362     year_stats.setup();
    206363
    207364     var y_axis_labels = {
Note: See TracChangeset for help on using the changeset viewer.