frontend implementation

frontend/app.js

@@ -0,0 +1,247 @@
+// 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();
+}