Диалоги и окна

Управление интерфейсом: уведомления, окна подтверждения и ввода, модальные окна и вкладки.

Здесь собраны средства взаимодействия с пользователем: всплывающие уведомления, окна подтверждения и ввода, модальные окна, а также управление вкладками, навигацией и дочерними окнами.

Уведомления и диалоги

Пространство Engine.api.dialog предоставляет три готовых типа диалогов. Все они асинхронные.

Показать уведомление

Engine.api.dialog.alert(сообщение, параметры?) — показывает всплывающее уведомление, которое само исчезает через несколько секунд.

Параметры:

сообщение (строка) — текст уведомления;
параметры (объект, необязательно):
- type — вид: 'info' (по умолчанию), 'success', 'warning', 'error';
- duration — время показа в миллисекундах (по умолчанию 4000; 0 — не скрывать автоматически).

Engine.api.dialog.alert('Сценарий запущен', { type: 'success' });
Engine.api.dialog.alert('Не удалось подключиться', { type: 'error', duration: 0 });

Спросить подтверждение

Engine.api.dialog.confirm(сообщение, параметры?) — показывает окно с вопросом и кнопками подтверждения/отмены. Возвращает true, если пользователь подтвердил.

Параметры (необязательно): title — заголовок; okText, cancelText — подписи кнопок; type — вид оформления; closeOnOverlay, closeOnEscape — можно ли закрыть кликом по фону или клавишей Esc.

const res = await Engine.api.dialog.confirm('Остановить сценарий?', {
  okText: 'Остановить',
  cancelText: 'Отмена',
  type: 'warning'
});
if (res.data === true) {
  await Engine.api.engine.stopScenario();
}

Запросить ввод текста

Engine.api.dialog.prompt(сообщение, параметры?) — запрашивает у пользователя ввод текста. Возвращает введённую строку или null, если пользователь отменил.

Параметры (необязательно): title — заголовок; defaultValue — начальное значение; placeholder — подсказка в поле; inputType — тип поля (например, 'text', 'password', 'number'); okText, cancelText — подписи кнопок; validate — функция проверки введённого значения.

const res = await Engine.api.dialog.prompt('Введите имя профиля:', {
  defaultValue: 'default',
  placeholder: 'Например, main'
});
if (res.data !== null) {
  Engine.api.ui.setResource('profileName', res.data);
}

Закрыть все диалоги и узнать их число

Engine.api.dialog.closeAll() закрывает все открытые диалоги, Engine.api.dialog.getActiveCount() возвращает количество активных диалогов.

Модальные окна

Модальное окно — это полноценное окно поверх интерфейса с произвольным содержимым и набором кнопок. Пространство — Engine.api.modal.

Создать модальное окно

Engine.api.modal.create(параметры) — создаёт и показывает модальное окно. Возвращает идентификатор окна.

Параметры:

title — заголовок;
content — содержимое: строка HTML или готовый элемент;
buttons — массив кнопок (подпись и обработчик нажатия);
size — размер: 'small', 'medium' (по умолчанию), 'large';
closeOnOverlay, closeOnEscape — можно ли закрыть кликом по фону или клавишей Esc;
onOpen, onClose — обработчики открытия и закрытия.

Engine.api.modal.create({
  title: 'Подтверждение',
  content: '<p>Запустить сценарий в 10 потоков?</p>',
  size: 'small',
  buttons: [
    { text: 'Отмена', onClick: (modal) => modal.close() },
    { text: 'Запустить', primary: true, onClick: async (modal) => {
        await Engine.api.engine.startScenario(10);
        modal.close();
      }
    }
  ]
});

Закрыть все модальные окна и узнать их число

Engine.api.modal.closeAll() закрывает все модальные окна, Engine.api.modal.getActiveCount() возвращает количество открытых окон.

ℹ️ Для простого «да/нет» используйте dialog.confirm — он короче. modal.create нужен, когда внутри окна должна быть своя разметка или несколько действий.

Вкладки

Если интерфейс разбит на вкладки, ими можно управлять из кода.

Получить список вкладок

Engine.api.ui.getTabs() — возвращает список вкладок и идентификатор активной.

const res = Engine.api.ui.getTabs();
console.log(res.data.tabs, res.data.activeTabId);

Переключить активную вкладку

Engine.api.ui.switchTab(идентификаторВкладки) — переключает активную вкладку.

Engine.api.ui.switchTab('settings');

Engine.api.ui.openWindow('@pages/report', { width: 900, height: 700 });

Закрыть всплывающие панели

Engine.api.ui.closePopups() — закрывает открытые всплывающие панели интерфейса.