peterstockings/workout
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove dependency on tailwind elements and switch to using tail.select (Smaller lib, that resolves duplication of selects on back/forward)

Browse Source
This commit is contained in:
Peter Stockings
2023-12-08 09:26:38 +11:00
parent 2bdbda3a05
commit 304ddcb30d
10 changed files with 569 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
templates/base.html
View File

@@ -8,27 +8,11 @@
<title>Workout Tracker</title>
<script src="/static/js/plotly-basic-2.20.0.min.js" defer></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" rel="stylesheet" />
<link href="/static/css/tw-elements.min.css" rel="stylesheet">
<script src="/static/js/tailwindcss@3.2.4.js" defer></script>
<script>
window.addEventListener('DOMContentLoaded', _ => {
tailwind.config = {
darkMode: "class",
theme: {
fontFamily: {
sans: ["Roboto", "sans-serif"],
body: ["Roboto", "sans-serif"],
mono: ["ui-monospace", "monospace"],
},
},
corePlugins: {
preflight: false,
},
};
});
</script>
<link type="text/css" rel="stylesheet" href="/static/css/tail.select.min.css">
<script src="/static/js/tail.select.min.js"></script>
<script src="/static/js/tailwindcss@3.2.4.js"></script>
<link href="/static/css/style.css" rel="stylesheet">
<script src="/static/js/tw-elements.min.js" defer></script>
<script src="/static/js/htmx.min.js" defer></script>
<script src="/static/js/hyperscript.min.js" defer></script>
<script src="/static/js/sweetalert2@11.js" defer></script>

8
templates/calendar.html
View File

@@ -41,11 +41,9 @@
</div>
<div class="mr-4">
<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" _="init js(me)
te.Select.getOrCreateInstance(me).setValue('{{ selected_view | safe }}')
end">
<select name="view" hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}"
hx-target="#container" hx-vals='{"date": "{{ selected_date }}"}' hx-push-url="true"
_="init js(me) tail.select(me, {}) 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>

24
templates/dashboard.html
View File

@@ -10,14 +10,18 @@
<div class="mb-3 w-full"><label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-city">People</label>
<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') }}"
<select class="bg-gray-50 border border-gray-300 hidden" hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='exercise_id']" hx-push-url="true"
hx-target="#container" multiple="" name="person_id" _="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_person_ids | list_to_string | safe}})
tail.select(me, {
multiple: true,
search: true,
placeholder: 'Filter people',
})
end">
{% for p in people %}
<option value="{{ p['PersonId'] }}">{{
<option value="{{ p['PersonId'] }}" {% if p['PersonId'] in selected_person_ids %}selected{%
endif %}>{{
p['Name']
}}</option>
{% endfor %}
@@ -32,14 +36,18 @@
<div class="mb-3 w-full"><label
class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
for="grid-city">Exercises</label>
<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') }}"
<select class="bg-gray-50 border border-gray-300 hidden" hx-get="{{ url_for('dashboard') }}"
hx-include="[name='min_date'],[name='max_date'],[name='person_id']" hx-push-url="true"
hx-target="#container" multiple="" name="exercise_id" _="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_exercise_ids | list_to_string | safe}})
tail.select(me, {
multiple: true,
search: true,
placeholder: 'Filter exercises',
})
end">
{% for e in exercises %}
<option value="{{ e['ExerciseId'] }}">{{
<option value="{{ e['ExerciseId'] }}" {% if e['ExerciseId'] in selected_exercise_ids
%}selected{% endif %}>{{
e['Name']
}}</option>
{% endfor %}

16
templates/partials/new_set_form.html
View File

@@ -15,17 +15,17 @@
<div class="relative">
<div class="w-full">
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="exercise_id"
<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" {% if has_value==True or
exercise_id %} _="init js(me)
te.Select.getOrCreateInstance(me).setValue('{{ exercise_id | safe }}')
end" {% else %} _="init js(me)
te.Select.getOrCreateInstance(me)
end" {% endif %}>
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}}">{{
<option value="{{ e.exercise_id }}" {% if e.exercise_id==exercise_id %}selected{% endif %}>{{
e.name
}}</option>
{% endfor %}

12
templates/partials/topset.html
View File

@@ -8,13 +8,17 @@
}}</span>
{% else %}
<div class="w-full">
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" name="exercise_id"
<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"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue('{{ exercise_id }}')
end">
tail.select(me, {
search: true,
placeholder: 'Filter exercises',
})
end">
{% for exercise in exercises|default([], true) %}
<option value="{{ exercise['ExerciseId'] }}">{{
<option value="{{ exercise['ExerciseId'] }}" {% if exercise['ExerciseId']==exercise_id %}selected{%
endif %}>{{
exercise['Name']
}}</option>
{% endfor %}

14
templates/partials/workout_tags.html
View File

@@ -35,16 +35,20 @@
</label>
<div class="relative">
<div class="w-full">
<select data-te-select-init data-te-select-filter="true" data-te-select-size="lg" multiple
name="tag_id"
<select 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"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_workout_tag_ids | list_to_string | safe }})
end">
tail.select(me, {
search: true,
multiple: true,
placeholder: 'Select tags',
})
end">
{% for p in person_tags %}
<option value="{{ p.tag_id }}">{{
<option value="{{ p.tag_id }}" {% if p.tag_id in selected_workout_tag_ids %}selected{% endif %}>
{{
p.tag_name
}}</option>
{% endfor %}

32
templates/person.html
View File

@@ -16,13 +16,10 @@
</div>
<div>
<div>
<select data-te-select-init
data-te-select-size="lg" name="view"
<select name="view"
hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
hx-push-url="true"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue('all')
end">
_="init js(me) tail.select(me, {}) end">
<option value="month">Month</option>
<option value="year">Year</option>
<option value="all" selected>All</option>
@@ -43,16 +40,20 @@
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Exercises
</label>
<select data-te-select-init data-te-select-filter="true"
<select 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"
_="init js(me)
te.Select.getOrCreateInstance(me).setValue({{ selected_exercise_ids| list_to_string | safe }})
end">
tail.select(me, {
multiple: true,
search: true,
placeholder: 'Filter exercises',
})
end">
{% for e in person['Exercises'] %}
<option value="{{ e['ExerciseId'] }}">{{
<option value="{{ e['ExerciseId'] }}" {% if e['ExerciseId'] in selected_exercise_ids %}selected{% endif %}>{{
e['ExerciseName']
}}</option>
{% endfor %}
@@ -106,17 +107,14 @@
<label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-city">
Graph Axis
</label>
<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
<select 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"
_="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>
_="init js(me) tail.select(me, { multiple: true, placeholder: 'Select graphs' }) end">
<option value="repetitions" {% if "repetitions" in graph_axis %}selected{% endif %}>Repetitions</option>
<option value="weight" {% if "weight" in graph_axis %}selected{% endif %}>Weigh</option>
<option value="estimated1rm" {% if "estimated1rm" in graph_axis %}selected{% endif %}>Estimated 1RM</option>
</select>
</div>
</div>