diff --git a/web-plugin/machine-manager.js b/web-plugin/machine-manager.js index f5b9a0d..9e00477 100644 --- a/web-plugin/machine-manager.js +++ b/web-plugin/machine-manager.js @@ -15,7 +15,6 @@ async function initializeMachineManager(element, getData) { const data = getData(); if (!machineContainer || !machineLoading || !machineList) { - console.error("Machine container elements not found"); return; } @@ -42,7 +41,6 @@ async function initializeMachineManager(element, getData) { } } catch (error) { - console.error("Error initializing machine manager:", error); showMachineError(machineLoading, machineList, "Error loading machine"); } } @@ -52,8 +50,8 @@ function showNoMachineMessage(machineLoading, machineList) { machineLoading.style.display = "none"; machineList.style.display = "block"; machineList.innerHTML = ` -
  • -
    +
  • +
    @@ -61,7 +59,23 @@ function showNoMachineMessage(machineLoading, machineList) {
    -
    No machine found
    +
    No machine found
    +
    • `; } @@ -71,9 +85,43 @@ function showMachineError(machineLoading, machineList, errorMessage) { machineLoading.style.display = "none"; machineList.style.display = "block"; machineList.innerHTML = ` -
  • -
    ⚠️
    -
    ${errorMessage}
    +
  • +
    ⚠️
    +
    ${errorMessage}
    +
    + + +
    • `; } @@ -305,14 +353,182 @@ window.syncMachine = async function(machineId) { } }; +// Show add machine dialog +window.showAddMachineDialog = function(isUpdate = false) { + const currentMachineId = localStorage.getItem(MACHINE_STORAGE_KEY); + // Create dialog overlay + const overlay = document.createElement('div'); + overlay.id = 'machine-dialog-overlay'; + overlay.style.cssText = ` + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + display: flex; + align-items: center; + justify-content: center; + z-index: 10000; + `; + + // Create dialog box + const dialog = document.createElement('div'); + dialog.style.cssText = ` + background: #2c2c2c; + border-radius: 8px; + padding: 24px; + width: 400px; + max-width: 90vw; + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); + color: #ffffff; + `; + + dialog.innerHTML = ` +
    +

    ${isUpdate ? 'Update Machine ID' : 'Add Machine'}

    + +
    + + ${isUpdate && currentMachineId ? ` +
    +
    Current Machine ID:
    +
    ${currentMachineId}
    +
    + ` : ''} + +
    + + +
    + +
    + + +
    + `; + + overlay.appendChild(dialog); + document.body.appendChild(overlay); + + // Focus on input + setTimeout(() => { + const input = document.getElementById('dialog-machine-id-input'); + if (input) input.focus(); + }, 100); + + // Close on overlay click + overlay.addEventListener('click', function(e) { + if (e.target === overlay) { + closeAddMachineDialog(); + } + }); +}; + +// Close add machine dialog +window.closeAddMachineDialog = function() { + const overlay = document.getElementById('machine-dialog-overlay'); + if (overlay) { + overlay.remove(); + } +}; + +// Add machine from dialog +window.addMachineFromDialog = function() { + const input = document.getElementById('dialog-machine-id-input'); + if (!input) { + console.error("Machine ID input not found"); + return; + } + + const machineId = input.value.trim(); + if (!machineId) { + alert('Please enter a machine ID'); + return; + } + + // Close dialog + closeAddMachineDialog(); + + // Add the machine and refresh + addMachine(machineId); +}; + // Add machine to localStorage (utility function) window.addMachine = function(machineId) { localStorage.setItem(MACHINE_STORAGE_KEY, machineId); - // Reinitialize the machine manager to show the new machine - const element = document.querySelector('.comfy-menu'); + // Show loading state immediately + const machineLoading = document.querySelector("#machine-loading"); + const machineList = document.querySelector("#machine-list"); + + if (machineLoading && machineList) { + machineLoading.style.display = "flex"; + machineList.style.display = "none"; + } + + // Find the correct parent element that contains the machine elements + let element = document.querySelector('.comfy-menu'); + + // If .comfy-menu doesn't work, try to find the parent of machine-container + if (!element || !element.querySelector("#machine-container")) { + const machineContainer = document.querySelector("#machine-container"); + if (machineContainer) { + element = machineContainer.parentElement; + } + } + if (element && window.comfyDeployGetData) { - initializeMachineManager(element, window.comfyDeployGetData); + // Use setTimeout to ensure DOM updates are processed + setTimeout(() => { + initializeMachineManager(element, window.comfyDeployGetData); + }, 100); + } else { + console.error("Could not find elements for machine refresh"); } }; diff --git a/web-plugin/workflow-list.js b/web-plugin/workflow-list.js index 5ce5bb4..da16238 100644 --- a/web-plugin/workflow-list.js +++ b/web-plugin/workflow-list.js @@ -279,7 +279,7 @@ async function initializeWorkflowsList(element, getData, getTimeAgo) { list-style-type: none; padding: 0; margin: 0; - height: calc(100vh - 480px); + height: calc(100vh - 520px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #666 transparent;