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

WIP: Add option to toggle graphs (havent yet added axis filter)

Browse Source
This commit is contained in:
Peter Stockings
2023-04-02 23:27:20 +10:00
parent d44582d2a2
commit ca3eb48da6
4 changed files with 38 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
templates/partials/page/person.html
View File

@@ -34,7 +34,7 @@
</div>
<div class="flex flex-wrap -mx-3 mb-1">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<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">
Exercises
@@ -42,7 +42,7 @@
<select id="multiSelection" data-te-select-init data-te-select-filter="true"
data-te-select-size="lg" name="exercise_id" class="bg-gray-50 border border-gray-300 " multiple
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='min_date'],[name='max_date']" hx-target="#container" hx-push-url="true">
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-target="#container" hx-push-url="true">
{% for e in person['Exercises'] %}
<option value="{{ e['ExerciseId'] }}" {{ in_list(e['ExerciseId'],
selected_exercise_ids, 'selected' ) }}>{{
@@ -55,7 +55,7 @@
te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ list_to_string(selected_exercise_ids) | safe }});
</script>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<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">
Min date
</label>
@@ -72,11 +72,11 @@
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="min_date" value="{{ min_date }}"
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-target="#container"
hx-push-url="true" hx-trigger="change">
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<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">
Max date
</label>
@@ -93,10 +93,28 @@
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="max_date" value="{{ max_date }}"
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-target="#container"
hx-push-url="true" 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">
Graph Axis
</label>
<select id="graph-axis-multiselect" data-te-select-init data-te-select-filter="true"
data-te-select-size="lg" name="graph_axis" class="bg-gray-50 border border-gray-300 " multiple
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-target="#container" hx-push-url="true">
<option value="repetitions">Repetitions</option>
<option value="weight">Weigh</option>
<option value="estimated1rm">Estimated 1RM</option>
</select>
</div>
<script>
te.Select.getOrCreateInstance(document.querySelector("#graph-axis-multiselect")).setValue({{ graph_axis | safe }});
</script>
</div>
</div>
{% with person_id=person['PersonId'], tags=tags %}
@@ -166,6 +184,7 @@
</div>
</div>
{% if graph_axis %}
<div class="mt-4 mb-4 w-full grid grid-cols-1 2xl:grid-cols-2 gap-4">
{% for exercise_graph in person['ExerciseGraphs'] %}
<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
@@ -179,7 +198,7 @@
Plotly.newPlot("e-{{ exercise_graph['ExerciseId'] }}", [
{
x: {{ exercise_graph['StartDates'] | replace('"', "'") | safe }},
y: {{ exercise_graph['Repititions'] | replace('"', "'") | safe }},
y: {{ exercise_graph['Repetitions'] | replace('"', "'") | safe }},
name: 'Reps',
type: 'scatter'
},
@@ -222,6 +241,7 @@
</div>
{% endfor %}
</div>
{% endif %}
{{ render_partial('partials/stats.html', stats=person['Stats']) }}

2
templates/person.html
View File

@@ -4,6 +4,6 @@
{{ render_partial('partials/page/person.html',
person=person, selected_exercise_ids=selected_exercise_ids, max_date=max_date,
min_date=min_date, tags=tags) }}
min_date=min_date, tags=tags, graph_axis=graph_axis) }}
{% endblock %}