Add duration sparkline on user workouts accordion

This commit is contained in:
Peter Stockings
2023-03-30 21:00:16 +11:00
parent 5baa91df82
commit 02a2c9552c
2 changed files with 11 additions and 5 deletions

10
app.py
View File

@@ -222,6 +222,8 @@ def render_users_and_workouts():
start_date = workouts[-1]['start_time_date'].date()
# get end date from first workout
end_date = workouts[0]['start_time_date'].date()
# get difference in days between start and end date
num_days = (end_date - start_date).days + 1
# calculate number of weeks between start and end date
num_weeks = (end_date - start_date).days // 7 + 1
@@ -241,7 +243,8 @@ def render_users_and_workouts():
workout_counts_sparkline = sparklines.sparklines(
workout_counts_by_week)
duration_sparkline = sparklines.sparklines(duration_by_week)
duration_sparkline = sparklines.sparklines(
[int(w['duration_minutes']) for w in workouts])[0]
user_data = {
'id': user.id,
@@ -250,7 +253,10 @@ def render_users_and_workouts():
'workouts_count': len(workouts),
'workouts': workouts,
'workout_counts_by_week': workout_counts_by_week,
'duration_by_week': duration_by_week
'duration_by_week': duration_by_week,
'num_days': num_days,
'workout_counts_sparkline': workout_counts_sparkline,
'duration_sparkline': duration_sparkline
}
users_data.append(user_data)

View File

@@ -49,9 +49,9 @@
class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
type="button">
<div>
<h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts</h2>
<p class="text-sm text-gray-500">Duration: 35 days | Weekly average workouts: 25 mins|
Calories: 84 | Distance: 17</p>
<h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts <span
class="text-sm text-gray-700 ml-0 md:ml-4">{{ user.duration_sparkline }}</span></h2>
</div>
<span
class="ml-auto h-5 w-5 shrink-0 rotate-[-180deg] fill-[#336dec] transition-transform duration-200 ease-in-out group-[[data-te-collapse-collapsed]]:rotate-0 group-[[data-te-collapse-collapsed]]:fill-[#212529] motion-reduce:transition-none dark:fill-blue-300 dark:group-[[data-te-collapse-collapsed]]:fill-white">