Refactor exercise & person into template partials

app.py

@@ -223,23 +223,7 @@ def delete_topset(person_id, workout_id, topset_id):
 def create_person():
     name = request.form.get("name")
     new_person_id = db.create_person(name)
-    return f"""
+    return render_template('partials/person.html', person_id=new_person_id, name=name), 200, {"HX-Trigger": "updatedPeople"}
-    <tr>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            { name }
-        </td>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <a hx-get="{ url_for('get_person_edit_form', person_id=new_person_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_person', person_id=new_person_id) }"
-               class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                Remove
-            </a>
-        </td>
-    </tr>
-    """, 200, {"HX-Trigger": "updatedPeople"}
 
 
 @ app.route("/person/<int:person_id>/delete", methods=['DELETE'])
@@ -251,144 +235,46 @@ def delete_person(person_id):
 @ app.route("/person/<int:person_id>/edit_form", methods=['GET'])
 def get_person_edit_form(person_id):
     person = db.get_person(person_id)
-    return f"""
+    return render_template('partials/person.html', person_id=person_id, name=person['PersonName'], is_edit=True)
-    <tr>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <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" type="text" name="name" value="{person['PersonName']}">
-        </td>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <a hx-put="{ url_for('update_person_name', person_id=person_id) }"  hx-include="closest tr" 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_person_name', person_id=person_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>
-        </td>
-    </tr>
-    """
 
 
 @ app.route("/person/<int:person_id>/name", methods=['PUT'])
 def update_person_name(person_id):
     new_name = request.form.get("name")
     db.update_person_name(person_id, new_name)
-    return f"""
+    return render_template('partials/person.html', person_id=person_id, name=new_name), 200, {"HX-Trigger": "updatedPeople"}
-    <tr>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            {new_name}
-        </td>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <a hx-get="{ url_for('get_person_edit_form', person_id=person_id) }"  hx-include="closest tr" 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 href="{ url_for('delete_person', person_id=person_id) }" class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                Remove
-            </a>
-        </td>
-    </tr>
-    """, 200, {"HX-Trigger": "updatedPeople"}
 
 
 @ app.route("/person/<int:person_id>/name", methods=['GET'])
 def get_person_name(person_id):
     person = db.get_person(person_id)
-    return f"""
+    return render_template('partials/person.html', person_id=person_id, name=person['PersonName'])
-    <tr>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            {person['PersonName']}
-        </td>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <a hx-get="{ url_for('get_person_edit_form', person_id=person_id) }"  hx-include="closest tr" 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 href="{ url_for('delete_person', person_id=person_id) }" class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                Remove
-            </a>
-        </td>
-    </tr>
-    """
 
 
 @ app.route("/exercise", methods=['POST'])
 def create_exercise():
     name = request.form.get("name")
     new_exercise_id = db.create_exercise(name)
-    return f"""
+    return render_template('partials/exercise.html', exercise_id=new_exercise_id, name=name)
-    <tr>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            {name}
-        </td>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <a hx-get="{ url_for('get_exercise_edit_form', exercise_id=new_exercise_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_exercise', exercise_id=new_exercise_id)}" class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                Remove
-            </a>
-        </td>
-    </tr>
-    """
 
 
 @ app.route("/exercise/<int:exercise_id>", methods=['GET'])
 def get_exercise(exercise_id):
     exercise = db.get_exercise(exercise_id)
-    return f"""
+    return render_template('partials/exercise.html', exercise_id=exercise_id, name=exercise['Name'])
-    <tr>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            {exercise['Name']}
-        </td>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <a hx-get="{ url_for('get_exercise_edit_form', exercise_id=exercise['ExerciseId']) }" 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_exercise', exercise_id=exercise['ExerciseId'])}" class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                Remove
-            </a>
-        </td>
-    </tr>
-    """
 
 
 @ app.route("/exercise/<int:exercise_id>/edit_form", methods=['GET'])
 def get_exercise_edit_form(exercise_id):
     exercise = db.get_exercise(exercise_id)
-    return f"""
+    return render_template('partials/exercise.html', exercise_id=exercise_id, name=exercise['Name'], is_edit=True)
-    <tr>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <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" type="text" name="name" value="{exercise['Name']}">
-        </td>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <a hx-put="{ url_for('update_exercise', exercise_id=exercise['ExerciseId']) }"  hx-include="closest tr" 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_exercise', exercise_id=exercise['ExerciseId'])}" class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                Cancel
-            </a>
-        </td>
-    </tr>
-    """
 
 
 @ app.route("/exercise/<int:exercise_id>/update", methods=['PUT'])
 def update_exercise(exercise_id):
     new_name = request.form.get('name')
     db.update_exercise(exercise_id, new_name)
-    return f"""
+    return render_template('partials/exercise.html', exercise_id=exercise_id, name=new_name)
-    <tr>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            {new_name}
-        </td>
-        <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-            <a hx-get="{ url_for('get_exercise_edit_form', exercise_id=exercise_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_exercise', exercise_id=exercise_id)}" class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                Remove
-            </a>
-        </td>
-    </tr>
-    """
 
 
 @ app.route("/exercise/<int:exercise_id>/delete", methods=['DELETE'])

templates/partials/exercise.html

@@ -0,0 +1,33 @@
+<tr>
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+        {% if is_edit|default(false, true) == false %}
+        {{ name }}
+        {% else %}
+        <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"
+            type="text" name="name" value="{{ name }}">
+        {% endif %}
+    </td>
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+        {% if is_edit|default(false, true) == false %}
+        <a hx-get="{{ url_for('get_exercise_edit_form', exercise_id=exercise_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_exercise', exercise_id=exercise_id) }}"
+            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
+            Remove
+        </a>
+        {% else %}
+        <a hx-put="{{ url_for('update_exercise', exercise_id=exercise_id) }}" hx-include="closest tr"
+            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_exercise', exercise_id=exercise_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/partials/person.html

@@ -0,0 +1,33 @@
+<tr>
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+        {% if is_edit|default(false, true) == false %}
+        {{ name }}
+        {% else %}
+        <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"
+            type="text" name="name" value="{{ name }}">
+        {% endif %}
+    </td>
+    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+        {% if is_edit|default(false, true) == false %}
+        <a hx-get="{{ url_for('get_person_edit_form', person_id=person_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_person', person_id=person_id) }}"
+            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
+            Remove
+        </a>
+        {% else %}
+        <a hx-put="{{ url_for('update_person_name', person_id=person_id) }}" hx-include="closest tr"
+            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_person_name', person_id=person_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/settings.html

@@ -29,21 +29,8 @@
                             <tbody class="bg-white" id="new-person" hx-target="closest tr"
                                 hx-swap="outerHTML swap:0.5s">
                                 {% for p in people %}
-                                <tr>
+                                {{ render_partial('partials/person.html', person_id=p['PersonId'],
-                                    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+                                name=p['Name'])}}
-                                        {{ p['Name'] }}
-                                    </td>
-                                    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-                                        <a hx-get="{{ url_for('get_person_edit_form', person_id=p['PersonId']) }}"
-                                            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_person', person_id=p['PersonId']) }}"
-                                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                                            Remove
-                                        </a>
-                                    </td>
-                                </tr>
                                 {% endfor %}
                             </tbody>
                         </table>
@@ -107,21 +94,8 @@
                             <tbody class="bg-white" id="new-exercise" hx-target="closest tr"
                                 hx-swap="outerHTML swap:0.5s">
                                 {% for e in exercises %}
-                                <tr>
+                                {{ render_partial('partials/exercise.html', exercise_id=e['ExerciseId'],
-                                    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
+                                name=e['Name'])}}
-                                        {{ e['Name'] }}
-                                    </td>
-                                    <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
-                                        <a hx-get="{{ url_for('get_exercise_edit_form', exercise_id=e['ExerciseId']) }}"
-                                            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_exercise', exercise_id=e['ExerciseId']) }}"
-                                            class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
-                                            Remove
-                                        </a>
-                                    </td>
-                                </tr>
                                 {% endfor %}
                             </tbody>
                         </table>