Add the ability to add/delete users from overview page

This commit is contained in:
Peter Stockings
2023-03-10 22:27:30 +11:00
parent 3a506b83a5
commit 56cf6813b7
3 changed files with 52 additions and 38 deletions

View File

@@ -17,7 +17,7 @@
<a class="text-gray-800 text-xl font-bold" href="/">Cardio Tracker</a>
</div>
<div class="flex items-center">
<form class="flex py-1" action="/" method="POST">
<form class="flex py-1" hx-post="{{ url_for('users') }}" hx-target="#users-container">
<input
class="rounded-l-lg p-2 border-t mr-0 border-b border-l text-gray-800 border-gray-200 bg-white"
name="name" placeholder="New user name" required />
@@ -35,44 +35,15 @@
<div class="flex flex-col sm:flex-row justify-between">
<div class="w-full sm:w-1/2 px-4 mb-8">
<h1 class="text-gray-800 font-bold text-2xl mb-4">Users</h1>
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<table class="w-full">
<thead>
<tr class="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
<th class="py-3 px-6 text-left">Name</th>
<th class="py-3 px-6 text-left">Workouts</th>
</tr>
</thead>
<tbody>
{% for u in users %}
<tr class="hover:bg-gray-100">
<td class="py-4 px-6 border-b border-gray-200"><a
href="{{ url_for('new_workout', user_id=u.id) }}">{{ u.name }}</a></td>
<td class="py-4 px-6 border-b border-gray-200 flex inline">
<div class="flex justify-between w-full">
<div>{{ u.workouts_count }}</div>
<div hx-get="{{ url_for('workouts', user_id=u.id) }}" hx-target="#container">
<svg class="w-6 h-6 dark:text-white" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15">
</path>
</svg>
</div>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>
<div class="bg-white shadow-md rounded-lg overflow-hidden" id="users-container">
{% with users=users %}
{% include 'users.html' %}
{% endwith %}
</div>
</div>
<div class="w-full sm:w-1/2 px-4 mb-8" id="container">
</div>
</div>
</div>