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

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>