Display workout stats

This commit is contained in:
Peter Stockings
2022-10-01 20:49:16 +10:00
parent 118a715609
commit b4ec0ed81f
6 changed files with 153 additions and 34 deletions

View File

@@ -9,10 +9,15 @@
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.plot.ly/plotly-2.14.0.min.js"></script>
<script>
let doit;
function debounce(func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
window.addEventListener('resize', () => {
clearTimeout(doit);
doit = setTimeout(window.dispatchEvent(new Event('resize')), 100);
debounce(() => window.dispatchEvent(new Event('resize')))
})
</script>
</head>

View File

@@ -28,6 +28,12 @@
</div>
</div>
{% if p['NumberOfWorkouts'] == 0 %}
<div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert">
No workouts completed.
</div>
{% endif %}
{% for e in p['Exercises'] %}
<div class="flex flex-col mt-8">
<div class="overflow-x-auto rounded-lg">
@@ -84,55 +90,56 @@
</div>
<div class="mt-4 w-full grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
<div class="mt-4 w-full grid grid-cols-1 md:grid-cols-3 2xl:grid-cols-4 xl:grid-cols-5 gap-4">
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">3</span>
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{ stats['TotalWorkouts']
}}</span>
<h3 class="text-base font-normal text-gray-500">Total workouts tracked</h3>
</div>
<div class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
14.6%
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{
stats['AverageWorkoutsPerWeek']
}}</span>
<h3 class="text-base font-normal text-gray-500">Avg. weekly workouts</h3>
</div>
</div>
</div>
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">1</span>
<h3 class="text-base font-normal text-gray-500">New rep max this week</h3>
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{ stats['NumberOfPeople']
}}</span>
<h3 class="text-base font-normal text-gray-500">People tracked</h3>
</div>
<div class="ml-5 w-0 flex items-center justify-end flex-1 text-green-500 text-base font-bold">
32.9%
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M5.293 7.707a1 1 0 010-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 01-1.414 1.414L11 5.414V17a1 1 0 11-2 0V5.414L6.707 7.707a1 1 0 01-1.414 0z"
clip-rule="evenodd"></path>
</svg>
</div>
</div>
{% if stats['TotalWorkouts'] > 0 %}
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{
stats['DaysSinceFirstWorkout']
}}</span>
<h3 class="text-base font-normal text-gray-500">Days since first workout</h3>
</div>
</div>
</div>
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">2</span>
<h3 class="text-base font-normal text-gray-500">Tracking two people</h3>
</div>
<div class="ml-5 w-0 flex items-center justify-end flex-1 text-red-500 text-base font-bold">
-2.7%
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M14.707 12.293a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 111.414-1.414L9 14.586V3a1 1 0 012 0v11.586l2.293-2.293a1 1 0 011.414 0z"
clip-rule="evenodd"></path>
</svg>
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{ stats['DaysSinceLastWorkout']
}}</span>
<h3 class="text-base font-normal text-gray-500">Days since last workout</h3>
</div>
</div>
</div>
{% endif %}
</div>
{% endblock %}

View File

@@ -95,4 +95,50 @@
</div>
</div>
</div>
<div class="mt-4 w-full grid grid-cols-1 md:grid-cols-3 2xl:grid-cols-4 xl:grid-cols-5 gap-4">
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{
person['Stats']['NumberOfWorkouts'] }}</span>
<h3 class="text-base font-normal text-gray-500">Total workouts tracked</h3>
</div>
</div>
</div>
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{
person['Stats']['TrainingDurationInDays'] }}</span>
<h3 class="text-base font-normal text-gray-500">Duration of workout tracking</h3>
</div>
</div>
</div>
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{
person['Stats']['AverageWorkoutsPerWeek'] }}</span>
<h3 class="text-base font-normal text-gray-500">Average weekly workouts</h3>
</div>
</div>
</div>
{% if person['Stats']['NumberOfWorkouts'] > 0 %}
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-2xl sm:text-3xl leading-none font-bold text-gray-900">{{
person['Stats']['DaysSinceLastWorkout'] }}</span>
<h3 class="text-base font-normal text-gray-500">Days since last workout</h3>
</div>
</div>
</div>
{% endif %}
</div>
{% endblock %}