mirror of
https://github.com/PRVTPRO/Amnezia-Web-Panel.git
synced 2026-10-23 03:37:36 +09:00
hellandClaude Opus 5
69893ba340
Today a client leaves to the internet from the same server it connected to.
Exit nodes split the two: clients connect to an *entry* node (reachable,
possibly behind DPI) and egress from an *exit* node (clean IP, other country).
One exit serves many entries and keeps serving its own AWG clients.
client --AWG--> [entry] amnezia-awg2 --WG/AWG link--> [exit] amnezia-exit --> internet
awg0 10.8.1.0/24 transit0 10.9.0.0/24
exit0 10.9.0.N (Table=off) one [Peer] per entry, /32
Exit side: a new protocol `exit` = container `amnezia-exit`, an AmneziaWG
listener on 55520/udp over the transit subnet 10.9.0.0/24. Peers are panel
nodes, never end users, and live in their own peersTable. ExitManager
subclasses AWGManager and closes every client-facing method.
Entry side: a second interface `exit0` inside the existing AWG container with
`Table = off`, plus policy routing - `from <client subnet> lookup 200`,
`default dev exit0` in table 200, and `blackhole default metric 1000` as a
kill-switch installed *before* the client tunnel comes up, so a container
restart cannot leak. Clients are MASQUERADEd into the entry's transit /32, so
the identical 10.8.1.0/24 of every instance can never collide at the exit.
TCP MSS is clamped, and rules 190/191 keep client<->client and AmneziaDNS
traffic local. State is file-driven: exit0.conf present means linked, and the
same shell block runs at container start and on a live (un)link.
Link crypto is WireGuard; AWG obfuscation is a per-exit-node property for hops
that cross DPI, and S3/S4 are deliberately not written on the transit - they
pad every transport packet and would eat the MTU budget of a tunnel inside a
tunnel. Private keys are generated inside the containers; the panel carries
public keys and a per-peer PSK only.
exit_link_service.py orchestrates linking with per-(entry, protocol) locks,
SSH off the event loop, a 15-second handshake gate that rolls back, and
lifecycle hooks for every way a link can go stale: exit uninstalled, stopped,
deleted, host cleared, entry reinstalled, container gone, backup restored.
Servers get a stable `uid` (already upstream) so reorder and delete cannot
break a link.
IPv4 only for now: while linked, client IPv6 is refused with `unreachable`
rather than leaking out of the entry.
Also included: an egress check that curls a public IP service bound to the
tunnel gateway (the client's exact path) and compares it with the direct one;
optional DNS resolution at the exit node; a default exit node applied to new
AWG installs; and reconciliation after a protocol restore.
244 tests pass. CURRENT_VERSION is untouched.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
507 lines
22 KiB
HTML
507 lines
22 KiB
HTML
{% extends "base.html" %}
|
||
|
||
{% block page_class %}page page--servers{% endblock %}
|
||
|
||
{% block content %}
|
||
<section>
|
||
<div class="page-header">
|
||
<h1 class="section-title page-header__title">
|
||
<span class="icon"><svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="12" rx="2"/><line x1="7" y1="21" x2="17" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg></span>
|
||
{{ _('nav_servers') }}
|
||
</h1>
|
||
<div class="page-header__actions">
|
||
<button class="btn btn-primary" onclick="openModal('addServerModal')">
|
||
<span>＋</span> {{ _('add_server') }}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{% if servers %}
|
||
<div class="server-grid" id="serverGrid">
|
||
{% for server in servers %}
|
||
<div class="card card-hover server-card" id="server-{{ loop.index0 }}" data-idx="{{ loop.index0 }}"
|
||
data-name="{{ server.name }}" data-host="{{ server.host }}" data-port="{{ server.ssh_port }}"
|
||
data-username="{{ server.username }}" data-auth="{{ 'key' if server.private_key else 'password' }}"
|
||
data-self-service="{{ 'true' if server.get('self_service_enabled') else 'false' }}"
|
||
draggable="true">
|
||
<div class="server-meta">
|
||
<div class="server-icon">🖥</div>
|
||
<div style="min-width: 0; flex: 1;">
|
||
<div class="server-name">
|
||
<span class="ping-dot ping-pending" id="ping-{{ loop.index0 }}"
|
||
title="{{ _('ping_checking') }}"></span>
|
||
<span>{{ server.name }}</span>
|
||
<span class="ping-ms text-muted" id="ping-ms-{{ loop.index0 }}"></span>
|
||
</div>
|
||
<div class="server-host">{{ server.host }}:{{ server.ssh_port }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="server-protocols" id="server-protocols-{{ loop.index0 }}">
|
||
{% if server.protocols %}
|
||
{% for proto_key, proto_val in server.protocols.items() %}
|
||
{% if proto_val.get('installed') %}
|
||
<span class="badge badge-success">
|
||
<span class="badge-dot"></span>
|
||
{{ 'AWG' if proto_key == 'awg' else ('AWG-Legacy' if proto_key == 'awg_legacy' else ('Xray' if
|
||
proto_key == 'xray' else ('Exit' if proto_key == 'exit' else proto_key | upper))) }}
|
||
</span>
|
||
{% endif %}
|
||
{% endfor %}
|
||
{% else %}
|
||
<span class="badge badge-warn">
|
||
<span class="badge-dot"></span>
|
||
{{ _('no_protocols') }}
|
||
</span>
|
||
{% endif %}
|
||
</div>
|
||
|
||
<div class="server-actions">
|
||
<span class="reorder-btns">
|
||
<button type="button" class="btn btn-secondary btn-sm btn-icon" onclick="moveServer({{ loop.index0 }}, -1)"
|
||
title="↑" aria-label="Move up">↑</button>
|
||
<button type="button" class="btn btn-secondary btn-sm btn-icon" onclick="moveServer({{ loop.index0 }}, 1)"
|
||
title="↓" aria-label="Move down">↓</button>
|
||
</span>
|
||
<a href="/server/{{ loop.index0 }}" class="btn btn-secondary btn-sm">
|
||
{{ _('manage') }}
|
||
</a>
|
||
<button class="btn btn-secondary btn-sm btn-icon" onclick="openEditServer(this)"
|
||
title="{{ _('edit') }}">
|
||
<svg class="btn-icon-svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
aria-hidden="true">
|
||
<path d="M12 20h9" />
|
||
<path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z" />
|
||
</svg>
|
||
</button>
|
||
<button class="btn btn-danger btn-sm btn-icon" onclick="deleteServer({{ loop.index0 }})"
|
||
title="{{ _('delete') }}">
|
||
<svg class="btn-icon-svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
|
||
aria-hidden="true">
|
||
<path d="M3 6h18" />
|
||
<path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" />
|
||
<path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" />
|
||
<line x1="10" y1="11" x2="10" y2="17" />
|
||
<line x1="14" y1="11" x2="14" y2="17" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% else %}
|
||
<div class="empty-state">
|
||
<div class="empty-icon">🛡</div>
|
||
<div class="empty-title">{{ _('no_servers') }}</div>
|
||
<div class="empty-desc">
|
||
{{ _('add_server_desc') }}
|
||
</div>
|
||
<button class="btn btn-primary" onclick="openModal('addServerModal')">
|
||
<span>＋</span> {{ _('add_server') }}
|
||
</button>
|
||
</div>
|
||
{% endif %}
|
||
</section>
|
||
|
||
<!-- ===== Edit Server Modal ===== -->
|
||
<div class="modal-backdrop" id="editServerModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title">{{ _('edit_server_title') }}</h2>
|
||
<button class="modal-close" onclick="closeModal('editServerModal')">×</button>
|
||
</div>
|
||
|
||
<form id="editServerForm" onsubmit="return submitEditServer(event)">
|
||
<input type="hidden" id="editServerIdx">
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('name') }}</label>
|
||
<input class="form-input" type="text" id="editServerName">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_host') }}</label>
|
||
<input class="form-input" type="text" id="editServerHost" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_port') }}</label>
|
||
<input class="form-input" type="number" id="editServerPort" min="1" max="65535">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_user') }}</label>
|
||
<input class="form-input" type="text" id="editServerUser" required>
|
||
</div>
|
||
|
||
<div class="tabs" style="margin-top: var(--space-md)">
|
||
<button type="button" class="tab active" onclick="switchEditAuthTab('password', this)">{{ _('ssh_password') }}</button>
|
||
<button type="button" class="tab" onclick="switchEditAuthTab('key', this)">{{ _('ssh_key') }}</button>
|
||
</div>
|
||
|
||
<div id="editAuthPassword">
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_password') }}</label>
|
||
<input class="form-input" type="password" id="editServerPassword"
|
||
placeholder="{{ _('edit_keep_credential') }}">
|
||
<div class="form-hint">{{ _('edit_keep_credential') }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="editAuthKey" class="hidden">
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_key') }}</label>
|
||
<textarea class="form-textarea" id="editServerKey"
|
||
placeholder="{{ _('edit_keep_credential') }}"></textarea>
|
||
<div class="form-hint">{{ _('edit_keep_credential') }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group" style="margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border-color);">
|
||
<label class="form-label">
|
||
<input type="checkbox" id="editServerSelfService">
|
||
{{ _('server_self_service_enabled') }}
|
||
</label>
|
||
<div class="form-hint">{{ _('server_self_service_enabled_desc') }}</div>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" onclick="closeModal('editServerModal')">{{ _('cancel')
|
||
}}</button>
|
||
<button type="submit" class="btn btn-primary" id="editServerBtn">
|
||
<span id="editServerBtnText">{{ _('save') }}</span>
|
||
<div class="spinner hidden" id="editServerSpinner"></div>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- ===== Add Server Modal ===== -->
|
||
<div class="modal-backdrop" id="addServerModal">
|
||
<div class="modal">
|
||
<div class="modal-header">
|
||
<h2 class="modal-title">{{ _('add_server') }}</h2>
|
||
<button class="modal-close" onclick="closeModal('addServerModal')">×</button>
|
||
</div>
|
||
|
||
<form id="addServerForm" onsubmit="return addServer(event)">
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('name') }}</label>
|
||
<input class="form-input" type="text" id="serverName" placeholder="My VPN Server">
|
||
</div>
|
||
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_host') }}</label>
|
||
<input class="form-input" type="text" id="serverHost" placeholder="192.168.1.1" required>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_port') }}</label>
|
||
<input class="form-input" type="number" id="serverPort" value="22" min="1" max="65535">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_user') }}</label>
|
||
<input class="form-input" type="text" id="serverUser" placeholder="root" required>
|
||
</div>
|
||
|
||
<!-- Tabs for auth method -->
|
||
<div class="tabs" style="margin-top: var(--space-md)">
|
||
<button type="button" class="tab active" onclick="switchAuthTab('password', this)">{{ _('ssh_password')
|
||
}}</button>
|
||
<button type="button" class="tab" onclick="switchAuthTab('key', this)">{{ _('ssh_key') }}</button>
|
||
</div>
|
||
|
||
<div id="authPassword">
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_password') }}</label>
|
||
<input class="form-input" type="password" id="serverPassword" placeholder="••••••••">
|
||
</div>
|
||
</div>
|
||
|
||
<div id="authKey" class="hidden">
|
||
<div class="form-group">
|
||
<label class="form-label">{{ _('ssh_key') }}</label>
|
||
<textarea class="form-textarea" id="serverKey"
|
||
placeholder="{{ _('ssh_key_placeholder') }}"></textarea>
|
||
<div class="form-hint">{{ _('ssh_key_hint') }}</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-secondary" onclick="closeModal('addServerModal')">{{ _('cancel')
|
||
}}</button>
|
||
<button type="submit" class="btn btn-primary" id="addServerBtn">
|
||
<span id="addServerBtnText">{{ _('connect') }}</span>
|
||
<div class="spinner hidden" id="addServerSpinner"></div>
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
{% endblock %}
|
||
|
||
{% block scripts %}
|
||
<script>
|
||
function switchAuthTab(tab, btn) {
|
||
document.querySelectorAll('.tabs .tab').forEach(t => t.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
|
||
document.getElementById('authPassword').classList.toggle('hidden', tab !== 'password');
|
||
document.getElementById('authKey').classList.toggle('hidden', tab !== 'key');
|
||
}
|
||
|
||
async function addServer(e) {
|
||
e.preventDefault();
|
||
|
||
const btn = document.getElementById('addServerBtn');
|
||
const btnText = document.getElementById('addServerBtnText');
|
||
const spinner = document.getElementById('addServerSpinner');
|
||
|
||
btn.disabled = true;
|
||
btnText.textContent = _('connecting');
|
||
spinner.classList.remove('hidden');
|
||
|
||
try {
|
||
const data = {
|
||
name: document.getElementById('serverName').value,
|
||
host: document.getElementById('serverHost').value,
|
||
ssh_port: parseInt(document.getElementById('serverPort').value) || 22,
|
||
username: document.getElementById('serverUser').value,
|
||
password: document.getElementById('serverPassword').value,
|
||
private_key: document.getElementById('serverKey').value,
|
||
};
|
||
|
||
const result = await apiCall('/api/servers/add', 'POST', data);
|
||
showToast(_('server_added'), 'success');
|
||
setTimeout(() => window.location.reload(), 800);
|
||
|
||
} catch (err) {
|
||
showToast(err.message, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btnText.textContent = _('connect');
|
||
spinner.classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
async function deleteServer(serverId) {
|
||
if (!confirm(_('delete_confirm'))) return;
|
||
|
||
try {
|
||
await apiCall(`/api/servers/${serverId}/delete`, 'POST');
|
||
showToast(_('server_deleted'), 'success');
|
||
setTimeout(() => window.location.reload(), 500);
|
||
} catch (err) {
|
||
showToast(err.message, 'error');
|
||
}
|
||
}
|
||
|
||
/* ========== Edit server ========== */
|
||
|
||
function switchEditAuthTab(tab, btn) {
|
||
const tabs = btn.parentElement.querySelectorAll('.tab');
|
||
tabs.forEach(t => t.classList.remove('active'));
|
||
btn.classList.add('active');
|
||
document.getElementById('editAuthPassword').classList.toggle('hidden', tab !== 'password');
|
||
document.getElementById('editAuthKey').classList.toggle('hidden', tab !== 'key');
|
||
}
|
||
|
||
function openEditServer(btn) {
|
||
// Prefill from data-* on the parent server-card so we don't have to round-trip.
|
||
const card = btn.closest('.server-card');
|
||
if (!card) return;
|
||
document.getElementById('editServerIdx').value = card.dataset.idx;
|
||
document.getElementById('editServerName').value = card.dataset.name || '';
|
||
document.getElementById('editServerHost').value = card.dataset.host || '';
|
||
document.getElementById('editServerPort').value = card.dataset.port || '22';
|
||
document.getElementById('editServerUser').value = card.dataset.username || '';
|
||
document.getElementById('editServerPassword').value = '';
|
||
document.getElementById('editServerKey').value = '';
|
||
|
||
// Pre-select the tab matching the server's current auth method.
|
||
const authIsKey = card.dataset.auth === 'key';
|
||
const tabsEl = document.querySelector('#editServerForm .tabs');
|
||
const passTab = tabsEl.children[0];
|
||
const keyTab = tabsEl.children[1];
|
||
switchEditAuthTab(authIsKey ? 'key' : 'password', authIsKey ? keyTab : passTab);
|
||
|
||
// Self-service checkbox from data attribute.
|
||
document.getElementById('editServerSelfService').checked = card.dataset.selfService === 'true';
|
||
|
||
openModal('editServerModal');
|
||
}
|
||
|
||
async function submitEditServer(e) {
|
||
e.preventDefault();
|
||
const idx = document.getElementById('editServerIdx').value;
|
||
const btn = document.getElementById('editServerBtn');
|
||
const btnText = document.getElementById('editServerBtnText');
|
||
const spinner = document.getElementById('editServerSpinner');
|
||
btn.disabled = true;
|
||
btnText.textContent = _('saving') || 'Saving...';
|
||
spinner.classList.remove('hidden');
|
||
try {
|
||
const body = {
|
||
name: document.getElementById('editServerName').value,
|
||
host: document.getElementById('editServerHost').value,
|
||
ssh_port: parseInt(document.getElementById('editServerPort').value) || 22,
|
||
username: document.getElementById('editServerUser').value,
|
||
// Empty -> null means "leave unchanged" on the backend.
|
||
password: document.getElementById('editServerPassword').value || null,
|
||
private_key: document.getElementById('editServerKey').value || null,
|
||
self_service_enabled: document.getElementById('editServerSelfService').checked,
|
||
};
|
||
await apiCall(`/api/servers/${idx}/edit`, 'POST', body);
|
||
showToast(_('server_saved'), 'success');
|
||
setTimeout(() => window.location.reload(), 500);
|
||
} catch (err) {
|
||
showToast(err.message, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
btnText.textContent = _('save');
|
||
spinner.classList.add('hidden');
|
||
}
|
||
return false;
|
||
}
|
||
|
||
/* ========== Ping indicators ========== */
|
||
|
||
async function pingServer(idx) {
|
||
const dot = document.getElementById(`ping-${idx}`);
|
||
const ms = document.getElementById(`ping-ms-${idx}`);
|
||
if (!dot) return;
|
||
try {
|
||
const res = await fetch(`/api/servers/${idx}/ping`, { credentials: 'same-origin' });
|
||
const data = await res.json();
|
||
dot.classList.remove('ping-pending');
|
||
if (data.alive) {
|
||
dot.classList.add('ping-ok');
|
||
dot.title = `${data.ms} ms`;
|
||
if (ms) ms.textContent = `${data.ms} ms`;
|
||
} else {
|
||
dot.classList.add('ping-fail');
|
||
dot.title = data.error || _('offline');
|
||
if (ms) ms.textContent = _('offline');
|
||
}
|
||
} catch {
|
||
dot.classList.remove('ping-pending');
|
||
dot.classList.add('ping-fail');
|
||
if (ms) ms.textContent = _('offline');
|
||
}
|
||
}
|
||
|
||
function startAllPings() {
|
||
// Browsers will fan these out concurrently; the page never blocks waiting
|
||
// for results because each card updates independently.
|
||
document.querySelectorAll('.server-card').forEach(card => {
|
||
const idx = card.dataset.idx;
|
||
if (idx !== undefined) pingServer(idx);
|
||
});
|
||
}
|
||
|
||
/* ========== Drag-and-drop reorder ========== */
|
||
|
||
let draggedCard = null;
|
||
|
||
async function persistServerOrder(grid) {
|
||
const newOrder = Array.from(grid.querySelectorAll('.server-card'))
|
||
.map(c => parseInt(c.dataset.idx, 10));
|
||
try {
|
||
await apiCall('/api/servers/reorder', 'POST', { order: newOrder });
|
||
showToast(_('servers_reordered'), 'success');
|
||
setTimeout(() => window.location.reload(), 400);
|
||
} catch (err) {
|
||
showToast(err.message, 'error');
|
||
window.location.reload();
|
||
}
|
||
}
|
||
|
||
async function moveServer(idx, delta) {
|
||
const grid = document.getElementById('serverGrid');
|
||
if (!grid) return;
|
||
const cards = Array.from(grid.querySelectorAll('.server-card'));
|
||
const from = cards.findIndex(c => parseInt(c.dataset.idx, 10) === idx);
|
||
if (from < 0) return;
|
||
const to = from + delta;
|
||
if (to < 0 || to >= cards.length) return;
|
||
const card = cards[from];
|
||
if (delta < 0) {
|
||
grid.insertBefore(card, cards[to]);
|
||
} else {
|
||
grid.insertBefore(card, cards[to].nextSibling);
|
||
}
|
||
await persistServerOrder(grid);
|
||
}
|
||
|
||
function setupDragAndDrop() {
|
||
const grid = document.getElementById('serverGrid');
|
||
if (!grid) return;
|
||
|
||
grid.addEventListener('dragstart', e => {
|
||
const card = e.target.closest('.server-card');
|
||
if (!card) return;
|
||
// Don't initiate drag from a button/link inside the card — those have
|
||
// their own click semantics (Edit/Delete/Manage).
|
||
if (e.target.closest('button, a')) {
|
||
e.preventDefault();
|
||
return;
|
||
}
|
||
draggedCard = card;
|
||
card.classList.add('dragging');
|
||
e.dataTransfer.effectAllowed = 'move';
|
||
// Some browsers require this for dragstart to fire with text payload.
|
||
try { e.dataTransfer.setData('text/plain', card.dataset.idx); } catch {}
|
||
});
|
||
|
||
grid.addEventListener('dragend', e => {
|
||
const card = e.target.closest('.server-card');
|
||
if (card) card.classList.remove('dragging');
|
||
grid.querySelectorAll('.server-card.drag-over').forEach(c => c.classList.remove('drag-over'));
|
||
draggedCard = null;
|
||
});
|
||
|
||
grid.addEventListener('dragover', e => {
|
||
e.preventDefault();
|
||
e.dataTransfer.dropEffect = 'move';
|
||
const card = e.target.closest('.server-card');
|
||
if (!card || card === draggedCard) return;
|
||
grid.querySelectorAll('.server-card.drag-over').forEach(c => {
|
||
if (c !== card) c.classList.remove('drag-over');
|
||
});
|
||
card.classList.add('drag-over');
|
||
});
|
||
|
||
grid.addEventListener('dragleave', e => {
|
||
const card = e.target.closest('.server-card');
|
||
if (card && !card.contains(e.relatedTarget)) card.classList.remove('drag-over');
|
||
});
|
||
|
||
grid.addEventListener('drop', async e => {
|
||
e.preventDefault();
|
||
const target = e.target.closest('.server-card');
|
||
grid.querySelectorAll('.server-card.drag-over').forEach(c => c.classList.remove('drag-over'));
|
||
if (!target || !draggedCard || target === draggedCard) return;
|
||
|
||
// Insert before/after target depending on cursor position relative
|
||
// to the target's vertical centre, which feels natural in a grid.
|
||
const rect = target.getBoundingClientRect();
|
||
const insertAfter = (e.clientY - rect.top) > rect.height / 2;
|
||
grid.insertBefore(draggedCard, insertAfter ? target.nextSibling : target);
|
||
|
||
await persistServerOrder(grid);
|
||
});
|
||
}
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
startAllPings();
|
||
setupDragAndDrop();
|
||
});
|
||
</script>
|
||
{% endblock %}
|