left4me/l4d2web/static/js/modal.js
mwiegand 923a1840f4
feat(web): forms in modals, edit/delete on detail pages, port auto-assign
- Native <dialog> modal infra (CSS + ~30 LOC JS, no framework) used for
  create forms and delete confirmations.
- Index pages become listing-only: + Create button opens a modal; the
  broken blueprint Actions column and inline overlay edit cells are gone.
- Server detail gains a blueprint reassignment form; existing Delete
  button now opens a confirmation modal before tearing down the runtime.
- Blueprint detail gains a Delete button + confirmation modal (was
  unreachable from the UI before).
- New overlay detail page at /overlays/<id> with edit form, "Used by"
  blueprints list, and delete (admin only).
- Server create: port field is now optional; backend auto-assigns the
  next free port from LEFT4ME_PORT_RANGE_START/_END (default
  27015-27115). 409 on range exhaustion.
- New routes: POST /blueprints/<id>/delete (form sentinel matching
  overlays pattern), POST /servers/<id> (form-friendly blueprint
  reassign), GET /overlays/<id>.
- Server delete operation now redirects to /servers; overlay update
  redirects to /overlays/<id>.

Server rename remains unsupported pending an id-vs-name design pass for
l4d2host (the runtime directory is name-keyed; renaming would orphan
files).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-07 01:30:33 +02:00

27 lines
844 B
JavaScript

document.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[data-modal-open]").forEach((trigger) => {
trigger.addEventListener("click", (event) => {
const targetId = trigger.getAttribute("data-modal-open");
const dialog = document.getElementById(targetId);
if (dialog && typeof dialog.showModal === "function") {
event.preventDefault();
dialog.showModal();
}
});
});
document.querySelectorAll("dialog.modal").forEach((dialog) => {
dialog.querySelectorAll("[data-modal-close]").forEach((closer) => {
closer.addEventListener("click", (event) => {
event.preventDefault();
dialog.close();
});
});
dialog.addEventListener("click", (event) => {
if (event.target === dialog) {
dialog.close();
}
});
});
});