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

23
templates/base.html
View File

@@ -85,25 +85,10 @@
<span class="ml-3">Dashboard</span>
</a>
</div>
<ul class="space-y-2 pb-2">
{% for p in get_list_of_people_and_workout_count() %}
<li>
<a href="{{ url_for('get_person' ,person_id=p['PersonId']) }}"
class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group {% if p['IsActive']==1 %} bg-gray-200 {% endif %}">
<svg class="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd">
</path>
</svg>
<span class="ml-3 flex-1 whitespace-nowrap">{{ p['Name']}}</span>
<span
class="bg-gray-200 text-gray-800 ml-3 text-sm font-medium inline-flex items-center justify-center px-2 rounded-full">{{
p['NumberOfWorkouts'] }}</span>
</a>
</li>
{% endfor %}
<ul class="space-y-2 pb-2" hx-get="{{ url_for('get_person_list') }}"
hx-trigger="updatedPeople from:body">
{{ render_partial('partials/people_link.html',
people=get_list_of_people_and_workout_count()) }}
</ul>
<div class="space-y-2 pt-2">

16
templates/partials/people_link.html Normal file
View File

@@ -0,0 +1,16 @@
{% for p in people %}
<li>
<a href="{{ url_for('get_person' ,person_id=p['PersonId']) }}"
class="text-base text-gray-900 font-normal rounded-lg hover:bg-gray-100 flex items-center p-2 group {% if p['IsActive']==1 %} bg-gray-200 {% endif %}">
<svg class="w-6 h-6 text-gray-500 flex-shrink-0 group-hover:text-gray-900 transition duration-75"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd">
</path>
</svg>
<span class="ml-3 flex-1 whitespace-nowrap">{{ p['Name']}}</span>
<span
class="bg-gray-200 text-gray-800 ml-3 text-sm font-medium inline-flex items-center justify-center px-2 rounded-full">{{
p['NumberOfWorkouts'] }}</span>
</a>
</li>
{% endfor %}

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">