190 lines
8.6 KiB
HTML
190 lines
8.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ComfyUI Queue Manager</title>
|
|
<link rel="stylesheet" href="/extensions/comfyui-queue-manager/styles.css">
|
|
</head>
|
|
<body>
|
|
<div id="queue-manager-app">
|
|
<header>
|
|
<h1>Queue Manager</h1>
|
|
<div class="controls">
|
|
<button id="help-btn" class="btn btn-secondary">❓ Help</button>
|
|
<button id="import-export-btn" class="btn btn-secondary">📁 Import/Export</button>
|
|
<button id="pause-resume-btn" class="btn btn-primary">Pause</button>
|
|
<button id="refresh-btn" class="btn btn-secondary">🔄 Refresh</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main>
|
|
<div class="queue-container">
|
|
<div class="queue-header">
|
|
<h2>Queue Items</h2>
|
|
<div class="queue-actions">
|
|
<button id="archive-selected-btn" class="btn btn-warning">Archive Selected</button>
|
|
<button id="restore-selected-btn" class="btn btn-secondary">Restore Selected</button>
|
|
<button id="delete-selected-btn" class="btn btn-danger">Delete Selected</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="filters">
|
|
<input type="text" id="search-input" placeholder="Search workflows...">
|
|
<select id="status-filter">
|
|
<option value="">All Statuses</option>
|
|
<option value="pending">Pending</option>
|
|
<option value="running">Running</option>
|
|
<option value="completed">Completed</option>
|
|
<option value="failed">Failed</option>
|
|
<option value="archived">Archived</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="queue-items" class="queue-items">
|
|
<!-- Queue items will be populated here -->
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Modal Dialogs -->
|
|
<div id="modal-overlay" class="modal-overlay">
|
|
<!-- Import/Export Modal -->
|
|
<div id="import-export-modal" class="modal">
|
|
<div class="modal-header">
|
|
<h3 id="modal-title">Import/Export Queue</h3>
|
|
<button class="modal-close" data-modal="import-export-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="modal-tabs">
|
|
<button class="tab-btn active" data-tab="export">Export</button>
|
|
<button class="tab-btn" data-tab="import">Import</button>
|
|
</div>
|
|
|
|
<div id="export-tab" class="tab-content active">
|
|
<p>Export queue items to a JSON file:</p>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="export-all" checked> Export all items
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="export-selected"> Export selected items only
|
|
</label>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="export-btn" class="btn btn-primary">Export</button>
|
|
<button class="btn btn-secondary modal-close" data-modal="import-export-modal">Cancel</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="import-tab" class="tab-content">
|
|
<p>Import queue items from a JSON file:</p>
|
|
<div class="form-group">
|
|
<input type="file" id="import-file" accept=".json" class="file-input">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="merge-import" checked> Merge with existing items
|
|
</label>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="import-btn" class="btn btn-primary">Import</button>
|
|
<button class="btn btn-secondary modal-close" data-modal="import-export-modal">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div id="confirmation-modal" class="modal">
|
|
<div class="modal-header">
|
|
<h3 id="confirmation-title">Confirm Action</h3>
|
|
<button class="modal-close" data-modal="confirmation-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="confirmation-message">Are you sure you want to perform this action?</p>
|
|
<div class="modal-actions">
|
|
<button id="confirm-btn" class="btn btn-danger">Confirm</button>
|
|
<button class="btn btn-secondary modal-close" data-modal="confirmation-modal">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Archive/Restore Modal -->
|
|
<div id="archive-modal" class="modal">
|
|
<div class="modal-header">
|
|
<h3 id="archive-title">Archive Items</h3>
|
|
<button class="modal-close" data-modal="archive-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<p id="archive-message">Select archive options:</p>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="archive-with-results" checked> Include execution results
|
|
</label>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>
|
|
<input type="checkbox" id="archive-compress"> Compress archived data
|
|
</label>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="archive-confirm-btn" class="btn btn-warning">Archive</button>
|
|
<button class="btn btn-secondary modal-close" data-modal="archive-modal">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Help Modal -->
|
|
<div id="help-modal" class="modal">
|
|
<div class="modal-header">
|
|
<h3>Queue Manager Help</h3>
|
|
<button class="modal-close" data-modal="help-modal">×</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<h4>Keyboard Shortcuts</h4>
|
|
<div class="help-shortcuts">
|
|
<div class="shortcut-item">
|
|
<kbd>Space</kbd>
|
|
<span>Pause/Resume queue</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>Ctrl+R</kbd>
|
|
<span>Refresh queue items</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>Ctrl+A</kbd>
|
|
<span>Select all visible items</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>Delete</kbd>
|
|
<span>Delete selected items</span>
|
|
</div>
|
|
<div class="shortcut-item">
|
|
<kbd>Escape</kbd>
|
|
<span>Close modal / Clear selection</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h4>Features</h4>
|
|
<ul class="help-features">
|
|
<li><strong>Real-time Updates:</strong> Queue items update automatically every 5 seconds</li>
|
|
<li><strong>Filtering:</strong> Search by workflow name or filter by status</li>
|
|
<li><strong>Bulk Operations:</strong> Select multiple items for archive/delete operations</li>
|
|
<li><strong>Import/Export:</strong> Save and load queue configurations</li>
|
|
<li><strong>Archive System:</strong> Archive completed workflows for later reference</li>
|
|
</ul>
|
|
|
|
<div class="modal-actions">
|
|
<button class="btn btn-secondary modal-close" data-modal="help-modal">Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/extensions/comfyui-queue-manager/queue_manager.js"></script>
|
|
</body>
|
|
</html> |