Implement logic for rendering selected top set from database

app.py

@@ -46,7 +46,29 @@ def show_workout_for_person(person_id, workout_id):
 
 @app.route("/person/<int:person_id>/workout/<int:workout_id>/topset/<int:topset_id>")
 def show_topset_from_workout_for_person(person_id, workout_id, topset_id):
-    return render_template('topset.html', person_id=person_id, workout_id=workout_id, topset_id=topset_id)
+    topset = query_db("""
+        SELECT
+            P.Name,
+            W.StartDate,
+            E.ExcerciseId,
+            E.Name,
+            T.Repetitions,
+            T.Weight
+        FROM
+            Person P
+            LEFT JOIN Workout W ON P.PersonId = W.PersonId
+            INNER JOIN TopSet T ON W.WorkoutId = T.WorkoutId
+            INNER JOIN Excercise E ON T.ExcerciseId = E.ExcerciseId
+        WHERE
+            P.PersonId = ?
+            AND W.WorkoutId = ?
+            AND T.TopSetId = ?""",
+                      [person_id, workout_id, topset_id], one=True)
+
+    if topset is None:
+        return render_template('error.html', error='404', message=f'Unable to find TopSet({topset_id}) in Workout({workout_id}) completed by Person({person_id})')
+
+    return render_template('topset.html', topset=topset, exercises=query_db('select * from Excercise'))
 
 
 @app.teardown_appcontext

templates/error.html

@@ -0,0 +1,23 @@
+{% extends 'base.html' %}
+
+{% block content %}
+
+<div class="p-4 sm:p-6 xl:p-8">
+
+    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
+        <strong class="font-bold">Error: {{ error }}</strong>
+        <span class="block sm:inline">{{ message }}</span>
+        <a class="absolute top-0 bottom-0 right-0 px-4 py-3" href="/">
+            <svg class="fill-current h-6 w-6 text-red-500" role="button" xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 20 20">
+                <title>Close</title>
+                <path
+                    d="M14.348 14.849a1.2 1.2 0 0 1-1.697 0L10 11.819l-2.651 3.029a1.2 1.2 0 1 1-1.697-1.697l2.758-3.15-2.759-3.152a1.2 1.2 0 1 1 1.697-1.697L10 8.183l2.651-3.031a1.2 1.2 0 1 1 1.697 1.697l-2.758 3.152 2.758 3.15a1.2 1.2 0 0 1 0 1.698z" />
+            </svg>
+        </a>
+    </div>
+
+</div>
+
+
+{% endblock %}

templates/topset.html

@@ -6,8 +6,8 @@
 
     <div class="mb-4 flex items-center justify-between">
         <div>
-            <h3 class="text-xl font-bold text-gray-900 mb-2">Gabe</h3>
-            <span class="text-base font-normal text-gray-500">Apr 23 ,2021</span>
+            <h3 class="text-xl font-bold text-gray-900 mb-2">{{ topset['Name'] }}</h3>
+            <span class="text-base font-normal text-gray-500">{{ topset['StartDate'] }}</span>
         </div>
         <a href="#" class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2">
             Delete topset
@@ -29,9 +29,11 @@
                         <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">
-                            <option value="1">Squats</option>
-                            <option value="2">Bench</option>
-                            <option value="3">Deadlift</option>
+                            {% for e in exercises %}
+                            <option value="{{ e['ExcerciseId'] }}" {% if topset['ExcerciseId']==e['ExcerciseId'] %}
+                                selected {% endif %}>{{
+                                e['Name']}}</option>
+                            {% endfor %}
                         </select>
                         <div
                             class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
@@ -48,7 +50,7 @@
                     </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">
+                        id="grid-city" type="number" value="{{ topset['Repetitions']}}">
                 </div>
 
                 <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
@@ -57,7 +59,7 @@
                     </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">
+                        id="grid-zip" type="number" value="{{ topset['Weight']}}">
                 </div>
             </div>
             <button