imcp 0.0.12 → 0.0.14

package/dist/web/public/js/modal/modalUI.js

@@ -0,0 +1,214 @@
+import { showConfirm } from '../notifications.js';
+import { handleInstallation, handleUninstallation } from './installHandler.js';
+import { showLoadingModal } from './loadingUI.js';
+import { compareVersions } from './version.js';
+
+/**
+ * Show installation modal for MCP tools
+ * @param {string} categoryName Category name
+ * @param {string} serverName Server name
+ */
+export async function showInstallModal(categoryName, serverName) {
+    console.log("Showing install modal for:", serverName);
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const elements = getModalElements();
+    if (!elements) return;
+
+    initializeModal(elements, serverName);
+
+    try {
+        const { targetData, serverData } = await fetchModalData(categoryName);
+        const mcpServer = findMcpServer(serverData, serverName);
+
+        renderModalContent(elements, {
+            targetData,
+            serverData,
+            mcpServer,
+            categoryName,
+            serverName
+        });
+
+        setupFormHandler(elements, categoryName, serverName, serverData);
+        elements.modal.style.display = "block";
+    } catch (error) {
+        handleModalError(error, elements.targetDiv);
+    }
+}
+
+/**
+ * Close modal and refresh with selected category
+ */
+export function closeModal() {
+    const modal = document.getElementById('installModal');
+    if (modal) {
+        modal.style.display = "none";
+        refreshWithCategory();
+    }
+}
+
+/**
+ * Setup click outside modal handler
+ */
+export function setupModalOutsideClick() {
+    window.onclick = function (event) {
+        const modal = document.getElementById('installModal');
+        if (event.target === modal) {
+            closeModal();
+        }
+    };
+}
+
+// Private helper functions
+
+function getModalElements() {
+    const modal = document.getElementById('installModal');
+    if (!modal) {
+        console.error('Modal container not found');
+        return null;
+    }
+
+    const elements = {
+        modal,
+        title: modal.querySelector('#modalTitle'),
+        envInputs: modal.querySelector('#modalEnvInputs'),
+        targetDiv: modal.querySelector('#modalTargets'),
+        requirements: modal.querySelector('#modalRequirements'),
+        arguments: modal.querySelector('#modalArguments')
+    };
+
+    if (!Object.values(elements).every(Boolean)) {
+        console.error('Required modal elements not found');
+        return null;
+    }
+
+    return elements;
+}
+
+function initializeModal(elements, serverName) {
+    window.selectedClients = [];
+    elements.title.textContent = `Install ${serverName}`;
+    clearModalSections(elements);
+}
+
+function clearModalSections(elements) {
+    ['envInputs', 'targetDiv', 'requirements', 'arguments'].forEach(section => {
+        elements[section].innerHTML = '';
+    });
+}
+
+async function fetchModalData(categoryName) {
+    const [targetResponse, serverResponse] = await Promise.all([
+        fetch('/api/targets'),
+        fetch(`/api/categories/${categoryName}`)
+    ]);
+
+    if (!targetResponse.ok || !serverResponse.ok) {
+        throw new Error('Failed to fetch required data');
+    }
+
+    const [targetData, serverData] = await Promise.all([
+        targetResponse.json(),
+        serverResponse.json()
+    ]);
+
+    if (!targetData.success || !serverData.success) {
+        throw new Error('Invalid data received');
+    }
+
+    return { targetData, serverData };
+}
+
+function findMcpServer(serverData, serverName) {
+    const mcpServer = serverData.data.feedConfiguration.mcpServers
+        .find(server => server.name === serverName);
+
+    if (!mcpServer) {
+        throw new Error('Server configuration not found');
+    }
+
+    return mcpServer;
+}
+
+function renderModalContent(elements, data) {
+    const { targetData, serverData, mcpServer, categoryName, serverName } = data;
+    const installationStatus = serverData.data.installationStatus || {};
+    const serverStatuses = installationStatus.serversStatus || {};
+    const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+
+    renderClientSection(elements.targetDiv, targetData.data, serverStatus, serverName, categoryName);
+    renderEnvironmentSection(elements.envInputs, mcpServer, targetData.clientMcpSettings, serverName);
+    renderArgumentsSection(elements.arguments, mcpServer);
+    renderRequirementsSection(elements.requirements, mcpServer, serverData, categoryName, serverName);
+}
+
+function setupFormHandler(elements, categoryName, serverName, serverData) {
+    const form = document.getElementById('installForm');
+    form.onsubmit = (e) => handleFormSubmit(e, {
+        elements,
+        categoryName,
+        serverName,
+        serverData
+    });
+}
+
+function handleFormSubmit(event, options) {
+    event.preventDefault();
+    const { elements, categoryName, serverName, serverData } = options;
+
+    const formData = collectFormData(elements);
+    if (!validateFormData(formData)) return;
+
+    const installOptions = buildInstallOptions(formData, serverData, serverName);
+    handleInstallation(categoryName, serverName, formData.targets, installOptions);
+}
+
+function collectFormData(elements) {
+    return {
+        envVars: getEnvironmentVariables(elements.envInputs),
+        args: getArguments(elements.arguments),
+        pythonEnv: getPythonEnvironment(),
+        targets: getSelectedTargets(),
+        requirements: getSelectedRequirements()
+    };
+}
+
+function validateFormData(formData) {
+    const { targets, requirements } = formData;
+    if (targets.length === 0 && requirements.length === 0) {
+        showError('Please select at least one client or requirement to update.');
+        return false;
+    }
+    return true;
+}
+
+function handleModalError(error, targetDiv) {
+    console.error("Error loading data:", error);
+    targetDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
+}
+
+function refreshWithCategory() {
+    const lastSelected = localStorage.getItem('lastSelectedCategory');
+    setTimeout(() => {
+        if (lastSelected) {
+            window.location.href = window.location.pathname + '?category=' + encodeURIComponent(lastSelected);
+        } else {
+            location.reload();
+        }
+    }, 100);
+}
+
+// Add CSS styles for the toggle switch
+const styleElement = document.createElement('style');
+styleElement.textContent = `
+    .toggle-bg.bg-blue-500 {
+        background-color: #3b82f6;
+    }
+    .toggle-bg {
+        transition: background-color 0.3s;
+    }
+    .toggle-bg div {
+        transition: transform 0.3s;
+    }
+`;
+document.head.appendChild(styleElement);

package/dist/web/public/js/modal/modalUtils.js

@@ -0,0 +1,49 @@
+/**
+ * Close modal and ensure selected category persists
+ */
+export function closeModal() {
+    document.getElementById('installModal').style.display = "none";
+
+    // Get the last selected category from localStorage
+    const lastSelected = localStorage.getItem('lastSelectedCategory');
+
+    // Refresh page and restore selection
+    if (lastSelected) {
+        setTimeout(() => {
+            window.location.href = window.location.pathname + '?category=' + encodeURIComponent(lastSelected);
+        }, 100);
+    } else {
+        location.reload();
+    }
+}
+
+/**
+ * Close modal if clicked outside content
+ */
+export function setupModalOutsideClick() {
+    window.onclick = function (event) {
+        const installModal = document.getElementById('installModal');
+        if (event.target == installModal) {
+            closeModal();
+        }
+    };
+}
+
+/**
+ * Setup toggle switch styles
+ */
+export function setupToggleStyles() {
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `
+        .toggle-bg.bg-blue-500 {
+            background-color: #3b82f6;
+        }
+        .toggle-bg {
+            transition: background-color 0.3s;
+        }
+        .toggle-bg div {
+            transition: transform 0.3s;
+        }
+    `;
+    document.head.appendChild(styleElement);
+}

package/dist/web/public/js/modal/version.js

@@ -0,0 +1,20 @@
+/**
+ * Simple version comparison function
+ * @param {string} v1 First version
+ * @param {string} v2 Second version
+ * @returns {number} 1 if v1 > v2, -1 if v1 < v2, 0 if equal
+ */
+export function compareVersions(v1, v2) {
+    const v1Parts = v1.split('.').map(Number);
+    const v2Parts = v2.split('.').map(Number);
+
+    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+        const v1Part = v1Parts[i] || 0;
+        const v2Part = v2Parts[i] || 0;
+
+        if (v1Part > v2Part) return 1;
+        if (v1Part < v2Part) return -1;
+    }
+
+    return 0;
+}

package/dist/web/public/js/modal/versionUtils.js

@@ -0,0 +1,20 @@
+/**
+ * Simple version comparison function
+ * @param {string} v1 First version
+ * @param {string} v2 Second version
+ * @returns {number} 1 if v1 > v2, -1 if v1 < v2, 0 if equal
+ */
+export function compareVersions(v1, v2) {
+    const v1Parts = v1.split('.').map(Number);
+    const v2Parts = v2.split('.').map(Number);
+
+    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+        const v1Part = v1Parts[i] || 0;
+        const v2Part = v2Parts[i] || 0;
+
+        if (v1Part > v2Part) return 1;
+        if (v1Part < v2Part) return -1;
+    }
+
+    return 0;
+}