402 lines
15 KiB
JavaScript
402 lines
15 KiB
JavaScript
'use strict';
|
||
|
||
let allClients = [];
|
||
let searchQuery = '';
|
||
let editingClient = null;
|
||
let modalSelectedPolicy = ''; // "" means "use default"
|
||
|
||
// ── Default policy ─────────────────────────────────────────────────────────
|
||
|
||
async function loadDefaultPolicy() {
|
||
try {
|
||
const res = await fetch('/api/clients/policy');
|
||
const json = await res.json();
|
||
if (!res.ok || !json.success) return;
|
||
setDefaultPolicyUI(json.data.default || 'direct');
|
||
} catch (_) {}
|
||
}
|
||
|
||
function setDefaultPolicyUI(val) {
|
||
document.querySelectorAll('#defaultPolicySelector .seg-btn').forEach(btn => {
|
||
btn.classList.toggle('active', btn.dataset.val === val);
|
||
});
|
||
}
|
||
|
||
async function saveDefaultPolicy(val) {
|
||
try {
|
||
const res = await fetch('/api/clients/policy', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ default: val }),
|
||
});
|
||
const json = await res.json();
|
||
if (!res.ok || !json.success) throw new Error(json.error || `HTTP ${res.status}`);
|
||
setDefaultPolicyUI(val);
|
||
showToast('Политика по умолчанию сохранена', 'success');
|
||
loadClients();
|
||
} catch (e) {
|
||
showToast('Ошибка: ' + e.message, 'error');
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('#defaultPolicySelector .seg-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => saveDefaultPolicy(btn.dataset.val));
|
||
});
|
||
|
||
// ── Apply-all ──────────────────────────────────────────────────────────────
|
||
|
||
async function applyPolicyToAll(val) {
|
||
const labels = { disabled: 'Отключён', direct: 'Напрямую', vpn: 'Через VPN' };
|
||
if (!confirm(`Применить политику «${labels[val]}» ко всем устройствам?`)) return;
|
||
|
||
try {
|
||
const res = await fetch('/api/clients/policy/apply-all', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ policy: val }),
|
||
});
|
||
const json = await res.json();
|
||
if (!res.ok || !json.success) throw new Error(json.error || `HTTP ${res.status}`);
|
||
showToast(`Политика применена к ${json.data.updated} устройствам`, 'success');
|
||
loadClients();
|
||
} catch (e) {
|
||
showToast('Ошибка: ' + e.message, 'error');
|
||
}
|
||
}
|
||
|
||
document.querySelectorAll('.policy-all-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => applyPolicyToAll(btn.dataset.val));
|
||
});
|
||
|
||
// ── Clients list ───────────────────────────────────────────────────────────
|
||
|
||
async function loadClients() {
|
||
try {
|
||
const res = await fetch('/api/clients');
|
||
const json = await res.json();
|
||
if (!res.ok || !json.success) throw new Error(json.error || `HTTP ${res.status}`);
|
||
allClients = json.data || [];
|
||
render();
|
||
} catch (e) {
|
||
showToast('Ошибка загрузки: ' + e.message, 'error');
|
||
}
|
||
}
|
||
|
||
const ONLINE_WINDOW_MS = 5 * 60 * 1000;
|
||
|
||
function isOnline(c) {
|
||
if (c.last_active) {
|
||
return (Date.now() - c.last_active * 1000) < ONLINE_WINDOW_MS;
|
||
}
|
||
return c.online;
|
||
}
|
||
|
||
function fmtBytes(n) {
|
||
if (!n) return '—';
|
||
const units = ['Б', 'КБ', 'МБ', 'ГБ', 'ТБ'];
|
||
let i = 0, v = n;
|
||
while (v >= 1024 && i < units.length - 1) { v /= 1024; i++; }
|
||
return `${v.toFixed(i === 0 ? 0 : 1)} ${units[i]}`;
|
||
}
|
||
|
||
function fmtLease(expiresUnix) {
|
||
if (!expiresUnix) return null;
|
||
const secs = expiresUnix - Math.floor(Date.now() / 1000);
|
||
if (secs <= 0) return { text: 'истекла', cls: 'lease-expired' };
|
||
if (secs < 3600) return { text: `${Math.floor(secs / 60)} мин`, cls: 'lease-soon' };
|
||
if (secs < 86400) return { text: `${Math.floor(secs / 3600)} ч`, cls: '' };
|
||
return { text: `${Math.floor(secs / 86400)} д ${Math.floor((secs % 86400) / 3600)} ч`, cls: '' };
|
||
}
|
||
|
||
function fmtLastActive(c) {
|
||
const nowSec = Math.floor(Date.now() / 1000);
|
||
|
||
if (c.last_active) {
|
||
const ago = nowSec - c.last_active;
|
||
if (ago < 10) return { text: 'только что', cls: 'active-now' };
|
||
if (ago < 60) return { text: `${ago} с назад`, cls: 'active-now' };
|
||
if (ago < 3600) return { text: `${Math.floor(ago / 60)} мин назад`, cls: ago < ONLINE_WINDOW_MS / 1000 ? 'active-now' : '' };
|
||
if (ago < 86400) return { text: `${Math.floor(ago / 3600)} ч назад`, cls: '' };
|
||
return { text: `${Math.floor(ago / 86400)} д назад`, cls: '' };
|
||
}
|
||
|
||
if (c.is_dhcp && c.lease_expires) {
|
||
const lease = fmtLease(c.lease_expires);
|
||
return lease
|
||
? { text: `аренда: ${lease.text}`, cls: lease.cls }
|
||
: { text: '—', cls: '' };
|
||
}
|
||
|
||
return { text: '—', cls: '' };
|
||
}
|
||
|
||
function matchesSearch(c, q) {
|
||
if (!q) return true;
|
||
const l = q.toLowerCase();
|
||
return (
|
||
(c.hostname || '').toLowerCase().includes(l) ||
|
||
(c.ip || '').includes(l) ||
|
||
(c.mac || '').toLowerCase().includes(l) ||
|
||
(c.interface || '').toLowerCase().includes(l)
|
||
);
|
||
}
|
||
|
||
function policyLabel(policy) {
|
||
switch (policy) {
|
||
case 'disabled': return { text: 'Отключён', cls: 'policy-badge policy-disabled' };
|
||
case 'vpn': return { text: 'VPN', cls: 'policy-badge policy-vpn' };
|
||
case 'direct': return { text: 'Напрямую', cls: 'policy-badge policy-direct' };
|
||
default: return { text: 'по умолч.', cls: 'policy-badge policy-default' };
|
||
}
|
||
}
|
||
|
||
function render() {
|
||
const loading = document.getElementById('loading');
|
||
const wrap = document.getElementById('clientsTableWrap');
|
||
const empty = document.getElementById('emptyState');
|
||
const body = document.getElementById('clientsBody');
|
||
const summary = document.getElementById('clientsSummary');
|
||
|
||
loading.classList.add('hidden');
|
||
|
||
const onlineCount = allClients.filter(c => isOnline(c)).length;
|
||
const dhcpCount = allClients.filter(c => c.is_dhcp).length;
|
||
const disabledCount = allClients.filter(c => c.policy === 'disabled' || (c.policy === '' && c.blocked)).length;
|
||
const vpnCount = allClients.filter(c => c.policy === 'vpn').length;
|
||
|
||
summary.innerHTML =
|
||
`<span class="cl-stat"><span class="state-dot up"></span>${onlineCount} онлайн</span>` +
|
||
`<span class="cl-stat cl-stat--muted">${allClients.length} всего</span>` +
|
||
`<span class="cl-stat cl-stat--muted">${dhcpCount} по DHCP</span>` +
|
||
(vpnCount > 0 ? `<span class="cl-stat cl-stat--vpn">${vpnCount} через VPN</span>` : '') +
|
||
(disabledCount > 0 ? `<span class="cl-stat cl-stat--blocked">${disabledCount} отключено</span>` : '');
|
||
|
||
const filtered = allClients.filter(c => matchesSearch(c, searchQuery));
|
||
|
||
if (filtered.length === 0) {
|
||
wrap.classList.add('hidden');
|
||
empty.classList.remove('hidden');
|
||
empty.textContent = allClients.length === 0
|
||
? 'Нет подключённых устройств'
|
||
: `Ничего не найдено по запросу «${searchQuery}»`;
|
||
return;
|
||
}
|
||
|
||
empty.classList.add('hidden');
|
||
wrap.classList.remove('hidden');
|
||
|
||
const sorted = [...filtered].sort((a, b) => {
|
||
const ao = isOnline(a), bo = isOnline(b);
|
||
if (ao !== bo) return ao ? -1 : 1;
|
||
return ipToNum(a.ip) - ipToNum(b.ip);
|
||
});
|
||
|
||
body.innerHTML = '';
|
||
sorted.forEach(c => body.appendChild(buildRow(c)));
|
||
}
|
||
|
||
function buildRow(c) {
|
||
const online = isOnline(c);
|
||
const tr = document.createElement('tr');
|
||
tr.className = 'client-row';
|
||
if (!online) tr.classList.add('row-offline');
|
||
|
||
const effectivePolicy = c.policy || (c.blocked ? 'disabled' : '');
|
||
if (effectivePolicy === 'disabled') tr.classList.add('row-blocked');
|
||
if (effectivePolicy === 'vpn') tr.classList.add('row-vpn');
|
||
|
||
const activity = fmtLastActive(c);
|
||
const pl = policyLabel(effectivePolicy);
|
||
|
||
const typeCell = c.is_dhcp
|
||
? '<span class="client-badge dhcp">DHCP</span>'
|
||
: '<span class="client-badge arp">ARP</span>';
|
||
|
||
const hostname = c.hostname
|
||
? `<span class="client-host">${escHtml(c.hostname)}</span>`
|
||
: '<span class="none">—</span>';
|
||
|
||
const txHtml = c.tx_bytes
|
||
? `<span class="traffic-num">${fmtBytes(c.tx_bytes)}</span>`
|
||
: '<span class="none">—</span>';
|
||
|
||
const rxHtml = c.rx_bytes
|
||
? `<span class="traffic-num">${fmtBytes(c.rx_bytes)}</span>`
|
||
: '<span class="none">—</span>';
|
||
|
||
const actHtml = activity.text !== '—'
|
||
? `<span class="activity-val ${activity.cls}">${activity.text}</span>`
|
||
: '<span class="none">—</span>';
|
||
|
||
const ipDisplay = c.static_ip
|
||
? `<span class="mono">${escHtml(c.static_ip)}</span> <span class="client-badge static-badge">фикс.</span>`
|
||
: `<span class="mono">${escHtml(c.ip)}</span>`;
|
||
|
||
tr.innerHTML = `
|
||
<td class="col-status">
|
||
<span class="state-dot ${online ? 'up' : 'down'}"
|
||
title="${online ? 'онлайн' : 'офлайн'}"></span>
|
||
</td>
|
||
<td class="col-host">${hostname}</td>
|
||
<td class="col-ip">${ipDisplay}</td>
|
||
<td class="col-mac"><span class="mono muted">${escHtml(c.mac || '—')}</span></td>
|
||
<td class="col-iface">${escHtml(c.interface || '—')}</td>
|
||
<td class="col-type">${typeCell}</td>
|
||
<td class="col-policy"><span class="${pl.cls}">${pl.text}</span></td>
|
||
<td class="col-tx">${txHtml}</td>
|
||
<td class="col-rx">${rxHtml}</td>
|
||
<td class="col-activity">${actHtml}</td>
|
||
`;
|
||
|
||
tr.addEventListener('click', () => openModal(c));
|
||
return tr;
|
||
}
|
||
|
||
// ── Modal ──────────────────────────────────────────────────────────────────
|
||
|
||
function openModal(c) {
|
||
editingClient = { ...c };
|
||
const modal = document.getElementById('clientModal');
|
||
|
||
document.getElementById('modalTitle').textContent = c.hostname || c.ip || 'Устройство';
|
||
document.getElementById('modalHostname').value = c.hostname || '';
|
||
document.getElementById('modalHostname').placeholder = c.hostname ? '' : (c.mac || c.ip);
|
||
|
||
const currentIP = c.static_ip || c.ip || '—';
|
||
document.getElementById('modalIP').textContent = currentIP;
|
||
const currentLabel = document.getElementById('modalIPCurrent');
|
||
if (c.static_ip) {
|
||
currentLabel.textContent = '(фиксированный)';
|
||
currentLabel.style.display = '';
|
||
} else if (c.ip) {
|
||
currentLabel.textContent = '(DHCP: ' + c.ip + ')';
|
||
currentLabel.style.display = '';
|
||
} else {
|
||
currentLabel.textContent = '';
|
||
currentLabel.style.display = 'none';
|
||
}
|
||
|
||
document.getElementById('modalStaticIP').value = c.static_ip || '';
|
||
document.getElementById('modalMAC').textContent = c.mac || '—';
|
||
document.getElementById('modalIface').textContent = c.interface || '—';
|
||
|
||
// Set policy selector — empty string means "use default"
|
||
const effectivePolicy = c.policy || '';
|
||
modalSelectedPolicy = effectivePolicy;
|
||
updateModalPolicySelector(effectivePolicy);
|
||
|
||
modal.classList.remove('hidden');
|
||
document.getElementById('modalHostname').focus();
|
||
}
|
||
|
||
function updateModalPolicySelector(val) {
|
||
document.querySelectorAll('#modalPolicySelector .seg-btn').forEach(btn => {
|
||
btn.classList.toggle('active', btn.dataset.val === val);
|
||
});
|
||
const hint = document.getElementById('modalPolicyHint');
|
||
const descriptions = {
|
||
disabled: 'Устройство заблокировано — нет доступа в интернет',
|
||
direct: 'Трафик идёт напрямую через NAT, минуя VPN',
|
||
vpn: 'Трафик перенаправляется через Mihomo (tproxy)',
|
||
'': 'Используется политика по умолчанию',
|
||
};
|
||
hint.textContent = descriptions[val] ?? '';
|
||
}
|
||
|
||
document.querySelectorAll('#modalPolicySelector .seg-btn').forEach(btn => {
|
||
btn.addEventListener('click', () => {
|
||
modalSelectedPolicy = btn.dataset.val;
|
||
updateModalPolicySelector(btn.dataset.val);
|
||
});
|
||
});
|
||
|
||
function closeModal() {
|
||
document.getElementById('clientModal').classList.add('hidden');
|
||
editingClient = null;
|
||
}
|
||
|
||
async function saveClient() {
|
||
if (!editingClient) return;
|
||
|
||
const mac = editingClient.mac;
|
||
if (!mac) {
|
||
showToast('У устройства нет MAC-адреса', 'error');
|
||
return;
|
||
}
|
||
|
||
const hostname = document.getElementById('modalHostname').value.trim();
|
||
const staticIP = document.getElementById('modalStaticIP').value.trim();
|
||
const policy = modalSelectedPolicy; // "disabled" | "direct" | "vpn" | ""
|
||
|
||
const btn = document.getElementById('modalSave');
|
||
btn.disabled = true;
|
||
|
||
try {
|
||
const res = await fetch('/api/clients/update/' + encodeURIComponent(mac), {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
hostname,
|
||
blocked: policy === 'disabled',
|
||
static_ip: staticIP,
|
||
policy,
|
||
}),
|
||
});
|
||
const json = await res.json();
|
||
if (!res.ok || !json.success) throw new Error(json.error || `HTTP ${res.status}`);
|
||
showToast('Настройки сохранены', 'success');
|
||
closeModal();
|
||
loadClients();
|
||
} catch (e) {
|
||
showToast('Ошибка: ' + e.message, 'error');
|
||
} finally {
|
||
btn.disabled = false;
|
||
}
|
||
}
|
||
|
||
// ── Utilities ──────────────────────────────────────────────────────────────
|
||
|
||
function ipToNum(ip) {
|
||
return (ip || '').split('.').reduce((acc, o) => acc * 256 + (+o || 0), 0);
|
||
}
|
||
|
||
function escHtml(s) {
|
||
return String(s)
|
||
.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
|
||
}
|
||
|
||
let toastTimer;
|
||
function showToast(msg, type = 'info') {
|
||
const t = document.getElementById('toast');
|
||
t.textContent = msg;
|
||
t.className = `toast ${type}`;
|
||
t.classList.remove('hidden');
|
||
clearTimeout(toastTimer);
|
||
toastTimer = setTimeout(() => t.classList.add('hidden'), 3500);
|
||
}
|
||
|
||
// ── Event wiring ───────────────────────────────────────────────────────────
|
||
|
||
|
||
document.getElementById('clientsSearch').addEventListener('input', e => {
|
||
searchQuery = e.target.value.trim();
|
||
render();
|
||
});
|
||
|
||
document.getElementById('modalBackdrop').addEventListener('click', closeModal);
|
||
document.getElementById('modalClose').addEventListener('click', closeModal);
|
||
document.getElementById('modalCancel').addEventListener('click', closeModal);
|
||
document.getElementById('clientForm').addEventListener('submit', e => {
|
||
e.preventDefault();
|
||
saveClient();
|
||
});
|
||
|
||
document.addEventListener('keydown', e => {
|
||
if (e.key === 'Escape') closeModal();
|
||
});
|
||
|
||
setInterval(loadClients, 10000);
|
||
|
||
loadDefaultPolicy();
|
||
loadClients();
|