members panel

web/src/components/MembersPanel.jsx

@@ -1,36 +1,42 @@
 import { useState } from 'react';
-import { api } from '../api.js';
 
 const EMPTY = { name: '', callsign: '', device_id: '', group_id: '' };
 
-export default function MembersPanel({ members, groups }) {
+export default function MembersPanel({ members, groups, sosIds = new Set(), selected, onSelect, onSave, onDelete }) {
+  const [editing, setEditing] = useState(null); // null | {} (new) | member
   const [form, setForm] = useState(EMPTY);
-  const [editingId, setEditingId] = useState(null);
   const [error, setError] = useState('');
 
-  const save = async (e) => {
+  const start = (m) => {
+    setEditing(m || {});
+    setForm({
+      name: m?.name || '',
+      callsign: m?.callsign || '',
+      device_id: m?.device_id || '',
+      group_id: m?.group_id ?? '',
+    });
+  };
+
+  const submit = 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);
+      await onSave(editing?.id ?? null, {
+        ...form,
+        group_id: form.group_id === '' ? null : Number(form.group_id),
+      });
+      setEditing(null);
       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;
+    setError('');
     try {
-      await api.del(`/members/${m.id}`);
+      await onDelete(m.id);
     } catch (err) {
       setError(err.message);
     }
@@ -38,70 +44,41 @@ export default function MembersPanel({ members, groups }) {
 
   return (
     <section className="panel">
-      <h2>Members ({members.length})</h2>
+      <h2>
+        Members ({members.length})
+        <button className="icon-btn" style={{ float: 'right' }} onClick={() => (editing ? (setEditing(null), setForm(EMPTY)) : start(null))}>
+          {editing ? '×' : '+'}
+        </button>
+      </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>
-          )}
+      {editing && (
+        <form className="member-form" onSubmit={submit}>
+          <input placeholder="Name" required value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
+          <div className="form-row">
+            <input placeholder="Callsign" value={form.callsign} onChange={(e) => setForm({ ...form, callsign: e.target.value })} />
+            <input placeholder="Device ID (unique)" value={form.device_id} onChange={(e) => setForm({ ...form, device_id: e.target.value })} disabled={!!editing.id} />
+          </div>
+          <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="form-row">
+            <button className="primary">{editing.id ? 'Save' : 'Add member'}</button>
+            {editing.id && <button type="button" className="danger" onClick={() => remove(editing)}>Delete</button>}
+          </div>
+        </form>
+      )}
+      {members.map((m) => (
+        <div key={m.id} className={`mrow ${selected === m.id ? 'selected' : ''}`} onClick={() => onSelect(m.id)}>
+          <span className={`st ${m.status === 'online' ? 'online' : ''} ${sosIds.has(m.id) ? 'sos' : ''}`} />
+          <span className="nm">
+            {m.name}
+            <span className="sub"> · {m.group_name || '—'}{m.callsign ? ` · ${m.callsign}` : ''}</span>
+          </span>
+          <span className="bat">{m.battery != null ? `${m.battery}%` : ''}</span>
+          <button className="icon-btn" onClick={(e) => { e.stopPropagation(); start(m); }}>✎</button>
         </div>
-      </form>
+      ))}
     </section>
   );
 }