Remove dependency on tailwind elements and switch to using tail.select (Smaller lib, that resolves duplication of selects on back/forward)

This commit is contained in:
Peter Stockings
2023-12-08 09:26:38 +11:00
parent 2bdbda3a05
commit 304ddcb30d
10 changed files with 569 additions and 67 deletions

View File

@@ -16,13 +16,10 @@
</div>
<div>
<div>
<select data-te-select-init
data-te-select-size="lg" name="view"
<select name="view"
hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-push-url="true"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue('all')
end">
_="init js(me) tail.select(me, {}) end">
<option value="month">Month</option>
<option value="year">Year</option>
<option value="all" selected>All</option>
@@ -43,16 +40,20 @@
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Exercises
</label>
<select data-te-select-init data-te-select-filter="true"
<select 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"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_exercise_ids| list_to_string | safe }})
end">
tail.select(me, {
multiple: true,
search: true,
placeholder: 'Filter exercises',
})
end">
{% for e in person['Exercises'] %}
<option value="{{ e['ExerciseId'] }}">{{
<option value="{{ e['ExerciseId'] }}" {% if e['ExerciseId'] in selected_exercise_ids %}selected{% endif %}>{{
e['ExerciseName']
}}</option>
{% endfor %}
@@ -106,17 +107,14 @@
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Graph Axis
</label>
<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
<select 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"
_="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>
_="init js(me) tail.select(me, { multiple: true, placeholder: 'Select graphs' }) end">
<option value="repetitions" {% if "repetitions" in graph_axis %}selected{% endif %}>Repetitions</option>
<option value="weight" {% if "weight" in graph_axis %}selected{% endif %}>Weigh</option>
<option value="estimated1rm" {% if "estimated1rm" in graph_axis %}selected{% endif %}>Estimated 1RM</option>
</select>
</div>
</div>