Convert workout start date form into htmx driven

This commit is contained in:
Peter Stockings
2022-11-19 23:46:47 +11:00
parent 605d84f8bb
commit 3672951091
3 changed files with 68 additions and 26 deletions

62
app.py
View File

@@ -47,11 +47,65 @@ def delete_workout(person_id, workout_id):
return redirect(url_for('get_person', person_id=person_id))
@ app.route("/person/<int:person_id>/workout/<int:workout_id>", methods=['POST'])
@ app.route("/person/<int:person_id>/workout/<int:workout_id>/start_date_edit_form", methods=['GET'])
@ validate_workout
def update_workout(person_id, workout_id):
db.update_workout(workout_id, request.form)
return redirect(url_for('get_workout', person_id=person_id, workout_id=workout_id))
def get_workout_start_date_edit_form(person_id, workout_id):
workout = db.get_workout(person_id, workout_id)
return f"""
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="date"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full md:w-1/4"
name="start-date" value="{workout['StartDate']}">
</div>
<a
class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2"
hx-put="{url_for('update_workout_start_date', person_id=person_id, workout_id=workout_id)}"
hx-include="[name='start-date']">
Update
</a>
<a
hx-get="{url_for('get_workout_start_date', person_id=person_id, workout_id=workout_id)}"
hx-target="#edit-start-date"
class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2">
Cancel
</a>
"""
@ app.route("/person/<int:person_id>/workout/<int:workout_id>/start_date", methods=['PUT'])
@ validate_workout
def update_workout_start_date(person_id, workout_id):
new_start_date = request.form.get('start-date')
db.update_workout_start_date(workout_id, new_start_date)
return f"""
<span class="text-base font-normal text-gray-500">{new_start_date}</span>
<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2"
hx-get="{ url_for('get_workout_start_date_edit_form', person_id=person_id, workout_id=workout_id) }"
hx-target="#edit-start-date">
Edit
</a>
"""
@ app.route("/person/<int:person_id>/workout/<int:workout_id>/start_date", methods=['GET'])
@ validate_workout
def get_workout_start_date(person_id, workout_id):
workout = db.get_workout(person_id, workout_id)
return f"""
<span class="text-base font-normal text-gray-500">{workout['StartDate']}</span>
<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2">
Edit
</a>
"""
@ app.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>", methods=['GET', 'POST'])

4
db.py
View File

@@ -134,9 +134,9 @@ class DataBase():
ORDER BY
P.PersonId""", [person_id])
def update_workout(self, workout_id, form):
def update_workout_start_date(self, workout_id, start_date):
self.execute('UPDATE Workout SET StartDate=%s WHERE WorkoutId=%s', [
form.get('start-date'), workout_id], commit=True)
start_date, workout_id], commit=True)
def get_person(self, person_id):
topsets = self.execute("""

View File

@@ -17,26 +17,14 @@
</form>
</div>
<form action="{{ url_for('update_workout', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
method="post">
<div class="relative">
<div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
<svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="date"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full md:w-1/4"
name="start-date" value="{{ workout['StartDate'] }}">
</div>
<button
class="sm:inline-flex text-white bg-cyan-600 hover:bg-cyan-700 focus:ring-4 focus:ring-cyan-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center items-center mt-4"
type="submit">Update</button>
</form>
<div id="edit-start-date" hx-target="this" hx-swap="innerHTML swap:0.5s">
<span class="text-base font-normal text-gray-500">{{ workout['StartDate'] }}</span>
<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2"
hx-get="{{ url_for('get_workout_start_date_edit_form', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
hx-target="#edit-start-date">
Edit
</a>
</div>
</div>