add track previews to profile page

1 files changed, 47 insertions, 42 deletions

diff --git a/fietsboek/templates/profile_overview.jinja2 b/fietsboek/templates/profile_overview.jinja2
index aa2333c..eaa10c6 100644
--- a/fietsboek/templates/profile_overview.jinja2
+++ b/fietsboek/templates/profile_overview.jinja2
@@ -9,48 +9,53 @@
       {% for tag in track.tags %}<span class="badge bg-info text-dark">{{ tag.tag }}</span> {% endfor %}
       {% endif %}
     </h5>
-    <div class="card-body">
-      <table class="table table-hover table-sm browse-summary">
-        <tbody>
-          <tr>
-            <th scope="row">{{ _("page.details.date") }}</th>
-            <td>{{ track.date | format_datetime }}</td>
-            <th scope="row">{{ _("page.details.length") }}</th>
-            <td>{{ (track.length / 1000) | round(2) | format_decimal }} km</td>
-          </tr>
-          <tr>
-            <th scope="row">{{ _("page.details.start_time") }}</th>
-            <td>{{ track.start_time | format_datetime }}</td>
-            <th scope="row">{{ _("page.details.end_time") }}</th>
-            <td>{{ track.end_time | format_datetime }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{{ _("page.details.uphill") }}</th>
-            <td>{{ track.uphill | round(2) | format_decimal }} m</td>
-            <th scope="row">{{ _("page.details.downhill") }}</th>
-            <td>{{ track.downhill | round(2) | format_decimal }} m</td>
-          </tr>
-          <tr>
-            <th scope="row">{{ _("page.details.moving_time") }}</th>
-            <td>{{ track.moving_time }}</td>
-            <th scope="row">{{ _("page.details.stopped_time") }}</th>
-            <td>{{ track.stopped_time }}</td>
-          </tr>
-          <tr>
-            <th scope="row">{{ _("page.details.max_speed") }}</th>
-            <td>{{ mps_to_kph(track.max_speed) | round(2) | format_decimal }} km/h</td>
-            <th scope="row">{{ _("page.details.avg_speed") }}</th>
-            <td>{{ mps_to_kph(track.avg_speed) | round(2) | format_decimal }} km/h</td>
-          </tr>
-        </tbody>
-      </table>
-
-      <ul>
-        <li>{{ track.owner.name }}</li>
-        {% for user in track.tagged_people %}
-        <li>{{ user.name }}</li>
-        {% endfor %}
-      </ul>
+    <div class="card-body browse-track-card">
+      <div class="browse-track-preview">
+        <img src="{{ request.route_url('track-map', track_id=track.id) }}">
+      </div>
+      <div class="browse-track-data">
+        <table class="table table-hover table-sm browse-summary">
+          <tbody>
+            <tr>
+              <th scope="row">{{ _("page.details.date") }}</th>
+              <td>{{ track.date | format_datetime }}</td>
+              <th scope="row">{{ _("page.details.length") }}</th>
+              <td>{{ (track.length / 1000) | round(2) | format_decimal }} km</td>
+            </tr>
+            <tr>
+              <th scope="row">{{ _("page.details.start_time") }}</th>
+              <td>{{ track.start_time | format_datetime }}</td>
+              <th scope="row">{{ _("page.details.end_time") }}</th>
+              <td>{{ track.end_time | format_datetime }}</td>
+            </tr>
+            <tr>
+              <th scope="row">{{ _("page.details.uphill") }}</th>
+              <td>{{ track.uphill | round(2) | format_decimal }} m</td>
+              <th scope="row">{{ _("page.details.downhill") }}</th>
+              <td>{{ track.downhill | round(2) | format_decimal }} m</td>
+            </tr>
+            <tr>
+              <th scope="row">{{ _("page.details.moving_time") }}</th>
+              <td>{{ track.moving_time }}</td>
+              <th scope="row">{{ _("page.details.stopped_time") }}</th>
+              <td>{{ track.stopped_time }}</td>
+            </tr>
+            <tr>
+              <th scope="row">{{ _("page.details.max_speed") }}</th>
+              <td>{{ mps_to_kph(track.max_speed) | round(2) | format_decimal }} km/h</td>
+              <th scope="row">{{ _("page.details.avg_speed") }}</th>
+              <td>{{ mps_to_kph(track.avg_speed) | round(2) | format_decimal }} km/h</td>
+            </tr>
+          </tbody>
+        </table>
+
+        <ul>
+          <li>{{ track.owner.name }}</li>
+          {% for user in track.tagged_people %}
+          <li>{{ user.name }}</li>
+          {% endfor %}
+        </ul>
+      </div>
     </div>
   </div>
 {% endmacro %}