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

@@ -15,17 +15,17 @@
<div class="relative">
<div class="w-full">
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="exercise_id"
<select 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"
hx-get="{{ url_for('get_most_recent_topset_for_exercise', person_id=person_id, workout_id=workout_id) }}"
hx-target="#new-set-workout-{{ workout_id }}" hx-swap="outerHTML" {% if has_value==True or
exercise_id %} _="init js(me)
te.Select.getOrCreateInstance(me).setValue('{{ exercise_id | safe }}')
end" {% else %} _="init js(me)
te.Select.getOrCreateInstance(me)
end" {% endif %}>
hx-target="#new-set-workout-{{ workout_id }}" hx-swap="outerHTML" _="init js(me)
tail.select(me, {
search: true,
placeholder: 'Filter exercises',
})
end">
{% for e in exercises %}
<option value="{{ e.exercise_id}}">{{
<option value="{{ e.exercise_id }}" {% if e.exercise_id==exercise_id %}selected{% endif %}>{{
e.name
}}</option>
{% endfor %}

View File

@@ -8,13 +8,17 @@
}}</span>
{% else %}
<div class="w-full">
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="exercise_id"
<select 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">
tail.select(me, {
search: true,
placeholder: 'Filter exercises',
})
end">
{% for exercise in exercises|default([], true) %}
<option value="{{ exercise['ExerciseId'] }}">{{
<option value="{{ exercise['ExerciseId'] }}" {% if exercise['ExerciseId']==exercise_id %}selected{%
endif %}>{{
exercise['Name']
}}</option>
{% endfor %}

View File

@@ -35,16 +35,20 @@
</label>
<div class="relative">
<div class="w-full">
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" multiple
name="tag_id"
<select 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"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_workout_tag_ids | list_to_string | safe }})
end">
tail.select(me, {
search: true,
multiple: true,
placeholder: 'Select tags',
})
end">
{% for p in person_tags %}
<option value="{{ p.tag_id }}">{{
<option value="{{ p.tag_id }}" {% if p.tag_id in selected_workout_tag_ids %}selected{% endif %}>
{{
p.tag_name
}}</option>
{% endfor %}