refactor: enhance machine management UI and functionality
- Removed console error logs for improved user experience during initialization. - Updated the display styles for "No machine found" and error messages to enhance visual clarity. - Added buttons for adding and updating machines directly from the error and no machine states. - Implemented a dialog for adding and updating machine IDs, improving user interaction. - Adjusted the machine addition process to show loading states and ensure proper DOM updates. These changes significantly improve the usability and functionality of the machine management feature.
This commit is contained in:
KarrixLee
+227
-11
@@ -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 = `
|
||||
<li style="text-align: center; padding: 12px; color: #666; font-size: 13px;">
|
||||
<div style="margin-bottom: 6px;">
|
||||
<li style="text-align: center; padding: 16px; color: #666; font-size: 13px;">
|
||||
<div style="margin-bottom: 8px;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"/>
|
||||
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"/>
|
||||
@@ -61,7 +59,23 @@ function showNoMachineMessage(machineLoading, machineList) {
|
||||
<line x1="6" x2="6.01" y1="18" y2="18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div style="font-weight: 500;">No machine found</div>
|
||||
<div style="font-weight: 500; margin-bottom: 12px;">No machine found</div>
|
||||
<button
|
||||
onclick="showAddMachineDialog()"
|
||||
style="
|
||||
background: #27ae60;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
"
|
||||
title="Add machine"
|
||||
>
|
||||
Add Machine
|
||||
</button>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
@@ -71,9 +85,43 @@ function showMachineError(machineLoading, machineList, errorMessage) {
|
||||
machineLoading.style.display = "none";
|
||||
machineList.style.display = "block";
|
||||
machineList.innerHTML = `
|
||||
<li style="text-align: center; padding: 12px; color: #e74c3c; font-size: 13px;">
|
||||
<div style="margin-bottom: 4px;">⚠️</div>
|
||||
<div>${errorMessage}</div>
|
||||
<li style="text-align: center; padding: 16px; color: #e74c3c; font-size: 13px;">
|
||||
<div style="margin-bottom: 8px;">⚠️</div>
|
||||
<div style="margin-bottom: 12px;">${errorMessage}</div>
|
||||
<div style="display: flex; gap: 8px; justify-content: center;">
|
||||
<button
|
||||
onclick="showAddMachineDialog(true)"
|
||||
style="
|
||||
background: #f39c12;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
"
|
||||
title="Update machine ID"
|
||||
>
|
||||
Update Machine ID
|
||||
</button>
|
||||
<button
|
||||
onclick="removeMachine()"
|
||||
style="
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
"
|
||||
title="Remove machine"
|
||||
>
|
||||
Remove Machine
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
`;
|
||||
}
|
||||
@@ -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 = `
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
||||
<h3 style="margin: 0; font-size: 16px; font-weight: 600;">${isUpdate ? 'Update Machine ID' : 'Add Machine'}</h3>
|
||||
<button onclick="closeAddMachineDialog()" style="
|
||||
background: none;
|
||||
border: none;
|
||||
color: #ccc;
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
">×</button>
|
||||
</div>
|
||||
|
||||
${isUpdate && currentMachineId ? `
|
||||
<div style="margin-bottom: 12px; padding: 8px 12px; background: #1a1a1a; border-radius: 4px; border-left: 3px solid #f39c12;">
|
||||
<div style="font-size: 12px; color: #ccc; margin-bottom: 4px;">Current Machine ID:</div>
|
||||
<div style="font-size: 13px; color: #ffffff; font-family: monospace;">${currentMachineId}</div>
|
||||
</div>
|
||||
` : ''}
|
||||
|
||||
<div style="margin-bottom: 16px;">
|
||||
<label style="display: block; margin-bottom: 8px; font-size: 13px; color: #ccc;">${isUpdate ? 'New Machine ID:' : 'Machine ID:'}</label>
|
||||
<input
|
||||
type="text"
|
||||
id="dialog-machine-id-input"
|
||||
placeholder="${isUpdate ? 'Enter new machine ID' : 'Enter your machine ID'}"
|
||||
onkeypress="if(event.key === 'Enter') addMachineFromDialog()"
|
||||
style="
|
||||
width: 100%;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid #555;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
background: #1a1a1a;
|
||||
color: #ffffff;
|
||||
box-sizing: border-box;
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; gap: 8px; justify-content: flex-end;">
|
||||
<button onclick="closeAddMachineDialog()" style="
|
||||
background: #555;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
">Cancel</button>
|
||||
<button onclick="addMachineFromDialog()" style="
|
||||
background: ${isUpdate ? '#f39c12' : '#27ae60'};
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
padding: 8px 16px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
">${isUpdate ? 'Update Machine' : 'Add Machine'}</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
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");
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user