Convert add/delete topset forms to htmx driven

app.py

@@ -133,15 +133,36 @@ def create_topset(person_id, workout_id):
     repetitions = request.form.get("repetitions")
     weight = request.form.get("weight")
 
-    db.create_topset(workout_id, exercise_id, repetitions, weight)
+    new_top_set_id = db.create_topset(
-    return redirect(url_for('get_workout', person_id=person_id, workout_id=workout_id))
+        workout_id, exercise_id, repetitions, weight)
+    exercise = db.get_exercise(exercise_id)
+
+    return f"""
+    <tr class="text-gray-500">
+        <th class="border-t-0 px-4 align-middle text-l font-normal whitespace-nowrap p-4 text-left">
+            { exercise['Name'] }</th>
+        </th>
+        <td class="border-t-0 px-4 align-middle text-l font-medium text-gray-900 whitespace-nowrap p-4">
+            {repetitions} x {weight}kg</td>
+        <td class="border-t-0 px-4 align-middle text-xs whitespace-nowrap p-4">
+                        <a href="{ url_for('get_topset', person_id=person_id, workout_id=workout_id, topset_id=new_top_set_id) }"
+                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2">
+                            Edit
+                        </a>
+                        <a hx-delete="{ url_for('delete_topset', person_id=person_id, workout_id=workout_id, topset_id=new_top_set_id)}"
+                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2">
+                            Delete
+                        </a>
+                    </td>
+    </tr>
+    """
 
 
-@ app.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>/delete", methods=['GET', 'DELETE'])
+@ app.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>/delete", methods=['DELETE'])
 @ validate_topset
 def delete_topset(person_id, workout_id, topset_id):
     db.delete_topset(topset_id)
-    return redirect(url_for('get_workout', person_id=person_id, workout_id=workout_id))
+    return ""
 
 
 @ app.route("/person", methods=['POST'])

db.py

@@ -100,8 +100,9 @@ class DataBase():
             exercise_id, repetitions, weight, topset_id], commit=True)
 
     def create_topset(self, workout_id, exercise_id, repetitions, weight):
-        self.execute('INSERT INTO TopSet (WorkoutId, ExerciseId, Repetitions, Weight) VALUES (%s, %s, %s, %s)', [
+        new_top_set = self.execute('INSERT INTO TopSet (WorkoutId, ExerciseId, Repetitions, Weight) VALUES (%s, %s, %s, %s) RETURNING TopSetId AS "TopSetId"', [
-            workout_id, exercise_id, repetitions, weight], commit=True)
+            workout_id, exercise_id, repetitions, weight], commit=True, one=True)
+        return new_top_set['TopSetId']
 
     def delete_topset(self, topset_id):
         self.execute('DELETE FROM TopSet WHERE TopSetId=%s', [

templates/workout.html

@@ -50,7 +50,8 @@
                     </th>
                 </tr>
             </thead>
-            <tbody class="divide-y divide-gray-100">
+            <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'] %}
                 <tr class="text-gray-500">
                     <th class="border-t-0 px-4 align-middle text-l font-normal whitespace-nowrap p-4 text-left">
@@ -63,7 +64,7 @@
                             class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2">
                             Edit
                         </a>
-                        <a href="{{ url_for('delete_topset', person_id=workout['PersonId'], workout_id=workout['WorkoutId'], topset_id=t['TopSetId'])}}"
+                        <a hx-delete="{{ url_for('delete_topset', person_id=workout['PersonId'], workout_id=workout['WorkoutId'], topset_id=t['TopSetId'])}}"
                             class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2">
                             Delete
                         </a>
@@ -85,8 +86,8 @@
 <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"
-            action="{{ url_for('create_topset', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
+            hx-post="{{ url_for('create_topset', person_id=workout['PersonId'], workout_id=workout['WorkoutId']) }}"
-            method="post">
+            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">