peterstockings/cardio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Set bike per workout and more style changes

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

12
templates/users.html
View File

@@ -1,8 +1,8 @@
<form class="block p-6 bg-white border border-gray-200 rounded-lg shadow mt-4" hx-post="{{ url_for('users') }}"
<form class="block p-6 bg-white border border-gray-200 rounded-lg shadow mt-8" hx-post="{{ url_for('users') }}"
hx-target="#users-container">
<div class="flex flex-wrap mb-2">
<div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
<div class="grid gap-4 grid-cols-1 md:grid-cols-3 mb-2 mb-2">
<div class="w-full mb-6 md:mb-0">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Name
</label>
@@ -10,11 +10,11 @@
class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
id="grid-city" type="text" placeholder="Full name" name="name" required>
</div>
<div class="w-full md:w-1/2 px-3 mb-4">
<div class="w-full mb-4 ">
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
Bike
</label>
<div class="relative">
<div class="relative ml-0">
<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="new-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id" required>
@@ -29,7 +29,7 @@
</div>
<button
class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded ml-3 w-full md:w-auto"
class="shadow bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2.5 mt-5 my-auto px-4 rounded w-full"
type="submit">
Add User
</button>

11
templates/users_and_workouts.html
View File

@@ -55,17 +55,12 @@
<div class="flex flex-col justify-between">
<div class="w-full px-4 mb-8">
<div class="bg-white shadow-md rounded-lg overflow-hidden" id="users-container">
{% for u in users %}
{% with user=u, workouts=u.workouts, bikes=bikes %}
{% include 'workouts_list.html' %}
{% endwith %}
{% endfor %}
<div class="shadow-md rounded-lg overflow-hidden" id="users-container">
{% with users=users, bikes=bikes %}
{% include 'users.html' %}
{% include 'users_and_workouts_wrapper.html' %}
{% endwith %}
</div>
</div>
<div class="w-full px-4 mb-8" id="container">

9
templates/users_and_workouts_wrapper.html Normal file
View File

@@ -0,0 +1,9 @@
{% for u in users %}
{% with user=u, workouts=u.workouts, bikes=bikes %}
{% include 'workouts_list.html' %}
{% endwith %}
{% endfor %}
{% with users=users, bikes=bikes %}
{% include 'users.html' %}
{% endwith %}

61
templates/workouts_list.html
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>