LocalScriptsWeb/frontend/static/js/main.js

// frontend/static/js/main.js

// Global state
let currentProfile = null;

// Initialize when page loads
document.addEventListener('DOMContentLoaded', async () => {
    try {
        await loadProfiles();
        await loadScriptGroups();
        updateWorkDirDisplay();
    } catch (error) {
        console.error('Initialization error:', error);
        showError('Failed to initialize application');
    }
});

// API functions
async function apiRequest(endpoint, options = {}) {
    try {
        const response = await fetch(`/api${endpoint}`, {
            ...options,
            headers: {
                'Content-Type': 'application/json',
                ...options.headers
            }
        });
        
        if (!response.ok) {
            const error = await response.json();
            throw new Error(error.error || 'API request failed');
        }
        
        return await response.json();
    } catch (error) {
        console.error('API Error:', error);
        showError(error.message);
        throw error;
    }
}

// Profile functions
async function loadProfiles() {
    try {
        const profiles = await apiRequest('/profiles');
        updateProfileSelector(profiles);
        
        // Select first profile if none selected
        if (!currentProfile) {
            const defaultProfile = profiles.find(p => p.id === 'default') || profiles[0];
            if (defaultProfile) {
                await selectProfile(defaultProfile.id);
            }
        }
    } catch (error) {
        showError('Failed to load profiles');
    }
}

function updateProfileSelector(profiles) {
    const select = document.getElementById('profileSelect');
    select.innerHTML = profiles.map(profile => `
        <option value="${profile.id}" ${profile.id === currentProfile?.id ? 'selected' : ''}>
            ${profile.name}
        </option>
    `).join('');
}

async function selectProfile(profileId) {
    try {
        currentProfile = await apiRequest(`/profiles/${profileId}`);
        updateWorkDirDisplay();
    } catch (error) {
        showError('Failed to load profile');
    }
}

async function changeProfile() {
    const select = document.getElementById('profileSelect');
    if (select.value) {
        await selectProfile(select.value);
        await loadScriptGroups(); // Reload scripts when profile changes
    }
}

// Work directory functions
function updateWorkDirDisplay() {
    const input = document.getElementById('workDirPath');
    if (input && currentProfile) {
        input.value = currentProfile.work_dir || '';
    }
}

async function selectWorkDir() {
    try {
        const response = await apiRequest('/select-directory');
        if (response.path) {
            await apiRequest(`/profiles/${currentProfile.id}`, {
                method: 'PUT',
                body: JSON.stringify({
                    ...currentProfile,
                    work_dir: response.path
                })
            });
            await selectProfile(currentProfile.id);
            showSuccess('Work directory updated successfully');
        }
    } catch (error) {
        showError('Failed to update work directory');
    }
}

// Output functions
function showError(message) {
    const output = document.getElementById('outputArea');
    const timestamp = new Date().toLocaleTimeString();
    output.innerHTML += `\n[${timestamp}] ERROR: ${message}`;
    output.scrollTop = output.scrollHeight;
}

function showSuccess(message) {
    const output = document.getElementById('outputArea');
    const timestamp = new Date().toLocaleTimeString();
    output.innerHTML += `\n[${timestamp}] SUCCESS: ${message}`;
    output.scrollTop = output.scrollHeight;
}

function clearOutput() {
    const output = document.getElementById('outputArea');
    output.innerHTML = '';
}

// Modal helper functions
function closeModal(button) {
    const modal = button.closest('.modal');
    if (modal) {
        modal.remove();
    }
}

// Global error handler
window.addEventListener('unhandledrejection', function(event) {
    console.error('Unhandled promise rejection:', event.reason);
    showError('An unexpected error occurred');
});

// Export functions for use in other modules
window.showError = showError;
window.showSuccess = showSuccess;
window.closeModal = closeModal;
window.currentProfile = currentProfile;