Add Gateway device inventory panel

src/web/components/DevicesPanel.jsx

@@ -0,0 +1,173 @@
+import React, { useEffect, useState } from 'react';
+import { api } from '../api.js';
+
+const STATUS_LABELS = {
+  online: 'В сети',
+  recent: 'Недавно',
+  offline: 'Не в сети',
+};
+
+const CONFIDENCE_LABELS = {
+  high: 'точная MAC',
+  medium: 'частная MAC',
+  low: 'приблизительно',
+};
+
+function seenAt(value) {
+  if (!value) return 'нет данных';
+  return new Date(value).toLocaleString('ru-RU', {
+    day: '2-digit',
+    month: 'short',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+}
+
+export function DevicesPanel({ open, panelRef, closeRef, onClose }) {
+  const [snapshot, setSnapshot] = useState(null);
+  const [status, setStatus] = useState('idle');
+  const [error, setError] = useState(null);
+  const [editingId, setEditingId] = useState('');
+  const [alias, setAlias] = useState('');
+  const [savingId, setSavingId] = useState('');
+
+  async function load(quiet = false) {
+    if (!quiet) setStatus(snapshot ? 'refreshing' : 'loading');
+    try {
+      const next = await api.devices.list();
+      setSnapshot((current) => !current || next.revision >= current.revision ? next : current);
+      setError(null);
+      setStatus('ready');
+    } catch (requestError) {
+      setError(requestError);
+      setStatus('error');
+    }
+  }
+
+  useEffect(() => {
+    if (!open) return undefined;
+    load();
+    const timer = setInterval(() => load(true), 15_000);
+    return () => clearInterval(timer);
+  }, [open]);
+
+  async function updateDevice(device, patch) {
+    setSavingId(device.id);
+    try {
+      const next = await api.devices.update(device.id, patch, snapshot.revision);
+      setSnapshot((current) => !current || next.revision >= current.revision ? next : current);
+      setError(null);
+      return true;
+    } catch (requestError) {
+      if (requestError.code === 'STATE_CONFLICT') await load(true);
+      setError(requestError);
+      return false;
+    } finally {
+      setSavingId('');
+    }
+  }
+
+  async function saveAlias(event, device) {
+    event.preventDefault();
+    if (!await updateDevice(device, { alias })) return;
+    setEditingId('');
+  }
+
+  const devices = snapshot?.devices || [];
+  return (
+    <aside
+      ref={panelRef}
+      id="client-devices"
+      className={`client-instructions client-devices${open ? ' is-open' : ''}`}
+      aria-labelledby="client-devices-title"
+      aria-hidden={!open}
+      inert={!open ? true : undefined}
+    >
+      <div className="client-instructions-sheet client-devices-sheet">
+        <button
+          ref={closeRef}
+          className="client-drawer-close"
+          type="button"
+          aria-label="Закрыть устройства"
+          onClick={onClose}
+        >×</button>
+        <header className="client-instructions-header client-devices-header">
+          <span>Gateway · {devices.length}</span>
+          <h2 id="client-devices-title">Устройства</h2>
+          <div className="client-instructions-intro">
+            <p>Устройства, которые Gateway видит в локальной таблице соседей.</p>
+          </div>
+        </header>
+
+        {snapshot?.source?.error && (
+          <p className="client-devices-source" role="status">
+            Источник временно недоступен. Показаны последние сохранённые данные.
+          </p>
+        )}
+        {error && (
+          <div className="client-devices-error" role="alert">
+            <span>{error.message}</span>
+            <button type="button" onClick={() => load()}>Повторить</button>
+          </div>
+        )}
+        {status === 'loading' && <p className="client-devices-empty" role="status">Ищем устройства…</p>}
+        {status !== 'loading' && !devices.length && !error && (
+          <p className="client-devices-empty">Gateway пока не видит устройств.</p>
+        )}
+
+        <div className="client-devices-list" aria-live="polite" aria-busy={status === 'loading' || status === 'refreshing'}>
+          {devices.map((device) => {
+            const title = device.alias || device.hostname || device.manufacturer || device.ip;
+            const editing = editingId === device.id;
+            const saving = savingId === device.id;
+            return <article className={`client-device is-${device.status}`} key={device.id}>
+              <div className="client-device-heading">
+                <div>
+                  <span className="client-device-status">{STATUS_LABELS[device.status]}</span>
+                  <h3>{title}</h3>
+                  {device.manufacturer && device.manufacturer !== title && <p>{device.manufacturer}</p>}
+                </div>
+                <button
+                  className="client-device-pin"
+                  type="button"
+                  aria-pressed={device.pinned}
+                  aria-label={device.pinned ? `Открепить ${title}` : `Закрепить ${title}`}
+                  disabled={saving}
+                  onClick={() => updateDevice(device, { pinned: !device.pinned })}
+                >{device.pinned ? '◆' : '◇'}</button>
+              </div>
+
+              <dl className="client-device-meta">
+                <div><dt>IP</dt><dd>{device.ip || '—'}</dd></div>
+                <div><dt>MAC</dt><dd>{device.mac || '—'}</dd></div>
+                <div><dt>Интерфейс</dt><dd>{device.interface || '—'}</dd></div>
+                <div><dt>Последний раз</dt><dd><time dateTime={device.lastSeenAt}>{seenAt(device.lastSeenAt)}</time></dd></div>
+                <div><dt>Источник</dt><dd>{device.source} · {CONFIDENCE_LABELS[device.confidence]}</dd></div>
+              </dl>
+
+              {editing ? (
+                <form className="client-device-alias" onSubmit={(event) => saveAlias(event, device)}>
+                  <label>
+                    <span>Название</span>
+                    <input value={alias} maxLength="64" autoFocus onChange={(event) => setAlias(event.target.value)} />
+                  </label>
+                  <button type="submit" disabled={saving}>Сохранить</button>
+                  <button type="button" disabled={saving} onClick={() => setEditingId('')}>Отмена</button>
+                </form>
+              ) : (
+                <button
+                  className="client-device-rename"
+                  type="button"
+                  onClick={() => {
+                    setEditingId(device.id);
+                    setAlias(device.alias || '');
+                  }}
+                >Изменить название</button>
+              )}
+            </article>;
+          })}
+        </div>
+      </div>
+    </aside>
+  );
+}