buildWorkoutForm robot rewrite

buildworkoutform.js

function buildWorkoutForm(workoutData) {
    const workoutDataContainer = document.getElementById("workout-data-container");
    const saveButtonDiv = document.getElementById("workout-save-button-div");
    
    // 1. SAFELY CLEAR CONTAINER WITHOUT BREAKING THE REFERENCE
    // Detach the save button first, clear everything else, then re-add it.
    saveButtonDiv.remove(); 
    workoutDataContainer.textContent = ""; 
    workoutDataContainer.appendChild(saveButtonDiv);
    
    saveButtonDiv.hidden = false;

    // Check if workout data is empty
    if (!workoutData || !workoutData.workout || Object.keys(workoutData.workout).length === 0) {
        saveButtonDiv.hidden = true;
        const noWorkoutsDiv = document.createElement("div");
        noWorkoutsDiv.innerHTML = `<div>No workouts for today</div>`;
        workoutDataContainer.appendChild(noWorkoutsDiv);
        return;
    }

    const liftData = workoutData.workout.lifts || [];

    // 2. USE BROWSER ANIMATION FRAME TO FORCE MOBILE CHROME REPAINT
    requestAnimationFrame(() => {
        const fragment = document.createDocumentFragment();

        // Hidden input for date
        const hiddenLiftDayInputDiv = document.createElement('div');
        hiddenLiftDayInputDiv.className = "col-12";
        hiddenLiftDayInputDiv.innerHTML = `<input type="hidden" name="forDay" value="${workoutData.workout.forDay}">`;
        fragment.appendChild(hiddenLiftDayInputDiv);

        // Loop through lifts
        for (const [index, lift] of liftData.entries()) {
            const liftInputDiv = document.createElement('div');
            liftInputDiv.className = "mb-3"; // Clean spacing class
            
            // Fixed standard HTML IDs (removed invalid brackets from id attributes)
            liftInputDiv.innerHTML = `
                <div class="col-12">
                    <label for="lift-name-${index}" class="form-label">Lift</label>
                    <input name="lifts[${index}][name]" class="form-control" id="lift-name-${index}" value="${lift.name}">
                </div>`;

            const liftSets = lift.sets || {};
            const toSorted = Object.entries(liftSets).toSorted((a, b) => a[0].localeCompare(b[0]));

            // Loop through sets
            for (const [setIndex, set] of toSorted) {
                const setRowDiv = document.createElement('div');
                setRowDiv.className = "row mt-2";
                setRowDiv.innerHTML = `
                    <input id="lift-${index}-set-${setIndex}-order" name="lifts[${index}][sets][${setIndex}][setNumber]" type="hidden" value="${set.setNumber}">
                    <div class="col">
                        <label for="lift-${index}-set-${setIndex}-weight" class="form-label">Set Weight</label>
                        <input id="lift-${index}-set-${setIndex}-weight" name="lifts[${index}][sets][${setIndex}][weight]" type="text" value="${set.weight}" class="form-control" placeholder="0" aria-label="Set Weight">
                    </div>
                    <div class="col">
                        <label for="lift-${index}-set-${setIndex}-reps" class="form-label">Set Reps</label>
                        <input id="lift-${index}-set-${setIndex}-reps" name="lifts[${index}][sets][${setIndex}][reps]" type="text" value="${set.reps}" class="form-control" placeholder="0" aria-label="Set Reps">
                    </div>`;
                liftInputDiv.appendChild(setRowDiv);
            }

            fragment.appendChild(liftInputDiv);
        }

        // Append everything efficiently from memory in one batch
        workoutDataContainer.appendChild(fragment);
    });
}