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

Convert edit/add/remove people form in settings to htmx driven and trigger event to refresh list of people and workout count on insert/update/remove person

Browse Source
This commit is contained in:
Peter Stockings
2022-11-20 14:14:04 +11:00
parent 93fc2fcfb8
commit 3dcc61005e
5 changed files with 161 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
templates/settings.html
View File

@@ -17,10 +17,6 @@
<table class="table-fixed min-w-full divide-y divide-gray-200">
<thead class="bg-gray-50">
<tr>
<th scope="col"
class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-0.5">
#
</th>
<th scope="col"
class="p-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-3/5">
Name
@@ -30,17 +26,19 @@
</th>
</tr>
</thead>
<tbody class="bg-white">
<tbody class="bg-white" id="new-person" hx-target="closest tr"
hx-swap="outerHTML swap:0.5s">
{% for p in people %}
<tr>
<td class="p-4 whitespace-nowrap text-sm font-normal text-gray-500">
{{ loop.index }}
</td>
<td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
{{ p['Name'] }}
</td>
<td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
<a href="{{ url_for('delete_person', person_id=p['PersonId']) }}"
<a hx-get="{{ url_for('get_person_edit_form', person_id=p['PersonId']) }}"
class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
Edit
</a>
<a hx-delete="{{ url_for('delete_person', person_id=p['PersonId']) }}"
class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
Remove
</a>
@@ -54,7 +52,7 @@
</div>
</div>
<form class="w-full mt-3" action="{{ url_for('create_person') }}" method="post">
<form class="w-full mt-3" hx-post="{{ url_for('create_person') }}" hx-swap="beforeend" hx-target="#new-person">
<div class="flex flex-wrap -mx-3 mb-2">
<div class="grow px-3">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">