feat: assign tags to exercises and show muscle distribution of workout
This commit is contained in:
@@ -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
39
templates/partials/workout_breakdown.html
Normal 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 %}
|
||||
Reference in New Issue
Block a user