alphard/ComfyUI-Lora-Manager
1
0
Fork 0
mirror of https://github.com/willmiao/ComfyUI-Lora-Manager.git synced 2026-03-24 14:42:11 -03:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement task cancellation for model scanning and bulk operations

Browse Source
This commit is contained in:
Will Miao
2026-01-02 18:48:28 +08:00
parent 953117efa1
commit 837c32c42f
24 changed files with 505 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
static/js/managers/LoadingManager.js
View File

@@ -39,6 +39,25 @@ export class LoadingManager {
this.loadingContent.appendChild(this.statusText);
}
this.cancelButton = this.loadingContent.querySelector('.loading-cancel');
if (!this.cancelButton) {
this.cancelButton = document.createElement('button');
this.cancelButton.className = 'loading-cancel secondary-btn';
this.cancelButton.style.display = 'none';
this.cancelButton.style.margin = 'var(--space-2) auto 0';
this.cancelButton.textContent = translate('common.actions.cancel', {}, 'Cancel');
this.loadingContent.appendChild(this.cancelButton);
}
this.onCancelCallback = null;
this.cancelButton.onclick = () => {
if (this.onCancelCallback) {
this.onCancelCallback();
this.cancelButton.disabled = true;
this.cancelButton.textContent = translate('common.status.loading', {}, 'Loading...');
}
};
this.detailsContainer = null; // Will be created when needed
}
@@ -46,7 +65,7 @@ export class LoadingManager {
this.overlay.style.display = 'flex';
this.setProgress(progress);
this.setStatus(message);
// Remove any existing details container
this.removeDetailsContainer();
}
@@ -70,26 +89,43 @@ export class LoadingManager {
this.setProgress(0);
this.setStatus('');
this.removeDetailsContainer();
this.hideCancelButton();
this.progressBar.style.display = 'block';
}
showCancelButton(onCancel) {
if (this.cancelButton) {
this.onCancelCallback = onCancel;
this.cancelButton.style.display = 'flex';
this.cancelButton.disabled = false;
this.cancelButton.textContent = translate('common.actions.cancel', {}, 'Cancel');
}
}
hideCancelButton() {
if (this.cancelButton) {
this.cancelButton.style.display = 'none';
this.onCancelCallback = null;
}
}
// Create a details container for enhanced progress display
createDetailsContainer() {
// Remove existing container if any
this.removeDetailsContainer();
// Create new container
this.detailsContainer = document.createElement('div');
this.detailsContainer.className = 'progress-details-container';
// Insert after the main progress bar
if (this.loadingContent) {
this.loadingContent.appendChild(this.detailsContainer);
}
return this.detailsContainer;
}
// Remove details container
removeDetailsContainer() {
if (this.detailsContainer) {
@@ -97,39 +133,39 @@ export class LoadingManager {
this.detailsContainer = null;
}
}
// Show enhanced progress for downloads
showDownloadProgress(totalItems = 1) {
this.show(translate('modals.download.status.preparing', {}, 'Preparing download...'), 0);
this.progressBar.style.display = 'none';
// Create details container
const detailsContainer = this.createDetailsContainer();
// Create current item progress
const currentItemContainer = document.createElement('div');
currentItemContainer.className = 'current-item-progress';
const currentItemLabel = document.createElement('div');
currentItemLabel.className = 'current-item-label';
currentItemLabel.textContent = translate('modals.download.progress.currentFile', {}, 'Current file:');
const currentItemBar = document.createElement('div');
currentItemBar.className = 'current-item-bar-container';
const currentItemProgress = document.createElement('div');
currentItemProgress.className = 'current-item-bar';
currentItemProgress.style.width = '0%';
const currentItemPercent = document.createElement('span');
currentItemPercent.className = 'current-item-percent';
currentItemPercent.textContent = '0%';
currentItemBar.appendChild(currentItemProgress);
currentItemContainer.appendChild(currentItemLabel);
currentItemContainer.appendChild(currentItemBar);
currentItemContainer.appendChild(currentItemPercent);
// Create overall progress elements if multiple items
let overallLabel = null;
if (totalItems > 1) {
@@ -138,7 +174,7 @@ export class LoadingManager {
overallLabel.textContent = `Overall progress (0/${totalItems} complete):`;
detailsContainer.appendChild(overallLabel);
}
// Add current item progress to container
detailsContainer.appendChild(currentItemContainer);
@@ -217,13 +253,13 @@ export class LoadingManager {
// Initialize transfer stats with empty data
updateTransferStats();
// Return update function
return (currentProgress, currentIndex = 0, currentName = '', metrics = {}) => {
// Update current item progress
currentItemProgress.style.width = `${currentProgress}%`;
currentItemPercent.textContent = `${Math.floor(currentProgress)}%`;
// Update current item label if name provided
if (currentName) {
currentItemLabel.textContent = translate(
@@ -232,13 +268,13 @@ export class LoadingManager {
`Downloading: ${currentName}`
);
}
// Update overall label if multiple items
if (totalItems > 1 && overallLabel) {
overallLabel.textContent = `Overall progress (${currentIndex}/${totalItems} complete):`;
// Calculate and update overall progress
const overallProgress = Math.floor((currentIndex + currentProgress/100) / totalItems * 100);
const overallProgress = Math.floor((currentIndex + currentProgress / 100) / totalItems * 100);
this.setProgress(overallProgress);
} else {
// Single item, just update main progress
@@ -251,7 +287,7 @@ export class LoadingManager {
async showWithProgress(callback, options = {}) {
const { initialMessage = 'Processing...', completionMessage = 'Complete' } = options;
try {
this.show(initialMessage);
await callback(this);
@@ -266,16 +302,20 @@ export class LoadingManager {
// Enhanced progress display without callback pattern
showEnhancedProgress(message = 'Processing...') {
this.show(message, 0);
// Return update functions
return {
updateProgress: (percent, currentItem = '', statusMessage = '') => {
this.setProgress(percent);
this.setProgress(percent);
if (statusMessage) {
this.setStatus(statusMessage);
}
},
showCancelButton: (onCancel) => {
this.showCancelButton(onCancel);
},
complete: async (completionMessage = 'Complete') => {
this.setProgress(100);
this.setStatus(completionMessage);