255 lines
14 KiB
HTML
255 lines
14 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block content %}
|
|
|
|
<div class="flex flex-grow flex-col bg-white sm:rounded shadow overflow-hidden animate-fadeIn">
|
|
<div class="flex items-center justify-between pt-2 pb-2">
|
|
<div class="flex">
|
|
<div class="flex ml-1 md:ml-6">
|
|
<button hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}" hx-target="#container"
|
|
hx-vals='{"date": "{{ prev_date }}"}' hx-include="[name='view']" hx-push-url="true"
|
|
hx-swap="innerHTML swap:0.5s">
|
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" data-darkreader-inline-stroke=""
|
|
style="--darkreader-inline-stroke:currentColor;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
<button hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}" hx-target="#container"
|
|
hx-vals='{"date": "{{ next_date }}"}' hx-include="[name='view']" hx-push-url="true"
|
|
hx-swap="innerHTML swap:0.5s">
|
|
<svg class="w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" data-darkreader-inline-stroke=""
|
|
style="--darkreader-inline-stroke:currentColor;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
|
|
</path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{% if view == 'month' %}
|
|
<h2 class="ml-2 text-xl font-bold leading-none">{{ date | strftime('%B, %Y') }}</h2>
|
|
{% else %}
|
|
<h2 class="ml-2 text-xl font-bold leading-none">{{ date | strftime('%Y') }}</h2>
|
|
{% endif %}
|
|
<span
|
|
class="bg-blue-100 text-blue-800 text-sm font-medium mr-2 px-2.5 py-0.5 rounded dark:bg-blue-200 dark:text-blue-800 ml-1 sm:ml-5 flex justify-center items-center ">
|
|
{{ person_name }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="flex items-center space-x-2 mr-4">
|
|
{% if view == 'month' %}
|
|
<div
|
|
class="hidden lg:flex items-center space-x-3 text-xs font-medium text-gray-500 border-l border-gray-200 pl-4 h-6">
|
|
<div class="flex items-center">
|
|
<span class="text-blue-600 mr-1">{{ summary_stats.total_workouts }}</span>
|
|
<span class="uppercase tracking-wider">Workouts</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="text-blue-600 mr-1">{{ summary_stats.total_sets }}</span>
|
|
<span class="uppercase tracking-wider">Sets</span>
|
|
</div>
|
|
{% if summary_stats.total_workouts > 0 %}
|
|
<div class="flex items-center">
|
|
<span class="text-blue-600 mr-1">{{ (summary_stats.total_sets / summary_stats.total_workouts) |
|
|
round(1) }}</span>
|
|
<span class="uppercase tracking-wider">Sets/Session</span>
|
|
</div>
|
|
{% endif %}
|
|
<div class="flex items-center">
|
|
<span class="text-blue-600 mr-1">{{ summary_stats.total_exercises }}</span>
|
|
<span class="uppercase tracking-wider">Exercises</span>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{{ render_partial('partials/custom_select.html',
|
|
name='view',
|
|
options=[
|
|
{'id': 'month', 'name': 'Month', 'selected': (view == 'month')},
|
|
{'id': 'year', 'name': 'Year', 'selected': (view == 'year')},
|
|
{'id': 'notes', 'name': 'Notes', 'selected': (view == 'notes')},
|
|
{'id': 'overview', 'name': 'Overview', 'selected': (view == 'overview')}
|
|
],
|
|
multiple=false,
|
|
search=false,
|
|
placeholder='View',
|
|
hx_get=url_for('calendar.get_calendar', person_id=person_id),
|
|
hx_target='#container',
|
|
hx_vals='{"date": "' + date.strftime('%Y-%m-%d') + '"}',
|
|
hx_push_url=true)
|
|
}}
|
|
</div>
|
|
</div>
|
|
|
|
{% if view == 'month' %}
|
|
<div class="flex flex-col px-1 sm:px-2 py-2 -mb-px">
|
|
<div class="grid grid-cols-7">
|
|
|
|
<div class="p-1 h-8 text-center font-bold text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Sunday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">S</span>
|
|
</div>
|
|
<div class="p-1 h-8 text-center font-bold text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Monday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">M</span>
|
|
</div>
|
|
<div class="p-1 h-8 text-center font-bold text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Tuesday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">T</span>
|
|
</div>
|
|
<div class="p-1 h-8 text-center font-bold text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Wednesday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">W</span>
|
|
</div>
|
|
<div class="p-1 h-8 text-center font-bold text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Thursday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">T</span>
|
|
</div>
|
|
<div class="p-1 h-8 text-center font-bold text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Friday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">F</span>
|
|
</div>
|
|
<div class="p-1 h-8 text-center font-bold text-xs">
|
|
<span class="xl:block lg:block md:block sm:block hidden">Saturday</span>
|
|
<span class="xl:hidden lg:hidden md:hidden sm:hidden block">S</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 overflow-hidden flex-1 w-full border-t border-l">
|
|
|
|
{% for day in days %}
|
|
<div
|
|
class="{% if day.is_today %}ring-2 ring-green-100 ring-inset{% endif %} border-b border-r flex flex-col h-20 sm:h-40 md:h-30 lg:h-30 mx-auto overflow-hidden w-full pt-1 px-1 cursor-pointer relative {% if not day.is_in_current_month %}opacity-40{% else %}bg-gray-50/50{% endif %}">
|
|
|
|
<div class="flex justify-between items-start mb-0.5">
|
|
<span class="text-gray-400 font-medium text-[9px] sm:text-xs leading-none">{{ day.day }}</span>
|
|
|
|
{% if day.has_workouts and (day.pr_count > 0 or day.improvement_count > 0) %}
|
|
<div
|
|
class="flex items-center bg-white/80 border border-gray-100 rounded-full px-1 shadow-sm h-3.5 sm:h-4">
|
|
{% if day.pr_count > 0 %}
|
|
<span class="text-[8px] sm:text-[9px] font-bold text-yellow-600 flex items-center">
|
|
🏆<span class="ml-0.5">{{ day.pr_count }}</span>
|
|
</span>
|
|
{% endif %}
|
|
{% if day.pr_count > 0 and day.improvement_count > 0 %}
|
|
<span class="mx-0.5 text-gray-300 text-[8px]">|</span>
|
|
{% endif %}
|
|
{% if day.improvement_count > 0 %}
|
|
<span class="text-[8px] sm:text-[9px] font-bold text-green-600 flex items-center">
|
|
↑<span class="ml-0.5">{{ day.improvement_count }}</span>
|
|
</span>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
{% if day.has_workouts %}
|
|
<!-- Mobile Summary -->
|
|
<div class="sm:hidden flex flex-col flex-grow text-[8px] text-gray-500 font-medium leading-tight overflow-hidden pb-1 space-y-0.5"
|
|
hx-get="{{ url_for('workout.show_workout', person_id=person_id, workout_id=day.workouts[0].workout_id) }}"
|
|
hx-push-url="true" hx-target="#container">
|
|
{% for name in day.exercise_names %}
|
|
<div class="truncate pl-0.5 border-l border-blue-200">{{ name }}</div>
|
|
{% endfor %}
|
|
</div>
|
|
|
|
<!-- Desktop Detailed List -->
|
|
<div class="hidden sm:block flex-1 overflow-hidden">
|
|
{% for workout in day.workouts %}
|
|
<div class="py-1 w-full"
|
|
hx-get="{{ url_for('workout.show_workout', person_id=person_id, workout_id=workout.workout_id) }}"
|
|
hx-push-url="true" hx-target="#container">
|
|
{% for set in workout.sets %}
|
|
<div class="flex flex-col w-full px-0.5 leading-tight mb-1">
|
|
<span class="truncate flex items-center min-w-0 text-[14px] lg:text-[12px]">
|
|
<span class="truncate">{{ set.exercise_name }}</span>
|
|
</span>
|
|
<span class="font-light text-gray-400 text-[12px] lg:text-[9px] flex items-center">
|
|
<span>{{ set.repetitions }} x {{ set.weight }}kg</span>
|
|
{% if set.is_pr %}
|
|
<span class="ml-1 text-yellow-500 shrink-0 text-[8px]">🏆</span>
|
|
{% elif set.is_improvement %}
|
|
<span class="ml-1 text-green-500 font-bold shrink-0 text-[8px]">↑</span>
|
|
{% endif %}
|
|
</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
{% elif view == 'year'%}
|
|
<div class="flex justify-center px-2 py-2 -mb-px">
|
|
|
|
<div
|
|
class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 gap-4 lg:gap-10 bg-white overflow-hidden">
|
|
{% for month in months %}
|
|
<div>
|
|
<div class="bg-grey-lighter font-semibold text-center cursor-pointer"
|
|
hx-get="{{ url_for('calendar.get_calendar', person_id=person_id) }}" hx-target="#container"
|
|
hx-vals='{"date": "{{ month.first_day_of_month }}", "view": "month"}' hx-push-url="true"
|
|
_="on click go to the top of the body">
|
|
{{ month.first_day_of_month | strftime('%B') }}
|
|
</div>
|
|
<div>
|
|
<div class="grid grid-cols-7 border-b font-semibold">
|
|
<div class="py-3 px-4">S</div>
|
|
<div class="py-3 px-4">M</div>
|
|
<div class="py-3 px-4">T</div>
|
|
<div class="py-3 px-4">W</div>
|
|
<div class="py-3 px-4">T</div>
|
|
<div class="py-3 px-4">F</div>
|
|
<div class="py-3 px-4">S</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-7 overflow-hidden flex-1 pl-2 pr-2 w-full">
|
|
{% for day in month.days %}
|
|
<div class="{% if day.is_today and day.is_in_current_month %}rounded-md border-4 border-green-50 border{% endif %} py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer rounded-md {% if day.has_workouts and day.is_in_current_month %}bg-green-100{% endif %}"
|
|
{% if day.has_workouts %}
|
|
hx-get="{{ url_for('workout.show_workout', person_id=person_id, workout_id=day.first_workout_id) }}"
|
|
hx-push-url="true" hx-target="#container" {% endif %}>
|
|
{% if day.is_in_current_month %}
|
|
{{ day.day }}
|
|
{% endif %}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<div class="hidden" hx-get="{{ url_for('get_stats') }}" hx-vals='{"person_id": "{{ person_id }}"}' hx-trigger="load"
|
|
hx-target="#stats" hx-swap="innerHTML">
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
{% endblock %}
|
|
|
|
{% block add_workout_button %}
|
|
<button
|
|
class="fixed z-90 bottom-10 right-8 bg-blue-600 w-20 h-20 rounded-full drop-shadow-lg flex justify-center items-center text-white text-4xl hover:bg-blue-700 hover:drop-shadow-2xl hover:animate-bounce duration-300"
|
|
hx-post="{{ url_for('workout.create_workout', person_id=person_id) }}" hx-push-url="true" hx-target="#container">
|
|
<svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" class="w-6 h-6 inline-block">
|
|
<path fill="#FFFFFF" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
|
|
C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399
|
|
C15.952,9,16,9.447,16,10z" />
|
|
</svg>
|
|
</button>
|
|
|
|
{% endblock %} |