peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add ability to edit exercise name from new dropdown, still WIP as I need to handle exercise selection and make it a component

Browse Source
This commit is contained in:
Peter Stockings
2024-11-04 12:07:47 +11:00
parent e756607dc8
commit 7d43965289
7 changed files with 74 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
templates/partials/exercise/edit_exercise_name.html Normal file
View File

@@ -0,0 +1,16 @@
<li class="py-2 px-4 flex items-center justify-between">
<!-- Input Field -->
<input type="text" name="name" value="{{ exercise.name }}"
class="w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
_="on click from me call event.stopPropagation()">
<!-- Save Icon -->
<button hx-post="{{ url_for('edit_exercise_name', exercise_id=exercise.exercise_id) }}" hx-target="closest li"
hx-swap="outerHTML" hx-include="closest li" class="text-gray-500 hover:text-gray-700 ml-2"
_="on click from me call event.stopPropagation()">
<!-- Tick icon SVG -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
</svg>
</button>
</li>

9
templates/partials/exercise/exercise_dropdown.html Normal file
View File

@@ -0,0 +1,9 @@
{% if exercises %}
<ul class="list-none m-0 p-0 max-h-[300px] overflow-y-auto">
{% for exercise in exercises %}
{{ render_partial('partials/exercise/exercise_list_item.html', exercise=exercise) }}
{% endfor %}
</ul>
{% else %}
<div class="py-2 px-4 text-gray-500">No results found</div>
{% endif %}

14
templates/partials/exercise/exercise_list_item.html Normal file
View File

@@ -0,0 +1,14 @@
<li class="py-2 px-4 hover:bg-gray-100 cursor-pointer flex items-center justify-between">
<!-- Exercise Name -->
<span>{{ exercise.name }}</span>
<!-- Edit Icon -->
<a hx-get="{{ url_for('edit_exercise_name', exercise_id=exercise.exercise_id) }}" hx-target="closest li"
hx-swap="outerHTML" class="text-gray-500 hover:text-gray-700" _="on click from me call event.stopPropagation()">
<!-- Edit icon SVG -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"
stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.232 5.232l3.536 3.536M4 20h4l12-12-4-4L4 16v4z" />
</svg>
</a>
</li>

5
templates/partials/exercise_dropdown.html
View File

@@ -1,5 +0,0 @@
{% for e in exercises %}
<option value="{{ e.exercise_id }}">{{
e.name
}}</option>
{% endfor %}

17
templates/workout.html
View File

@@ -95,11 +95,18 @@
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Exercise
</label>
<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="query" placeholder="Search exercises..." hx-get="{{ url_for('get_exercises') }}"
hx-target="#exercise-results" hx-trigger="keyup changed delay:500ms" autocomplete="off">
<div id="exercise-results">
<div class="relative" _="on click from elsewhere set the innerHTML of #exercise-results to ''">
<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="query" placeholder="Search exercises..."
hx-get="{{ url_for('get_exercises') }}" hx-target="#exercise-results"
hx-trigger="keyup changed delay:500ms" autocomplete="off">
<!-- Dropdown Menu -->
<div id="exercise-results"
class="absolute w-full bg-white border border-gray-200 mt-1 rounded shadow-md z-10">
<!-- Results will be injected here -->
</div>
</div>
</div>