Files
cardio/templates/users_and_workouts.html
Peter Stockings 11d350082d Minor changes
2023-03-10 21:54:46 +11:00

81 lines
4.0 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cardio Tracker</title>
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
<script src="https://unpkg.com/htmx.org"></script>
</head>
<body class="bg-gray-100 font-sans leading-normal tracking-normal">
<nav class="bg-white shadow-lg">
<div class="container mx-auto px-4">
<div class="flex justify-between">
<div class="flex items-center">
<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">
<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 />
<button
class="px-4 rounded-r-lg bg-green-500 text-white font-bold p-2 uppercase border-green-600 border-t border-b border-r"
type="submit">
Add User
</button>
</form>
</div>
</div>
</div>
</nav>
<div class="container mx-auto mt-8">
<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>
</div>
<div class="w-full sm:w-1/2 px-4 mb-8" id="container">
</div>
</div>
</div>
</body>
</html>