fixed: alternative implementation for confirm
`confirm` cannot be used in electron
This commit is contained in:
114
js/common.js
114
js/common.js
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user