Save filters for workout list view

app.py

@@ -8,7 +8,7 @@ from db import DataBase
 from utils import get_people_and_exercise_rep_maxes, convert_str_to_date, get_earliest_and_latest_workout_date, filter_workout_topsets, get_exercise_ids_from_workouts, first_and_last_visible_days_in_month
 from flask_htmx import HTMX
 import minify_html
-from urllib.parse import urlparse
+from urllib.parse import urlparse, unquote, quote
 
 app = Flask(__name__)
 app.config.from_pyfile('config.py')
@@ -73,6 +73,7 @@ def get_person_list():
 @ validate_person
 def get_person(person_id):
     person = db.get_person(person_id)
+    tags = db.get_tags_for_person(person_id)
 
     (min_date, max_date) = get_earliest_and_latest_workout_date(person)
 
@@ -100,9 +101,9 @@ def get_person(person_id):
     person['FilteredExercises'] = list(filtered_exercises)
     if htmx:
         return render_template('partials/page/person.html',
-                               person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date), 200, {"HX-Trigger": "updatedPeople"}
+                               person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date, tags=tags), 200, {"HX-Trigger": "updatedPeople"}
 
-    return render_template('person.html', person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date), 200, {"HX-Trigger": "updatedPeople"}
+    return render_template('person.html', person=person, selected_exercise_ids=active_exercise_ids, max_date=max_date, min_date=min_date, tags=tags), 200, {"HX-Trigger": "updatedPeople"}
 
 
 @ app.route("/person/<int:person_id>/calendar")
@@ -313,6 +314,30 @@ def settings():
     return render_template('settings.html', people=people, exercises=exercises)
 
 
+@ app.route("/person/<int:person_id>/tag/redirect", methods=['GET'])
+@ validate_person
+def goto_tag(person_id):
+    tag_filter = request.args.get('filter')
+    return redirect(url_for('get_person', person_id=person_id) + tag_filter)
+
+
+@ app.route("/person/<int:person_id>/tag/add", methods=['GET'])
+@ validate_person
+def add_tag(person_id):
+    tag = request.args.get('tag')
+    tag_filter = request.args.get('filter')
+    db.add_tag_for_person(person_id, tag, tag_filter)
+    return ""
+
+
+@ app.route("/person/<int:person_id>/tag/<int:tag_id>/delete", methods=['GET'])
+@ validate_person
+def delete_tag(person_id, tag_id):
+    tag_filter = request.args.get("filter")
+    db.delete_tag_for_person(person_id=person_id, tag_id=tag_id)
+    return redirect(url_for('get_person', person_id=person_id) + tag_filter)
+
+
 @ app.context_processor
 def my_utility_processor():
 
@@ -347,7 +372,7 @@ def my_utility_processor():
     def list_to_string(list):
         return [str(i) for i in list]
 
-    return dict(get_list_of_people_and_workout_count=get_list_of_people_and_workout_count, is_selected_page=is_selected_page, get_first_element_from_list_with_matching_attribute=get_first_element_from_list_with_matching_attribute, in_list=in_list, strftime=strftime, datetime=datetime, timedelta=timedelta, relativedelta=relativedelta, first_and_last_visible_days_in_month=first_and_last_visible_days_in_month, list_to_string=list_to_string)
+    return dict(get_list_of_people_and_workout_count=get_list_of_people_and_workout_count, is_selected_page=is_selected_page, get_first_element_from_list_with_matching_attribute=get_first_element_from_list_with_matching_attribute, in_list=in_list, strftime=strftime, datetime=datetime, timedelta=timedelta, relativedelta=relativedelta, first_and_last_visible_days_in_month=first_and_last_visible_days_in_month, list_to_string=list_to_string, quote=quote)
 
 
 if __name__ == '__main__':

db.py

@@ -253,3 +253,25 @@ class DataBase():
             LEFT JOIN Exercise E ON T.exercise_id=E.exercise_id""")
 
         return all_topsets
+
+    def get_tags_for_person(self, person_id):
+        return self.execute("""
+            SELECT
+                T.tag_id AS "TagId",
+                T.person_id AS "PersonId",
+                T.name AS "TagName",
+                T.filter AS "TagFilter"
+            FROM
+                Tag T
+            WHERE
+                T.person_id = %s
+            ORDER BY
+                T.name""", [person_id])
+
+    def add_tag_for_person(self, person_id, tag_name, tag_filter):
+        self.execute('INSERT INTO Tag (person_id, name, filter) VALUES (%s, %s, %s)', [
+            person_id, tag_name, tag_filter], commit=True)
+
+    def delete_tag_for_person(self, person_id, tag_id):
+        self.execute('DELETE FROM Tag WHERE person_id=%s AND tag_id=%s', [
+            person_id, tag_id], commit=True)

templates/base.html

@@ -28,6 +28,8 @@
     <script src="https://unpkg.com/htmx.org"></script>
     <script src="https://unpkg.com/hyperscript.org"></script>
     <script src="https://cdn.jsdelivr.net/npm/tw-elements/dist/js/index.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
+
 
     <link href="/static/css/style.css" rel="stylesheet">
 

templates/partials/page/person.html

@@ -28,9 +28,9 @@
 
         </div>
 
-        <div class="flex flex-wrap -mx-3 mb-2">
+        <div class="flex flex-wrap -mx-3 mb-1">
             <div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
-                <div class="mb-3 w-full">
+                <div class="mb-1 w-full">
                     <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
                         Exercises
                     </label>
@@ -94,7 +94,83 @@
             </div>
         </div>
 
-        <div class="flex flex-col mt-8">
+        <div class="flex w-full flex-wrap justify-center">
+
+            {% for t in tags %}
+            <div data-te-chip-init data-te-ripple-init
+                class="[word-wrap: break-word] my-[5px] mr-4 flex h-[32px] cursor-pointer items-center justify-between rounded-[16px] border border-[#9fa6b2] bg-[#eceff1] bg-[transparent] py-0 px-[12px] text-[13px] font-normal normal-case leading-loose text-[#4f4f4f] shadow-none transition-[opacity] duration-300 ease-linear hover:border-[#9fa6b2] hover:!shadow-none dark:text-neutral-200"
+                data-te-ripple-color="dark">
+                <span hx-get="{{ url_for('goto_tag', person_id=person['PersonId']) }}"
+                    hx-vals='{"filter": "{{ t["TagFilter"] }}"}' hx-target="#container" hx-push-url="true">{{
+                    t['TagName'] }}</span>
+
+
+                <span
+                    class="float-right w-4 cursor-pointer pl-[8px] text-[16px] text-[#afafaf] opacity-[.53] transition-all duration-200 ease-in-out hover:text-[#8b8b8b] dark:text-neutral-400 dark:hover:text-neutral-100"
+                    hx-get="{{ url_for('delete_tag', person_id=person['PersonId'], tag_id=t['TagId']) }}"
+                    hx-vals='{"filter": "{{ t["TagFilter"] }}"}' hx-target="#container" hx-push-url="true" _="on htmx:confirm(issueRequest)
+             halt the event
+             call Swal.fire({title: 'Confirm', text:'Are you sure you want to delete {{ t['TagName'] }} tag?'})
+             if result.isConfirmed issueRequest()">
+                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                        stroke="currentColor" class="h-3 w-3">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                </span>
+            </div>
+            {% endfor %}
+
+            <div class="flex justify-center space-x-2">
+                <div>
+                    <button type="button" data-te-ripple-init data-te-ripple-color="light"
+                        class="inline-block rounded-full bg-primary p-2 uppercase leading-normal text-white shadow-md transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)]"
+                        id="add-tag">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                            stroke="currentColor" class="w-5 h-5">
+                            <path stroke-linecap="round" stroke-linejoin="round"
+                                d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+                        </svg>
+
+                    </button>
+                </div>
+            </div>
+        </div>
+        <script>
+            document.querySelector('#add-tag').addEventListener('click', function () {
+                Swal.fire({
+                    title: 'Create a tag',
+                    input: 'text',
+                    inputAttributes: {
+                        autocapitalize: 'off'
+                    },
+                    showCancelButton: true,
+                    confirmButtonText: 'Add',
+                    showLoaderOnConfirm: true,
+                    preConfirm: (tag) => {
+                        return fetch(`{{ url_for('add_tag', person_id=person['PersonId']) }}?tag=${encodeURIComponent(tag)}&filter=${encodeURIComponent(window.location.search)}`)
+                            .then(response => {
+                                if (!response.ok) {
+                                    throw new Error(response.statusText)
+                                }
+                                return response.text()
+                            })
+                            .catch(error => {
+                                Swal.showValidationMessage(
+                                    `Request failed: ${error}`
+                                )
+                            })
+                    },
+                    allowOutsideClick: () => !Swal.isLoading()
+                }).then((result) => {
+                    if (result.isConfirmed) {
+                        htmx.ajax('GET', `{{ url_for('get_person', person_id=person['PersonId']) + '?' + request.query_string.decode() }}`, '#container')
+                    }
+                })
+
+            })
+        </script>
+
+        <div class="flex flex-col mt-3">
             <div class="overflow-x-auto rounded-lg">
                 <div class="align-middle inline-block min-w-full">
                     <div class="shadow overflow-hidden sm:rounded-lg">

templates/person.html

@@ -4,6 +4,6 @@
 
 {{ render_partial('partials/page/person.html',
 person=person, selected_exercise_ids=selected_exercise_ids, max_date=max_date,
-min_date=min_date) }}
+min_date=min_date, tags=tags) }}
 
 {% endblock %}