WIP: Add option to toggle graphs (havent yet added axis filter)

app.py

@@ -83,6 +83,8 @@ def get_person(person_id):
     max_date = convert_str_to_date(request.args.get(
         'max_date'), '%Y-%m-%d') or max_date
 
+    graph_axis = request.args.getlist('graph_axis') or []
+
     selected_exercise_ids = [int(i)
                              for i in request.args.getlist('exercise_id')]
     if not selected_exercise_ids and htmx.trigger_name != 'exercise_id':
@@ -114,13 +116,16 @@ def get_person(person_id):
         if topsets_for_exercise:
             repitions = [t['Repetitions'] for t in topsets_for_exercise]
             weights = [t['Weight'] for t in topsets_for_exercise]
+            estimated_one_rep_max = [t['Estimated1RM']
+                                     for t in topsets_for_exercise]
             start_dates = [t['StartDate'].strftime(
                 "%Y-%m-%d") for t in topsets_for_exercise]
             exercise_view_model = {
                 'ExerciseId': exercise_id,
                 'ExerciseName': topsets_for_exercise[0]['ExerciseName'],
-                'Repititions': repitions[::-1],
+                'Repetitions': repitions[::-1],
                 'Weights': weights[::-1],
+                'Estimated1RM': estimated_one_rep_max[::-1],
                 'StartDates': start_dates[::-1]
             }
             exercise_graph_view_models.append(exercise_view_model)
@@ -128,9 +133,9 @@ def get_person(person_id):
 
     if htmx:
         return render_template('partials/page/person.html',
-                               person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date, tags=tags), 200, {"HX-Trigger": "updatedPeople"}
+                               person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date, tags=tags, graph_axis=graph_axis), 200, {"HX-Trigger": "updatedPeople"}
 
-    return render_template('person.html', person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date, tags=tags), 200, {"HX-Trigger": "updatedPeople"}
+    return render_template('person.html', person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date, tags=tags, graph_axis=graph_axis), 200, {"HX-Trigger": "updatedPeople"}
 
 
 @ app.route("/person/<int:person_id>/calendar")

db.py

@@ -158,7 +158,8 @@ class DataBase():
                 E.exercise_id AS "ExerciseId",
                 E.name AS "ExerciseName",
                 T.repetitions AS "Repetitions",
-                T.weight AS "Weight"
+                T.weight AS "Weight",
+                round((100 * T.Weight::numeric::integer)/(101.3-2.67123 * T.Repetitions),0)::numeric::integer AS "Estimated1RM"
             FROM Person P
                 LEFT JOIN Workout W ON P.person_id=W.person_id
                 LEFT JOIN TopSet T ON W.workout_id=T.workout_id

templates/partials/page/person.html

@@ -34,7 +34,7 @@
         </div>
 
         <div class="flex flex-wrap -mx-3 mb-1">
-            <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+            <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
                 <div class="mb-1 w-full">
                     <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
                         Exercises
@@ -42,7 +42,7 @@
                     <select id="multiSelection" data-te-select-init data-te-select-filter="true"
                         data-te-select-size="lg" name="exercise_id" class="bg-gray-50 border border-gray-300 " multiple
                         hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
-                        hx-include="[name='min_date'],[name='max_date']" hx-target="#container" hx-push-url="true">
+                        hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-target="#container" hx-push-url="true">
                         {% for e in person['Exercises'] %}
                         <option value="{{ e['ExerciseId'] }}" {{ in_list(e['ExerciseId'],
                             selected_exercise_ids, 'selected' ) }}>{{
@@ -55,7 +55,7 @@
                     te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ list_to_string(selected_exercise_ids) | safe }});
                 </script>
             </div>
-            <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+            <div class="w-full md:w-1/4 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">
                     Min date
                 </label>
@@ -72,11 +72,11 @@
                         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"
                         name="min_date" value="{{ min_date }}"
                         hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
-                        hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
+                        hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-target="#container"
                         hx-push-url="true" hx-trigger="change">
                 </div>
             </div>
-            <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
+            <div class="w-full md:w-1/4 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">
                     Max date
                 </label>
@@ -93,10 +93,28 @@
                         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"
                         name="max_date" value="{{ max_date }}"
                         hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
-                        hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
+                        hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-target="#container"
                         hx-push-url="true" hx-trigger="change">
                 </div>
             </div>
+            <div class="w-full md:w-1/4 px-3 mb-6 md:mb-0">
+                <div class="mb-1 w-full">
+                    <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
+                        Graph Axis
+                    </label>
+                    <select id="graph-axis-multiselect" data-te-select-init data-te-select-filter="true"
+                        data-te-select-size="lg" name="graph_axis" class="bg-gray-50 border border-gray-300 " multiple
+                        hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
+                        hx-include="[name='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']" hx-target="#container" hx-push-url="true">
+                        <option value="repetitions">Repetitions</option>
+                        <option value="weight">Weigh</option>
+                        <option value="estimated1rm">Estimated 1RM</option>
+                    </select>
+                </div>
+                <script>
+                    te.Select.getOrCreateInstance(document.querySelector("#graph-axis-multiselect")).setValue({{ graph_axis | safe }});
+                </script>
+            </div>
         </div>
 
         {% with person_id=person['PersonId'], tags=tags %}
@@ -166,6 +184,7 @@
     </div>
 </div>
 
+{% if graph_axis %}
 <div class="mt-4 mb-4 w-full grid grid-cols-1 2xl:grid-cols-2 gap-4">
     {% for exercise_graph in person['ExerciseGraphs'] %}
     <div class="bg-white shadow rounded-lg p-4 sm:p-6 xl:p-8 ">
@@ -179,7 +198,7 @@
             Plotly.newPlot("e-{{ exercise_graph['ExerciseId'] }}", [
                 {
                     x: {{ exercise_graph['StartDates'] | replace('"', "'") | safe }},
-                    y: {{ exercise_graph['Repititions'] | replace('"', "'") | safe }},
+                    y: {{ exercise_graph['Repetitions'] | replace('"', "'") | safe }},
                     name: 'Reps',
                     type: 'scatter'
                 },
@@ -222,6 +241,7 @@
     </div>
     {% endfor %}
 </div>
+{% endif %}
 
 {{ render_partial('partials/stats.html', stats=person['Stats']) }}
 

templates/person.html

@@ -4,6 +4,6 @@
 
 {{ render_partial('partials/page/person.html',
 person=person, selected_exercise_ids=selected_exercise_ids, max_date=max_date,
-min_date=min_date, tags=tags) }}
+min_date=min_date, tags=tags, graph_axis=graph_axis) }}
 
 {% endblock %}