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

41
templates/users.html Normal file
View File

@@ -0,0 +1,41 @@
<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 class="flex">
<div hx-delete="{{ url_for('delete_user', user_id=u.id) }}"
hx-confirm="Are you sure you wish to delete your account?" hx-target="#users-container"
class="pr-1">
<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="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
</svg>
</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>
</div>
</td>
</tr>
{% endfor %}
</tbody>
</table>

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>