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

Remove dependency on tail select component and instead role my own to minmise bundle size

Browse Source
This commit is contained in:
Peter Stockings
2026-01-29 12:49:12 +11:00
parent 04fe00412a
commit 509d11443d
13 changed files with 309 additions and 581 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
templates/program_create.html
View File

@@ -97,17 +97,14 @@
{# Nested Template for a single exercise row within a session #}
<template id="exercise-row-template">
<div class="exercise-row flex items-center space-x-2">
{# Wrapper div for tail.select - Added position: relative #}
<div class="flex-grow relative">
{# Note: tail.select might hide the original select, apply styling to its container if needed #}
<select name="exercises_SESSION_INDEX_PLACEHOLDER" required class="exercise-select-original w-full"> {#
Keep original select for form submission, tail.select will enhance it #}
<option value="">Select Exercise...</option>
{# Render options directly here using the exercises passed to the main template #}
{% for exercise in exercises %}
<option value="{{ exercise.exercise_id }}">{{ exercise.name }}</option>
{% endfor %}
</select>
{{ render_partial('partials/custom_select.html',
name='exercises_SESSION_INDEX_PLACEHOLDER',
options=exercises,
multiple=false,
search=true,
placeholder='Select Exercise...')
}}
</div>
<button type="button" class="remove-exercise-btn text-red-500 hover:text-red-700 flex-shrink-0"
title="Remove Exercise">
@@ -182,33 +179,14 @@
// --- Function to add an exercise select row to a specific session ---
function addExerciseSelect(container, sessionIndex) {
const newExFragment = exerciseTemplate.content.cloneNode(true);
const originalSelect = newExFragment.querySelector('.exercise-select-original');
const nativeSelect = newExFragment.querySelector('.native-select');
const removeBtn = newExFragment.querySelector('.remove-exercise-btn');
if (!originalSelect || !removeBtn) {
console.error("Failed to find original select or remove button in exercise template clone.");
return;
if (nativeSelect) {
nativeSelect.name = `exercises_${sessionIndex}`;
}
// Set the name attribute correctly for getlist
originalSelect.name = `exercises_${sessionIndex}`;
container.appendChild(newExFragment);
// Find the newly added select element *after* appending
const newSelectElement = container.querySelector('.exercise-row:last-child .exercise-select-original');
// Initialize tail.select on the new element
if (newSelectElement && typeof tail !== 'undefined' && tail.select) {
tail.select(newSelectElement, {
search: true,
placeholder: 'Select Exercise...',
// classNames: "w-full" // Add tailwind classes if needed for the generated dropdown
});
} else {
console.warn("tail.select library not found or new select element not found. Using standard select.");
}
// Attach remove listener to the new exercise row's button
attachExerciseRemoveListener(removeBtn);
}
@@ -274,7 +252,7 @@
}
// Update names for the exercise selects within this session
const exerciseSelects = row.querySelectorAll('.exercise-select-original'); // Target original selects
const exerciseSelects = row.querySelectorAll('.native-select'); // Target hidden selects
exerciseSelects.forEach(select => {
select.name = `exercises_${newIndex}`;
});