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/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">