Switch from using workout modal and change to workout page, still need to cleanup modal logic and templates. Need to fix workout tag functionality

app.py

@@ -158,22 +158,21 @@ def get_workout_modal(person_id, workout_id):
 
 
 @ app.route("/person/<int:person_id>/workout", methods=['POST'])
-@ validate_person
 def create_workout(person_id):
     new_workout_id = db.create_workout(person_id)
     workout = db.get_workout(person_id, new_workout_id)
     (person_tags, workout_tags, selected_workout_tag_ids) = db.get_workout_tags(
         person_id, new_workout_id)
-    exercises = db.get_all_exercises()
-    return render_template('partials/workout_modal.html',
-                           **workout, person_tags=person_tags, workout_tags=workout_tags, selected_workout_tag_ids=selected_workout_tag_ids, exercises=exercises), 200, {"HX-Trigger": "updatedPeople"}
 
+    view_model = db.workout.get(person_id, new_workout_id)
+    return render_block(app.jinja_env, 'workout.html', 'content', **view_model)
 
-@ app.route("/person/<int:person_id>/workout/<int:workout_id>/delete", methods=['DELETE'])
+@ app.route("/person/<int:person_id>/workout/<int:workout_id>/delete", methods=['GET'])
 @ validate_workout
 def delete_workout(person_id, workout_id):
     db.delete_workout(workout_id)
-    return "", 200, {"HX-Trigger": "updatedPeople"}
+    return redirect(url_for('get_calendar', person_id=person_id))
+    #return "", 200, {"HX-Trigger": "updatedPeople", "HX-Push-Url": url_for('get_calendar', person_id=person_id)}
 
 
 @ app.route("/person/<int:person_id>/workout/<int:workout_id>/start_date_edit_form", methods=['GET'])
@@ -436,13 +435,16 @@ def get_stats_for_person(person_id):
 @ app.route("/person/<int:person_id>/workout/<int:workout_id>", methods=['GET'])
 def show_workout(person_id, workout_id):
     view_model = db.workout.get(person_id, workout_id)
+    if htmx:
+        return render_block(app.jinja_env, 'workout.html', 'content', **view_model)
     return render_template('workout.html', **view_model)
 
 @app.route("/exercises/get")
 def get_exercises():
     query = request.args.get('query')
+    person_id = request.args.get('person_id', type=int)
     exercises = db.exercises.get(query)
-    return render_template('partials/exercise/exercise_dropdown.html', exercises=exercises)
+    return render_template('partials/exercise/exercise_dropdown.html', exercises=exercises, person_id=person_id)
 
 @app.route("/exercise/<int:exercise_id>/edit_name", methods=['GET', 'POST'])
 def edit_exercise_name(exercise_id):

templates/calendar.html

@@ -99,8 +99,8 @@
                 </div>
                 {% for workout in day.workouts %}
                 <div class="bottom flex-grow py-1 w-full"
-                    hx-get="{{ url_for('get_workout_modal', person_id=person_id, workout_id=workout.workout_id) }}"
+                    hx-get="{{ url_for('show_workout', person_id=person_id, workout_id=workout.workout_id) }}"
-                    hx-target='body' hx-swap='beforeend'>
+                    hx-push-url="true" hx-target="#container">
                     {% for set in workout.sets %}
                     <button
                         class="flex flex-col xl:flex-row items-start lg:items-center flex-shrink-0 px-0 sm:px-0.5 md:px-0.5 lg:px-0.5 text-xs">
@@ -145,8 +145,8 @@
                         {% for day in month.days %}
                         <div class="{% if day.is_today and day.is_in_current_month %}rounded-md border-4 border-green-50 border{% endif %} py-3 px-4 hover:bg-blue hover:text-white text-center cursor-pointer rounded-md {% if day.has_workouts and day.is_in_current_month %}bg-green-100{% endif %}"
                             {% if day.has_workouts %}
-                            hx-get="{{ url_for('get_workout_modal', person_id=person_id, workout_id=day.first_workout_id) }}"
+                            hx-get="{{ url_for('show_workout', person_id=person_id, workout_id=day.first_workout_id) }}"
-                            hx-target='body' hx-swap='beforeend' {% endif %}>
+                            hx-push-url="true" hx-target="#container" {% endif %}>
                             {% if day.is_in_current_month %}
                             {{ day.day }}
                             {% endif %}
@@ -175,7 +175,7 @@
 {% block add_workout_button %}
 <button
     class="fixed z-90 bottom-10 right-8 bg-blue-600 w-20 h-20 rounded-full drop-shadow-lg flex justify-center items-center text-white text-4xl hover:bg-blue-700 hover:drop-shadow-2xl hover:animate-bounce duration-300"
-    hx-post="{{ url_for('create_workout', person_id=person_id) }}" hx-target='body' hx-swap='beforeend'>
+    hx-post="{{ url_for('create_workout', person_id=person_id) }}" hx-push-url="true" hx-target="#container">
     <svg viewBox="0 0 20 20" enable-background="new 0 0 20 20" class="w-6 h-6 inline-block">
         <path fill="#FFFFFF" d="M16,10c0,0.553-0.048,1-0.601,1H11v4.399C11,15.951,10.553,16,10,16c-0.553,0-1-0.049-1-0.601V11H4.601
                                 C4.049,11,4,10.553,4,10c0-0.553,0.049-1,0.601-1H9V4.601C9,4.048,9.447,4,10,4c0.553,0,1,0.048,1,0.601V9h4.399

templates/partials/exercise/exercise_dropdown.html

@@ -1,11 +1,11 @@
 {% if exercises %}
-<ul class="list-none m-0 p-0 max-h-[300px] overflow-y-auto">
+<ul class="list-none m-0 p-0 max-h-[300px] overflow-y-auto border border-gray-200">
     {% for exercise in exercises %}
-    {{ render_partial('partials/exercise/exercise_list_item.html', exercise=exercise) }}
+    {{ render_partial('partials/exercise/exercise_list_item.html', exercise=exercise, person_id=person_id) }}
     {% endfor %}
 </ul>
 {% else %}
-<div class="py-2 px-4 text-gray-500 flex items-center justify-between">
+<div class="py-2 px-4 text-gray-500 flex items-center justify-between border border-gray-200">
     <span>No results found</span>
     <!-- Add Exercise Button -->
     <button hx-post="{{ url_for('add_exercise') }}" hx-target="closest div" hx-swap="outerHTML"

templates/partials/exercise/exercise_list_item.html

@@ -1,4 +1,8 @@
-<li class="py-2 px-4 hover:bg-gray-100 cursor-pointer flex items-center justify-between">
+<li class="py-2 px-4 hover:bg-gray-100 cursor-pointer flex items-center justify-between"
+    _="on click set the innerHTML of #exercise-results to ''
+    then set the value of #exercise-search to '{{ exercise.name }}'
+    then set the value of #selected-exercise to '{{ exercise.exercise_id }}'
+    on click call htmx.ajax('GET', '{{ url_for('get_exercise_progress_for_user', person_id=person_id, exercise_id=exercise.exercise_id) }}', {target:'#exercise-progress', swap:'innerHTML'})">
     <!-- Exercise Name -->
     <span>{{ exercise.name }}</span>
     <!-- Edit Icon -->

templates/partials/exercise/exercise_select.html

@@ -0,0 +1,15 @@
+<div class="relative" _="on click from elsewhere set the innerHTML of #exercise-results to ''">
+    <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"
+        id="exercise-search" type="text" name="query" placeholder="Search exercises..."
+        hx-get="{{ url_for('get_exercises', person_id=person_id) }}" hx-target="#exercise-results"
+        hx-trigger="keyup changed delay:200ms" autocomplete="off">
+
+    <!-- Dropdown Menu -->
+    <div id="exercise-results" class="absolute w-full bg-white  mt-1 rounded shadow-md z-10">
+        <!-- Results will be injected here -->
+    </div>
+
+    <input type="hidden" name="exercise_id" id="selected-exercise">
+
+</div>

templates/partials/new_set_form.html

@@ -1,40 +1,21 @@
 <form class="w-full" id="new-set-workout-{{ workout_id }}"
     hx-post="{{ url_for('create_topset', person_id=person_id, workout_id=workout_id) }}" hx-swap="beforeend"
     hx-target="#new-workout" _="on htmx:afterOnLoad if #no-workouts add .hidden to #no-workouts end
-                    on htmx:afterRequest
+                    on topsetAdded
                     render #notification-template with (message: 'Topset added') then append it to #notifications-container
                     then call _hyperscript.processNode(#notifications-container)
                     then reset() me
                     then trigger clearNewSetInputs">
 
     <div class="flex flex-wrap -mx-3 mb-2" id="new-set-workout-{{ workout_id }}">
-        <div class="w-full md:w-1/3 px-2 md:px-3 mb-6 md:mb-0">
+        <div class="w-full md:w-[30%] px-2 md:px-3 mb-6 md:mb-0">
             <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-state">
                 Exercise
             </label>
-            <div class="relative">
+            {{ render_partial('partials/exercise/exercise_select.html', person_id=person_id) }}
-
-                <div class="w-full">
-                    <select 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"
-                        hx-get="{{ url_for('get_most_recent_topset_for_exercise', person_id=person_id, workout_id=workout_id) }}"
-                        hx-target="#new-set-workout-{{ workout_id }}" hx-swap="outerHTML" _="init js(me)
-                            tail.select(me, {
-                                search: true,
-                                placeholder: 'Filter exercises',
-                            })
-                        end">
-                        {% for e in exercises %}
-                        <option value="{{ e.exercise_id }}" {% if e.exercise_id==exercise_id %}selected{% endif %}>{{
-                            e.name
-                            }}</option>
-                        {% endfor %}
-                    </select>
-                </div>
-            </div>
         </div>
 
-        <div class="w-full md:w-1/3 px-2 md:px-3 mb-6 md:mb-0">
+        <div class="w-full md:w-[30%] px-2 md: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">
                 Reps
             </label>
@@ -44,7 +25,7 @@
                 _="on clearNewSetInputs set my.placeholder to ''" {% endif %}>
         </div>
 
-        <div class="w-full md:w-1/3 px-2 md:px-3 mb-6 md:mb-0">
+        <div class="w-full md:w-[30%] px-2 md:px-3 mb-6 md:mb-0">
             <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-zip">
                 Weight
             </label>
@@ -53,20 +34,20 @@
                 id="grid-zip" type="number" name="weight" step="any" {% if has_value==True %} placeholder="{{ weight }}"
                 _="on clearNewSetInputs set my.placeholder to ''" {% endif %}>
         </div>
-    </div>
-    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 pt-2 px-0 sm:px-2">
-        <button
-            class="py-2 px-2 md:px-3 mb-3 text-sm font-medium text-center text-gray-900 bg-cyan-600 hover:bg-cyan-700 rounded-lg border border-gray-300 hover:scale-[1.02] transition-transform"
-            type="submit">
-            Add top set
-        </button>
 
-        <button hx-confirm="Are you sure you wish to delete this workout?"
+        <div class="w-full md:w-[10%] px-2 md:px-3 mb-6 md:mb-0">
-            hx-delete="{{ url_for('delete_workout', person_id=person_id, workout_id=workout_id) }}"
+            <button
-            _='on click trigger closeModal'
+                class="flex items-center justify-center py-2 px-2 md:px-3 mb-3 text-sm font-medium text-center text-gray-900 bg-cyan-600 hover:bg-cyan-700 rounded-lg border border-gray-300 hover:scale-[1.02] transition-transform mb-6 md:mb-0 mt-0 md:mt-6 w-full"
-            class="py-2 px-2 md:px-3 mb-3 text-sm font-medium text-center text-gray-900 bg-white rounded-lg border border-gray-300 hover:bg-gray-100 hover:scale-[1.02] transition-transform">Delete
+                type="submit">
-            workout</button>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" class="w-7 h-7">
+                    <path d="M12 4a1 1 0 011 1v6h6a1 1 0 110 2h-6v6a1 1 0 11-2 0v-6H5a1 1 0 110-2h6V5a1 1 0 011-1z" />
+                </svg>
+            </button>
+        </div>
+
+
     </div>
+
 </form>
 
 {% if has_value==True %}

templates/person.html

@@ -131,8 +131,8 @@
                             <tbody class="bg-white">
 
                                 {% for w in person['Workouts'] %}
-                                <tr hx-get="{{ url_for('get_workout_modal', person_id=person['PersonId'], workout_id=w['WorkoutId']) }}"
+                                <tr hx-get="{{ url_for('show_workout', person_id=person['PersonId'], workout_id=w['WorkoutId']) }}"
-                                    hx-target='body' hx-swap='beforeend' class="cursor-pointer">
+                    hx-push-url="true" hx-target="#container" class="cursor-pointer">
                                     <td class="p-4 whitespace-nowrap text-sm font-normal text-gray-500">
                                         {{ w['StartDate'] | strftime("%b %d %Y") }}
                                     </td>

templates/workout.html

@@ -2,7 +2,7 @@
 
 {% block content %}
 
-<div class=' p-2 md:p-4 m-2'>
+<div class='p-0 md:p-4 m-0 md:m-2'>
     <div class="relative w-full h-full">
         <!-- Modal content -->
         <div class="relative bg-white rounded-lg shadow">
@@ -36,8 +36,9 @@
                 </div>
 
                 <button type="button"
-                    class="absolute right-0 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white"
+                    class="absolute right-0 text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white mr-2"
-                    data-modal-toggle="defaultModal" _="on click trigger closeModal">
+                    hx-get="{{ url_for('delete_workout', person_id=person_id, workout_id=workout_id) }}"
+                    hx-push-url="true" hx-target="#container">
                     <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg" data-darkreader-inline-fill=""
                         style="--darkreader-inline-fill:currentColor;">
@@ -50,69 +51,56 @@
             </div>
 
         </div>
-        <!-- Modal body -->
-        <div class="p-3 md:p-6 space-y-6">
-            <table class="items-center w-full bg-transparent border-collapse table-fixed">
-                <thead>
-                    <tr>
-                        <th
-                            class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
-                            Exercise</th>
-                        <th
-                            class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
-                            Top Set</th>
-                        <th
-                            class="bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap w-9 sm:w-20">
-                        </th>
-                    </tr>
-                </thead>
-                <tbody class="divide-y divide-gray-100" id="new-workout" hx-target="closest tr"
-                    hx-swap="outerHTML swap:0.5s">
-                    {% for top_set in top_sets %}
-                    {{ render_partial('partials/topset.html', person_id=person_id,
-                    workout_id=workout_id, **top_set) }}
-                    {% endfor %}
-                </tbody>
-            </table>
-
-            {% if top_sets|length == 0 %}
-            <div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert"
-                id="no-workouts">
-                No top_sets found.
-            </div>
-            {% endif %}
-        </div>
-        <!-- Modal footer -->
-        <div class="flex items-center p-3 md:p-6 space-x-2 border-t border-gray-200 rounded-b dark:border-gray-600">
-            {{ render_partial('partials/new_set_form.html', person_id=person_id,
-            workout_id=workout_id,
-            exercises=exercises,
-            has_value=False) }}
-        </div>
-        <div id="exercise-progress-{{ person_id }}" class="mx-0 md:mx-5">
-
-            <div class="w-full md:w-1/3 px-2 md: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">
-                    Exercise
-                </label>
-                <div class="relative" _="on click from elsewhere set the innerHTML of #exercise-results to ''">
-                    <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"
-                        type="text" name="query" placeholder="Search exercises..."
-                        hx-get="{{ url_for('get_exercises') }}" hx-target="#exercise-results"
-                        hx-trigger="keyup changed delay:500ms" autocomplete="off">
-
-                    <!-- Dropdown Menu -->
-                    <div id="exercise-results"
-                        class="absolute w-full bg-white border border-gray-200 mt-1 rounded shadow-md z-10">
-                        <!-- Results will be injected here -->
-                    </div>
 
+        <div class="relative bg-white rounded-lg shadow mt-4">
+            <div class="p-2 md:p-4 border-0 md:border-b rounded-t">
+                <!-- Modal footer -->
+                <div class="flex items-center p-1 md:p-2 rounded-b dark:border-gray-600">
+                    {{ render_partial('partials/new_set_form.html', person_id=person_id,
+                    workout_id=workout_id,
+                    exercises=exercises,
+                    has_value=False) }}
                 </div>
+
+                <!-- Modal body -->
+                <div class="p-3 md:p-6 space-y-6">
+                    <table class="items-center w-full bg-transparent border-collapse table-fixed">
+                        <thead>
+                            <tr>
+                                <th
+                                    class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
+                                    Exercise</th>
+                                <th
+                                    class="px-4 bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap">
+                                    Top Set</th>
+                                <th
+                                    class="bg-gray-50 text-gray-700 align-middle py-3 text-xs font-semibold text-left uppercase border-l-0 border-r-0 whitespace-nowrap w-9 sm:w-20">
+                                </th>
+                            </tr>
+                        </thead>
+                        <tbody class="divide-y divide-gray-100" id="new-workout" hx-target="closest tr"
+                            hx-swap="outerHTML swap:0.5s">
+                            {% for top_set in top_sets %}
+                            {{ render_partial('partials/topset.html', person_id=person_id,
+                            workout_id=workout_id, **top_set) }}
+                            {% endfor %}
+                        </tbody>
+                    </table>
+
+                    {% if top_sets|length == 0 %}
+                    <div class="bg-purple-100 rounded-lg py-5 px-6 mb-4 text-base text-purple-700 mb-3" role="alert"
+                        id="no-workouts">
+                        No top_sets found.
+                    </div>
+                    {% endif %}
+                </div>
+
+                <div id="exercise-progress" class="mx-0 md:mx-5">
+                </div>
+
             </div>
-
-
         </div>
+
     </div>
 
     {% endblock %}