fixed: alternative implementation for confirm

`confirm` cannot be used in electron
This commit is contained in:
Dr.Lt.Data
2024-12-31 14:37:03 +09:00
parent 91736ef29d
commit 939cb12670
6 changed files with 120 additions and 26 deletions

View File

@@ -2,6 +2,98 @@ import { app } from "../../scripts/app.js";
import { api } from "../../scripts/api.js";
import { $el, ComfyDialog } from "../../scripts/ui.js";
export function customConfirm(message, confirmMessage, cancelMessage) {
return new Promise((resolve) => {
// transparent bg
const modalOverlay = document.createElement('div');
modalOverlay.style.position = 'fixed';
modalOverlay.style.top = 0;
modalOverlay.style.left = 0;
modalOverlay.style.width = '100%';
modalOverlay.style.height = '100%';
modalOverlay.style.backgroundColor = 'rgba(0, 0, 0, 0.8)';
modalOverlay.style.display = 'flex';
modalOverlay.style.alignItems = 'center';
modalOverlay.style.justifyContent = 'center';
modalOverlay.style.zIndex = '1000000';
// Modal window container (dark bg)
const modalDialog = document.createElement('div');
modalDialog.style.backgroundColor = '#333';
modalDialog.style.padding = '20px';
modalDialog.style.borderRadius = '4px';
modalDialog.style.maxWidth = '400px';
modalDialog.style.width = '80%';
modalDialog.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.5)';
modalDialog.style.color = '#fff';
// Display message
const modalMessage = document.createElement('p');
modalMessage.textContent = message;
modalMessage.style.margin = '0';
modalMessage.style.padding = '0 0 20px';
modalMessage.style.wordBreak = 'keep-all';
// Button container
const modalButtons = document.createElement('div');
modalButtons.style.display = 'flex';
modalButtons.style.justifyContent = 'flex-end';
// Confirm button (green)
const confirmButton = document.createElement('button');
if(confirmMessage)
confirmButton.textContent = confirmMessage;
else
confirmButton.textContent = 'Confirm';
confirmButton.style.marginLeft = '10px';
confirmButton.style.backgroundColor = '#28a745'; // green
confirmButton.style.color = '#fff';
confirmButton.style.border = 'none';
confirmButton.style.padding = '6px 12px';
confirmButton.style.borderRadius = '4px';
confirmButton.style.cursor = 'pointer';
confirmButton.style.fontWeight = 'bold';
// Cancel button (red)
const cancelButton = document.createElement('button');
if(cancelMessage)
cancelButton.textContent = cancelMessage;
else
cancelButton.textContent = 'Cancel';
cancelButton.style.marginLeft = '10px';
cancelButton.style.backgroundColor = '#dc3545'; // red
cancelButton.style.color = '#fff';
cancelButton.style.border = 'none';
cancelButton.style.padding = '6px 12px';
cancelButton.style.borderRadius = '4px';
cancelButton.style.cursor = 'pointer';
cancelButton.style.fontWeight = 'bold';
const closeModal = () => {
document.body.removeChild(modalOverlay);
};
confirmButton.addEventListener('click', () => {
closeModal();
resolve(true);
});
cancelButton.addEventListener('click', () => {
closeModal();
resolve(false);
});
modalButtons.appendChild(confirmButton);
modalButtons.appendChild(cancelButton);
modalDialog.appendChild(modalMessage);
modalDialog.appendChild(modalButtons);
modalOverlay.appendChild(modalDialog);
document.body.appendChild(modalOverlay);
});
}
export function show_message(msg) {
app.ui.dialog.show(msg);
app.ui.dialog.element.style.zIndex = 10010;
@@ -13,19 +105,19 @@ export async function sleep(ms) {
export function rebootAPI() {
if ('electronAPI' in window) {
window.electronAPI.restartApp();
return true;
}
if (confirm("Are you sure you'd like to reboot the server?")) {
try {
api.fetchApi("/manager/reboot");
}
catch(exception) {
}
return true;
window.electronAPI.restartApp();
return true;
}
customConfirm("Are you sure you'd like to reboot the server?").then((isConfirmed) => {
if (isConfirmed) {
try {
api.fetchApi("/manager/reboot");
}
catch(exception) {}
}
});
return false;
}