gym-tracker/frontend/app.js

// Main Application Logic

// Application state
let sessions = [];
let currentEditingSessionId = null;

/**
 * Initialize the application
 */
async function init() {
    try {
        showLoading();

        // Load sessions from backend
        await loadSessions();

        // Set up event listeners
        setupEventListeners();

        // Initial render
        updateUI();

        hideLoading();
    } catch (error) {
        hideLoading();
        showError('Failed to initialize application: ' + error.message);
    }
}

/**
 * Load all sessions from the backend
 */
async function loadSessions() {
    try {
        sessions = await fetchSessions();
    } catch (error) {
        console.error('Error loading sessions:', error);
        throw error;
    }
}

/**
 * Set up all event listeners
 */
function setupEventListeners() {
    // Add Workout button
    const addWorkoutBtn = document.getElementById('addWorkoutBtn');
    if (addWorkoutBtn) {
        addWorkoutBtn.addEventListener('click', openAddSessionModal);
    }

    // Modal close button
    const closeModalBtn = document.getElementById('closeModal');
    if (closeModalBtn) {
        closeModalBtn.addEventListener('click', closeModal);
    }

    // Cancel button
    const cancelBtn = document.getElementById('cancelBtn');
    if (cancelBtn) {
        cancelBtn.addEventListener('click', closeModal);
    }

    // Session form submit
    const sessionForm = document.getElementById('sessionForm');
    if (sessionForm) {
        sessionForm.addEventListener('submit', handleSessionFormSubmit);
    }

    // Close modal when clicking outside
    const modal = document.getElementById('sessionModal');
    if (modal) {
        modal.addEventListener('click', (e) => {
            if (e.target === modal) {
                closeModal();
            }
        });
    }
}

/**
 * Open modal for adding a new session
 */
function openAddSessionModal() {
    currentEditingSessionId = null;

    const modalTitle = document.getElementById('modalTitle');
    if (modalTitle) {
        modalTitle.textContent = 'Add Workout Session';
    }

    // Set default date to today
    const dateInput = document.getElementById('sessionDate');
    if (dateInput) {
        const today = new Date().toISOString().split('T')[0];
        dateInput.value = today;
    }

    // Clear all checkboxes
    const checkboxes = document.querySelectorAll('input[name="muscleGroup"]');
    checkboxes.forEach(cb => cb.checked = false);

    showModal();
}

/**
 * Open modal for editing an existing session
 * @param {string} sessionId - ID of the session to edit
 */
function openEditSessionModal(sessionId) {
    const session = sessions.find(s => s.id === sessionId);
    if (!session) {
        showError('Session not found');
        return;
    }

    currentEditingSessionId = sessionId;

    const modalTitle = document.getElementById('modalTitle');
    if (modalTitle) {
        modalTitle.textContent = 'Edit Workout Session';
    }

    // Set date
    const dateInput = document.getElementById('sessionDate');
    if (dateInput) {
        dateInput.value = session.date;
    }

    // Set checkboxes
    const checkboxes = document.querySelectorAll('input[name="muscleGroup"]');
    checkboxes.forEach(cb => {
        cb.checked = session.muscle_groups.includes(cb.value);
    });

    showModal();
}

/**
 * Show the modal
 */
function showModal() {
    const modal = document.getElementById('sessionModal');
    if (modal) {
        modal.classList.add('active');
    }
}

/**
 * Close the modal
 */
function closeModal() {
    const modal = document.getElementById('sessionModal');
    if (modal) {
        modal.classList.remove('active');
    }
    currentEditingSessionId = null;
}

/**
 * Handle session form submission
 * @param {Event} e - Form submit event
 */
async function handleSessionFormSubmit(e) {
    e.preventDefault();

    const dateInput = document.getElementById('sessionDate');
    const checkboxes = document.querySelectorAll('input[name="muscleGroup"]:checked');

    const date = dateInput.value;
    const muscle_groups = Array.from(checkboxes).map(cb => cb.value);

    // Validate that at least one muscle group is selected
    if (muscle_groups.length === 0) {
        showError('Please select at least one muscle group');
        return;
    }

    const sessionData = {
        date,
        muscle_groups
    };

    try {
        showLoading();

        if (currentEditingSessionId) {
            // Update existing session
            await updateSession(currentEditingSessionId, sessionData);
            showSuccess('Session updated successfully');
        } else {
            // Create new session
            await createSession(sessionData);
            showSuccess('Session added successfully');
        }

        // Reload sessions and update UI
        await loadSessions();
        updateUI();

        closeModal();
        hideLoading();
    } catch (error) {
        hideLoading();
        showError('Failed to save session: ' + error.message);
    }
}

/**
 * Delete a session
 * @param {string} sessionId - ID of the session to delete
 */
async function handleDeleteSession(sessionId) {
    if (!confirm('Are you sure you want to delete this session?')) {
        return;
    }

    try {
        showLoading();
        await deleteSession(sessionId);
        await loadSessions();
        updateUI();
        hideLoading();
        showSuccess('Session deleted successfully');
    } catch (error) {
        hideLoading();
        showError('Failed to delete session: ' + error.message);
    }
}

/**
 * Update the entire UI with current sessions data
 */
function updateUI() {
    // Update muscle groups dashboard
    updateMuscleGroupsDashboard(sessions);

    // Update heatmap
    updateHeatmap(sessions);
}

// Initialize the application when DOM is ready
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}