peterstockings/cardio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add form to create user overview graphs

Browse Source
This commit is contained in:
Peter Stockings
2023-10-21 19:20:49 +11:00
parent 3e110a7d4f
commit 07ad592895
3 changed files with 105 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app.py
View File

@@ -216,6 +216,11 @@ def create_workout(user_id):
@app.route('/user/<int:user_id>/workouts/graph', methods=['GET'])
def graph_user_workouts(user_id):
if htmx:
return f"""
<img src="{request.full_path}"
loading="lazy" alt="No image" class="mx-auto">
"""
user = User.query.get(user_id)
workouts = user.workouts
@@ -464,7 +469,11 @@ def generate_user_data(user, workouts=[]):
'workouts_count': len(workouts),
'workouts': workouts,
'daily_duration_sparkline': generate_daily_duration_sparkline(workouts),
'calendar_month': generate_calendar_monthly_view(workouts, datetime.now().date())
'calendar_month': generate_calendar_monthly_view(workouts, datetime.now().date()),
'attributes': [('workout_count', 'Workout count'), ('duration', 'Duration'), ('average_rpm', 'Average RPM'), ('average_bpm', 'Average BPM'), ('distance', 'Distance'), ('calories', 'Calories')],
'periods': ['day', 'week', 'month'],
'first_workout_date': workouts[-1]['start_time_date'] if workouts else None,
'last_workout_date': workouts[0]['start_time_date'] if workouts else None,
}
@@ -513,7 +522,7 @@ def format_workout_data(workout, user):
'user_id': user.id,
'user_name': user.name,
'start_time': format_date_with_ordinal(workout.started_at, '%#H:%M %B %dth %Y'),
'start_time_date': workout.started_at,
'start_time_date': workout.started_at.date(),
'start_time_ago': humanize.naturaltime(workout.started_at),
'duration': humanize.naturaldelta(duration),
'duration_minutes': duration.total_seconds() / 60,
@@ -613,8 +622,8 @@ def generate_calendar_monthly_view(workouts, selected_date):
start_date, end_date = get_month_bounds(selected_date)
# Build a lookup dictionary for faster access
workout_lookup = {w['start_time_date'].date(
): w for w in workouts if start_date <= w['start_time_date'].date() <= end_date}
workout_lookup = {w['start_time_date']
: w for w in workouts if start_date <= w['start_time_date'] <= end_date}
current_date = datetime.now().date()
days_of_month = [
@@ -655,11 +664,11 @@ def generate_daily_duration_sparkline(workouts):
return ''
# Determine date range based on workouts data
start_date = workouts[-1]['start_time_date'].date()
end_date = workouts[0]['start_time_date'].date()
start_date = workouts[-1]['start_time_date']
end_date = workouts[0]['start_time_date']
# Build a mapping of dates to their respective durations for easier lookup
workouts_by_date = {w['start_time_date'].date(): int(
workouts_by_date = {w['start_time_date']: int(
w['duration_minutes']) for w in workouts}
daily_durations = [workouts_by_date.get(

88
templates/partials/user_workouts_graphs.html Normal file
View File

@@ -0,0 +1,88 @@
<div class="flex flex-wrap mb-1">
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
<div class="mb-1 w-full">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Attributes
</label>
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="attributes"
class="bg-gray-50 border border-gray-300 " multiple
hx-get="{{ url_for('graph_user_workouts', user_id=user.id) }}"
hx-include="[name='start_date'],[name='end_date'],[name='period']"
hx-target="#user-workouts-overview-graphs-{{ user.id }}" hx-swap="innerHTML" _="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ ['workout_count'] }})
end">
{% for val,name in user.attributes %}
<option value="{{ val }}">{{ name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Start date
</label>
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="date"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
name="start_date" value="{{ user.first_workout_date }}"
hx-get="{{ url_for('graph_user_workouts', user_id=user.id) }}"
hx-include="[name='attributes'],[name='end_date'],[name='period']"
hx-target="#user-workouts-overview-graphs-{{ user.id }}" hx-swap="innerHTML" hx-trigger="change">
</div>
</div>
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
End date
</label>
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="date"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
name="end_date" value="{{ user.last_workout_date }}"
hx-get="{{ url_for('graph_user_workouts', user_id=user.id) }}"
hx-include="[name='start_date'],[name='attributes'],[name='period']"
hx-target="#user-workouts-overview-graphs-{{ user.id }}" hx-swap="innerHTML" hx-trigger="change">
</div>
</div>
<div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
<div class="mb-1 w-full">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Period
</label>
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="period"
class="bg-gray-50 border border-gray-300 "
hx-get="{{ url_for('graph_user_workouts', user_id=user.id) }}"
hx-include="[name='start_date'],[name='end_date'],[name='attributes']"
hx-target="#user-workouts-overview-graphs-{{ user.id }}" hx-swap="innerHTML" _="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ ['week'] }})
end">
{% for p in user.periods %}
<option value="{{ p }}">{{ p }}</option>
{% endfor %}
</select>
</div>
</div>
</div>
<div id="user-workouts-overview-graphs-{{ user.id }}">
<img src="{{ url_for('graph_user_workouts', user_id=user.id, period='week', attributes=['workout_count']) }}"
loading="lazy" alt="No image" class="mx-auto">
<img src="{{ url_for('graph_user_workouts', user_id=user.id, period='month', attributes=['duration']) }}"
loading="lazy" alt="No image" class="mx-auto">
</div>

7
templates/workouts_list.html
View File

@@ -75,12 +75,7 @@
<div class="!visible collapse p-4 hidden" id="workouts-list-accordion-{{ user.id }}">
{{ render_partial('partials/calendar.html', calendar_month=user.calendar_month, user_id = user.id) }}
<img src="{{ url_for('graph_user_workouts', user_id=user.id, period='week', attributes=['workout_count']) }}"
loading="lazy" alt="No image" class="mx-auto">
<img src="{{ url_for('graph_user_workouts', user_id=user.id, period='month', attributes=['duration']) }}"
loading="lazy" alt="No image" class="mx-auto">
{{ render_partial('partials/user_workouts_graphs.html', user=user) }}
<div id="workouts-list-wrapper-for-user-{{ user.id }}" class="mt-5 pl-2">{{
render_partial('partials/workouts_list_fragment.html',