When a day with a workout is selected a workout overview is rendered
This commit is contained in:
Peter Stockings
101
app.py
101
app.py
@@ -293,6 +293,14 @@ def workout_list(user_id):
|
||||
return render_template('partials/workouts_list_fragment.html', workouts=workouts, user_id=user_id, workouts_all_loaded=True)
|
||||
|
||||
|
||||
@ app.route("/user/<int:user_id>/workout/<int:workout_id>/calendar_view", methods=['GET'])
|
||||
def calendar_workout_view(user_id, workout_id):
|
||||
workout = Workout.query.filter_by(user_id=user_id, id=workout_id).first()
|
||||
user = User.query.get(user_id)
|
||||
workout_view_data = get_workout_view_data(workout, user)
|
||||
return render_template('partials/selected_workout_view.html', workout=workout_view_data, user_id=user_id)
|
||||
|
||||
|
||||
def render_users_and_workouts():
|
||||
users = User.query.all()
|
||||
users_data = []
|
||||
@@ -369,52 +377,59 @@ def get_workouts_for_user(user_id, max_date=None):
|
||||
Workout.created_at.desc()).all()
|
||||
|
||||
for workout in workouts:
|
||||
|
||||
duration = timedelta(
|
||||
seconds=int(workout.duration)) if workout.duration else timedelta(seconds=0)
|
||||
average_rpm = workout.average_rpm if workout.average_rpm else 0
|
||||
min_rpm = workout.min_rpm if workout.min_rpm else 0
|
||||
max_rpm = workout.max_rpm if workout.max_rpm else 0
|
||||
calories = workout.calories if workout.calories else 0
|
||||
distance = workout.distance if workout.distance else 0
|
||||
average_bpm = workout.average_bpm if workout.average_bpm else 0
|
||||
min_bpm = workout.min_bpm if workout.min_bpm else 0
|
||||
max_bpm = workout.max_bpm if workout.max_bpm else 0
|
||||
is_heart_rate_available = workout.is_heart_rate_available
|
||||
is_cadence_available = workout.is_cadence_available
|
||||
start_time = workout.started_at
|
||||
|
||||
selected_graph_types = ['speed']
|
||||
if is_heart_rate_available:
|
||||
selected_graph_types.append('heart_rate')
|
||||
|
||||
if is_cadence_available or is_heart_rate_available:
|
||||
workouts_data.append({
|
||||
'id': workout.id,
|
||||
'user_id': user_id,
|
||||
'user_name': user.name,
|
||||
'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': humanize.naturaldelta(duration),
|
||||
'duration_minutes': duration.total_seconds() / 60,
|
||||
'average_rpm': int(average_rpm),
|
||||
'min_rpm': int(min_rpm),
|
||||
'max_rpm': int(max_rpm),
|
||||
'calories': int(calories),
|
||||
'distance': int(distance),
|
||||
'bike_display_name': workout.bike.display_name,
|
||||
'selected_graph_types': selected_graph_types,
|
||||
'is_heart_rate_available': is_heart_rate_available,
|
||||
'is_cadence_available': is_cadence_available,
|
||||
'average_bpm': int(average_bpm),
|
||||
'min_bpm': int(min_bpm),
|
||||
'max_bpm': int(max_bpm),
|
||||
})
|
||||
workout_data = get_workout_view_data(workout, user)
|
||||
if workout_data:
|
||||
workouts_data.append(workout_data)
|
||||
|
||||
return workouts_data
|
||||
|
||||
|
||||
def get_workout_view_data(workout, user):
|
||||
duration = timedelta(
|
||||
seconds=int(workout.duration)) if workout.duration else timedelta(seconds=0)
|
||||
average_rpm = workout.average_rpm if workout.average_rpm else 0
|
||||
min_rpm = workout.min_rpm if workout.min_rpm else 0
|
||||
max_rpm = workout.max_rpm if workout.max_rpm else 0
|
||||
calories = workout.calories if workout.calories else 0
|
||||
distance = workout.distance if workout.distance else 0
|
||||
average_bpm = workout.average_bpm if workout.average_bpm else 0
|
||||
min_bpm = workout.min_bpm if workout.min_bpm else 0
|
||||
max_bpm = workout.max_bpm if workout.max_bpm else 0
|
||||
is_heart_rate_available = workout.is_heart_rate_available
|
||||
is_cadence_available = workout.is_cadence_available
|
||||
start_time = workout.started_at
|
||||
|
||||
selected_graph_types = ['speed']
|
||||
if is_heart_rate_available:
|
||||
selected_graph_types.append('heart_rate')
|
||||
|
||||
if is_cadence_available or is_heart_rate_available:
|
||||
return {
|
||||
'id': workout.id,
|
||||
'user_id': user.id,
|
||||
'user_name': user.name,
|
||||
'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': humanize.naturaldelta(duration),
|
||||
'duration_minutes': duration.total_seconds() / 60,
|
||||
'average_rpm': int(average_rpm),
|
||||
'min_rpm': int(min_rpm),
|
||||
'max_rpm': int(max_rpm),
|
||||
'calories': int(calories),
|
||||
'distance': int(distance),
|
||||
'bike_display_name': workout.bike.display_name,
|
||||
'selected_graph_types': selected_graph_types,
|
||||
'is_heart_rate_available': is_heart_rate_available,
|
||||
'is_cadence_available': is_cadence_available,
|
||||
'average_bpm': int(average_bpm),
|
||||
'min_bpm': int(min_bpm),
|
||||
'max_bpm': int(max_bpm),
|
||||
}
|
||||
else:
|
||||
return None
|
||||
|
||||
|
||||
def create_graph(x_values, y_values, y_label, filename, x_label='Time'):
|
||||
fig, ax = plt.subplots()
|
||||
ax.plot(x_values, y_values)
|
||||
@@ -471,7 +486,7 @@ def generate_calendar_monthly_view(workouts, selected_date):
|
||||
timedelta(days=start[first_day_of_month.weekday()])
|
||||
|
||||
end = dict([(6, 6), (0, 5), (1, 4),
|
||||
(2, 3), (3, 2), (4, 1), (5, 0)])
|
||||
(2, 3), (3, 2), (4, 1), (5, 0)])
|
||||
end_date = last_day_of_month + \
|
||||
timedelta(days=end[last_day_of_month.weekday()])
|
||||
|
||||
|
||||
@@ -68,7 +68,11 @@
|
||||
<div class="w-full h-full">
|
||||
<div class="flex items-center justify-center w-full rounded-full cursor-pointer">
|
||||
<a role="link" tabindex="0"
|
||||
class="{% if d.is_workout %}focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-500 hover:bg-indigo-500{% endif %} {% if d.is_current_date %}bg-indigo-700{% elif d.is_workout %}bg-indigo-300{% endif %} text-base w-8 h-8 px-2 flex items-center justify-center font-medium text-white rounded-full">{{
|
||||
class="{% if d.is_workout %}focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-700 focus:bg-indigo-500 hover:bg-indigo-500{% endif %} {% if d.is_current_date %}bg-indigo-700{% elif d.is_workout %}bg-indigo-300{% endif %} text-base w-8 h-8 px-2 flex items-center justify-center font-medium text-white rounded-full"
|
||||
{% if d.is_workout
|
||||
%}hx-get="{{ url_for('calendar_workout_view', user_id=user_id, workout_id=d.workout.id) }}"
|
||||
hx-target="#selected-workout-view-{{ user_id }}"
|
||||
_="on click add .hidden to #workouts-list-wrapper-for-user-{{ user_id }}" {% endif %}>{{
|
||||
d.day_of_month }}</a>
|
||||
|
||||
</div>
|
||||
@@ -81,4 +85,8 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div id="selected-workout-view-{{ user_id }}">
|
||||
|
||||
</div>
|
||||
116
templates/partials/selected_workout_view.html
Normal file
116
templates/partials/selected_workout_view.html
Normal file
@@ -0,0 +1,116 @@
|
||||
<div class="p-4 bg-white shadow-sm dark:bg-gray-700 dark:border-gray-600 cursor-pointer mb-10">
|
||||
<div class="flex justify-end mb-2">
|
||||
<button type="button"
|
||||
class="inline-block rounded-full border-2 border-danger px-6 pb-[6px] pt-2 text-xs font-medium uppercase leading-normal text-danger transition duration-150 ease-in-out hover:border-danger-600 hover:bg-neutral-500 hover:bg-opacity-10 hover:text-danger-600 focus:border-danger-600 focus:text-danger-600 focus:outline-none focus:ring-0 active:border-danger-700 active:text-danger-700 dark:hover:bg-neutral-100 dark:hover:bg-opacity-10 flex flex-row items-center"
|
||||
data-te-ripple-init=""
|
||||
_="on click remove .hidden from #workouts-list-wrapper-for-user-{{ user_id }} then remove me.parentElement.parentElement">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-5 h-5 mr-1" data-darkreader-inline-stroke=""
|
||||
style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
|
||||
</svg>
|
||||
<span>Close</span>
|
||||
</button>
|
||||
</div>
|
||||
<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">{{ workout.start_time_ago
|
||||
}}</time>
|
||||
|
||||
<div
|
||||
class="text-sm font-normal text-gray-500 lex dark:text-gray-300 flex flex-row flex-wrap justify-items-center">
|
||||
<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 mr-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>
|
||||
{{ workout.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 mr-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>{{ workout.average_rpm
|
||||
}} RPM
|
||||
</div>
|
||||
{% if workout.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 mr-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>
|
||||
{{workout.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 mr-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>{{ workout.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 mr-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>
|
||||
{{ workout.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">{{
|
||||
workout.bike_display_name }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="p-3 text-xs italic font-normal text-gray-500" id="workout_view_wrapper-156">
|
||||
<div id="workout_view-{{ workout.id }}">
|
||||
{% with workout=workout, graph_types=workout['selected_graph_types'] %}
|
||||
{% include 'workout_view.html' %}
|
||||
{% endwith %}
|
||||
</div>
|
||||
<div class="flex justify-end">
|
||||
<button
|
||||
class="mx-4 mb-4 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
|
||||
hx-delete="{{ url_for('delete_workout', user_id=workout.user_id, workout_id=workout.id) }}"
|
||||
hx-confirm="Are you sure you wish to delete this {{ workout.duration }} workout at {{ workout.start_time }}"
|
||||
hx-target="#container">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
|
||||
</svg>
|
||||
|
||||
<span>Delete</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -65,7 +65,10 @@
|
||||
<div class="!visible collapse p-4 hidden">
|
||||
{{ render_partial('partials/calendar.html', calendar_month=u.calendar_month, user_id = u.id) }}
|
||||
|
||||
{{ render_partial('partials/workouts_list_fragment.html', workouts=workouts[:7], user_id = u.id) }}
|
||||
<div id="workouts-list-wrapper-for-user-{{ u.id }}">{{ render_partial('partials/workouts_list_fragment.html',
|
||||
workouts=workouts[:7], user_id = u.id) }}</div>
|
||||
|
||||
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
Reference in New Issue
Block a user