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

feat: assign tags to exercises and show muscle distribution of workout

Browse Source
This commit is contained in:
Peter Stockings
2026-01-30 23:53:04 +11:00
parent 78f4a53c49
commit d03581bff4
10 changed files with 278 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
templates/partials/exercise.html
View File

@@ -1,5 +1,5 @@
<tr>
<td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
<td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900 w-1/5">
{% if is_edit|default(false, true) == false %}
{{ name }}
{% else %}
@@ -8,7 +8,35 @@
type="text" name="name" value="{{ name }}">
{% endif %}
</td>
<td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900 float-right">
<td class="p-4 text-sm text-gray-900 w-3/5">
{% if is_edit|default(false, true) == false %}
<div class="flex flex-wrap gap-2">
{% for attr in attributes %}
<span
class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
title="{{ attr.category_name }}">
{{ attr.attribute_name }}
</span>
{% endfor %}
</div>
{% else %}
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
{% for cat_name, options in all_attributes.items() %}
<div>
<label class="block text-xs font-semibold text-gray-500 uppercase mb-1">{{ cat_name }}</label>
{{ render_partial('partials/custom_select.html',
name='attribute_ids',
options=options,
multiple=true,
search=true,
placeholder='Select ' ~ cat_name
)}}
</div>
{% endfor %}
</div>
{% endif %}
</td>
<td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900 w-1/5 float-right">
{% if is_edit|default(false, true) == false %}
<button
class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"

39
templates/partials/workout_breakdown.html Normal file
View File

@@ -0,0 +1,39 @@
{% if muscle_distribution %}
<div class="bg-gray-50 p-2 rounded-lg border border-gray-100 flex flex-col gap-2 max-w-sm" id="muscle-breakdown"
hx-get="{{ url_for('workout.get_workout_muscle_distribution', person_id=person_id, workout_id=workout_id) }}"
hx-trigger="topsetAdded from:body" hx-swap="outerHTML">
<div class="flex items-center gap-3">
<!-- Mini Donut SVG -->
<div class="relative w-16 h-16 flex-shrink-0">
<svg viewBox="0 0 100 100" class="w-full h-full"
style="transform: rotate(-90deg); transform-origin: center;">
<circle cx="50" cy="50" r="40" fill="transparent" stroke="#e5e7eb" stroke-width="14" />
{% for item in muscle_distribution %}
<circle cx="50" cy="50" r="40" fill="transparent" stroke="{{ item.color }}" stroke-width="14"
stroke-dasharray="{{ item.dasharray }}" stroke-dashoffset="{{ item.dashoffset }}" pathLength="100"
stroke-linecap="round" style="transform-origin: center;"
class="transition-all duration-300 segment-{{ loop.index }}" />
{% endfor %}
</svg>
<div class="absolute inset-0 flex items-center justify-center">
<span class="text-[10px] font-black text-gray-700 tracking-tighter">{{ muscle_distribution[0].percentage
}}%</span>
</div>
</div>
<!-- Mini Legend -->
<div class="flex-grow min-w-0">
<div class="flex flex-wrap gap-x-4 gap-y-2">
{% for item in muscle_distribution %}
<div class="flex items-center gap-1.5 whitespace-nowrap">
<div class="w-1.5 h-1.5 rounded-full" style="background-color: {{ item.color }}"></div>
<span class="text-[10px] font-bold text-gray-600 uppercase">{{ item.muscle_group }}</span>
<span class="text-[10px] text-gray-400 font-medium">{{ item.percentage }}%</span>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
{% endif %}

31
templates/settings.html
View File

@@ -107,11 +107,15 @@
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/4">
class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/5">
Name
</th>
<th scope="col"
class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-3/4">
class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-3/5">
Attributes
</th>
<th scope="col"
class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-1/5">
<div class="relative">
<div
class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
@@ -139,7 +143,7 @@
hx-swap="outerHTML swap:0.5s">
{% for exercise in exercises %}
{{ render_partial('partials/exercise.html', exercise_id=exercise.exercise_id,
name=exercise.name)}}
name=exercise.name, attributes=exercise.attributes)}}
{% endfor %}
</tbody>
</table>
@@ -155,12 +159,27 @@
then reset() me">
<div class="flex flex-wrap -mx-3 mb-2">
<div class="grow px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
New exercise
</label>
<input
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
type="text" name="name">
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500 mb-4"
type="text" name="name" placeholder="Exercise Name">
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
{% for cat_name, options in all_attributes.items() %}
<div>
<label class="block text-xs font-bold text-gray-500 uppercase mb-1">{{ cat_name }}</label>
{{ render_partial('partials/custom_select.html',
name='attribute_ids',
options=options,
multiple=true,
search=true,
placeholder='Select ' ~ cat_name
)}}
</div>
{% endfor %}
</div>
</div>
<div class="flex flex-row pt-6 px-3 w-36">

37
templates/workout.html
View File

@@ -47,34 +47,29 @@
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow">
<!-- Modal header -->
<div class="flex items-start justify-between p-2 md:p-4 border-0 md:border-b rounded-t">
<div class="flex flex-col w-full">
<div class="flex items-center justify-between">
<div class="w-full">
<h3 class="text-xl font-bold text-gray-900">{{ person_name }}</h3>
{{ render_partial('partials/workout_tags.html', person_id=person_id, workout_id=workout_id,
tags=tags) }}
<div class="p-2 md:p-4 border-0 md:border-b rounded-t relative">
<div class="flex flex-col lg:flex-row justify-between items-start gap-4 mr-8">
<div class="flex-grow">
<h3 class="text-xl font-bold text-gray-900">{{ person_name }}</h3>
{{ render_partial('partials/workout_tags.html', person_id=person_id, workout_id=workout_id,
tags=tags) }}
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 mt-2">
{{ render_partial('partials/start_date.html', person_id=person_id, workout_id=workout_id,
start_date=start_date) }}
{{ render_partial('partials/workout_note.html', person_id=person_id, workout_id=workout_id,
note=note) }}
</div>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2">
{{ render_partial('partials/start_date.html', person_id=person_id,
workout_id=workout_id,
start_date=start_date) }}
{{ render_partial('partials/workout_note.html', person_id=person_id,
workout_id=workout_id,
note=note) }}
</div>
<div class="flex-shrink-0 w-full lg:w-auto">
{{ render_partial('partials/workout_breakdown.html', person_id=person_id, workout_id=workout_id,
muscle_distribution=muscle_distribution) }}
</div>
</div>
<button type="button"
class="absolute right-0 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white mr-2"
class="absolute top-2 right-2 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
hx-get="{{ url_for('workout.delete_workout', person_id=person_id, workout_id=workout_id) }}"
hx-confirm="Are you sure you wish to delete this workout?" hx-push-url="true"
hx-target="#container">