Format workout stats better

This commit is contained in:
Peter Stockings
2023-10-13 20:18:02 +11:00
parent 339b8722fc
commit 6add399c3c
2 changed files with 77 additions and 10 deletions

2
app.py
View File

@@ -396,7 +396,7 @@ def get_workouts_for_user(user_id, max_date=None):
'start_time': format_date_with_ordinal(start_time, '%#H:%M %B %dth %Y'),
'start_time_date': start_time,
'start_time_ago': humanize.naturaltime(start_time),
'duration': format_duration(duration),
'duration': humanize.naturaldelta(duration),
'duration_minutes': duration.total_seconds() / 60,
'average_rpm': int(average_rpm),
'min_rpm': int(min_rpm),

View File

@@ -17,15 +17,82 @@
<div class="items-center justify-between sm:flex">
<time class="mb-1 text-xs font-normal text-gray-400 sm:order-last sm:mb-0">{{ w.start_time_ago
}}</time>
<div class="text-sm font-normal text-gray-500 lex dark:text-gray-300"
_="on click toggle .hidden on #workout_view_wrapper-{{ w.id }}">Duration: {{ w.duration }}
|
Average RPM: {{ w.average_rpm
}} |
Calories: {{ w.calories }} | Distance: {{ w.distance }} {% if w.is_heart_rate_available
%} | Average: BPM: {{w.average_bpm }} {% endif %}<span
class="bg-gray-100 text-gray-800 text-xs font-normal mr-2 px-2.5 py-0.5 rounded dark:bg-gray-600 dark:text-gray-300">{{
w.bike_display_name }}</span> </div>
<div class="text-sm font-normal text-gray-500 lex dark:text-gray-300 flex flex-row flex-wrap space-x-1 justify-items-center"
_="on click toggle .hidden on #workout_view_wrapper-156">
<div
class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border mb-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 mr-2" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{{ w.duration }}
</div>
<div
class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border mb-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="37"
class="w-4 h-4 mr-2 feather feather-activity mr-2"
style="--darkreader-inline-stroke: currentColor;" viewBox="0 0 512 512"
stroke="currentColor" data-darkreader-inline-stroke="">
<path stroke-linecap="round" stroke-linejoin="round"
d="M0 256a256 256 0 1 1 512 0 256 256 0 1 1-512 0zm320 96c0-26.9-16.5-49.9-40-59.3V88c0-13.3-10.7-24-24-24s-24 10.7-24 24v204.7c-23.5 9.5-40 32.5-40 59.3 0 35.3 28.7 64 64 64s64-28.7 64-64zM144 176a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm-16 80a32 32 0 1 0-64 0 32 32 0 1 0 64 0zm288 32a32 32 0 1 0 0-64 32 32 0 1 0 0 64zm-16-144a32 32 0 1 0-64 0 32 32 0 1 0 64 0z">
</path>
</svg>{{ w.average_rpm
}} RPM
</div>
{% if w.is_heart_rate_available %}
<div
class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border mb-1">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
class="feather feather-activity mr-2" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
{{w.average_bpm }} BPM
</div>
{% endif %}
<div
class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border mb-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-width="40"
class="w-3.5 h-3.5 mr-2 feather feather-activity mr-2"
style="--darkreader-inline-stroke: currentColor;" viewBox="0 0 512 512"
data-darkreader-inline-stroke="">
<path stroke-linecap="round" stroke-linejoin="round"
d="M512 96c0 50.2-59.1 125.1-84.6 155a15 15 0 0 1-14.5 5H320a32 32 0 1 0 0 64h96a96 96 0 0 1 0 192H139.6c8.7-9.9 19.3-22.6 30-36.8a477 477 0 0 0 19-27.2H416a32 32 0 1 0 0-64h-96a96 96 0 0 1 0-192h39.8c-21-31.5-39.8-67.7-39.8-96a96 96 0 0 1 192 0zM117.1 489.1 107 500.4l-1.8 2-.2-.2c-6 4.6-14.6 4-20-1.8C59.8 473 0 402.5 0 352a96 96 0 0 1 192 0c0 30-21.1 67-43.5 97.9a587.4 587.4 0 0 1-30.8 38.5l-.6.7zM128 352a32 32 0 1 0-64 0 32 32 0 1 0 64 0zm288-224a32 32 0 1 0 0-64 32 32 0 1 0 0 64z">
</path>
</svg>{{ w.distance }} KM
</div>
<div
class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border mb-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-4 h-4 mr-2" data-darkreader-inline-stroke=""
style="--darkreader-inline-stroke: currentColor;">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.362 5.214A8.252 8.252 0 0112 21 8.25 8.25 0 016.038 7.048 8.287 8.287 0 009 9.6a8.983 8.983 0 013.361-6.867 8.21 8.21 0 003 2.48z">
</path>
<path stroke-linecap="round" stroke-linejoin="round"
d="M12 18a3.75 3.75 0 00.495-7.467 5.99 5.99 0 00-1.925 3.546 5.974 5.974 0 01-2.133-1A3.75 3.75 0 0012 18z">
</path>
</svg>
{{ w.calories }} CALS
</div>
<div
class="text-xs inline-flex items-center font-bold leading-sm uppercase px-3 py-1 rounded-full bg-white text-gray-700 border mb-1">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke-width="30"
class="w-7 h-4 feather feather-activity" style="--darkreader-inline-stroke: currentColor;"
viewBox="0 0 512 512" stroke="currentColor"
data-darkreader-inline-stroke=""><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
<path
d="M312 32c-13.3 0-24 10.7-24 24s10.7 24 24 24h25.7l34.6 64H222.9l-27.4-38C191 99.7 183.7 96 176 96H120c-13.3 0-24 10.7-24 24s10.7 24 24 24h43.7l22.1 30.7-26.6 53.1c-10-2.5-20.5-3.8-31.2-3.8C57.3 224 0 281.3 0 352s57.3 128 128 128c65.3 0 119.1-48.9 127-112h49c8.5 0 16.3-4.5 20.7-11.8l84.8-143.5 21.7 40.1C402.4 276.3 384 312 384 352c0 70.7 57.3 128 128 128s128-57.3 128-128s-57.3-128-128-128c-13.5 0-26.5 2.1-38.7 6L375.4 48.8C369.8 38.4 359 32 347.2 32H312zM458.6 303.7l32.3 59.7c6.3 11.7 20.9 16 32.5 9.7s16-20.9 9.7-32.5l-32.3-59.7c3.6-.6 7.4-.9 11.2-.9c39.8 0 72 32.2 72 72s-32.2 72-72 72s-72-32.2-72-72c0-18.6 7-35.5 18.6-48.3zM133.2 368h65c-7.3 32.1-36 56-70.2 56c-39.8 0-72-32.2-72-72s32.2-72 72-72c1.7 0 3.4 .1 5.1 .2l-24.2 48.5c-9 18.1 4.1 39.4 24.3 39.4zm33.7-48l50.7-101.3 72.9 101.2-.1 .1H166.8zm90.6-128H365.9L317 274.8 257.4 192z">
</path>
</svg><span class="ml-2">{{
w.bike_display_name }}</span>
</div>
</div>
</div>
<div class="p-3 text-xs italic font-normal text-gray-500 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-600 dark:border-gray-500 dark:text-gray-300 mt-3 hidden"
id="workout_view_wrapper-{{ w.id }}">