Add min/max date filter (really needs refactor)

This commit is contained in:
Peter Stockings
2022-11-27 00:33:32 +11:00
parent ec6bc50d72
commit 304e480e89
3 changed files with 71 additions and 8 deletions

View File

@@ -14,12 +14,14 @@
</div>
</div>
<div class="flex">
{% set exercise_list = person['FilteredExercises'] if is_filtered else person['Exercises'] %}
{% for e in person['Exercises'] %}
<div class="flex items-center mr-4" hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id']" hx-target="#container" hx-push-url="true">
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
hx-push-url="true">
<input {{ is_checked(e['ExerciseId'], selected_exercise_ids) }} type="checkbox" name="exercise_id"
value="{{ e['ExerciseId'] }}"
class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 dark:focus:ring-blue-600 dark:ring-offset-gray-800 focus:ring-2 dark:bg-gray-700 dark:border-gray-600">
@@ -30,6 +32,51 @@
{% endfor %}
</div>
<div class="flex flex-wrap -mx-3 mb-2 mt-4">
<div class="w-full md:w-1/2 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">
Min date
</label>
<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"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="date"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
name="min_date" value="{{ min_date }}"
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
hx-push-url="true" hx-trigger="change">
</div>
</div>
<div class="w-full md:w-1/2 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">
Max date
</label>
<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"
viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd"
d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"
clip-rule="evenodd"></path>
</svg>
</div>
<input type="date"
class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full pl-10 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500 w-full"
name="max_date" value="{{ max_date }}"
hx-get="{{ url_for('get_person', person_id=person['PersonId']) }}"
hx-include="[name='exercise_id'],[name='min_date'],[name='max_date']" hx-target="#container"
hx-push-url="true" hx-trigger="change">
</div>
</div>
</div>
<div class="flex flex-col mt-8">
<div class="overflow-x-auto rounded-lg">
<div class="align-middle inline-block min-w-full">

View File

@@ -3,6 +3,7 @@
{% block content %}
{{ render_partial('partials/page/person.html',
person=person, is_filtered=is_filtered or False, selected_exercise_ids=selected_exercise_ids) }}
person=person, is_filtered=is_filtered or False, selected_exercise_ids=selected_exercise_ids, max_date=max_date,
min_date=min_date) }}
{% endblock %}