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

Switch to using hyperscript to initialise tailwind elements(select) and graphs(Plotly), this removes script tags and ids

Browse Source
This commit is contained in:
Peter Stockings
2023-08-17 20:38:22 +10:00
parent c6c9925da0
commit ec35b78afd
7 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
templates/calendar.html
View File

@@ -41,16 +41,15 @@
</div>
<div class="mr-4">
<select id="workout-view-picker" data-te-select-init data-te-select-size="lg" name="view"
<select data-te-select-init data-te-select-size="lg" name="view"
hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true">
hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true" _="init js(me)
te.Select.getOrCreateInstance(me).setValue('{{ selected_view | safe }}')
end">
<option value="month" {% if selected_view=='month' %}selected{% endif %}>Month</option>
<option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option>
<option value="all">All</option>
</select>
<script>
window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("{{ selected_view | safe }}"));
</script>
</div>
</div>

30
templates/dashboard.html
View File

@@ -13,7 +13,9 @@
<select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='exercise_id']" hx-push-url="true"
hx-target="#container" id="dashboard-people-multi-select" multiple="" name="person_id">
hx-target="#container" multiple="" name="person_id" _="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_person_ids | list_to_string | safe}})
end">
{% for p in people %}
<option value="{{ p['PersonId'] }}">{{
p['Name']
@@ -22,7 +24,6 @@
</select>
</div>
</div>
<script>window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#dashboard-people-multi-select")).setValue({{ selected_person_ids | list_to_string | safe}}))</script>
</div>
</div>
<div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0">
@@ -34,7 +35,9 @@
<select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='person_id']" hx-push-url="true"
hx-target="#container" id="dashboard-exercise-multi-select" multiple="" name="exercise_id">
hx-target="#container" multiple="" name="exercise_id" _="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_exercise_ids | list_to_string | safe}})
end">
{% for e in exercises %}
<option value="{{ e['ExerciseId'] }}">{{
e['Name']
@@ -43,7 +46,6 @@
</select>
</div>
</div>
<script> window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#dashboard-exercise-multi-select")).setValue({{ selected_exercise_ids | list_to_string | safe}}))</script>
</div>
</div>
<div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0"><label
@@ -126,17 +128,15 @@
<div class="shadow overflow-hidden sm:rounded-lg">
<h4 class="text-l font-semibold text-blue-400 mb-2 text-center">{{ e['ExerciseName'] }}</h4>
{% if e['RepMaxes']|length > 1 %}
<div id="person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"
class="w-full mt-2 aspect-video"></div>
<script>
window.addEventListener('DOMContentLoaded', _ => Plotly.newPlot(document.getElementById("person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"), [{
x: {{ e['EstimatedOneRepMaxProgressions']['StartDates'] | replace('"', "'") | safe }},
y: {{ e['EstimatedOneRepMaxProgressions']['Estimated1RMs'] | replace('"', "'") | safe }},
text: {{ e['EstimatedOneRepMaxProgressions']['TopSets'] | replace('"', "'") | safe }},
name: "{{ p['PersonName'] }} - {{ e['ExerciseName'] }}",
hovertemplate
}], layout, config));
</script>
<div class="w-full mt-2 aspect-video" _="init js(me)
Plotly.newPlot(me, [{
x: {{ e['EstimatedOneRepMaxProgressions']['StartDates'] | replace_double_quote_strings_with_single_quote | safe }},
y: {{ e['EstimatedOneRepMaxProgressions']['Estimated1RMs'] | replace_double_quote_strings_with_single_quote | safe }},
text: {{ e['EstimatedOneRepMaxProgressions']['TopSets'] | replace_double_quote_strings_with_single_quote | safe }},
name: '{{ p['PersonName'] }} - {{ e['ExerciseName'] }}' , hovertemplate }], layout,
config)
end">
</div>
{% endif %}
<table class="min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">

11
templates/partials/topset.html
View File

@@ -8,9 +8,11 @@
}}</span>
{% else %}
<div class="w-full">
<select id="topset-exercise-select-{{ topset_id }}" data-te-select-init data-te-select-filter="true"
data-te-select-size="lg" name="exercise_id"
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="exercise_id"
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue('{{ exercise_id }}')
end">
{% for exercise in exercises|default([], true) %}
<option value="{{ exercise['ExerciseId'] }}">{{
exercise['Name']
@@ -18,9 +20,6 @@
{% endfor %}
</select>
</div>
<script>
window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#topset-exercise-select-{{ topset_id }}")).setValue("{{ exercise_id }}"));
</script>
{% endif %}
</td>
<td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">

12
templates/partials/workout_modal.html
View File

@@ -113,9 +113,12 @@
<div class="w-full">
<select id="workout-exercise-select-{{ workout['WorkoutId'] }}" data-te-select-init
data-te-select-filter="true" data-te-select-size="lg" name="exercise_id"
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg"
name="exercise_id"
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
_="init js(me)
te.Select.getOrCreateInstance(me)
end">
{% for e in workout['Exercises'] %}
<option value="{{ e['ExerciseId'] }}">{{
e['Name']
@@ -123,9 +126,6 @@
{% endfor %}
</select>
</div>
<script>
window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-exercise-select-{{ workout['WorkoutId'] }}")));
</script>
</div>
</div>

12
templates/partials/workout_tags.html
View File

@@ -35,11 +35,14 @@
</label>
<div class="relative">
<div class="w-full">
<select id="workout-tag-select-{{ workout_id }}" data-te-select-init data-te-select-filter="true"
data-te-select-size="lg" multiple name="tag_id"
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" multiple
name="tag_id"
hx-post="{{ url_for('add_tag_to_workout', person_id=person_id, workout_id=workout_id) }}"
hx-target="#tag-wrapper-w-{{ workout_id }}"
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500">
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_workout_tag_ids | list_to_string | safe }})
end">
{% for p in person_tags %}
<option value="{{ p.tag_id }}">{{
p.tag_name
@@ -47,9 +50,6 @@
{% endfor %}
</select>
</div>
<script>
window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-tag-select-{{ workout_id }}")).setValue({{ selected_workout_tag_ids| list_to_string | safe }}));
</script>
</div>
</div>

30
templates/person.html
View File

@@ -16,17 +16,17 @@
</div>
<div>
<div>
<select id="workout-view-picker" data-te-select-init
<select data-te-select-init
data-te-select-size="lg" name="view"
hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-push-url="true">
hx-push-url="true"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue('all')
end">
<option value="month">Month</option>
<option value="year">Year</option>
<option value="all" selected>All</option>
</select>
<script>
window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("all"));
</script>
</div>
</div>
</div>
@@ -43,11 +43,14 @@
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Exercises
</label>
<select id="multiSelection" data-te-select-init data-te-select-filter="true"
<select 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='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']"
hx-target="#container" hx-push-url="true">
hx-target="#container" hx-push-url="true"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_exercise_ids| list_to_string | safe }})
end">
{% for e in person['Exercises'] %}
<option value="{{ e['ExerciseId'] }}">{{
e['ExerciseName']
@@ -55,9 +58,6 @@
{% endfor %}
</select>
</div>
<script>
window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ selected_exercise_ids| list_to_string | safe }}));
</script>
</div>
<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">
@@ -106,19 +106,19 @@
<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"
<select 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">
hx-target="#container" hx-push-url="true"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ graph_axis | safe }})
end">
<option value="repetitions">Repetitions</option>
<option value="weight">Weigh</option>
<option value="estimated1rm">Estimated 1RM</option>
</select>
</div>
<script>
window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#graph-axis-multiselect")).setValue({{ graph_axis | safe }}));
</script>
</div>
</div>