227 lines
9.0 KiB
JavaScript
227 lines
9.0 KiB
JavaScript
import { api } from '../utils/api.js';
|
|
export function showSettings(element) {
|
|
let selectedArchive = null;
|
|
// Set up the main container
|
|
element.innerHTML = `
|
|
<div style="padding: 8px;">
|
|
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
|
|
<button id="archiveBtn" class="comfyui-button">Archive Current History</button>
|
|
<a href="https://github.com/RyanOnTheInside/ComfyUI_ProfilerX" target="_blank" rel="noopener"
|
|
class="comfyui-button" style="display: inline-flex; align-items: center; gap: 8px; text-decoration: none;">
|
|
<i class="mdi mdi-github" style="font-size: 1.2em;"></i>
|
|
Star on GitHub
|
|
</a>
|
|
</div>
|
|
|
|
<div style="margin: 16px 0;">
|
|
<h4>History Archives</h4>
|
|
<table id="archivesTable">
|
|
<thead>
|
|
<tr>
|
|
<th>Filename</th>
|
|
<th>Created</th>
|
|
<th>Size</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td colspan="3" style="text-align: center; padding: 16px;">Loading archives...</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div style="margin-top: 8px; display: flex; gap: 8px;">
|
|
<button id="loadBtn" class="comfyui-button" disabled>Load Selected</button>
|
|
<button id="deleteBtn" class="comfyui-button" disabled>Delete Selected</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="position: absolute; bottom: 8px; right: 8px; opacity: 0.8;">
|
|
Created by <a href="https://github.com/RyanOnTheInside" target="_blank" rel="noopener"
|
|
style="color: var(--comfy-color-accent); text-decoration: underline;">RyanOnTheInside</a>
|
|
</div>
|
|
</div>
|
|
`;
|
|
const loadBtn = element.querySelector('#loadBtn');
|
|
const deleteBtn = element.querySelector('#deleteBtn');
|
|
// Add styles for the table
|
|
const styleSheet = document.createElement('style');
|
|
styleSheet.textContent = `
|
|
.comfyui-button {
|
|
background-color: var(--comfy-input-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
padding: 4px 8px;
|
|
color: var(--descrip-text);
|
|
cursor: pointer;
|
|
}
|
|
.comfyui-button:hover {
|
|
background-color: var(--comfy-input-bg-hover);
|
|
border-color: var(--border-color-hover);
|
|
}
|
|
.comfyui-button:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
#archivesTable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: 13px;
|
|
background: var(--comfy-input-bg);
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
}
|
|
#archivesTable th,
|
|
#archivesTable td {
|
|
padding: 12px 16px;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border-color);
|
|
}
|
|
#archivesTable th {
|
|
background: rgba(0, 0, 0, 0.2);
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
#archivesTable tbody tr {
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
background-color: transparent;
|
|
}
|
|
#archivesTable tbody tr:hover {
|
|
background-color: var(--comfy-input-bg-hover);
|
|
}
|
|
#archivesTable tbody tr.selected {
|
|
background-color: var(--comfy-color-selected);
|
|
}
|
|
#archivesTable tbody tr.selected:hover {
|
|
background-color: var(--comfy-color-selected-hover);
|
|
}
|
|
.filename-cell {
|
|
font-family: var(--comfy-font-mono);
|
|
}
|
|
`;
|
|
// Remove any existing ProfilerX styles to prevent duplicates
|
|
const existingStyles = document.querySelectorAll('style[data-profilerx-settings]');
|
|
existingStyles.forEach(style => style.remove());
|
|
// Add identifier to our stylesheet
|
|
styleSheet.setAttribute('data-profilerx-settings', '');
|
|
document.head.appendChild(styleSheet);
|
|
// Set up archive button
|
|
const archiveBtn = element.querySelector('#archiveBtn');
|
|
archiveBtn.onclick = async () => {
|
|
if (!confirm('Are you sure you want to archive the current history? This will save the current history to an archive file and clear the current history.')) {
|
|
return;
|
|
}
|
|
try {
|
|
const response = await api.fetchApi('/profilerx/archive', { method: 'POST' });
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
refreshArchives();
|
|
// Refresh main view since history was cleared
|
|
document.dispatchEvent(new CustomEvent('profiler:historyLoaded'));
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('Failed to create archive:', error);
|
|
}
|
|
};
|
|
// Set up load button
|
|
loadBtn.onclick = async () => {
|
|
if (!selectedArchive)
|
|
return;
|
|
if (!confirm('Loading this archive will save your current history to a new archive first. Continue?')) {
|
|
return;
|
|
}
|
|
try {
|
|
loadBtn.disabled = true;
|
|
deleteBtn.disabled = true;
|
|
const response = await api.fetchApi(`/profilerx/archive/${selectedArchive.filename}/load`, { method: 'POST' });
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
// Wait a moment for the server to process the archive
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
// Refresh everything
|
|
await refreshArchives();
|
|
document.dispatchEvent(new CustomEvent('profiler:historyLoaded'));
|
|
}
|
|
else {
|
|
console.error('Failed to load archive:', result.error);
|
|
alert('Failed to load archive. Please check the console for details.');
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('Failed to load archive:', error);
|
|
alert('Failed to load archive. Please check the console for details.');
|
|
}
|
|
finally {
|
|
loadBtn.disabled = false;
|
|
deleteBtn.disabled = false;
|
|
}
|
|
};
|
|
// Set up delete button
|
|
deleteBtn.onclick = async () => {
|
|
if (!selectedArchive)
|
|
return;
|
|
if (!confirm('Are you sure you want to delete this archive? This cannot be undone.')) {
|
|
return;
|
|
}
|
|
try {
|
|
const response = await api.fetchApi(`/profilerx/archive/${selectedArchive.filename}`, { method: 'DELETE' });
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
refreshArchives();
|
|
}
|
|
}
|
|
catch (error) {
|
|
console.error('Failed to delete archive:', error);
|
|
}
|
|
};
|
|
// Function to refresh archives list
|
|
async function refreshArchives() {
|
|
const tbody = element.querySelector('#archivesTable tbody');
|
|
try {
|
|
const response = await api.fetchApi('/profilerx/archives');
|
|
const archives = await response.json();
|
|
tbody.innerHTML = '';
|
|
selectedArchive = null;
|
|
loadBtn.disabled = true;
|
|
deleteBtn.disabled = true;
|
|
if (archives.length === 0) {
|
|
const row = tbody.insertRow();
|
|
const cell = row.insertCell();
|
|
cell.colSpan = 3;
|
|
cell.textContent = 'No archives found';
|
|
cell.style.textAlign = 'center';
|
|
cell.style.padding = '16px';
|
|
return;
|
|
}
|
|
archives.forEach((archive) => {
|
|
const row = tbody.insertRow();
|
|
const date = new Date(archive.created * 1000).toLocaleString();
|
|
const size = Math.round(archive.size / 1024);
|
|
row.innerHTML = `
|
|
<td class="filename-cell">${archive.filename}</td>
|
|
<td>${date}</td>
|
|
<td>${size}KB</td>
|
|
`;
|
|
row.onclick = () => {
|
|
// Clear previous selection
|
|
tbody.querySelectorAll('tr').forEach(r => r.classList.remove('selected'));
|
|
// Set new selection
|
|
row.classList.add('selected');
|
|
selectedArchive = archive;
|
|
loadBtn.disabled = false;
|
|
deleteBtn.disabled = false;
|
|
};
|
|
});
|
|
}
|
|
catch (error) {
|
|
console.error('Failed to fetch archives:', error);
|
|
tbody.innerHTML = '<tr><td colspan="3" style="text-align: center; padding: 16px;">Failed to load archives</td></tr>';
|
|
}
|
|
}
|
|
// Initial load of archives
|
|
refreshArchives();
|
|
}
|