dd82f461be
- Create database tables: workout_program, program_session, person_program_assignment.
- Add Flask blueprint `routes/programs.py` with routes for creating, listing, viewing, and deleting programs.
- Implement program creation form (`templates/program_create.html`):
- Allows defining program name, description, and multiple sessions.
- Each session includes a name and dynamically added exercise selections.
- Uses `tail.select` for searchable exercise dropdowns.
- JavaScript handles dynamic addition/removal of sessions and exercises.
- Implement backend logic for program creation:
- Parses form data including multiple exercises per session.
- Automatically finds or creates non-person-specific tags based on selected exercises for each session.
- Saves program and session data, linking sessions to appropriate tags.
- Implement program list view (`templates/program_list.html`):
- Displays existing programs.
- Includes HTMX-enabled delete button for each program.
- Links program names to the view page using HTMX for dynamic loading.
- Implement program detail view (`templates/program_view.html`):
- Displays program name, description, and sessions.
- Parses session tag filters to retrieve and display associated exercises.
- Update changelog with details of the new feature.
318 lines
16 KiB
HTML
318 lines
16 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}Create Workout Program{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="container mx-auto px-4 py-8 max-w-3xl"> {# Constrain width #}
|
|
<h1 class="text-3xl font-bold mb-8 text-center text-gray-800">Create New Workout Program</h1>
|
|
|
|
<form method="POST" action="{{ url_for('programs.create_program') }}" id="create-program-form"
|
|
class="bg-white shadow-md rounded-lg px-8 pt-6 pb-8 mb-4">
|
|
{# Program Details Section #}
|
|
<div class="mb-6 border-b border-gray-200 pb-4">
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-700">Program Details</h2>
|
|
<div class="mb-4">
|
|
<label for="program_name" class="block text-gray-700 text-sm font-bold mb-2">Program Name:</label>
|
|
<input type="text" id="program_name" name="program_name" required
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
|
|
</div>
|
|
<div>
|
|
<label for="description" class="block text-gray-700 text-sm font-bold mb-2">Description
|
|
(Optional):</label>
|
|
<textarea id="description" name="description" rows="3"
|
|
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"></textarea>
|
|
</div>
|
|
</div>
|
|
|
|
{# Sessions Section #}
|
|
<div class="mb-6">
|
|
<h2 class="text-xl font-semibold mb-4 text-gray-700">Sessions</h2>
|
|
<div id="sessions-container" class="space-y-6 mb-4"> {# Increased spacing #}
|
|
<!-- Session rows will be added here by JavaScript -->
|
|
</div>
|
|
<button type="button" id="add-session-btn"
|
|
class="mt-2 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd"
|
|
d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
Add Session
|
|
</button>
|
|
</div>
|
|
|
|
|
|
{# Form Actions #}
|
|
<div class="flex items-center justify-end pt-4 border-t border-gray-200">
|
|
<button type="submit"
|
|
class="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
|
Create Program
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
{# HTML Template for a single session row #}
|
|
<template id="session-row-template">
|
|
<div class="session-row bg-gray-50 border border-gray-300 rounded-lg shadow-sm overflow-hidden"
|
|
data-index="SESSION_INDEX_PLACEHOLDER">
|
|
{# Session Header #}
|
|
<div class="px-4 py-3 bg-gray-100 border-b border-gray-300 flex justify-between items-center">
|
|
<h3 class="session-day-number text-lg font-semibold text-gray-700">Day SESSION_DAY_NUMBER_PLACEHOLDER
|
|
</h3>
|
|
<input type="hidden" name="session_order_SESSION_INDEX_PLACEHOLDER"
|
|
value="SESSION_DAY_NUMBER_PLACEHOLDER">
|
|
<button type="button" class="remove-session-btn text-red-500 hover:text-red-700" title="Remove Session">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
|
|
stroke="currentColor" stroke-width="2">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{# Session Body #}
|
|
<div class="p-4 space-y-4">
|
|
<div>
|
|
<label for="session_name_SESSION_INDEX_PLACEHOLDER"
|
|
class="block text-sm font-medium text-gray-700 mb-1">Session Name (Optional):</label>
|
|
<input type="text" id="session_name_SESSION_INDEX_PLACEHOLDER"
|
|
name="session_name_SESSION_INDEX_PLACEHOLDER" value=""
|
|
class="shadow-sm focus:ring-indigo-500 focus:border-indigo-500 block w-full sm:text-sm border-gray-300 rounded-md">
|
|
</div>
|
|
{# Container for individual exercise selects #}
|
|
<div class="space-y-3">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Exercises:</label>
|
|
<div class="session-exercises-container space-y-2 border border-gray-200 p-3 rounded-md bg-white">
|
|
{# Exercise rows will be added here by JS #}
|
|
</div>
|
|
<button type="button"
|
|
class="add-exercise-btn mt-1 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
|
Add Exercise to Session
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
{# 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>
|
|
</div>
|
|
<button type="button" class="remove-exercise-btn text-red-500 hover:text-red-700 flex-shrink-0"
|
|
title="Remove Exercise">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 000 2h6a1 1 0 100-2H7z"
|
|
clip-rule="evenodd" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</template>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
// No longer need to pass exercises to JS for populating options
|
|
// const availableExercises = {{ exercises | tojson | safe }}; // Removed
|
|
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
const sessionsContainer = document.getElementById('sessions-container');
|
|
const addSessionBtn = document.getElementById('add-session-btn');
|
|
const sessionTemplate = document.getElementById('session-row-template');
|
|
const exerciseTemplate = document.getElementById('exercise-row-template');
|
|
let sessionCounter = sessionsContainer.querySelectorAll('.session-row').length;
|
|
|
|
// --- Function to add a new session row ---
|
|
function addSessionRow() {
|
|
const newRowFragment = sessionTemplate.content.cloneNode(true);
|
|
const newRow = newRowFragment.querySelector('.session-row');
|
|
const currentSessionIndex = sessionCounter;
|
|
|
|
if (!newRow) {
|
|
console.error("Failed to clone session row template.");
|
|
return;
|
|
}
|
|
|
|
// --- Update placeholders and attributes for Session ---
|
|
newRow.dataset.index = currentSessionIndex;
|
|
|
|
const dayNumberSpan = newRow.querySelector('.session-day-number');
|
|
if (dayNumberSpan) dayNumberSpan.textContent = `Day ${currentSessionIndex + 1}`;
|
|
|
|
const orderInput = newRow.querySelector('input[type="hidden"]');
|
|
if (orderInput) {
|
|
orderInput.name = `session_order_${currentSessionIndex}`;
|
|
orderInput.value = currentSessionIndex + 1;
|
|
}
|
|
|
|
const nameLabel = newRow.querySelector('label[for^="session_name_"]');
|
|
const nameInput = newRow.querySelector('input[id^="session_name_"]');
|
|
if (nameLabel) nameLabel.htmlFor = `session_name_${currentSessionIndex}`;
|
|
if (nameInput) {
|
|
nameInput.id = `session_name_${currentSessionIndex}`;
|
|
nameInput.name = `session_name_${currentSessionIndex}`;
|
|
}
|
|
// --- End Session Placeholder Updates ---
|
|
|
|
// Attach listener for the "Add Exercise" button within this new session
|
|
const addExerciseBtn = newRow.querySelector('.add-exercise-btn');
|
|
const exercisesContainer = newRow.querySelector('.session-exercises-container');
|
|
if (addExerciseBtn && exercisesContainer) {
|
|
addExerciseBtn.dataset.sessionIndex = currentSessionIndex; // Store index
|
|
addExerciseBtn.addEventListener('click', handleAddExerciseClick);
|
|
// Add one exercise select automatically when session is added
|
|
addExerciseSelect(exercisesContainer, currentSessionIndex);
|
|
}
|
|
|
|
sessionsContainer.appendChild(newRowFragment);
|
|
attachRemoveListener(newRow.querySelector('.remove-session-btn')); // Attach session remove listener
|
|
sessionCounter++;
|
|
}
|
|
|
|
// --- 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 removeBtn = newExFragment.querySelector('.remove-exercise-btn');
|
|
|
|
if (!originalSelect || !removeBtn) {
|
|
console.error("Failed to find original select or remove button in exercise template clone.");
|
|
return;
|
|
}
|
|
|
|
// 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);
|
|
}
|
|
|
|
// --- Event handler for Add Exercise buttons ---
|
|
function handleAddExerciseClick(event) {
|
|
const btn = event.currentTarget;
|
|
const sessionIndex = parseInt(btn.dataset.sessionIndex, 10);
|
|
const exercisesContainer = btn.closest('.session-row').querySelector('.session-exercises-container');
|
|
if (!isNaN(sessionIndex) && exercisesContainer) {
|
|
addExerciseSelect(exercisesContainer, sessionIndex);
|
|
} else {
|
|
console.error("Could not find session index or container for Add Exercise button.");
|
|
}
|
|
}
|
|
|
|
|
|
// --- Function to attach remove listener for Session rows ---
|
|
function attachRemoveListener(button) {
|
|
button.addEventListener('click', function () {
|
|
this.closest('.session-row').remove();
|
|
updateSessionNumbers(); // Renumber sessions after removal
|
|
});
|
|
}
|
|
|
|
// --- Function to attach remove listener for Exercise rows ---
|
|
function attachExerciseRemoveListener(button) {
|
|
if (button) {
|
|
button.addEventListener('click', function () {
|
|
this.closest('.exercise-row').remove();
|
|
});
|
|
}
|
|
}
|
|
|
|
|
|
// --- Function to renumber sessions ---
|
|
function updateSessionNumbers() {
|
|
const rows = sessionsContainer.querySelectorAll('.session-row');
|
|
sessionCounter = 0; // Reset counter before renumbering
|
|
rows.forEach((row, index) => {
|
|
const newIndex = index;
|
|
sessionCounter++; // Increment counter for the next row index
|
|
|
|
// Update visible day number
|
|
const daySpan = row.querySelector('.session-day-number');
|
|
if (daySpan) daySpan.textContent = `Day ${newIndex + 1}`;
|
|
|
|
// Update hidden order input value and name
|
|
const orderInput = row.querySelector('input[type="hidden"]');
|
|
if (orderInput) {
|
|
orderInput.name = `session_order_${newIndex}`;
|
|
orderInput.value = newIndex + 1;
|
|
}
|
|
|
|
// Update IDs and names for session name input/label
|
|
const nameLabel = row.querySelector('label[for^="session_name_"]');
|
|
const nameInput = row.querySelector('input[id^="session_name_"]');
|
|
|
|
if (nameLabel) nameLabel.htmlFor = `session_name_${newIndex}`;
|
|
if (nameInput) {
|
|
nameInput.id = `session_name_${newIndex}`;
|
|
nameInput.name = `session_name_${newIndex}`;
|
|
}
|
|
|
|
// Update names for the exercise selects within this session
|
|
const exerciseSelects = row.querySelectorAll('.exercise-select-original'); // Target original selects
|
|
exerciseSelects.forEach(select => {
|
|
select.name = `exercises_${newIndex}`;
|
|
});
|
|
|
|
// Update listener for the "Add Exercise" button
|
|
const addExerciseBtn = row.querySelector('.add-exercise-btn');
|
|
if (addExerciseBtn) {
|
|
addExerciseBtn.dataset.sessionIndex = newIndex; // Update index used by listener
|
|
// No need to re-attach listener if it uses the dataset property correctly
|
|
}
|
|
|
|
// Update data-index attribute
|
|
row.dataset.index = newIndex;
|
|
});
|
|
sessionCounter = rows.length;
|
|
}
|
|
|
|
|
|
// --- Event Listeners ---
|
|
addSessionBtn.addEventListener('click', addSessionRow);
|
|
|
|
// Attach listeners to initially loaded elements (if any)
|
|
sessionsContainer.querySelectorAll('.session-row .remove-session-btn').forEach(attachRemoveListener);
|
|
sessionsContainer.querySelectorAll('.exercise-row .remove-exercise-btn').forEach(attachExerciseRemoveListener);
|
|
sessionsContainer.querySelectorAll('.session-row .add-exercise-btn').forEach(btn => {
|
|
const sessionIndex = parseInt(btn.closest('.session-row').dataset.index, 10);
|
|
if (!isNaN(sessionIndex)) {
|
|
btn.dataset.sessionIndex = sessionIndex;
|
|
btn.addEventListener('click', handleAddExerciseClick);
|
|
}
|
|
});
|
|
|
|
|
|
// Add one session row automatically if none exist initially
|
|
if (sessionsContainer.children.length === 0) {
|
|
addSessionRow();
|
|
}
|
|
|
|
});
|
|
</script>
|
|
{% endblock %} |