Add ability to choose graphs to render, speed by default

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>

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 %}

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) }}"