From dc13b05420d49dc047d97475538646e6b86eec8c Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Fri, 20 Oct 2023 20:04:07 +1100
Subject: [PATCH] Rename some templates and convert remaining js to hyperscript

---
 app.py                                                |  2 +-
 templates/{users_and_workouts.html => overview.html}  |  9 ++-------
 templates/users.html                                  |  8 ++++----
 ...outs_wrapper.html => users_and_workouts_list.html} |  0
 templates/workout_view.html                           | 11 +++++------
 templates/workouts_list.html                          | 10 +++++-----
 6 files changed, 17 insertions(+), 23 deletions(-)
 rename templates/{users_and_workouts.html => overview.html} (87%)
 rename templates/{users_and_workouts_wrapper.html => users_and_workouts_list.html} (100%)

diff --git a/app.py b/app.py
index 66757fd..8f4d99b 100644
--- a/app.py
+++ b/app.py
@@ -330,7 +330,7 @@ def render_users_and_workouts():
     users_data = [generate_user_data(user, get_workouts_for_user_view_data(
         user)) for user in users]
 
-    template_name = 'users_and_workouts_wrapper.html' if htmx else 'users_and_workouts.html'
+    template_name = 'users_and_workouts_list.html' if htmx else 'overview.html'
     return render_template(template_name, users=users_data, bikes=Bike.query.all())
 
 
diff --git a/templates/users_and_workouts.html b/templates/overview.html
similarity index 87%
rename from templates/users_and_workouts.html
rename to templates/overview.html
index a301c1e..9b62977 100644
--- a/templates/users_and_workouts.html
+++ b/templates/overview.html
@@ -37,7 +37,7 @@
                         <div class="flex py-3">
 
                             <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 640 512"
-                                class="w-9 h-9 mr-2"><!--! Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
+                                class="w-9 h-9 mr-2">
                                 <path
                                     d="M312 32c-13.3 0-24 10.7-24 24s10.7 24 24 24h25.7l34.6 64H222.9l-27.4-38C191 99.7 183.7 96 176 96H120c-13.3 0-24 10.7-24 24s10.7 24 24 24h43.7l22.1 30.7-26.6 53.1c-10-2.5-20.5-3.8-31.2-3.8C57.3 224 0 281.3 0 352s57.3 128 128 128c65.3 0 119.1-48.9 127-112h49c8.5 0 16.3-4.5 20.7-11.8l84.8-143.5 21.7 40.1C402.4 276.3 384 312 384 352c0 70.7 57.3 128 128 128s128-57.3 128-128s-57.3-128-128-128c-13.5 0-26.5 2.1-38.7 6L375.4 48.8C369.8 38.4 359 32 347.2 32H312zM458.6 303.7l32.3 59.7c6.3 11.7 20.9 16 32.5 9.7s16-20.9 9.7-32.5l-32.3-59.7c3.6-.6 7.4-.9 11.2-.9c39.8 0 72 32.2 72 72s-32.2 72-72 72s-72-32.2-72-72c0-18.6 7-35.5 18.6-48.3zM133.2 368h65c-7.3 32.1-36 56-70.2 56c-39.8 0-72-32.2-72-72s32.2-72 72-72c1.7 0 3.4 .1 5.1 .2l-24.2 48.5c-9 18.1 4.1 39.4 24.3 39.4zm33.7-48l50.7-101.3 72.9 101.2-.1 .1H166.8zm90.6-128H365.9L317 274.8 257.4 192z">
                                 </path>
@@ -57,13 +57,8 @@
     <div class="max-w-4xl  mx-auto mt-8">
         <div class="flex flex-col justify-between">
             <div class="w-full px-4 mb-8">
-
                 <div class="shadow-md rounded-lg overflow-hidden" id="users-container">
-                    {% with users=users, bikes=bikes %}
-                    {% include 'users_and_workouts_wrapper.html' %}
-                    {% endwith %}
-
-
+                    {{ render_partial('users_and_workouts_list.html', users=users, bikes=bikes) }}
                 </div>
             </div>
             <div class="w-full px-4 mb-8" id="container">
diff --git a/templates/users.html b/templates/users.html
index 627f5d8..feedc98 100644
--- a/templates/users.html
+++ b/templates/users.html
@@ -17,14 +17,14 @@
             <div class="relative ml-0">
                 <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="new-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id" required>
+                    data-te-select-init data-te-select-size="lg" name="bike_id" required _="init js(me)
+                        te.Select.getOrCreateInstance(me)
+                    end">
                     {% for b in bikes %}
                     <option value="{{ b.id }}">{{ b.display_name }}</option>
                     {% endfor %}
                 </select>
-                <script>
-                    te.Select.getOrCreateInstance(document.querySelector("#new-bike-select"));
-                </script>
+
             </div>
         </div>
 
diff --git a/templates/users_and_workouts_wrapper.html b/templates/users_and_workouts_list.html
similarity index 100%
rename from templates/users_and_workouts_wrapper.html
rename to templates/users_and_workouts_list.html
diff --git a/templates/workout_view.html b/templates/workout_view.html
index aefc26a..1744bd2 100644
--- a/templates/workout_view.html
+++ b/templates/workout_view.html
@@ -1,8 +1,10 @@
 <div class="flex justify-center pt-4 px-4">
     <div class="mb-3 w-full md:w-1/3">
-        <select id="multiSelection-{{ workout.id }}" 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-{{ workout.id }}">
+        <select 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-{{ workout.id }}" _="init js(me)
+                    te.Select.getOrCreateInstance(me).setValue({{ graph_types | safe }})
+                end">
             <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>
@@ -12,9 +14,6 @@
         </select>
     </div>
 </div>
-<script>
-    te.Select.getOrCreateInstance(document.querySelector("#multiSelection-{{ workout.id }}")).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) }}"
diff --git a/templates/workouts_list.html b/templates/workouts_list.html
index 4b371e1..415aae8 100644
--- a/templates/workouts_list.html
+++ b/templates/workouts_list.html
@@ -23,16 +23,16 @@
             <div class="relative">
                 <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="user-{{ user.id }}-bike-select" data-te-select-init data-te-select-size="lg" name="bike_id"
-                    required hx-get="{{ url_for('update_users_bike', user_id=user.id) }}" hx-target="#users-container">
+                    data-te-select-init data-te-select-size="lg" name="bike_id" required
+                    hx-get="{{ url_for('update_users_bike', user_id=user.id) }}" hx-target="#users-container" _="init js(me)
+                        te.Select.getOrCreateInstance(me).setValue('{{ user.bike_id | safe }}')
+                    end">
                     {% for b in bikes %}
                     <option value="{{ b.id }}" {% if user.bike_id==b.id %} selected {% endif %}>{{ b.display_name }}
                     </option>
                     {% endfor %}
                 </select>
-                <script>
-                    te.Select.getOrCreateInstance(document.querySelector("#user-{{ user.id }}-bike-select")).setValue("{{ user.bike_id | safe }}");
-                </script>
+
             </div>
         </div>
         <a class="shadow mt-6 bg-purple-500 hover:bg-purple-400 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded w-full ml-0 md:ml-4 text-center	"