From ec35b78afd528ac5c40ac79af8aca621f8e2f380 Mon Sep 17 00:00:00 2001
From: Peter Stockings <pstockings@jadeworld.com>
Date: Thu, 17 Aug 2023 20:38:22 +1000
Subject: [PATCH] Switch to using hyperscript to initialise tailwind
 elements(select) and graphs(Plotly), this removes script tags and ids

---
 app.py                                |  5 +++++
 templates/calendar.html               |  9 ++++----
 templates/dashboard.html              | 30 +++++++++++++--------------
 templates/partials/topset.html        | 11 +++++-----
 templates/partials/workout_modal.html | 12 +++++------
 templates/partials/workout_tags.html  | 12 +++++------
 templates/person.html                 | 30 +++++++++++++--------------
 7 files changed, 56 insertions(+), 53 deletions(-)

diff --git a/app.py b/app.py
index 44db8dd..783aabc 100644
--- a/app.py
+++ b/app.py
@@ -439,6 +439,11 @@ def get_first_element_from_list_with_matching_attribute(list, attribute, value):
     return None
 
 
+@app.template_filter('replace_double_quote_strings_with_single_quote')
+def replace_double_quote_strings_with_single_quote(str):
+    return str.replace('"', "'")
+
+
 @ app.context_processor
 def my_utility_processor():
 
diff --git a/templates/calendar.html b/templates/calendar.html
index 76d3b26..5680068 100644
--- a/templates/calendar.html
+++ b/templates/calendar.html
@@ -41,16 +41,15 @@
         </div>
 
         <div class="mr-4">
-            <select id="workout-view-picker" data-te-select-init data-te-select-size="lg" name="view"
+            <select data-te-select-init data-te-select-size="lg" name="view"
                 hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
-                hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true">
+                hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true" _="init js(me)
+                    te.Select.getOrCreateInstance(me).setValue('{{ selected_view | safe }}')
+                end">
                 <option value="month" {% if selected_view=='month' %}selected{% endif %}>Month</option>
                 <option value="year" {% if selected_view=='year' %}selected{% endif %}>Year</option>
                 <option value="all">All</option>
             </select>
-            <script>
-                window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("{{ selected_view | safe }}"));
-            </script>
         </div>
     </div>
 
diff --git a/templates/dashboard.html b/templates/dashboard.html
index 92494d4..0d826b1 100644
--- a/templates/dashboard.html
+++ b/templates/dashboard.html
@@ -13,7 +13,9 @@
                         <select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
                             data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
                             hx-include="[name='min_date'],[name='max_date'],[name='exercise_id']" hx-push-url="true"
-                            hx-target="#container" id="dashboard-people-multi-select" multiple="" name="person_id">
+                            hx-target="#container" multiple="" name="person_id" _="init js(me)
+                                te.Select.getOrCreateInstance(me).setValue({{ selected_person_ids | list_to_string | safe}})
+                            end">
                             {% for p in people %}
                             <option value="{{ p['PersonId'] }}">{{
                                 p['Name']
@@ -22,7 +24,6 @@
                         </select>
                     </div>
                 </div>
-                <script>window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#dashboard-people-multi-select")).setValue({{ selected_person_ids | list_to_string | safe}}))</script>
             </div>
         </div>
         <div class="w-full lg:w-1/4 sm:w-full px-3 mb-6 md:mb-0">
@@ -34,7 +35,9 @@
                         <select class="bg-gray-50 border border-gray-300 hidden" data-te-select-filter="true"
                             data-te-select-init="" data-te-select-size="lg" hx-get="{{ url_for('dashboard') }}"
                             hx-include="[name='min_date'],[name='max_date'],[name='person_id']" hx-push-url="true"
-                            hx-target="#container" id="dashboard-exercise-multi-select" multiple="" name="exercise_id">
+                            hx-target="#container" multiple="" name="exercise_id" _="init js(me)
+                                te.Select.getOrCreateInstance(me).setValue({{ selected_exercise_ids | list_to_string | safe}})
+                            end">
                             {% for e in exercises %}
                             <option value="{{ e['ExerciseId'] }}">{{
                                 e['Name']
@@ -43,7 +46,6 @@
                         </select>
                     </div>
                 </div>
-                <script> window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#dashboard-exercise-multi-select")).setValue({{ selected_exercise_ids | list_to_string | safe}}))</script>
             </div>
         </div>
         <div class="w-full lg:w-1/4 sm:w-full  px-3 mb-6 md:mb-0"><label
@@ -126,17 +128,15 @@
                     <div class="shadow overflow-hidden sm:rounded-lg">
                         <h4 class="text-l font-semibold text-blue-400 mb-2 text-center">{{ e['ExerciseName'] }}</h4>
                         {% if e['RepMaxes']|length > 1 %}
-                        <div id="person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"
-                            class="w-full mt-2 aspect-video"></div>
-                        <script>
-                            window.addEventListener('DOMContentLoaded', _ => Plotly.newPlot(document.getElementById("person-{{ p['PersonId'] }}-exercise-{{ e['ExerciseId'] }}"), [{
-                                x: {{ e['EstimatedOneRepMaxProgressions']['StartDates'] | replace('"', "'") | safe }},
-                                y: {{ e['EstimatedOneRepMaxProgressions']['Estimated1RMs'] | replace('"', "'") | safe }},
-                                text: {{ e['EstimatedOneRepMaxProgressions']['TopSets'] | replace('"', "'") | safe }},
-                                name: "{{ p['PersonName'] }} - {{ e['ExerciseName'] }}",
-                                hovertemplate
-                            }], layout, config));
-                        </script>
+                        <div class="w-full mt-2 aspect-video" _="init js(me)
+                                Plotly.newPlot(me, [{
+                                    x: {{ e['EstimatedOneRepMaxProgressions']['StartDates'] | replace_double_quote_strings_with_single_quote | safe }}, 
+                                    y: {{ e['EstimatedOneRepMaxProgressions']['Estimated1RMs'] | replace_double_quote_strings_with_single_quote | safe }}, 
+                                    text: {{ e['EstimatedOneRepMaxProgressions']['TopSets'] | replace_double_quote_strings_with_single_quote | safe }},
+                                    name: '{{ p['PersonName'] }} - {{ e['ExerciseName'] }}' , hovertemplate }], layout,
+                                config) 
+                            end">
+                        </div>
                         {% endif %}
                         <table class="min-w-full divide-y divide-gray-200">
                             <thead class="bg-gray-50">
diff --git a/templates/partials/topset.html b/templates/partials/topset.html
index fec9d4c..19a1715 100644
--- a/templates/partials/topset.html
+++ b/templates/partials/topset.html
@@ -8,9 +8,11 @@
             }}</span>
         {% else %}
         <div class="w-full">
-            <select id="topset-exercise-select-{{ topset_id }}" data-te-select-init data-te-select-filter="true"
-                data-te-select-size="lg" 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">
+            <select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" 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"
+                _="init js(me)
+                    te.Select.getOrCreateInstance(me).setValue('{{ exercise_id }}')
+                end">
                 {% for exercise in exercises|default([], true) %}
                 <option value="{{ exercise['ExerciseId'] }}">{{
                     exercise['Name']
@@ -18,9 +20,6 @@
                 {% endfor %}
             </select>
         </div>
-        <script>
-            window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#topset-exercise-select-{{ topset_id }}")).setValue("{{ exercise_id }}"));
-        </script>
         {% endif %}
     </td>
     <td class="p-4 whitespace-nowrap text-sm font-semibold text-gray-900">
diff --git a/templates/partials/workout_modal.html b/templates/partials/workout_modal.html
index 5997114..146d659 100644
--- a/templates/partials/workout_modal.html
+++ b/templates/partials/workout_modal.html
@@ -113,9 +113,12 @@
 
 
                                 <div class="w-full">
-                                    <select id="workout-exercise-select-{{ workout['WorkoutId'] }}" data-te-select-init
-                                        data-te-select-filter="true" data-te-select-size="lg" 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">
+                                    <select data-te-select-init data-te-select-filter="true" data-te-select-size="lg"
+                                        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"
+                                        _="init js(me)
+                                            te.Select.getOrCreateInstance(me)
+                                        end">
                                         {% for e in workout['Exercises'] %}
                                         <option value="{{ e['ExerciseId'] }}">{{
                                             e['Name']
@@ -123,9 +126,6 @@
                                         {% endfor %}
                                     </select>
                                 </div>
-                                <script>
-                                    window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-exercise-select-{{ workout['WorkoutId'] }}")));
-                                </script>
                             </div>
                         </div>
 
diff --git a/templates/partials/workout_tags.html b/templates/partials/workout_tags.html
index 9184361..c45876f 100644
--- a/templates/partials/workout_tags.html
+++ b/templates/partials/workout_tags.html
@@ -35,11 +35,14 @@
             </label>
             <div class="relative">
                 <div class="w-full">
-                    <select id="workout-tag-select-{{ workout_id }}" data-te-select-init data-te-select-filter="true"
-                        data-te-select-size="lg" multiple name="tag_id"
+                    <select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" multiple
+                        name="tag_id"
                         hx-post="{{ url_for('add_tag_to_workout', person_id=person_id, workout_id=workout_id) }}"
                         hx-target="#tag-wrapper-w-{{ workout_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">
+                        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"
+                        _="init js(me)
+                                te.Select.getOrCreateInstance(me).setValue({{ selected_workout_tag_ids | list_to_string | safe }})
+                            end">
                         {% for p in person_tags %}
                         <option value="{{ p.tag_id }}">{{
                             p.tag_name
@@ -47,9 +50,6 @@
                         {% endfor %}
                     </select>
                 </div>
-                <script>
-                    window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-tag-select-{{ workout_id }}")).setValue({{ selected_workout_tag_ids| list_to_string | safe }}));
-                </script>
             </div>
         </div>
 
diff --git a/templates/person.html b/templates/person.html
index 7285348..34faece 100644
--- a/templates/person.html
+++ b/templates/person.html
@@ -16,17 +16,17 @@
             </div>
             <div>
                 <div>
-                    <select id="workout-view-picker" data-te-select-init
+                    <select data-te-select-init
                         data-te-select-size="lg" name="view"
                         hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
-                        hx-push-url="true">
+                        hx-push-url="true"
+                        _="init js(me)
+                                te.Select.getOrCreateInstance(me).setValue('all')
+                            end">
                         <option value="month">Month</option>
                         <option value="year">Year</option>
                         <option value="all" selected>All</option>
                     </select>
-                    <script>
-                        window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#workout-view-picker")).setValue("all"));
-                    </script>
                 </div>
             </div>
         </div>
@@ -43,11 +43,14 @@
                     <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
                         Exercises
                     </label>
-                    <select id="multiSelection" data-te-select-init data-te-select-filter="true"
+                    <select 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='exercise_id'],[name='min_date'],[name='max_date'],[name='graph_axis']"
-                        hx-target="#container" hx-push-url="true">
+                        hx-target="#container" hx-push-url="true"
+                        _="init js(me)
+                                te.Select.getOrCreateInstance(me).setValue({{ selected_exercise_ids| list_to_string | safe }})
+                            end">
                         {% for e in person['Exercises'] %}
                         <option value="{{ e['ExerciseId'] }}">{{
                             e['ExerciseName']
@@ -55,9 +58,6 @@
                         {% endfor %}
                     </select>
                 </div>
-                <script>
-                    window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#multiSelection")).setValue({{ selected_exercise_ids| list_to_string | safe }}));
-                </script>
             </div>
             <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">
@@ -106,19 +106,19 @@
                     <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"
+                    <select 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">
+                        hx-target="#container" hx-push-url="true"
+                        _="init js(me)
+                                te.Select.getOrCreateInstance(me).setValue({{ graph_axis | safe }})
+                            end">
                         <option value="repetitions">Repetitions</option>
                         <option value="weight">Weigh</option>
                         <option value="estimated1rm">Estimated 1RM</option>
                     </select>
                 </div>
-                <script>
-                    window.addEventListener('DOMContentLoaded', _ => te.Select.getOrCreateInstance(document.querySelector("#graph-axis-multiselect")).setValue({{ graph_axis | safe }}));
-                </script>
             </div>
         </div>