LocalScriptsWeb/frontend/static/js/scripts.js

// frontend/static/js/scripts.js

// Script groups state
let scriptGroups = [];

// Load script groups when page loads
document.addEventListener('DOMContentLoaded', async () => {
    await loadScriptGroups();
});

// Load script groups from API
async function loadScriptGroups() {
    try {
        scriptGroups = await apiRequest('/scripts');
        updateScriptGroupsDisplay();
    } catch (error) {
        showError('Failed to load script groups');
    }
}

// Update script groups display
function updateScriptGroupsDisplay() {
    const container = document.getElementById('scriptGroups');
    
    if (!scriptGroups.length) {
        container.innerHTML = '<p class="no-scripts">No script groups available</p>';
        return;
    }
    
    container.innerHTML = scriptGroups.map(group => `
        <div class="script-group" data-group-id="${group.id}">
            <div class="script-group-header">
                <h3>${group.name}</h3>
                <button onclick="configureGroup('${group.id}')" class="config-btn">
                    Configure
                </button>
            </div>
            <div class="script-list">
                ${group.scripts.map(script => `
                    <div class="script-item">
                        <div class="script-info">
                            <h4>${script.name}</h4>
                            <p>${script.description || 'No description available'}</p>
                        </div>
                        <div class="script-actions">
                            <button onclick="runScript('${group.id}', '${script.id}')" class="run-btn">
                                Run
                            </button>
                        </div>
                    </div>
                `).join('')}
            </div>
        </div>
    `).join('');
}

// Run a script
async function runScript(groupId, scriptId) {
    if (!currentProfile?.work_dir) {
        showError('Please select a work directory first');
        return;
    }
    
    try {
        const result = await apiRequest(`/scripts/${groupId}/${scriptId}/run`, {
            method: 'POST',
            body: JSON.stringify({
                work_dir: currentProfile.work_dir,
                profile: currentProfile
            })
        });
        
        if (result.status === 'error') {
            showError(result.error);
        } else {
            showSuccess(`Script ${scriptId} executed successfully`);
            if (result.output) {
                const output = document.getElementById('outputArea');
                output.innerHTML += `\n[${new Date().toLocaleTimeString()}] ${result.output}`;
                output.scrollTop = output.scrollHeight;
            }
        }
    } catch (error) {
        showError(`Failed to run script: ${error.message}`);
    }
}

// Configure script group
async function configureGroup(groupId) {
    if (!currentProfile?.work_dir) {
        showError('Please select a work directory first');
        return;
    }
    
    try {
        const config = await getGroupConfig(groupId);
        showGroupConfigEditor(groupId, config);
    } catch (error) {
        showError('Failed to load group configuration');
    }
}

// Show group configuration editor
function showGroupConfigEditor(groupId, config) {
    const group = scriptGroups.find(g => g.id === groupId);
    if (!group) return;
    
    const modal = document.createElement('div');
    modal.className = 'modal active';
    
    modal.innerHTML = `
        <div class="modal-content">
            <h2>${group.name} Configuration</h2>
            <form id="groupConfigForm" onsubmit="saveGroupConfig(event, '${groupId}')">
                <div class="form-group">
                    <label for="configData">Configuration (JSON)</label>
                    <textarea id="configData" name="config" rows="10" 
                              class="config-editor">${JSON.stringify(config || {}, null, 2)}</textarea>
                </div>
                <div class="button-group">
                    <button type="button" onclick="closeModal(this)">Cancel</button>
                    <button type="submit">Save</button>
                </div>
            </form>
        </div>
    `;
    
    document.body.appendChild(modal);
}

// Save group configuration
async function saveGroupConfig(event, groupId) {
    event.preventDefault();
    
    try {
        const configText = document.getElementById('configData').value;
        const config = JSON.parse(configText);
        
        await updateGroupConfig(groupId, config);
        closeModal(event.target);
        showSuccess('Group configuration updated successfully');
    } catch (error) {
        showError(`Failed to save configuration: ${error.message}`);
    }
}