Add editable notes to workouts

app.py

@@ -364,6 +364,28 @@ def delete_tag(tag_id):
     return redirect(url_for('dashboard') + tag_filter)
 
 
+@ app.route("/person/<int:person_id>/workout/<int:workout_id>/note/edit", methods=['GET'])
+@ validate_workout
+def get_workout_note_edit_form(person_id, workout_id):
+    workout = db.get_workout(person_id, workout_id)
+    return render_template('partials/workout_note.html', person_id=person_id, workout_id=workout_id, note=workout['Note'], is_edit=True)
+
+
+@ app.route("/person/<int:person_id>/workout/<int:workout_id>/note", methods=['PUT'])
+@ validate_workout
+def update_workout_note(person_id, workout_id):
+    note = request.form.get('note')
+    db.update_workout_note_for_person(person_id, workout_id, note)
+    return render_template('partials/workout_note.html', person_id=person_id, workout_id=workout_id, note=note)
+
+
+@ app.route("/person/<int:person_id>/workout/<int:workout_id>/note", methods=['GET'])
+@ validate_workout
+def get_workout_note(person_id, workout_id):
+    workout = db.get_workout(person_id, workout_id)
+    return render_template('partials/workout_note.html', person_id=person_id, workout_id=workout_id, note=workout['Note'])
+
+
 @ app.context_processor
 def my_utility_processor():
 

db.py

@@ -185,7 +185,8 @@ class DataBase():
                 E.exercise_id AS "ExerciseId",
                 E.name AS "ExerciseName",
                 T.repetitions AS "Repetitions",
-                T.weight AS "Weight"
+                T.weight AS "Weight",
+                W.note AS "Note"
             FROM Person P
                 LEFT JOIN Workout W ON P.person_id=W.person_id
                 LEFT JOIN TopSet T ON W.workout_id=T.workout_id
@@ -193,13 +194,16 @@ class DataBase():
             WHERE P.person_id=%s
                 AND W.workout_id = %s""", [person_id, workout_id])
 
+        note = next((t['Note'] for t in topsets), '')
+
         return {
             'PersonId': next((t['PersonId'] for t in topsets), -1),
             'PersonName': next((t['PersonName'] for t in topsets), 'Unknown'),
             'WorkoutId': workout_id,
             'StartDate': topsets[0]['StartDate'],
             'Exercises': self.get_exercises(),
-            'TopSets': [{"TopSetId": t['TopSetId'], "ExerciseId": t['ExerciseId'], "ExerciseName": t['ExerciseName'], "Weight": t['Weight'], "Repetitions": t['Repetitions']} for t in topsets if t['TopSetId'] is not None]
+            'TopSets': [{"TopSetId": t['TopSetId'], "ExerciseId": t['ExerciseId'], "ExerciseName": t['ExerciseName'], "Weight": t['Weight'], "Repetitions": t['Repetitions']} for t in topsets if t['TopSetId'] is not None],
+            'Note': note
         }
 
     def get_topset(self, person_id, workout_id, topset_id):
@@ -297,3 +301,7 @@ class DataBase():
 
     def delete_tag_for_dashboard(self, tag_id):
         self.execute('DELETE FROM Tag WHERE tag_id=%s', [tag_id], commit=True)
+
+    def update_workout_note_for_person(self, person_id, workout_id, note):
+        self.execute('UPDATE workout SET note=%s WHERE person_id=%s AND workout_id=%s', [
+            note, person_id, workout_id], commit=True)

templates/partials/start_date.html

@@ -1,12 +1,13 @@
-{% if is_edit|default(false, true) == false %}
-<span class="text-base font-normal text-gray-500">{{ strftime(start_date, "%b %d %Y") }}</span>
-<a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
+<div id="edit-start-date" hx-target="this" hx-swap="innerHTML swap:0.5s">
+    {% if is_edit|default(false, true) == false %}
+    <span class="text-base font-normal text-gray-500">{{ strftime(start_date, "%b %d %Y") }}</span>
+    <a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
         hx-get="{{ url_for('get_workout_start_date_edit_form', person_id=person_id, workout_id=workout_id) }}"
         hx-target="#edit-start-date">
         Edit
-</a>
-{% else %}
-<div class="flex">
+    </a>
+    {% else %}
+    <div class="flex">
         <div class="relative">
             <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
                 <svg aria-hidden="true" class="w-5 h-5 text-gray-500 dark:text-gray-400" fill="currentColor"
@@ -27,5 +28,6 @@
             class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer">
             Cancel
         </a>
+    </div>
+    {% endif %}
 </div>
-{% endif %}

templates/partials/workout_modal.html

@@ -11,23 +11,29 @@
             <div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
                 <!-- Modal header -->
                 <div class="flex items-start justify-between p-4 border-b rounded-t dark:border-gray-600">
-                    <div class="flex flex-col">
+                    <div class="flex flex-col w-full">
                         <div class="flex items-center justify-between">
                             <div>
                                 <h3 class="text-xl font-bold text-gray-900">{{ workout['PersonName'] }}</h3>
                             </div>
 
                         </div>
-
-                        <div id="edit-start-date" hx-target="this" hx-swap="innerHTML swap:0.5s">
+                        <div class="grid grid-cols-1 lg:grid-cols-2">
                             {{ render_partial('partials/start_date.html', person_id=workout['PersonId'],
                             workout_id=workout['WorkoutId'],
                             start_date=workout['StartDate']) }}
+
+
+                            {{ render_partial('partials/workout_note.html', person_id=workout['PersonId'],
+                            workout_id=workout['WorkoutId'],
+                            note=workout['Note']) }}
+
                         </div>
+
                     </div>
 
                     <button type="button"
-                        class="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"
                         data-modal-toggle="defaultModal" _="on click trigger closeModal">
                         <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=""
@@ -39,6 +45,8 @@
                         <span class="sr-only">Close modal</span>
                     </button>
                 </div>
+
+            </div>
             <!-- Modal body -->
             <div class="p-6 space-y-6">
                 <table class="items-center w-full bg-transparent border-collapse">
@@ -90,9 +98,8 @@
 
 
                                 <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"
+                                    <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">
                                         {% for e in workout['Exercises'] %}
                                         <option value="{{ e['ExerciseId'] }}">{{
@@ -144,6 +151,6 @@
             </div>
         </div>
     </div>
-    </div>
+</div>
 
 </div>

templates/partials/workout_note.html

@@ -0,0 +1,35 @@
+<div id="workout-note" hx-target="this" hx-swap="innerHTML swap:0.5s">
+    {% if is_edit|default(false, true) == false %}
+    {% if note|length > 0 %}
+    <span class="text-base font-normal text-gray-500">{{ note }}</span>
+    <a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
+        hx-get="{{ url_for('get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
+        hx-target="#workout-note">
+        Edit
+    </a>
+    {% else %}
+    <a class="text-sm font-medium text-cyan-600 hover:bg-gray-100 rounded-lg inline-flex items-center p-2 cursor-pointer"
+        hx-get="{{ url_for('get_workout_note_edit_form', person_id=person_id, workout_id=workout_id) }}"
+        hx-target="#workout-note">
+        Add note
+    </a>
+    {% endif %}
+    {% else %}
+    <div class="flex items-center">
+        <textarea
+            class="block ml-1 p-2.5 w-full text-sm text-gray-900 bg-white rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-800 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+            placeholder="Your note..." name="note" rows="2">{{ note }}</textarea>
+        <button
+            class="inline-flex justify-center p-2 text-blue-600 rounded-full cursor-pointer hover:bg-blue-100 dark:text-blue-500 dark:hover:bg-gray-600"
+            hx-put="{{ url_for('update_workout_note', person_id=person_id, workout_id=workout_id) }}"
+            hx-include="[name='note']">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                    d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0 01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25 6H10" />
+            </svg>
+            <span class="sr-only">Save note</span>
+        </button>
+    </div>
+    {% endif %}
+</div>