Mihomo improved

2026-04-13 18:56:13 +03:00
parent 8c35022483
commit 6aa0349f5d
11 changed files with 3753 additions and 569 deletions
--- a/public/app.js
+++ b/public/app.js
@@ -64,6 +64,25 @@ function modeLabel(m) {
  return { dhcp: 'DHCP', static: 'Static', loopback: 'Loopback', manual: 'Manual' }[m] || (m || '?');
 }

+// ── SVG icons ────────────────────────────────────────────────────────────────
+
+const ICON = {
+  pencil: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
+    <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+    <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+  </svg>`,
+  restart: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="15" height="15">
+    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/>
+    <path d="M3 3v5h5"/>
+  </svg>`,
+  trash: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
+    <path d="M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6"/>
+  </svg>`,
+  plus: `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="13" height="13">
+    <path d="M12 5v14M5 12h14"/>
+  </svg>`,
+};
+
 // ── Render ───────────────────────────────────────────────────────────────────

 function renderAll() {
@@ -99,6 +118,8 @@ function buildCard(iface, vlans) {
  const hasPending = state.pending.includes(iface.name);
  const sc = stateClass(iface.state);
  const isLo = iface.name === 'lo' || iface.mode === 'loopback';
+  const isUp = iface.state === 'up';
+  const label = iface.label || '';

  const card = document.createElement('div');
  card.className = 'iface-card' + (hasPending ? ' has-pending' : '');
@@ -108,23 +129,24 @@ function buildCard(iface, vlans) {
    `<div class="info-row"><span class="info-label">IPv6</span><span class="info-val">${a}</span></div>`
  ).join('');

+  const nameBlock = label
+    ? `<div class="card-name-stack">
+        <span class="card-label-text">${label}</span>
+        <span class="card-iface-sub">${iface.name}</span>
+       </div>`
+    : `<span class="card-iface-name">${iface.name}</span>`;
+
  card.innerHTML = `
    <div class="card-header">
      <div class="card-name">
        <span class="state-dot ${sc}"></span>
-        <span>${iface.name}</span>
+        ${nameBlock}
        ${hasPending ? '<span class="pending-badge">несохранено</span>' : ''}
      </div>
-      <div style="display:flex;gap:6px;align-items:center">
-        <span class="mode-badge ${iface.mode || 'unknown'}">${modeLabel(iface.mode)}</span>
-      </div>
+      <span class="mode-badge ${iface.mode || 'unknown'}">${modeLabel(iface.mode)}</span>
    </div>

    <div class="card-info">
-      <div class="info-row">
-        <span class="info-label">Статус</span>
-        <span class="info-val">${iface.state || 'unknown'}</span>
-      </div>
      <div class="info-row">
        <span class="info-label">IPv4</span>
        <span class="info-val">${iface.ipv4
@@ -136,14 +158,13 @@ function buildCard(iface, vlans) {
        <span class="info-label">Шлюз</span>
        <span class="info-val">${iface.gateway || '<span class="none">&mdash;</span>'}</span>
      </div>
-
      <div class="traffic-row">
        <div class="traffic-item">
-          <span class="traffic-label">RX</span>
+          <span class="traffic-label">↓ RX</span>
          <span class="traffic-val">${fmtBytes(iface.rx_bytes)}</span>
        </div>
        <div class="traffic-item">
-          <span class="traffic-label">TX</span>
+          <span class="traffic-label">↑ TX</span>
          <span class="traffic-val">${fmtBytes(iface.tx_bytes)}</span>
        </div>
        <div class="traffic-item">
@@ -154,10 +175,15 @@ function buildCard(iface, vlans) {
    </div>

    <div class="card-actions">
-      <button class="btn btn-success btn-sm" data-action="up"      data-iface="${iface.name}">ON</button>
-      <button class="btn btn-danger  btn-sm" data-action="down"    data-iface="${iface.name}">OFF</button>
-      <button class="btn btn-ghost   btn-sm" data-action="restart" data-iface="${iface.name}">RESTART</button>
-      <button class="btn btn-primary btn-sm" data-action="config"  data-iface="${iface.name}" style="margin-left:auto">CONFIG</button>
+      ${!isLo ? `
+      <label class="toggle-label iface-power-toggle" title="${isUp ? 'Выключить интерфейс' : 'Включить интерфейс'}">
+        <input type="checkbox" ${isUp ? 'checked' : ''} data-action="toggle" data-iface="${iface.name}">
+        <span class="toggle-slider"></span>
+        <span class="iface-toggle-label">${isUp ? 'Вкл' : 'Выкл'}</span>
+      </label>
+      <button class="btn-icon" data-action="restart" data-iface="${iface.name}" title="Перезапустить">${ICON.restart}</button>
+      ` : ''}
+      <button class="btn-icon btn-icon-accent" data-action="config" data-iface="${iface.name}" title="Настроить" style="margin-left:auto">${ICON.pencil}</button>
    </div>

    ${!isLo ? buildVLANSection(iface.name, vlans) : ''}
@@ -170,6 +196,8 @@ function buildVLANSection(parentName, vlans) {
  const rows = vlans.map(v => {
    const sc = stateClass(v.state);
    const hasPending = state.pending.includes(v.name);
+    const isUp = v.state === 'up';
+    const label = v.label || '';
    const ip = v.ipv4
      ? v.ipv4 + (v.ipv4_mask ? ' / ' + v.ipv4_mask : '')
      : '<span class="none">&mdash;</span>';
@@ -177,17 +205,21 @@ function buildVLANSection(parentName, vlans) {
      <div class="vlan-row" data-name="${v.name}">
        <div class="vlan-row-left">
          <span class="state-dot ${sc}" style="width:8px;height:8px"></span>
-          <span class="vlan-iface-name">${v.name}</span>
+          ${label
+            ? `<div class="vlan-name-stack"><span class="vlan-label-text">${label}</span><span class="vlan-iface-name">${v.name}</span></div>`
+            : `<span class="vlan-iface-name">${v.name}</span>`}
          <span class="vlan-id-tag">VLAN ${vlanId(v.name)}</span>
          <span class="mode-badge ${v.mode || 'unknown'}">${modeLabel(v.mode)}</span>
          ${hasPending ? '<span class="pending-badge">несохранено</span>' : ''}
        </div>
        <div class="vlan-row-info">${ip}</div>
        <div class="vlan-row-actions">
-          <button class="btn btn-success btn-xs" data-action="up"     data-iface="${v.name}">ON</button>
-          <button class="btn btn-danger  btn-xs" data-action="down"   data-iface="${v.name}">OFF</button>
-          <button class="btn btn-primary btn-xs" data-action="config" data-iface="${v.name}">CONFIG</button>
-          <button class="btn btn-danger  btn-xs" data-action="delete" data-iface="${v.name}" title="Удалить VLAN">✕</button>
+          <label class="toggle-label" title="${isUp ? 'Выключить' : 'Включить'}">
+            <input type="checkbox" ${isUp ? 'checked' : ''} data-action="toggle" data-iface="${v.name}">
+            <span class="toggle-slider toggle-sm"></span>
+          </label>
+          <button class="btn-icon" data-action="config" data-iface="${v.name}" title="Настроить">${ICON.pencil}</button>
+          <button class="btn-icon btn-icon-danger" data-action="delete" data-iface="${v.name}" title="Удалить VLAN">${ICON.trash}</button>
        </div>
      </div>`;
  }).join('');
@@ -199,8 +231,8 @@ function buildVLANSection(parentName, vlans) {
  return `
    <div class="vlan-section">
      <div class="vlan-header">
-        <span class="vlan-title">Теговые VLAN</span>
-        <button class="btn btn-ghost btn-xs" data-action="addvlan" data-iface="${parentName}">+ Добавить</button>
+        <span class="vlan-title">VLAN</span>
+        <button class="btn btn-ghost btn-xs" data-action="addvlan" data-iface="${parentName}">${ICON.plus} Добавить</button>
      </div>
      <div class="vlan-list">
        ${rows}
@@ -251,17 +283,13 @@ async function doAction(name, action) {
    return;
  }

-  const btn = document.querySelector(`[data-action="${action}"][data-iface="${name}"]`);
-  if (btn) { btn.disabled = true; btn.textContent = '...'; }
-
  try {
    await post(`/api/interfaces/${name}/${action}`);
    showToast(`${name}: ${action} выполнено`, 'success');
    await loadAll();
  } catch (e) {
    showToast(`${name} ${action}: ${e.message}`, 'error');
-  } finally {
-    if (btn) btn.disabled = false;
+    await loadAll(); // refresh to restore correct toggle state
  }
 }

@@ -285,12 +313,12 @@ async function openConfig(name) {
  }

  try {
-    const [{ config, pending }, natData] = await Promise.all([
+    const [configData, natData] = await Promise.all([
      get(`/api/config/${name}`),
      get('/api/nat').catch(() => null),
    ]);
    if (natData) state.nat = natData;
-    fillForm(config, pending, name);
+    fillForm(configData.config, configData.pending, name, configData.label || '');
    document.getElementById('modal').classList.remove('hidden');
  } catch (e) {
    showToast('Ошибка загрузки конфига: ' + e.message, 'error');
@@ -313,11 +341,12 @@ async function openNewVLAN(parentName) {
    if (natData) state.nat = natData;
  } catch (_) {}

-  fillForm({ auto: true, mode: 'static' }, false, '');
+  fillForm({ auto: true, mode: 'static' }, false, '', '');
  document.getElementById('modal').classList.remove('hidden');
 }

-function fillForm(cfg, pending, name) {
+function fillForm(cfg, pending, name, label = '') {
+  document.getElementById('cfgLabel').value   = label;
  document.getElementById('cfgAuto').checked    = !!cfg.auto;
  document.getElementById('cfgAddress').value   = cfg.address || '';
  document.getElementById('cfgNetmask').value   = cfg.netmask || '';
@@ -327,7 +356,6 @@ function fillForm(cfg, pending, name) {
  const mode = cfg.mode === 'static' ? 'static' : 'dhcp';
  setMode(mode);

-  // Mark pending visually
  if (pending && name) {
    document.getElementById('modalTitle').textContent = `Настройка: ${name} (несохранённые изменения)`;
  }
@@ -390,6 +418,7 @@ async function saveConfig() {
  const mode = currentMode();
  const cfg = {
    name,
+    label:   document.getElementById('cfgLabel').value.trim(),
    auto:    document.getElementById('cfgAuto').checked,
    mode,
    address: document.getElementById('cfgAddress').value.trim(),
@@ -451,7 +480,6 @@ async function discardAll() {
  }
  state.pending = [];
  renderPendingBanner();
-  renderAll();
  showToast('Изменения отменены', 'info');
  await loadAll();
 }
@@ -471,15 +499,17 @@ function showToast(msg, type = 'info') {
 // ── Event wiring ──────────────────────────────────────────────────────────────

 document.getElementById('refreshBtn').addEventListener('click', loadAll);
-
 document.getElementById('applyBtn').addEventListener('click', applyAll);
 document.getElementById('discardAllBtn').addEventListener('click', discardAll);

-// Card action buttons (delegated)
+// Card button clicks (delegated)
 document.getElementById('ifaceGrid').addEventListener('click', e => {
  const btn = e.target.closest('[data-action]');
  if (!btn) return;
+  // Don't handle toggle inputs here (handled by 'change' below)
+  if (btn.tagName === 'INPUT' && btn.type === 'checkbox') return;
  const { action, iface } = btn.dataset;
+  if (!action || !iface) return;
  if (action === 'config') {
    openConfig(iface);
  } else if (action === 'addvlan') {
@@ -489,6 +519,13 @@ document.getElementById('ifaceGrid').addEventListener('click', e => {
  }
 });

+// Toggle switch (on/off) — delegated change event
+document.getElementById('ifaceGrid').addEventListener('change', e => {
+  const input = e.target.closest('input[data-action="toggle"]');
+  if (!input) return;
+  doAction(input.dataset.iface, input.checked ? 'up' : 'down');
+});
+
 // Modal close
 document.getElementById('closeModal').addEventListener('click', closeModal);
 document.getElementById('cancelConfigBtn').addEventListener('click', closeModal);