member management: list + add/edit/delete

web/src/components/MembersPanel.jsx

@@ -0,0 +1,107 @@
+import { useState } from 'react';
+import { api } from '../api.js';
+
+const EMPTY = { name: '', callsign: '', device_id: '', group_id: '' };
+
+export default function MembersPanel({ members, groups }) {
+  const [form, setForm] = useState(EMPTY);
+  const [editingId, setEditingId] = useState(null);
+  const [error, setError] = useState('');
+
+  const save = async (e) => {
+    e.preventDefault();
+    setError('');
+    const body = { ...form, group_id: form.group_id ? Number(form.group_id) : null };
+    try {
+      if (editingId) await api.put(`/members/${editingId}`, body);
+      else await api.post('/members', body);
+      setForm(EMPTY);
+      setEditingId(null);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  const edit = (m) => {
+    setEditingId(m.id);
+    setForm({ name: m.name, callsign: m.callsign || '', device_id: m.device_id || '', group_id: m.group_id || '' });
+  };
+
+  const remove = async (m) => {
+    if (!confirm(`Remove ${m.name}?`)) return;
+    try {
+      await api.del(`/members/${m.id}`);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  return (
+    <section className="panel">
+      <h2>Members ({members.length})</h2>
+      {error && <p className="error">{error}</p>}
+      <table>
+        <thead>
+          <tr><th></th><th>Name</th><th>Group</th><th>Device</th><th>Batt</th><th></th></tr>
+        </thead>
+        <tbody>
+          {members.map((m) => (
+            <tr key={m.id}>
+              <td><span className={`dot ${m.status}`} /></td>
+              <td>
+                {m.name}
+                {m.callsign && <><br /><span className="muted small">{m.callsign}</span></>}
+              </td>
+              <td><span className="chip-label" style={{ '--c': m.group_color || '#64748b' }}>{m.group_name || '—'}</span></td>
+              <td className="small muted">{m.device_id}</td>
+              <td className="small">{m.battery != null ? `${m.battery}%` : '—'}</td>
+              <td>
+                <button className="secondary small-btn" onClick={() => edit(m)}>edit</button>{' '}
+                <button className="secondary small-btn" onClick={() => remove(m)}>✕</button>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+
+      <h3>{editingId ? `Edit member #${editingId}` : 'Add member'}</h3>
+      <form onSubmit={save}>
+        <input
+          required
+          placeholder="Name"
+          value={form.name}
+          onChange={(e) => setForm({ ...form, name: e.target.value })}
+        />
+        <input
+          placeholder="Callsign"
+          value={form.callsign}
+          onChange={(e) => setForm({ ...form, callsign: e.target.value })}
+        />
+        <input
+          required
+          placeholder="Device ID (unique)"
+          value={form.device_id}
+          onChange={(e) => setForm({ ...form, device_id: e.target.value })}
+        />
+        <select value={form.group_id} onChange={(e) => setForm({ ...form, group_id: e.target.value })}>
+          <option value="">No group</option>
+          {groups.map((g) => (
+            <option key={g.id} value={g.id}>{g.name}</option>
+          ))}
+        </select>
+        <div className="row">
+          <button type="submit">{editingId ? 'Save' : 'Add'}</button>
+          {editingId && (
+            <button
+              type="button"
+              className="secondary"
+              onClick={() => { setEditingId(null); setForm(EMPTY); }}
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+      </form>
+    </section>
+  );
+}