Set bike per workout and more style changes

This commit is contained in:
Peter Stockings
2023-03-30 11:32:37 +11:00
parent 7c655e9a2c
commit 114b501adf
5 changed files with 76 additions and 43 deletions

View File

@@ -1,5 +1,4 @@
<a href="#"
class="block p-6 bg-white border border-gray-200 rounded-lg rounded-b-none shadow hover:bg-gray-100 dark:bg-gray-800 dark:border-gray-700 dark:hover:bg-gray-700">
<div class="block p-6 bg-white border border-b-0 border-gray-200 rounded-lg rounded-b-none shadow">
<div class="flex flex-row justify-between">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">{{ u.name }}</h5>
<div hx-delete="{{ url_for('delete_user', user_id=user.id) }}"
@@ -15,37 +14,39 @@
</div>
</div>
<div class="w-full md:w-1/2 ">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
Bike
</label>
<div class="relative">
<select
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="user-{{ user.id }}-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id" required
hx-get="{{ url_for('update_users_bike', user_id=user.id) }}" hx-target="#users-container">
{% for b in bikes %}
<option value="{{ b.id }}" {% if user.bike_id==b.id %} selected {% endif %}>{{ b.display_name }}
</option>
{% endfor %}
</select>
<script>
te.Select.getOrCreateInstance(document.querySelector("#user-{{ user.id }}-bike-select")).setValue({{ user.bike_id | safe }});
</script>
<div class="flex flex-col md:flex-row">
<div class="w-full">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
Bike
</label>
<div class="relative">
<select
class="block appearance-none w-full bg-gray-200 border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="user-{{ user.id }}-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id"
required hx-get="{{ url_for('update_users_bike', user_id=user.id) }}" hx-target="#users-container">
{% for b in bikes %}
<option value="{{ b.id }}" {% if user.bike_id==b.id %} selected {% endif %}>{{ b.display_name }}
</option>
{% endfor %}
</select>
<script>
te.Select.getOrCreateInstance(document.querySelector("#user-{{ user.id }}-bike-select")).setValue("{{ user.bike_id | safe }}");
</script>
</div>
</div>
<button
class="shadow mt-6 bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded w-full ml-0 md:ml-4"
type="submit">New Workout</button>
</div>
<button
class="shadow mt-4 bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded w-full md:w-auto"
type="submit">New Workout</button>
</a>
</div>
<div class="border border-neutral-200 border-b-lg bg-white dark:border-neutral-600 dark:bg-neutral-800">
<div class="border border-t-0 border-neutral-200 border-b-lg bg-white dark:border-neutral-600 dark:bg-neutral-800">
<h2 class="mb-0">
<button
class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
type="button">
<div>
<h2 class="text-lg font-medium text-gray-900">View 16 workouts</h2>
<h2 class="text-lg font-medium text-gray-900">View {{ user.workouts_count }} workouts</h2>
<p class="text-sm text-gray-500">Duration: 35 days | Weekly average workouts: 25 mins|
Calories: 84 | Distance: 17</p>
</div>
@@ -66,8 +67,14 @@
<button
class="accordion-button group relative flex w-full items-center rounded-t-[15px] border-0 bg-white py-4 px-5 text-left text-base text-neutral-800 transition [overflow-anchor:none] hover:z-[2] focus:z-[3] focus:outline-none dark:bg-neutral-800 dark:text-white [&:not([data-te-collapse-collapsed])]:bg-white [&:not([data-te-collapse-collapsed])]:text-primary [&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(229,231,235)] dark:[&:not([data-te-collapse-collapsed])]:bg-neutral-800 dark:[&:not([data-te-collapse-collapsed])]:text-primary-400 dark:[&:not([data-te-collapse-collapsed])]:[box-shadow:inset_0_-1px_0_rgba(75,85,99)]"
type="button">
<div>
<h2 class="text-lg font-medium text-gray-900">{{ w.start_time }}</h2>
<div class="w-full">
<div class="flex flex-row justify-between">
<h2 class="text-lg font-medium text-gray-900">{{ w.start_time }}
</h2>
<h2 class="text-md font-small text-gray-600 pr-8">{{ w.bike_display_name }}
</h2>
</div>
<p class="text-sm text-gray-500">Duration: {{ w.duration }} | Average RPM: {{ w.average_rpm
}} |
Calories: {{ w.calories }} | Distance: {{ w.distance }}</p>