workout-exercise-record.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Workout Exercise Records</title>
    <link rel="stylesheet" href="styles.css">
    <style>
        body { max-width: 900px; margin: 0 auto; padding: 24px 20px 64px; }
        main { display: grid; gap: 1rem; }
        .card { padding: 1rem; }
        .status { min-height: 1.2rem; color: var(--text-muted); }
        table { width: 100%; border-collapse: collapse; }
        th, td { padding: 0.5rem; border-bottom: 1px solid var(--border); text-align: left; }
        form { display: grid; gap: 0.75rem; }
        .grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
        .status-text { color: var(--text-muted); }

        .add-record-card { display: grid; gap: 0.75rem; }

        .add-record-header { display: flex; align-items: center; }

        .add-record-form {
            display: grid;
            gap: 0.75rem;
            grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
            align-items: end;
        }

        .add-record-form button {
            width: 100%;
            justify-self: end;
        }

        @media (max-width: 540px) {
            .add-record-form {
                grid-template-columns: 1fr;
            }

            .add-record-form button {
                justify-self: stretch;
            }
        }

        .workout-links {
            border: 1px solid var(--border);
            background: var(--surface-1);
        }

        .link-grid {
            display: grid;
            gap: 0.5rem;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        }

        .link-card {
            display: inline-flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.4rem;
            padding: 0.65rem 0.8rem;
            border: 1px solid var(--border);
            border-radius: 10px;
            background: var(--surface-2);
            text-decoration: none;
            font-weight: 600;
        }

        .link-card:hover { border-color: var(--accent); }

        #exercise-select { align-self: start; }

        .record-controls {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 0.75rem;
            flex-wrap: wrap;
            width: 100%;
        }

        .exercise-picker {
            display: grid;
            gap: 0.25rem;
            align-self: start;
            width: min(360px, 100%);
        }

        .exercise-browser {
            border: 1px solid var(--border);
            border-radius: 8px;
            padding: 0.25rem 0.5rem;
            background: var(--surface-2);
        }

        .exercise-browser summary {
            cursor: pointer;
            font-weight: 600;
            padding: 0.25rem 0;
        }

        .exercise-browser select {
            width: 100%;
            margin-top: 0.25rem;
        }

        .visually-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            padding: 0;
            margin: -1px;
            overflow: hidden;
            clip: rect(0, 0, 0, 0);
            white-space: nowrap;
            border: 0;
        }

        .record-actions {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            justify-content: flex-end;
        }

        .record-actions button {
            white-space: nowrap;
        }

        .record-table-container {
            display: grid;
            gap: 0.25rem;
        }

        .record-table {
            width: 100%;
        }

        .record-table caption {
            caption-side: top;
            text-align: left;
            font-weight: 600;
            margin-bottom: 0.25rem;
        }

        .records-context {
            margin: 0;
            font-weight: 600;
        }
    </style>
</head>
<body>
    <header class="page-header">
        <a class="site-link" href="https://tools.mathspp.com/" aria-label="Back to tools.mathspp.com">← tools.mathspp.com</a>
        <h1>Workout Exercise Records</h1>
        <p class="lead">View and update personal bests for any exercise.</p>
        <p class="status-text">Configure the API base URL and bearer token in <a href="workout-settings.html">Workout settings</a>. Stored values are reused automatically.</p>
    </header>

    <main>

        <section class="card">
            <h2>Records</h2>
            <div class="record-controls">
                <div class="exercise-picker">
                    <label for="exercise-select" class="status-text">Exercise</label>
                    <input id="exercise-select" list="exercise-options" placeholder="Start typing or pick from the list" aria-describedby="exercise-help" />
                    <p id="exercise-help" class="status-text">Start typing to search or open the dropdown to pick an exercise.</p>
                    <datalist id="exercise-options"></datalist>
                    <details class="exercise-browser">
                        <summary>Browse exercise list</summary>
                        <label class="visually-hidden" for="exercise-browse-select">Browse exercises</label>
                        <select id="exercise-browse-select" size="8"></select>
                    </details>
                </div>
                <div class="record-actions">
                    <button id="get-records">Get records</button>
                    <button id="refresh-exercises">Refresh list</button>
                </div>
            </div>
            <p id="records-context" class="status-text records-context">No exercise selected.</p>
            <div class="record-table-container">
                <div id="load-status" class="status"></div>
                <table class="record-table">
                    <caption id="records-caption" aria-live="polite">Select an exercise to view records</caption>
                    <thead><tr><th>Weight</th><th>Reps</th></tr></thead>
                    <tbody id="record-rows"></tbody>
                </table>
                <p id="no-record-note" class="status-text" aria-live="polite"></p>
            </div>
        </section>

        <section class="card add-record-card">
            <div class="add-record-header">
                <h2>Add record</h2>
            </div>
            <form id="record-form" class="add-record-form">
                <label>Weight<input type="number" step="0.1" id="record-weight" required></label>
                <label>Reps<input type="number" id="record-reps" required></label>
                <button type="submit">Add record</button>
            </form>
            <div id="record-status" class="status"></div>
        </section>
        <section class="surface stack workout-links" aria-label="Workout tools navigation">
            <h2 style="margin: 0;">Workout tools</h2>
            <p class="status-text">Quick links to the rest of the workout suite.</p>
            <div class="link-grid">
                <a class="link-card" href="workout-settings.html">Workout settings<span>→</span></a>
                <a class="link-card" href="workout-template-manager.html">Workout template manager<span>→</span></a>
                <a class="link-card" href="workout-session-logger.html">Workout session logger<span>→</span></a>
                <a class="link-card" href="workout-session-viewer.html">Workout session viewer<span>→</span></a>
                <a class="link-card" href="workout-exercise-manager.html">Workout exercise manager<span>→</span></a>
                <a class="link-card" href="workout-exercise-record.html">Workout exercise records<span>→</span></a>
            </div>
        </section>
    </main>

    <script>
        const exerciseSelect = document.getElementById('exercise-select');
        const exerciseOptions = document.getElementById('exercise-options');
        const exerciseBrowseSelect = document.getElementById('exercise-browse-select');
        const loadStatus = document.getElementById('load-status');
        const recordRows = document.getElementById('record-rows');
        const recordStatus = document.getElementById('record-status');
        const recordWeight = document.getElementById('record-weight');
        const recordReps = document.getElementById('record-reps');
        const recordsCaption = document.getElementById('records-caption');
        const recordsContext = document.getElementById('records-context');
        const noRecordNote = document.getElementById('no-record-note');

        const STORAGE_KEYS = { base: 'workout-api-base', token: 'workout-api-token' };

        let exercises = [];

        function formatExerciseName(name) {
            if (!name) return '';
            const trimmed = name.trim();
            return trimmed ? `${trimmed[0].toUpperCase()}${trimmed.slice(1)}` : '';
        }

        function populateExerciseOptions(list) {
            exerciseOptions.innerHTML = '';
            exerciseBrowseSelect.innerHTML = '';
            const sorted = [...list].sort((a, b) =>
                a.name.localeCompare(b.name, undefined, { sensitivity: 'base' })
            );

            sorted.forEach((ex) => {
                const displayName = ex.display_name || formatExerciseName(ex.name);
                const option = document.createElement('option');
                option.value = displayName;
                option.dataset.name = ex.name;
                option.dataset.displayName = displayName;
                exerciseOptions.appendChild(option);

                const selectOption = document.createElement('option');
                selectOption.value = displayName;
                selectOption.textContent = displayName;
                selectOption.dataset.name = ex.name;
                exerciseBrowseSelect.appendChild(selectOption);
            });
        }

        function getSelectedExercise() {
            const inputValue = exerciseSelect.value.trim();
            if (!inputValue) return null;
            const lowerInput = inputValue.toLowerCase();

            return (
                exercises.find((ex) => {
                    const formatted = formatExerciseName(ex.name).toLowerCase();
                    const display = (ex.display_name || '').toLowerCase();
                    const raw = ex.name.toLowerCase();
                    return lowerInput === formatted || lowerInput === display || lowerInput === raw;
                }) || null
            );
        }

        function getConfig() {
            const base = (localStorage.getItem(STORAGE_KEYS.base) || '').trim();
            const token = (localStorage.getItem(STORAGE_KEYS.token) || '').trim();
            if (!base || !token) {
                throw new Error('Set the API base URL and bearer token in Workout settings first.');
            }
            return { base, token };
        }

        async function apiFetch(path, options = {}) {
            const { base, token } = getConfig();
            const response = await fetch(`${base.replace(/\/$/, '')}${path}`, {
                ...options,
                headers: {
                    'Content-Type': 'application/json',
                    Authorization: `Bearer ${token}`,
                    ...(options.headers || {}),
                },
            });
            const data = await response.json();
            if (!response.ok) throw new Error(data?.error?.message || response.statusText);
            return data;
        }

        async function loadExercises() {
            loadStatus.textContent = 'Loading exercises...';
            exerciseSelect.value = '';
            exerciseBrowseSelect.selectedIndex = -1;
            try {
                const data = await apiFetch('/exercises');
                if (!data.exercises.length) {
                    loadStatus.textContent = 'No exercises found.';
                    return;
                }
                exercises = data.exercises;
                populateExerciseOptions(exercises);
                loadStatus.textContent = '';
                updateRecordsCaption('');
                recordRows.innerHTML = '';
            } catch (error) {
                loadStatus.textContent = error.message;
            }
        }

        function updateRecordsCaption(name, hasRecords) {
            if (!name) {
                recordsCaption.textContent = 'Select an exercise to view records';
                recordsContext.textContent = 'No exercise selected.';
                noRecordNote.textContent = '';
                return;
            }

            recordsContext.textContent = `Showing records for: ${name}`;

            recordsCaption.textContent = hasRecords === false
                ? `No ${name} records`
                : `${name} records`;
        }

        async function loadRecords() {
            const selected = getSelectedExercise();
            if (!selected) {
                loadStatus.textContent = 'Select a valid exercise first.';
                return;
            }
            const displayName = selected.display_name || formatExerciseName(selected.name);
            const name = selected.name;
            updateRecordsCaption(displayName);
            loadStatus.textContent = `Loading records for ${displayName}...`;
            recordRows.innerHTML = '';
            noRecordNote.textContent = '';
            try {
                const data = await apiFetch(`/exercises/${encodeURIComponent(name)}/records`);
                const sortedRecords = sortRecords(data.records || []);

                sortedRecords.forEach((rec) => {
                    const row = document.createElement('tr');
                    row.innerHTML = `<td>${rec.weight}</td><td>${rec.reps}</td>`;
                    recordRows.appendChild(row);
                });
                if (sortedRecords.length === 0) {
                    const row = document.createElement('tr');
                    row.innerHTML = '<td colspan="2">No personal bests yet.</td>';
                    recordRows.appendChild(row);
                    noRecordNote.textContent = `${displayName} has no records yet.`;
                }
                updateRecordsCaption(displayName, sortedRecords.length > 0);
                loadStatus.textContent = '';
            } catch (error) {
                loadStatus.textContent = error.message;
                noRecordNote.textContent = '';
            }
        }

        function dominates(a, b) {
            return (
                a.weight >= b.weight &&
                a.reps >= b.reps &&
                (a.weight > b.weight || a.reps > b.reps)
            );
        }

        function sortRecords(records) {
            return [...records].sort((a, b) => {
                if (b.weight !== a.weight) return b.weight - a.weight;
                return a.reps - b.reps;
            });
        }

        function clearRecordInputs() {
            recordWeight.value = '';
            recordReps.value = '';
        }

        document.getElementById('refresh-exercises').addEventListener('click', loadExercises);
        document.getElementById('get-records').addEventListener('click', () => {
            clearRecordInputs();
            recordStatus.textContent = '';
            loadRecords();
        });
        exerciseSelect.addEventListener('input', () => {
            clearRecordInputs();
            recordStatus.textContent = '';
            if (!getSelectedExercise()) {
                loadStatus.textContent = '';
                updateRecordsCaption('');
                recordRows.innerHTML = '';
                return;
            }

            loadRecords();
        });
        exerciseBrowseSelect.addEventListener('change', (event) => {
            const selectedOption = event.target.selectedOptions[0];
            if (!selectedOption) return;
            const value = selectedOption.value || selectedOption.textContent;
            exerciseSelect.value = value;
            clearRecordInputs();
            recordStatus.textContent = '';
            loadRecords();
            const details = exerciseBrowseSelect.closest('details');
            if (details) details.open = false;
        });

        document.getElementById('record-form').addEventListener('submit', async (event) => {
            event.preventDefault();
            const selected = getSelectedExercise();
            if (!selected) return;
            const name = selected.name;

            recordStatus.textContent = 'Checking record...';
            try {
                const current = await apiFetch(`/exercises/${encodeURIComponent(name)}/records`);
                const records = current.records || [];
                const newRecord = {
                    weight: Number(recordWeight.value),
                    reps: Number(recordReps.value),
                };

                const isDuplicate = records.some(
                    (r) => r.weight === newRecord.weight && r.reps === newRecord.reps
                );
                const dominatedByExisting = records.some((r) => dominates(r, newRecord));

                if (isDuplicate || dominatedByExisting) {
                    recordStatus.textContent = 'Record not submitted: an existing record is better.';
                    return;
                }

                const updatedRecords = records.filter((r) => !dominates(newRecord, r));
                updatedRecords.push(newRecord);

                recordStatus.textContent = 'Saving records...';
                await apiFetch(`/exercises/${encodeURIComponent(name)}/records`, {
                    method: 'PUT',
                    body: JSON.stringify({ records: updatedRecords }),
                });
                recordStatus.textContent = 'Records updated.';
                loadRecords();
            } catch (error) {
                recordStatus.textContent = error.message;
            }
        });

        loadExercises();
    </script>

    <footer class="page-footer">
        <p>Built with ❤️, 🤖, and 🐍, by <a href="https://mathspp.com/">Rodrigo Girão Serrão</a></p>
    </footer>
</body>
</html>