Refactorr topset into template partial

app.py

@@ -120,25 +120,7 @@ def get_workout_start_date(person_id, workout_id):
 @ validate_topset
 def get_topset(person_id, workout_id, topset_id):
     topset = db.get_topset(person_id, workout_id, topset_id)
-    return f"""
+    return render_template('partials/person.html', topset=topset, exercises=exercises)
-    <tr class="text-gray-500">
-                    <th class="border-t-0 px-4 align-middle text-l font-normal whitespace-nowrap p-4 text-left">
-                        { topset['ExerciseName'] }</th>
-                    </th>
-                    <td class="border-t-0 px-4 align-middle text-l font-medium text-gray-900 whitespace-nowrap p-4">
-                        { topset['Repetitions'] } x { topset['Weight'] }kg</td>
-                    <td class="border-t-0 px-4 align-middle text-xs whitespace-nowrap p-4">
-                        <a hx-get="{ url_for('get_topset_edit_form',person_id=person_id, workout_id=workout_id, topset_id=topset_id) }"
-                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                            Edit
-                        </a>
-                        <a hx-delete="{ url_for('delete_topset', person_id=person_id, workout_id=workout_id, topset_id=topset_id) }"
-                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                            Delete
-                        </a>
-                    </td>
-                </tr>
-    """
 
 
 @ app.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>/edit_form", methods=['GET'])
@@ -146,7 +128,7 @@ def get_topset(person_id, workout_id, topset_id):
 def get_topset_edit_form(person_id, workout_id, topset_id):
     exercises = db.get_exercises()
     topset = db.get_topset(person_id, workout_id, topset_id)
-    return render_template('partials/topset.html', topset=topset, exercises=exercises)
+    return render_template('partials/topset.html', person_id=person_id, workout_id=workout_id, topset_id=topset_id, exercises=exercises, repetitions=topset['Repetitions'], weight=topset['Weight'], is_edit=True)
 
 
 @ app.route("/person/<int:person_id>/workout/<int:workout_id>/topset", methods=['POST'])
@@ -156,29 +138,11 @@ def create_topset(person_id, workout_id):
     repetitions = request.form.get("repetitions")
     weight = request.form.get("weight")
 
-    new_top_set_id = db.create_topset(
+    new_topset_id = db.create_topset(
         workout_id, exercise_id, repetitions, weight)
     exercise = db.get_exercise(exercise_id)
 
-    return f"""
+    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)
-    <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_edit_form', 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 cursor-pointer">
-                            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 cursor-pointer">
-                            Delete
-                        </a>
-                    </td>
-    </tr>
-    """
 
 
 @ app.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>", methods=['PUT'])
@@ -191,25 +155,7 @@ def update_topset(person_id, workout_id, topset_id):
     db.update_topset(exercise_id, repetitions, weight, topset_id)
     exercise = db.get_exercise(exercise_id)
 
-    return f"""
+    return render_template('partials/topset.html', person_id=person_id, workout_id=workout_id, topset_id=topset_id, exercise_name=exercise['Name'], repetitions=repetitions, weight=weight)
-    <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 hx-get="{ url_for('get_topset_edit_form', person_id=person_id, workout_id=workout_id, topset_id=topset_id) }"
-                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                            Edit
-                        </a>
-                        <a hx-delete="{ url_for('delete_topset', person_id=person_id, workout_id=workout_id, topset_id=topset_id)}"
-                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                            Delete
-                        </a>
-                    </td>
-    </tr>
-    """
 
 
 @ app.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>/delete", methods=['DELETE'])

templates/partials/topset.html

@@ -1,36 +1,56 @@
-<tr class="text-gray-500">
+<tr>
-    <th class="border-t-0 px-4 align-middle text-l font-normal whitespace-nowrap p-4 text-left">
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+        {% if is_edit|default(false, true) == false %}
+        {{ exercise_name }}
+        {% else %}
         <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">
+            name="exercise_id">
-            {% for exercise in exercises %}
+            {% for exercise in exercises|default([], true) %}
-            <option value="{{ exercise['ExerciseId'] }}" {% if topset['ExerciseId']==exercise['ExerciseId'] %} selected
+            <option value="{{ exercise['ExerciseId'] }}" {% if exercise['ExerciseId']==exercise_id %} selected {% endif
-                {% endif %}>{{
+                %}>{{
                 exercise['Name']}}</option>
             {% endfor %}
         </select>
-    </th>
+        {% endif %}
-    <td class="border-t-0 px-4 align-middle text-l font-medium text-gray-900 whitespace-nowrap p-4">
+    </td>
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+        {% if is_edit|default(false, true) == false %}
+        {{ repetitions }} x {{ weight }}kg
+        {% else %}
         <div class="flex items-center">
             <input type="number"
                 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="repetitions" value="{{ topset['Repetitions'] }}">
+                name="repetitions" value="{{ repetitions }}">
             <p class="px-2">x</p>
             <input type="number"
                 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="weight" value="{{ topset['Weight'] }}">
+                name="weight" value="{{ weight }}">
             <p class="px-2">kg</p>
         </div>
+        {% endif %}
     </td>
-    <td class="border-t-0 px-4 align-middle text-xs whitespace-nowrap p-4">
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-        <a hx-put="{{ url_for('update_topset', person_id=topset['PersonId'], workout_id=topset['WorkoutId'], topset_id=topset['TopSetId']) }}"
+        {% if is_edit|default(false, true) == false %}
+        <a hx-get="{{ url_for('get_topset_edit_form',person_id=person_id, workout_id=workout_id, topset_id=topset_id) }}"
+            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
+            Edit
+        </a>
+        <a hx-delete="{{ url_for('delete_topset', person_id=person_id, workout_id=workout_id, topset_id=topset_id) }}"
+            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
+            Delete
+        </a>
+        {% else %}
+        <a hx-put="{{ url_for('update_topset', person_id=person_id, workout_id=workout_id, topset_id=topset_id) }}"
             hx-include="[name='exercise_id'], [name='repetitions'], [name='weight']"
             class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
             Update
         </a>
-        <a hx-get="{{ url_for('get_topset', person_id=topset['PersonId'], workout_id=topset['WorkoutId'], topset_id=topset['TopSetId']) }}"
+        <a hx-get="{{ url_for('get_topset', person_id=person_id, workout_id=workout_id, topset_id=topset_id) }}"
             class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
             Cancel
         </a>
+        {% endif %}
+
     </td>
 </tr>

templates/workout.html

@@ -52,23 +52,10 @@
             <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">
+                {{ render_partial('partials/topset.html', person_id=workout['PersonId'],
-                    <th class="border-t-0 px-4 align-middle text-l font-normal whitespace-nowrap p-4 text-left">
+                workout_id=workout['WorkoutId'],
-                        {{ t['ExerciseName'] }}</th>
+                topset_id=t['TopSetId'], exercise_name=t['ExerciseName'], repetitions=t['Repetitions'],
-                    </th>
+                weight=t['Weight']) }}
-                    <td class="border-t-0 px-4 align-middle text-l font-medium text-gray-900 whitespace-nowrap p-4">
-                        {{ t['Repetitions'] }} x {{ t['Weight'] }}kg</td>
-                    <td class="border-t-0 px-4 align-middle text-xs whitespace-nowrap p-4">
-                        <a hx-get="{{ url_for('get_topset_edit_form', 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 cursor-pointer">
-                            Edit
-                        </a>
-                        <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 cursor-pointer">
-                            Delete
-                        </a>
-                    </td>
-                </tr>
                 {% endfor %}
             </tbody>
         </table>