From 339781355d0cdeb44ecb7c5779902a38aec55c42 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 24 Nov 2022 21:19:16 +1100
Subject: [PATCH] Make workout and person pages htmx driven

---
 app.py                               |  15 +++-
 templates/partials/page/person.html  |  24 +++---
 templates/partials/page/workout.html | 117 ++++++++++++++++++++++++++
 templates/workout.html               | 118 +--------------------------
 4 files changed, 142 insertions(+), 132 deletions(-)
 create mode 100644 templates/partials/page/workout.html

diff --git a/app.py b/app.py
index 64d6bc7..5ba55cd 100644
--- a/app.py
+++ b/app.py
@@ -57,6 +57,10 @@ def filter_exercises_for_person(person_id):
 @ validate_person
 def create_workout(person_id):
     new_workout_id = db.create_workout(person_id)
+    if htmx:
+        workout = db.get_workout(person_id, new_workout_id)
+        return render_template('partials/page/workout.html',
+                               workout=workout), 200, {"HX-Trigger": "updatedPeople", "HX-Push": url_for('get_workout', person_id=person_id, workout_id=new_workout_id)}
     return redirect(url_for('get_workout', person_id=person_id, workout_id=new_workout_id))
 
 
@@ -64,14 +68,19 @@ def create_workout(person_id):
 @ validate_workout
 def get_workout(person_id, workout_id):
     workout = db.get_workout(person_id, workout_id)
+    if htmx:
+        return render_template('partials/page/workout.html',
+                               workout=workout), 200, {"HX-Trigger": "updatedPeople"}
     return render_template('workout.html', workout=workout)
 
 
-@ app.route("/person/<int:person_id>/workout/<int:workout_id>/delete", methods=['GET', 'DELETE'])
+@ app.route("/person/<int:person_id>/workout/<int:workout_id>/delete", methods=['DELETE'])
 @ validate_workout
 def delete_workout(person_id, workout_id):
     db.delete_workout(workout_id)
-    return redirect(url_for('get_person', person_id=person_id))
+    person = db.get_person(person_id)
+    return render_template('partials/page/person.html',
+                           person=person, is_filtered=False), 200, {"HX-Trigger": "updatedPeople", "HX-Push": url_for('get_person', person_id=person_id)}
 
 
 @ app.route("/person/<int:person_id>/workout/<int:workout_id>/start_date_edit_form", methods=['GET'])
@@ -122,7 +131,7 @@ def create_topset(person_id, workout_id):
         workout_id, exercise_id, repetitions, weight)
     exercise = db.get_exercise(exercise_id)
 
-    return render_template('partials/topset.html', person_id=person_id, workout_id=workout_id, topset_id=new_topset_id, exercise_name=exercise['Name'], repetitions=repetitions, weight=weight)
+    return render_template('partials/topset.html', person_id=person_id, workout_id=workout_id, topset_id=new_topset_id, exercise_name=exercise['Name'], repetitions=repetitions, weight=weight), 200, {"HX-Trigger": "topsetAdded"}
 
 
 @ app.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>", methods=['PUT'])
diff --git a/templates/partials/page/person.html b/templates/partials/page/person.html
index e8a44ad..9f4cbcd 100644
--- a/templates/partials/page/person.html
+++ b/templates/partials/page/person.html
@@ -7,11 +7,10 @@
                 <span class="text-base font-normal text-gray-500">List of workouts</span>
             </div>
             <div>
-                <form action="{{ url_for('create_workout', person_id=person['PersonId']) }}" method="post">
-                    <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-6">New
-                        workout</button>
-                </form>
+                <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-6"
+                    hx-post="{{ url_for('create_workout', person_id=person['PersonId']) }}" hx-target="#container">New
+                    workout</button>
             </div>
         </div>
 
@@ -77,18 +76,17 @@
                                     {% endfor %}
 
                                     <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-                                        <a href="{{ url_for('get_workout' ,person_id=person['PersonId'], workout_id=w['WorkoutId']) }}"
+                                        <a hx-get="{{ url_for('get_workout' ,person_id=person['PersonId'], workout_id=w['WorkoutId']) }}"
+                                            hx-target="#container" hx-push-url="true"
                                             class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
                                             Edit
                                         </a>
 
-                                        <form
-                                            action="{{ url_for('delete_workout', person_id=person['PersonId'], workout_id=w['WorkoutId']) }}"
-                                            method="delete" class="inline">
-                                            <button
-                                                class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
-                                                type="submit">Delete</button>
-                                        </form>
+                                        <button
+                                            hx-delete="{{ url_for('delete_workout', person_id=person['PersonId'], workout_id=w['WorkoutId']) }}"
+                                            hx-target="#container" hx-push-url="true"
+                                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
+                                            type="submit">Delete</button>
                                     </td>
                                 </tr>
                                 {% endfor %}
diff --git a/templates/partials/page/workout.html b/templates/partials/page/workout.html
new file mode 100644
index 0000000..191446d
--- /dev/null
+++ b/templates/partials/page/workout.html
@@ -0,0 +1,117 @@
+<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
+
+    <div class="mb-4 flex items-center justify-between">
+        <div>
+            <h3 class="text-xl font-bold text-gray-900 mb-2">{{ workout['PersonName'] }}</h3>
+        </div>
+        <button
+            hx-delete="{{ url_for('delete_workout', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
+            hx-target="#container"
+            class="sm:inline-flex text-white bg-red-200 hover:bg-red-700 focus:ring-4 focus:ring-red-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center items-center mt-6 cursor-pointer"
+            type="submit">Delete
+            workout</button>
+    </div>
+
+    <div id="edit-start-date" hx-target="this" hx-swap="innerHTML swap:0.5s">
+        {{ render_partial('partials/start_date.html', person_id=workout['PersonId'], workout_id=workout['WorkoutId'],
+        start_date=workout['StartDate']) }}
+    </div>
+
+</div>
+
+<div class="bg-white shadow rounded-lg mb-4 p-4 sm:p-6 h-full mt-4">
+    <div class="flex items-center justify-between mb-4">
+        <h3 class="text-xl font-bold leading-none text-gray-900">Top Sets</h3>
+
+    </div>
+    <div class="flow-root">
+
+        <table class="items-center w-full bg-transparent border-collapse">
+            <thead>
+                <tr>
+                    <th
+                        class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
+                        Exercise</th>
+                    <th
+                        class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
+                        Top Set</th>
+                    <th
+                        class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap min-w-140-px w-8">
+                    </th>
+                </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100" id="new-workout" hx-target="closest tr"
+                hx-swap="outerHTML swap:0.5s">
+                {% for t in workout['TopSets'] %}
+                {{ render_partial('partials/topset.html', person_id=workout['PersonId'],
+                workout_id=workout['WorkoutId'],
+                topset_id=t['TopSetId'], exercise_name=t['ExerciseName'], repetitions=t['Repetitions'],
+                weight=t['Weight']) }}
+                {% endfor %}
+            </tbody>
+        </table>
+
+        {% if workout['TopSets']|length == 0 %}
+        <div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert"
+            id="no-workouts">
+            No topsets found.
+        </div>
+        {% endif %}
+    </div>
+</div>
+
+<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8  2xl:col-span-2 mt-4">
+    <div class=" ">
+        <form class="w-full max-w-lg"
+            hx-post="{{ url_for('create_topset', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
+            hx-swap="beforeend" hx-target="#new-workout" _="on htmx:afterOnLoad add .hidden to #no-workouts">
+
+            <div class="flex flex-wrap -mx-3 mb-2">
+                <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
+                        Exercise
+                    </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="grid-state" name="exercise_id">
+                            {% for e in workout['Exercises'] %}
+                            <option value="{{ e['ExerciseId'] }}">{{
+                                e['Name']}}</option>
+                            {% endfor %}
+                        </select>
+                        <div
+                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
+                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
+                        Reps
+                    </label>
+                    <input
+                        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="number" name="repetitions">
+                </div>
+
+                <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
+                        Weight
+                    </label>
+                    <input
+                        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-zip" type="number" name="weight" step="any">
+                </div>
+            </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"
+                type="submit">
+                Add top set
+            </button>
+        </form>
+    </div>
+</div>
\ No newline at end of file
diff --git a/templates/workout.html b/templates/workout.html
index b11a521..56a50d9 100644
--- a/templates/workout.html
+++ b/templates/workout.html
@@ -2,122 +2,8 @@
 
 {% block content %}
 
-<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
+{{ render_partial('partials/page/workout.html',
+workout=workout) }}
 
-    <div class="mb-4 flex items-center justify-between">
-        <div>
-            <h3 class="text-xl font-bold text-gray-900 mb-2">{{ workout['PersonName'] }}</h3>
-        </div>
-        <form action="{{ url_for('delete_workout', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
-            method="delete">
-            <button
-                class="sm:inline-flex text-white bg-red-200 hover:bg-red-700 focus:ring-4 focus:ring-red-200 font-medium rounded-lg text-sm px-5 py-2.5 text-center items-center mt-6 cursor-pointer"
-                type="submit">Delete
-                workout</button>
-        </form>
-    </div>
-
-    <div id="edit-start-date" hx-target="this" hx-swap="innerHTML swap:0.5s">
-        {{ render_partial('partials/start_date.html', person_id=workout['PersonId'], workout_id=workout['WorkoutId'],
-        start_date=workout['StartDate']) }}
-    </div>
-
-</div>
-
-<div class="bg-white shadow rounded-lg mb-4 p-4 sm:p-6 h-full mt-4">
-    <div class="flex items-center justify-between mb-4">
-        <h3 class="text-xl font-bold leading-none text-gray-900">Top Sets</h3>
-
-    </div>
-    <div class="flow-root">
-
-        <table class="items-center w-full bg-transparent border-collapse">
-            <thead>
-                <tr>
-                    <th
-                        class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
-                        Exercise</th>
-                    <th
-                        class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
-                        Top Set</th>
-                    <th
-                        class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap min-w-140-px w-8">
-                    </th>
-                </tr>
-            </thead>
-            <tbody class="divide-y divide-gray-100" id="new-workout" hx-target="closest tr"
-                hx-swap="outerHTML swap:0.5s">
-                {% for t in workout['TopSets'] %}
-                {{ render_partial('partials/topset.html', person_id=workout['PersonId'],
-                workout_id=workout['WorkoutId'],
-                topset_id=t['TopSetId'], exercise_name=t['ExerciseName'], repetitions=t['Repetitions'],
-                weight=t['Weight']) }}
-                {% endfor %}
-            </tbody>
-        </table>
-
-        {% if workout['TopSets']|length == 0 %}
-        <div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert">
-            No topsets found.
-        </div>
-        {% endif %}
-    </div>
-</div>
-
-<div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8  2xl:col-span-2 mt-4">
-    <div class=" ">
-        <form class="w-full max-w-lg"
-            hx-post="{{ url_for('create_topset', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
-            hx-swap="beforeend" hx-target="#new-workout">
-
-            <div class="flex flex-wrap -mx-3 mb-2">
-                <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
-                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
-                        Exercise
-                    </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="grid-state" name="exercise_id">
-                            {% for e in workout['Exercises'] %}
-                            <option value="{{ e['ExerciseId'] }}">{{
-                                e['Name']}}</option>
-                            {% endfor %}
-                        </select>
-                        <div
-                            class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                            <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
-                                <path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-                            </svg>
-                        </div>
-                    </div>
-                </div>
-
-                <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
-                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
-                        Reps
-                    </label>
-                    <input
-                        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="number" name="repetitions">
-                </div>
-
-                <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
-                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
-                        Weight
-                    </label>
-                    <input
-                        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-zip" type="number" name="weight" step="any">
-                </div>
-            </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"
-                type="submit">
-                Add top set
-            </button>
-        </form>
-    </div>
-</div>
 
 {% endblock %}
\ No newline at end of file