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

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

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>