From c71cd0d7b2da38fb571b10cf62f5859c4919d385 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Mon, 20 Mar 2023 22:29:32 +1100
Subject: [PATCH] Replace exercise select in workout modal with tailwind
 elements select component(still need to change it for edit exercise in modal)

---
 templates/partials/workout_modal.html | 34 +++++++++++++--------------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/templates/partials/workout_modal.html b/templates/partials/workout_modal.html
index 16b5c89..3a38086 100644
--- a/templates/partials/workout_modal.html
+++ b/templates/partials/workout_modal.html
@@ -87,22 +87,22 @@
                                     Exercise
                                 </label>
                                 <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="grid-state" name="exercise_id">
-                                        {% for e in workout['Exercises'] %}
-                                        <option value="{{ e['ExerciseId'] }}">{{
-                                            e['Name']}}</option>
-                                        {% endfor %}
-                                    </select>
-                                    <div
-                                        class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2 text-gray-700">
-                                        <svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg"
-                                            viewBox="0 0 20 20">
-                                            <path
-                                                d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z" />
-                                        </svg>
+
+
+                                    <div class="w-full">
+                                        <select id="workout-exercise-select" data-te-select-init
+                                            data-te-select-filter="true" name="exercise_id"
+                                            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">
+                                            {% for e in workout['Exercises'] %}
+                                            <option value="{{ e['ExerciseId'] }}">{{
+                                                e['Name']
+                                                }}</option>
+                                            {% endfor %}
+                                        </select>
                                     </div>
+                                    <script>
+                                        te.Select.getOrCreateInstance(document.querySelector("#workout-exercise-select"));
+                                    </script>
                                 </div>
                             </div>
 
@@ -112,7 +112,7 @@
                                     Reps
                                 </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"
+                                    class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                                     id="grid-city" type="number" name="repetitions">
                             </div>
 
@@ -122,7 +122,7 @@
                                     Weight
                                 </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"
+                                    class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-2 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
                                     id="grid-zip" type="number" name="weight" step="any">
                             </div>
                         </div>