templates/blocks/trail.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71

{% set trail_gpx = record.attachments.get(this.trail_gpx) if this.trail_gpx else none %}
{% set activity_gpx = record.attachments.get(this.activity_gpx) if this.activity_gpx else none %}
{% if trail_gpx %}
  {% set trail_gpx_url = trail_gpx | url(absolute=True, external=False) %}
{% endif %}
{% if activity_gpx %}
  {% set activity_gpx_url = activity_gpx | url(absolute=True, external=False) %}
{% endif %}
{% if trail_gpx or activity_gpx %}
  <figure class="trail"
          {% if trail_gpx %}data-trail-gpx-url="{{ trail_gpx_url }}"{% endif %}
          {% if activity_gpx %}data-activity-gpx-url="{{ activity_gpx_url }}"{% endif %}>
    <figcaption class="visually-hidden">Interactive map of the trail</figcaption>
    <div data-trail-map role="region" aria-label="Interactive trail map"></div>
    <details>
      <summary>Trail details</summary>
      <div>
        <div data-trail-chart role="region" aria-label="Trail elevation profile"></div>
        <div data-trail-summary>
          <table aria-label="Trail summary">
            <tbody>
              <tr>
                <th scope="row">Distance:</th>
                <td data-trail-distance></td>
                <th scope="row">Time:</th>
                <td data-trail-time></td>
                <th scope="row">Overall pace:</th>
                <td data-trail-pace></td>
              </tr>
              <tr>
                <th scope="row">Maximum elevation:</th>
                <td data-trail-maximum-elevation></td>
                <th scope="row">Minimum elevation:</th>
                <td data-trail-minimum-elevation></td>
                <th scope="row">Average elevation:</th>
                <td data-trail-average-elevation></td>
              </tr>
              <tr>
                <th scope="row">Ascent:</th>
                <td data-trail-ascent></td>
                <th scope="row">Descent:</th>
                <td data-trail-descent></td>
              </tr>
              <tr>
                <th scope="row">Average speed:</th>
                <td data-trail-average-speed></td>
                <th scope="row">Maximum speed:</th>
                <td data-trail-maximum-speed></td>
              </tr>
            </tbody>
          </table>
        </div>
        <p>
          <a href="{% if trail_gpx %}{{ trail_gpx_url }}{% else %}{{ activity_gpx_url }}{% endif %}"
             download>Download the GPX track</a>
        </p>

      </div>
    </details>

    <p data-trail-message role="status" hidden>The interactive trail map could not be loaded.</p>
    <noscript>
      <p class="trail-message">JavaScript is required to display the interactive trail map.</p>
    </noscript>
  </figure>
{% else %}
  <figure class="trail">
    <figcaption class="visually-hidden">Interactive map of the trail</figcaption>
    <p class="trail-message" role="status">The interactive trail map could not be loaded.</p>
  </figure>
{% endif %}