89 lines
4.4 KiB
JavaScript
89 lines
4.4 KiB
JavaScript
// Порты, Статус and Изменить of a machine in a dialog over the current page:
|
|
// the server's pages as fragments, so nothing behind is lost. They open from
|
|
// the buttons of a machine's row, and from a menu on a tab's title or a
|
|
// pane's title bar (a right click, or a long press on a phone). Closing the
|
|
// dialog unmounts the fragment's module: its charts and polling stop.
|
|
(function () {
|
|
'use strict';
|
|
const TITLES = {forwards: 'Порты', status: 'Статус', edit: 'Изменить'};
|
|
const dlg = document.getElementById('machinedlg');
|
|
const area = dlg.querySelector('.frag-area');
|
|
const page = /^\/agents\/([^/]+)\/(forwards|status|edit)$/;
|
|
let changed = false;
|
|
|
|
function open(id, what, name) {
|
|
dlg.querySelector('.md-title').textContent = (name || id) + ' · ' + TITLES[what];
|
|
App.put(area, '<p class="muted" style="padding:16px 18px">загрузка…</p>');
|
|
if (!dlg.open) (window.FileViews ? FileViews.openModal(dlg) : dlg.showModal());
|
|
App.load(area, '/agents/' + encodeURIComponent(id) + '/' + what);
|
|
}
|
|
dlg.addEventListener('close', () => {
|
|
App.put(area, '');
|
|
// A form sent in the dialog (a new name, say) shows in the list behind.
|
|
if (changed && document.querySelector('main#app').dataset.view === 'machines') App.go('/', false);
|
|
changed = false;
|
|
});
|
|
dlg.querySelector('.md-close').onclick = () => dlg.close();
|
|
// «Изменить» drawn again after a new name: the title follows it.
|
|
new MutationObserver(() => {
|
|
const h = area.querySelector('[data-module="edit"] .wrap > h1');
|
|
if (h) dlg.querySelector('.md-title').textContent = h.textContent.trim() + ' · ' + TITLES.edit;
|
|
}).observe(area, {childList: true});
|
|
dlg.addEventListener('submit', () => { changed = true; });
|
|
// The fragment's own links: another page of a machine stays in the dialog,
|
|
// anything else closes it and goes on as usual.
|
|
area.addEventListener('click', ev => {
|
|
const a = ev.target.closest('a[href]');
|
|
if (!a || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey || a.target || a.hasAttribute('download')) return;
|
|
const u = new URL(a.href, location.href), m = page.exec(u.pathname);
|
|
if (u.origin !== location.origin) return;
|
|
if (m) { ev.preventDefault(); ev.stopPropagation(); App.load(area, u.pathname + u.search); return; }
|
|
dlg.close();
|
|
}, true);
|
|
document.addEventListener('click', ev => {
|
|
const b = ev.target.closest('[data-dialog]');
|
|
if (!b || ev.button !== 0 || ev.metaKey || ev.ctrlKey || ev.shiftKey) return;
|
|
ev.preventDefault();
|
|
open(b.dataset.id, b.dataset.dialog, b.dataset.name);
|
|
});
|
|
|
|
// menu: Порты, Статус, Изменить of agent, by the pointer.
|
|
const menu = document.createElement('div');
|
|
menu.className = 'addmenu mdmenu';
|
|
menu.hidden = true;
|
|
document.body.appendChild(menu);
|
|
function closeMenu() { menu.hidden = true; document.removeEventListener('pointerdown', outside, true); }
|
|
function outside(ev) { if (!menu.contains(ev.target)) closeMenu(); }
|
|
function showMenu(ev, agent) {
|
|
ev.preventDefault();
|
|
menu.innerHTML = '';
|
|
const head = document.createElement('div');
|
|
head.className = 'muted md-head';
|
|
head.textContent = agent.name;
|
|
menu.appendChild(head);
|
|
Object.keys(TITLES).forEach(k => {
|
|
const b = document.createElement('button');
|
|
b.type = 'button'; b.className = 'item';
|
|
b.innerHTML = '<span><b></b></span>';
|
|
b.querySelector('b').textContent = TITLES[k];
|
|
b.onclick = () => { closeMenu(); open(agent.id, k, agent.name); };
|
|
menu.appendChild(b);
|
|
});
|
|
menu.hidden = false;
|
|
const m = menu.getBoundingClientRect();
|
|
menu.style.left = Math.max(8, Math.min(innerWidth - m.width - 8, ev.clientX)) + 'px';
|
|
menu.style.top = Math.max(8, Math.min(innerHeight - m.height - 8, ev.clientY)) + 'px';
|
|
setTimeout(() => document.addEventListener('pointerdown', outside, true), 0);
|
|
}
|
|
document.addEventListener('keydown', ev => { if (ev.key === 'Escape' && !menu.hidden) closeMenu(); });
|
|
|
|
// A machine page asked for by its address: the machines view with it open.
|
|
const m = window.APP && window.APP.dialog && page.exec(window.APP.dialog);
|
|
if (m) {
|
|
const row = document.querySelector('[data-open][data-id="' + CSS.escape(m[1]) + '"]');
|
|
history.replaceState({}, '', '/');
|
|
open(m[1], m[2], row ? row.dataset.name : m[1]);
|
|
}
|
|
window.MachineDialog = {open, menu: showMenu};
|
|
})();
|