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

26
app.py
View File

@@ -48,8 +48,11 @@ class Workout(db.Model):
user_id = db.Column(db.Integer, db.ForeignKey(
'users.id', ondelete='CASCADE'), nullable=False)
created_at = db.Column(db.DateTime, nullable=False, default=db.func.now())
bike_id = db.Column(db.Integer, db.ForeignKey(
'bikes.id', ondelete='CASCADE'), nullable=False)
cadence_readings = db.relationship(
'CadenceReading', backref='workout', lazy=True)
bike = db.relationship('Bike', backref='workouts', lazy=True)
class CadenceReading(db.Model):
@@ -109,11 +112,13 @@ def workouts(user_id):
return render_template('workouts_list.html', workouts=workouts_data)
elif request.method == 'POST':
user = User.query.get(user_id)
data = request.json
data = data['workout']
# create a new workout
workout = Workout(user_id=user_id)
workout = Workout(user_id=user_id, bike_id=user.bike_id)
db.session.add(workout)
db.session.commit()
@@ -199,6 +204,18 @@ def render_users_and_workouts():
users_data = []
for user in users:
workouts = get_workouts_for_user(user.id)
if not workouts:
user_data = {
'id': user.id,
'name': user.name,
'bike_id': user.bike_id,
'workouts_count': 0,
'workouts': [],
'workout_counts_by_week': 0,
'duration_by_week': 0
}
users_data.append(user_data)
continue
workout_counts_by_week = []
duration_by_week = []
# get start date from last workout
@@ -236,6 +253,10 @@ def render_users_and_workouts():
'duration_by_week': duration_by_week
}
users_data.append(user_data)
if htmx:
render_template('users_and_workouts_wrapper.html',
users=users_data, bikes=Bike.query.all())
return render_template('users_and_workouts.html', users=users_data, bikes=Bike.query.all())
@@ -265,7 +286,8 @@ def get_workouts_for_user(user_id):
'duration_minutes': duration.total_seconds() / 60,
'average_rpm': int(average_rpm),
'calories': int(calories),
'distance': int(distance)
'distance': int(distance),
'bike_display_name': workout.bike.display_name
})
return workouts_data

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>

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">

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 %}

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>