81 lines
2.2 KiB
JavaScript
81 lines
2.2 KiB
JavaScript
function openModal() {
|
|
document.getElementById('modal-overlay').classList.add('open');
|
|
}
|
|
|
|
function closeModal() {
|
|
document.getElementById('modal-overlay').classList.remove('open');
|
|
document.getElementById('modal-content').innerHTML = '';
|
|
}
|
|
|
|
document.addEventListener('keydown', function(e) {
|
|
if (e.key === 'Escape') {
|
|
if (document.getElementById('modal-overlay').classList.contains('open')) {
|
|
closeModal();
|
|
} else {
|
|
exitConnectMode();
|
|
}
|
|
}
|
|
});
|
|
|
|
document.body.addEventListener('htmx:afterSwap', function(evt) {
|
|
if (evt.detail.target.id === 'modal-content') {
|
|
openModal();
|
|
}
|
|
});
|
|
|
|
var connectMode = false;
|
|
var selectedPort = null;
|
|
var selectedEl = null;
|
|
|
|
function toggleConnectMode() {
|
|
connectMode = !connectMode;
|
|
if (connectMode) {
|
|
document.body.classList.add('connect-mode');
|
|
} else {
|
|
exitConnectMode();
|
|
}
|
|
updateConnectButtons();
|
|
}
|
|
|
|
function exitConnectMode() {
|
|
connectMode = false;
|
|
document.body.classList.remove('connect-mode');
|
|
if (selectedEl) selectedEl.classList.remove('port-selected');
|
|
selectedPort = null;
|
|
selectedEl = null;
|
|
updateConnectButtons();
|
|
document.getElementById('connect-status').textContent = '';
|
|
}
|
|
|
|
function updateConnectButtons() {
|
|
document.querySelectorAll('.btn-connect-mode').forEach(function(btn) {
|
|
btn.textContent = connectMode ? 'Cancel Connect' : 'Connect Mode';
|
|
btn.classList.toggle('active', connectMode);
|
|
});
|
|
}
|
|
|
|
function portClick(el, portId, evt) {
|
|
if (!connectMode) return true;
|
|
evt.preventDefault();
|
|
evt.stopPropagation();
|
|
|
|
if (selectedPort === portId) {
|
|
exitConnectMode();
|
|
return false;
|
|
}
|
|
|
|
if (selectedPort === null) {
|
|
selectedPort = portId;
|
|
selectedEl = el;
|
|
el.classList.add('port-selected');
|
|
document.getElementById('connect-status').textContent = 'Selected ' + el.textContent.trim() + '. Click another port.';
|
|
} else {
|
|
var p1 = selectedPort;
|
|
var p2 = portId;
|
|
exitConnectMode();
|
|
openModal();
|
|
htmx.ajax('GET', '/connections/connect-form?p1=' + p1 + '&p2=' + p2, {target: '#modal-content', swap: 'innerHTML'});
|
|
}
|
|
return false;
|
|
}
|