Spaces:
Paused
Paused
| import { useState } from 'react'; | |
| const EMPTY = { name: '', callsign: '', device_id: '', group_id: '' }; | |
| 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 [error, setError] = useState(''); | |
| 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(''); | |
| try { | |
| await onSave(editing?.id ?? null, { | |
| ...form, | |
| group_id: form.group_id === '' ? null : Number(form.group_id), | |
| }); | |
| setEditing(null); | |
| setForm(EMPTY); | |
| } catch (err) { | |
| setError(err.message); | |
| } | |
| }; | |
| const remove = async (m) => { | |
| if (!confirm(`Remove ${m.name}?`)) return; | |
| setError(''); | |
| try { | |
| await onDelete(m.id); | |
| } catch (err) { | |
| setError(err.message); | |
| } | |
| }; | |
| return ( | |
| <section className="panel"> | |
| <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>} | |
| {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> | |
| ))} | |
| </section> | |
| ); | |
| } |