From 699390c28a8b8c766dca9e5d66a0af1a4b3cda76 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 16 Mar 2023 23:09:37 +1100
Subject: [PATCH] Add ability to choose graphs to render, speed by default

---
 app.py                            |  7 +++++++
 templates/users_and_workouts.html | 21 ++++++++++++++++++++-
 templates/workout_view.html       | 21 +++++++++++++++++++++
 templates/workouts_list.html      | 11 +++++++----
 4 files changed, 55 insertions(+), 5 deletions(-)
 create mode 100644 templates/workout_view.html

diff --git a/app.py b/app.py
index cca91ae..0cf03f0 100644
--- a/app.py
+++ b/app.py
@@ -157,6 +157,13 @@ def workout(user_id, workout_id, graph_type):
         return jsonify({'message': 'Workout {} not found for user {}.'.format(workout_id, user_id)}), 404
 
 
+@app.route('/user/<int:user_id>/workout/<int:workout_id>/view', methods=['GET'])
+def view_workout(user_id, workout_id):
+    workout = Workout.query.filter_by(user_id=user_id, id=workout_id).first()
+    graph_types = request.args.getlist('graph_types')
+    return render_template('workout_view.html', workout=workout, graph_types=graph_types)
+
+
 @app.route('/user/<int:user_id>/workout/<int:workout_id>/delete', methods=['DELETE'])
 def delete_workout(user_io, workout_id):
     # Delete the workout and its associated cadence readings
diff --git a/templates/users_and_workouts.html b/templates/users_and_workouts.html
index bdb9bdb..8e74913 100644
--- a/templates/users_and_workouts.html
+++ b/templates/users_and_workouts.html
@@ -5,7 +5,24 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Cardio Tracker</title>
-    <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet" />
+    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tw-elements/dist/css/index.min.css" />
+    <script src="https://cdn.tailwindcss.com/3.2.4"></script>
+    <script>
+        tailwind.config = {
+            darkMode: "class",
+            theme: {
+                fontFamily: {
+                    sans: ["Roboto", "sans-serif"],
+                    body: ["Roboto", "sans-serif"],
+                    mono: ["ui-monospace", "monospace"],
+                },
+            },
+            corePlugins: {
+                preflight: false,
+            },
+        };
+    </script>
     <script src="https://unpkg.com/htmx.org"></script>
 </head>
 
@@ -49,6 +66,8 @@
             </div>
         </div>
     </div>
+    <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
+
 </body>
 
 </html>
\ No newline at end of file
diff --git a/templates/workout_view.html b/templates/workout_view.html
new file mode 100644
index 0000000..0005b60
--- /dev/null
+++ b/templates/workout_view.html
@@ -0,0 +1,21 @@
+<div class="flex justify-center pt-4 px-4">
+    <div class="mb-3 w-full md:w-1/3">
+        <select id="multiSelection" data-te-select-init name="graph_types" class="mx-auto w-full" multiple
+            hx-trigger="change" hx-get="{{ url_for('view_workout', user_id=workout.user_id, workout_id=workout.id) }}"
+            hx-target="#workout_view">
+            <option value="cadence" {% if 'cadence' in graph_types %} selected {% endif%}>Cadence</option>
+            <option value="speed" {% if 'speed' in graph_types %} selected {% endif%}>Speed</option>
+            <option value="power" {% if 'power' in graph_types %} selected {% endif%}>Power</option>
+            <option value="distance" {% if 'distance' in graph_types %} selected {% endif%}>Distance</option>
+            <option value="calories" {% if 'calories' in graph_types %} selected {% endif%}>Calories</option>
+        </select>
+    </div>
+</div>
+<script>
+    te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ graph_types| safe }});
+</script>
+
+{% for graph_type in graph_types %}
+<img src="{{ url_for('workout', user_id=workout.user_id, workout_id=workout.id, graph_type=graph_type) }}"
+    loading="lazy" alt="No image" class="mx-auto">
+{% endfor %}
\ No newline at end of file
diff --git a/templates/workouts_list.html b/templates/workouts_list.html
index d027378..c4ff3e0 100644
--- a/templates/workouts_list.html
+++ b/templates/workouts_list.html
@@ -19,16 +19,19 @@
         </button>
     </h2>
     <div class="!visible collapse {% if loop.index  != 1 %}hidden{% endif %}">
+        <!--
         <img src="{{ url_for('workout', user_id=w.user_id, workout_id=w.id, graph_type='cadence') }}" loading="lazy"
             alt="No image" class="mx-auto">
         <img src="{{ url_for('workout', user_id=w.user_id, workout_id=w.id, graph_type='speed') }}" loading="lazy"
             alt="No image" class="mx-auto">
-        <img src="{{ url_for('workout', user_id=w.user_id, workout_id=w.id, graph_type='distance') }}" loading="lazy"
-            alt="No image" class="mx-auto">
-        <img src="{{ url_for('workout', user_id=w.user_id, workout_id=w.id, graph_type='calories') }}" loading="lazy"
-            alt="No image" class="mx-auto">
         <img src="{{ url_for('workout', user_id=w.user_id, workout_id=w.id, graph_type='power') }}" loading="lazy"
             alt="No image" class="mx-auto">
+        -->
+        <div id="workout_view">
+            {% with workout=w, graph_types=['speed'] %}
+            {% include 'workout_view.html' %}
+            {% endwith %}
+        </div>
         <button
             class="mx-4 mb-4 bg-gray-300 hover:bg-gray-400 text-gray-800 font-bold py-2 px-4 rounded inline-flex items-center"
             hx-delete="{{ url_for('delete_workout', user_id=w.user_id, workout_id=w.id) }}"