imcp 0.1.6 → 0.1.8-dev

package/src/web/public/js/settings.js

@@ -1,314 +0,0 @@
-import { buildUrlWithFlights } from './flights/flights.js';
-
-// Toast notification function
-function showToast(message, type = 'success') {
-    const toastContainer = document.querySelector('.toast-container');
-    if (!toastContainer) return;
-
-    const toastId = `toast-${Date.now()}`;
-    const toastHTML = `
-        <div id="${toastId}" class="toast align-items-center text-white bg-${type === 'success' ? 'success' : 'danger'} border-0" role="alert" aria-live="assertive" aria-atomic="true">
-            <div class="d-flex">
-                <div class="toast-body">
-                    ${message}
-                </div>
-                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
-            </div>
-        </div>
-    `;
-    toastContainer.insertAdjacentHTML('beforeend', toastHTML);
-    const toastElement = document.getElementById(toastId);
-    const toast = new bootstrap.Toast(toastElement, { delay: 3000 });
-    toast.show();
-    toastElement.addEventListener('hidden.bs.toast', () => {
-        toastElement.remove();
-    });
-}
-
-document.addEventListener('DOMContentLoaded', () => {
-    // All DOM element queries and event listeners must be inside this block!
-    const settingsForm = document.getElementById('settingsForm');
-    const nodePathInput = document.getElementById('nodePath');
-    const browserPathInput = document.getElementById('browserPath');
-    const systemEnvironmentsDiv = document.getElementById('systemEnvironments');
-    
-    // Python Environments elements
-    const pythonEnvsContainer = document.getElementById('pythonEnvsContainer');
-    const addPythonEnvButton = document.getElementById('addPythonEnvButton');
-    const pythonEnvsLoadingMsg = document.getElementById('pythonEnvsLoadingMsg');
-    
-    // User Configurations elements
-    const userConfigurationsContainer = document.getElementById('userConfigurationsContainer');
-    const addUserConfigButton = document.getElementById('addUserConfigButton');
-    const userConfigLoadingMsg = document.getElementById('userConfigLoadingMsg');
-    
-    const cancelButton = document.getElementById('cancelButton');
-    const setupButton = document.getElementById('setupButton');
-
-// (Removed duplicate showToast function here)
-
-
-    async function loadSettings() {
-        try {
-            const response = await fetch('/api/settings');
-            if (!response.ok) {
-                const errorData = await response.json();
-                throw new Error(errorData.error || `HTTP error! status: ${response.status}`);
-            }
-            const apiResponse = await response.json();
-            if (apiResponse.success && apiResponse.data) {
-                const settings = apiResponse.data;
-                
-                // Populate Python Environments
-                if(pythonEnvsLoadingMsg) pythonEnvsLoadingMsg.remove(); // Remove loading message
-                pythonEnvsContainer.innerHTML = ''; // Clear previous entries
-                
-                if (settings.pythonEnvs && Object.keys(settings.pythonEnvs).length > 0) {
-                    Object.entries(settings.pythonEnvs).forEach(([server, path]) => {
-                        renderPythonEnvInput(server, path);
-                    });
-                } else if (settings.pythonEnv) {
-                    // Handle legacy pythonEnv
-                    renderPythonEnvInput('system', settings.pythonEnv);
-                } else {
-                    if (!pythonEnvsContainer.querySelector('.python-env-row')) { // Add placeholder if no rows exist
-                        const p = document.createElement('p');
-                        p.className = 'text-gray-500 python-env-placeholder';
-                        p.textContent = 'No Python environments defined. Click "Add Python Environment" to add one.';
-                        pythonEnvsContainer.appendChild(p);
-                    }
-                }
-                
-                nodePathInput.value = settings.nodePath || '';
-                browserPathInput.value = settings.browserPath || '';
-
-                // Populate System Environments
-                systemEnvironmentsDiv.innerHTML = ''; // Clear loading message
-                if (settings.systemEnvironments && Object.keys(settings.systemEnvironments).length > 0) {
-                    // Create a modern, scrollable list (not a table)
-                    const list = document.createElement('div');
-                    list.className = 'flex flex-col';
-
-                    Object.entries(settings.systemEnvironments).forEach(([key, value], idx) => {
-                        const item = document.createElement('div');
-                        item.className =
-                            'flex flex-col sm:flex-row sm:items-center bg-white rounded-md border border-gray-200 px-4 py-2 shadow-sm hover:shadow transition group';
-                        item.innerHTML = `
-                            <div class="flex items-center min-w-0 w-full sm:w-1/4 sm:mb-0">
-                                <i class='bx bx-cog text-blue-400 mr-2'></i>
-                                <span class="font-mono font-semibold text-gray-800 text-base truncate" title="${key}">${key}</span>
-                            </div>
-                            <div class="flex-1 min-w-0 break-all text-gray-700 text-sm pl-7 sm:pl-4">
-                                ${value}
-                            </div>
-                        `;
-                        list.appendChild(item);
-                    });
-
-                    // Restore frame styling for the new layout
-                    systemEnvironmentsDiv.classList.remove('shadow');
-                    systemEnvironmentsDiv.classList.add('rounded-lg', 'bg-white', 'border', 'border-gray-200', 'border-1');
-                    systemEnvironmentsDiv.classList.remove('border-2', 'border-4', 'border-8');
-                    systemEnvironmentsDiv.classList.add('p-0');
-                    systemEnvironmentsDiv.style.padding = '0.5rem 0.5rem 0.5rem 0.5rem';
-                    systemEnvironmentsDiv.appendChild(list);
-                } else {
-                    systemEnvironmentsDiv.innerHTML = '<p class="text-gray-500">No system environment variables loaded or available.</p>';
-                }
-
-                // Populate User Configurations
-                if(userConfigLoadingMsg) userConfigLoadingMsg.remove(); // Remove loading message
-                userConfigurationsContainer.innerHTML = ''; // Clear previous entries
-                if (settings.userConfigurations && Object.keys(settings.userConfigurations).length > 0) {
-                    Object.entries(settings.userConfigurations).forEach(([key, value]) => {
-                        renderUserConfigInput(key, value);
-                    });
-                } else {
-                    if (!userConfigurationsContainer.querySelector('.user-config-row')) { // Add placeholder if no rows exist
-                        const p = document.createElement('p');
-                        p.className = 'text-gray-500 user-config-placeholder';
-                        p.textContent = 'No user configurations defined. Click "Add User Configuration" to add one.';
-                        userConfigurationsContainer.appendChild(p);
-                    }
-                }
-
-            } else {
-                throw new Error(apiResponse.error || 'Failed to load settings.');
-            }
-        } catch (error) {
-            console.error('Error loading settings:', error);
-            showToast(`Error loading settings: ${error.message}`, 'danger');
-            systemEnvironmentsDiv.innerHTML = `<p class="text-red-500">Error loading environment variables: ${error.message}</p>`;
-            if(userConfigLoadingMsg) userConfigLoadingMsg.textContent = `Error loading user configurations: ${error.message}`;
-        }
-    }
-
-    function renderPythonEnvInput(server = 'system', path = '') {
-        const placeholder = pythonEnvsContainer.querySelector('.python-env-placeholder');
-        if (placeholder) placeholder.remove();
-
-        const uniqueId = `python-env-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
-        const div = document.createElement('div');
-        div.className = 'python-env-row flex items-center gap-3 mb-2';
-        div.innerHTML = `
-            <input type="text" value="${server}" class="form-input form-control w-1/3 px-3 py-2 rounded-md python-env-server" placeholder="Server Name (e.g., system)">
-            <input type="text" value="${path}" class="form-input form-control w-2/3 px-3 py-2 rounded-md python-env-path" placeholder="e.g., /usr/bin/python3 or C:/Python39/python.exe">
-            <button type="button" class="btn btn-danger btn-sm remove-python-env-button flex items-center">
-                <i class='bx bx-trash'></i>
-            </button>
-        `;
-        pythonEnvsContainer.appendChild(div);
-        div.querySelector('.remove-python-env-button').addEventListener('click', function() {
-            this.closest('.python-env-row').remove();
-            if (!pythonEnvsContainer.querySelector('.python-env-row')) { // Add placeholder if no rows exist after removal
-                const p = document.createElement('p');
-                p.className = 'text-gray-500 python-env-placeholder';
-                p.textContent = 'No Python environments defined. Click "Add Python Environment" to add one.';
-                pythonEnvsContainer.appendChild(p);
-            }
-        });
-    }
-
-    function renderUserConfigInput(key = '', value = '') {
-        const placeholder = userConfigurationsContainer.querySelector('.user-config-placeholder');
-        if (placeholder) placeholder.remove();
-
-        const uniqueId = `user-config-${Date.now()}-${Math.random().toString(36).substr(2, 5)}`;
-        const div = document.createElement('div');
-        div.className = 'user-config-row flex items-center gap-3 mb-2';
-        const isSecret = key.toLowerCase().includes('key');
-        const valueInputType = isSecret ? 'password' : 'text';
-
-        // Key Input
-        const keyInputHTML = `<input type="text" value="${key}" class="form-input form-control w-1/3 px-3 py-2 rounded-md user-config-key" placeholder="Key">`;
-
-        // Value Input & Eye Icon (if secret)
-        let valueSectionHTML;
-        if (isSecret) {
-            valueSectionHTML = `
-                <div class="relative w-2/3">
-                    <input type="${valueInputType}" value="${value}" class="form-input form-control w-full px-3 py-2 rounded-md user-config-value pr-10" placeholder="Value">
-                    <button type="button" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700 toggle-visibility-button" style="background: transparent; border: none;">
-                        <i class='bx bx-show text-lg'></i>
-                    </button>
-                </div>
-            `;
-        } else {
-            valueSectionHTML = `<input type="${valueInputType}" value="${value}" class="form-input form-control w-2/3 px-3 py-2 rounded-md user-config-value" placeholder="Value">`;
-        }
-
-        // Remove Button
-        const removeButtonHTML = `
-            <button type="button" class="btn btn-danger btn-sm remove-user-config-button flex items-center">
-                <i class='bx bx-trash'></i>
-            </button>
-        `;
-
-        div.innerHTML = keyInputHTML + valueSectionHTML + removeButtonHTML;
-        userConfigurationsContainer.appendChild(div);
-
-        if (isSecret) {
-            const toggleButton = div.querySelector('.toggle-visibility-button');
-            const valueInput = div.querySelector('.user-config-value');
-            const eyeIcon = toggleButton.querySelector('i');
-
-            toggleButton.addEventListener('click', (e) => {
-                e.preventDefault(); // Prevent form submission if inside a form
-                if (valueInput.type === 'password') {
-                    valueInput.type = 'text';
-                    eyeIcon.classList.remove('bx-show');
-                    eyeIcon.classList.add('bx-hide');
-                } else {
-                    valueInput.type = 'password';
-                    eyeIcon.classList.remove('bx-hide');
-                    eyeIcon.classList.add('bx-show');
-                }
-            });
-        }
-
-        div.querySelector('.remove-user-config-button').addEventListener('click', function() {
-            this.closest('.user-config-row').remove();
-            if (!userConfigurationsContainer.querySelector('.user-config-row')) { // Add placeholder if no rows exist after removal
-                const p = document.createElement('p');
-                p.className = 'text-gray-500 user-config-placeholder';
-                p.textContent = 'No user configurations defined. Click "Add User Configuration" to add one.';
-                userConfigurationsContainer.appendChild(p);
-            }
-        });
-    }
-
-
-    async function saveSettings(event) {
-        event.preventDefault();
-        setupButton.disabled = true;
-        setupButton.innerHTML = `<i class='bx bx-loader-alt bx-spin mr-2'></i>Saving...`;
-
-        const pythonEnvs = {};
-        document.querySelectorAll('.python-env-row').forEach(row => {
-            const serverInput = row.querySelector('.python-env-server');
-            const pathInput = row.querySelector('.python-env-path');
-            if (serverInput && pathInput && serverInput.value.trim()) {
-                pythonEnvs[serverInput.value.trim()] = pathInput.value.trim();
-            }
-        });
-        
-        const userConfigs = {};
-        document.querySelectorAll('.user-config-row').forEach(row => {
-            const keyInput = row.querySelector('.user-config-key');
-            const valueInput = row.querySelector('.user-config-value');
-            if (keyInput && valueInput && keyInput.value.trim()) {
-                userConfigs[keyInput.value.trim()] = valueInput.value.trim();
-            }
-        });
-
-        const settingsData = {
-            pythonEnvs: pythonEnvs,
-            // Include pythonEnv for backward compatibility (use system value if available)
-            pythonEnv: pythonEnvs['system'] || null,
-            nodePath: nodePathInput.value.trim() || null,
-            browserPath: browserPathInput.value.trim() || null,
-            userConfigurations: userConfigs,
-        };
-
-        try {
-            const response = await fetch('/api/settings', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(settingsData),
-            });
-
-            const apiResponse = await response.json();
-
-            if (response.ok && apiResponse.success) {
-                showToast('Settings saved successfully!', 'success');
-                // Optionally, reload settings to reflect any backend-applied defaults
-                await loadSettings();
-            } else {
-                throw new Error(apiResponse.error || `HTTP error! status: ${response.status}`);
-            }
-        } catch (error) {
-            console.error('Error saving settings:', error);
-            showToast(`Error saving settings: ${error.message}`, 'danger');
-        } finally {
-            setupButton.disabled = false;
-            setupButton.innerHTML = `<i class='bx bx-save mr-2'></i>Save Settings`;
-        }
-    }
-
-    cancelButton.addEventListener('click', () => {
-        // Navigate back to index.html, preserving flight parameters
-        window.location.href = buildUrlWithFlights('index.html');
-    });
-
-    addPythonEnvButton.addEventListener('click', () => renderPythonEnvInput());
-    addUserConfigButton.addEventListener('click', () => renderUserConfigInput());
-
-    settingsForm.addEventListener('submit', saveSettings);
-
-    // Initial load
-    loadSettings();
-
-    // (Collapse/expand functionality removed as requested)
-});

package/src/web/public/modal.html

@@ -1,84 +0,0 @@
-<div id="installModal" class="modal">
-    <div class="modal-content">
-        <span class="close" onclick="closeModal()">&times;</span>
-        <div class="modal-header">
-            <h2 id="modalTitle" class="text-2xl font-bold text-gray-800"></h2>
-            <p class="text-gray-600 mt-2">Configure your installation settings below</p>
-        </div>
-
-        <div class="modal-sections">
-            <!-- Requirements Section -->
-            <div class="section-container">
-                <div id="modalRequirements"></div>
-            </div>
-
-            <!-- Client Status Section -->
-            <div class="section-container">
-                <div id="modalTargets" class="client-grid"></div>
-            </div>
-
-            <div class="section-container">
-                <div id="modalEnvInputs" class="space-y-4">
-                    <!-- Environment Variables will be injected here -->
-                </div>
-            </div>
-
-            <div class="section-container">
-                <div id="modalArguments" class="space-y-4">
-                    <!-- Arguments will be injected here -->
-                </div>
-            </div>
-        </div>
-    </div>
-
-
-    <form id="installForm" class="mt-8">
-        <!-- Arguments Section -->
-        <div id="modalArguments" class="mb-6 space-y-4">
-            <!-- Arguments will be injected here -->
-        </div>
-
-        <div class="flex justify-end space-x-4">
-            <button type="button" onclick="closeModal()"
-                class="px-6 py-2.5 text-gray-600 hover:text-gray-800 font-medium rounded-lg hover:bg-gray-100 transition-colors">
-                Cancel
-            </button>
-            <button type="submit" class="submit-button">
-                Apply
-            </button>
-        </div>
-    </form>
-</div>
-</div>
-
-<!-- Loading Modal -->
-<div id="installLoadingModal" class="modal" style="display:none; z-index:2000;">
-    <div class="modal-content"
-        style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; pointer-events:auto; position:relative;">
-        <button class="modal-close-button" onclick="hideInstallLoadingModal()" aria-label="Close">&times;</button>
-        <div style="width: 100%;">
-            <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">
-                <div class="loading-icon" style="margin-bottom:8px;">
-                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none"
-                        style="display: block; margin-left: auto; margin-right: auto;">
-                        <circle cx="24" cy="24" r="20" stroke="#888" stroke-width="4" opacity="0.2" />
-                        <circle cx="24" cy="24" r="20" stroke="#3498db" stroke-width="4" stroke-linecap="round"
-                            stroke-dasharray="100" stroke-dashoffset="60">
-                            <animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24"
-                                dur="1s" repeatCount="indefinite" />
-                        </circle>
-                    </svg>
-                </div>
-                <div class="loading-title"
-                    style="font-size:1.5rem; font-weight:bold; margin-bottom:8px; text-align:center;">Installing...
-                </div>
-                <div id="installLoadingMessage"
-                    style="min-height:48px; max-height:160px; overflow:auto; background:#f8f8f8; border-radius:6px; padding:12px; font-size:1rem; color:#444; text-align:left; width:100%;">
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
-<link rel="stylesheet" href="/css/modal.css">
-<link rel="stylesheet" href="/css/modal.css">