Add logic to handle adding/creating new tags for workouts
This commit is contained in:
Peter Stockings
@@ -16,109 +16,10 @@
|
||||
<div class="w-full">
|
||||
<h3 class="text-xl font-bold text-gray-900">{{ workout['PersonName'] }}</h3>
|
||||
|
||||
<div class="flex">
|
||||
<div id="tag-wrapper-w-{{ workout['WorkoutId'] }}">
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-pink-600 bg-pink-200 uppercase last:mr-0 mr-1 max-h-fit">Push
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-pink-600 bg-pink-200 uppercase last:mr-0 mr-1 max-h-fit">Accessories
|
||||
</span>
|
||||
</div>
|
||||
<span id="tag-form-show-w-{{ workout['WorkoutId'] }}" class="" _="on click
|
||||
toggle .hidden on #tag-form-w-{{ workout['WorkoutId'] }}
|
||||
then toggle .hidden on #tag-form-hide-w-{{ workout['WorkoutId'] }}
|
||||
then toggle .hidden on #tag-wrapper-w-{{ workout['WorkoutId'] }}
|
||||
then toggle .hidden on me">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-6 h-6"
|
||||
data-darkreader-inline-stroke=""
|
||||
style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 4.5v15m7.5-7.5h-15"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="tag-form-hide-w-{{ workout['WorkoutId'] }}" _="on click
|
||||
toggle .hidden on #tag-form-w-{{ workout['WorkoutId'] }}
|
||||
then toggle .hidden on #tag-form-show-w-{{ workout['WorkoutId'] }}
|
||||
then toggle .hidden on #tag-wrapper-w-{{ workout['WorkoutId'] }}
|
||||
then toggle .hidden on me" class="hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
||||
stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div id="tag-form-w-{{workout['WorkoutId']}}" class="hidden pt-2 pb-3">
|
||||
|
||||
<span class="text-base font-normal text-gray-500">Add tag to workout</span>
|
||||
|
||||
<div class="flex pt-2 flex-col sm:flex-row pb-2">
|
||||
|
||||
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
|
||||
<label
|
||||
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
|
||||
for="grid-state">
|
||||
Tag
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="w-full">
|
||||
<select id="workout-tag-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">
|
||||
{% for e in workout['Exercises'] %}
|
||||
<option value="{{ e['ExerciseId'] }}">{{
|
||||
e['Name']
|
||||
}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<script>
|
||||
te.Select.getOrCreateInstance(document.querySelector("#workout-tag-select-{{ workout['WorkoutId'] }}"));
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
|
||||
<label
|
||||
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
||||
New tag name
|
||||
</label>
|
||||
<div class="flex">
|
||||
<input
|
||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
type="text" name="repetitions">
|
||||
|
||||
<button type="submit"
|
||||
class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none"
|
||||
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6" data-darkreader-inline-stroke=""
|
||||
style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round"
|
||||
d="M12 4.5v15m7.5-7.5h-15"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<span class="text-base font-normal text-gray-500 pt-2">Remove tag from
|
||||
workout</span>
|
||||
<div>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-pink-600 bg-pink-100 uppercase last:mr-0 mr-1 max-h-fit">Push
|
||||
</span>
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-pink-600 bg-pink-100 uppercase last:mr-0 mr-1 max-h-fit">Accessories
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{{ render_partial('partials/workout_tags.html', person_id=workout['PersonId'],
|
||||
workout_id=workout['WorkoutId'],
|
||||
person_tags=person_tags, workout_tags=workout_tags,
|
||||
selected_workout_tag_ids=selected_workout_tag_ids) }}
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
80
templates/partials/workout_tags.html
Normal file
80
templates/partials/workout_tags.html
Normal file
@@ -0,0 +1,80 @@
|
||||
<div class="flex">
|
||||
<div id="tag-wrapper-w-{{ workout_id }}">
|
||||
{{ render_partial('partials/workout_tags_list.html', workout_tags=workout_tags)
|
||||
}}
|
||||
</div>
|
||||
<span id="tag-form-show-w-{{ workout_id }}" class="" _="on click
|
||||
toggle .hidden on #tag-form-w-{{ workout_id }}
|
||||
then toggle .hidden on #tag-form-hide-w-{{ workout_id }}
|
||||
then toggle .hidden on me">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6" data-darkreader-inline-stroke="" style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
|
||||
</svg>
|
||||
</span>
|
||||
<span id="tag-form-hide-w-{{ workout_id }}" _="on click
|
||||
toggle .hidden on #tag-form-w-{{ workout_id }}
|
||||
then toggle .hidden on #tag-form-show-w-{{ workout_id }}
|
||||
then toggle .hidden on me" class="hidden">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
||||
class="w-6 h-6">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12h-15" />
|
||||
</svg>
|
||||
|
||||
</span>
|
||||
</div>
|
||||
<div id="tag-form-w-{{ workout_id }}" class="hidden pt-2 pb-3">
|
||||
|
||||
<span class="text-base font-normal text-gray-500">Add tag to workout</span>
|
||||
|
||||
<div class="flex pt-2 flex-col sm:flex-row pb-2">
|
||||
|
||||
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
|
||||
Tag
|
||||
</label>
|
||||
<div class="relative">
|
||||
<div class="w-full">
|
||||
<select id="workout-tag-select-{{ workout_id }}" data-te-select-init data-te-select-filter="true"
|
||||
data-te-select-size="lg" 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">
|
||||
{% for p in person_tags %}
|
||||
<option value="{{ p.tag_id }}">{{
|
||||
p.tag_name
|
||||
}}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
</div>
|
||||
<script>
|
||||
te.Select.getOrCreateInstance(document.querySelector("#workout-tag-select-{{ workout_id }}")).setValue({{ selected_workout_tag_ids| list_to_string | safe }});
|
||||
</script>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
|
||||
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2">
|
||||
New tag name
|
||||
</label>
|
||||
<div class="flex">
|
||||
<input
|
||||
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
|
||||
type="text" name="tag_name">
|
||||
|
||||
<button type="submit"
|
||||
hx-post="{{ url_for('create_new_tag_for_workout', person_id=person_id, workout_id=workout_id) }}"
|
||||
hx-include="[name='tag_name']" hx-target="#tag-wrapper-w-{{ workout_id }}"
|
||||
class="p-2.5 ml-2 text-sm font-medium text-white bg-blue-700 rounded-lg border border-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
||||
stroke="currentColor" class="w-6 h-6" data-darkreader-inline-stroke=""
|
||||
style="--darkreader-inline-stroke: currentColor;">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
|
||||
</svg>
|
||||
<span class="sr-only">Search</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
8
templates/partials/workout_tags_list.html
Normal file
8
templates/partials/workout_tags_list.html
Normal file
@@ -0,0 +1,8 @@
|
||||
{% for tag in workout_tags %}
|
||||
<span
|
||||
class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded text-pink-600 bg-pink-200 uppercase last:mr-0 mr-1 max-h-fit cursor-pointer"
|
||||
hx-get="{{ url_for('goto_tag') }}" hx-vals='{"filter": "{{ tag.tag_filter }}", "person_id": "{{ tag.person_id }}"}'
|
||||
hx-target="#container" hx-push-url="true" _='on click trigger closeModal'>{{
|
||||
tag.tag_name }}
|
||||
</span>
|
||||
{% endfor%}
|
||||
Reference in New Issue
Block a user