Spaces:
Paused
Paused
| import { useCallback, useEffect, useRef, useState } from 'react'; | |
| import { api, getToken, setToken } from './api.js'; | |
| import { DispatchSocket } from './ws.js'; | |
| import { PttPlayer, startCapture, sosBeep } from './audio.js'; | |
| import MapView from './components/MapView.jsx'; | |
| import SosPanel from './components/SosPanel.jsx'; | |
| import MembersPanel from './components/MembersPanel.jsx'; | |
| import PttPanel from './components/PttPanel.jsx'; | |
| import Login from './components/Login.jsx'; | |
| export default function App() { | |
| const [user, setUser] = useState(null); | |
| const [members, setMembers] = useState([]); | |
| const [groups, setGroups] = useState([]); | |
| const [sos, setSos] = useState([]); | |
| const [floors, setFloors] = useState({}); | |
| const [connected, setConnected] = useState(false); | |
| const [tab, setTab] = useState('members'); | |
| const [selectedGroup, setSelectedGroup] = useState(null); | |
| const [talking, setTalking] = useState(false); | |
| const [muted, setMuted] = useState(false); | |
| const sockRef = useRef(null); | |
| const playerRef = useRef(null); | |
| const captureRef = useRef(null); | |
| const mutedRef = useRef(false); | |
| mutedRef.current = muted; | |
| // restore session on reload | |
| useEffect(() => { | |
| if (!getToken()) return; | |
| api.get('/me').then(setUser).catch(() => setToken('')); | |
| }, []); | |
| const startSocket = useCallback(() => { | |
| sockRef.current?.close(); | |
| sockRef.current = new DispatchSocket({ | |
| onStatus: setConnected, | |
| onWelcome: (d) => { | |
| setGroups(d.groups); | |
| setMembers(d.members); | |
| setSos(d.sos); | |
| setFloors(Object.fromEntries(d.floors.map((f) => [f.groupId, f]))); | |
| }, | |
| onMembers: setMembers, | |
| onGroups: setGroups, | |
| onSosNew: (alert) => { | |
| setSos((prev) => [alert, ...prev.filter((a) => a.id !== alert.id)]); | |
| if (!mutedRef.current) sosBeep(4); | |
| }, | |
| onSosUpdate: (alert) => setSos((prev) => prev.map((a) => (a.id === alert.id ? alert : a))), | |
| onFloor: (f) => | |
| setFloors((prev) => { | |
| if (f.memberId == null) { | |
| const { [f.groupId]: _drop, ...rest } = prev; | |
| return rest; | |
| } | |
| return { ...prev, [f.groupId]: f }; | |
| }), | |
| onAudio: ({ memberId, pcm }) => { | |
| if (mutedRef.current || memberId === 0) return; | |
| if (!playerRef.current) playerRef.current = new PttPlayer(); | |
| playerRef.current.play(pcm); | |
| }, | |
| }); | |
| }, []); | |
| useEffect(() => { | |
| if (user && !sockRef.current) startSocket(); | |
| }, [user, startSocket]); | |
| const handleLogin = async (username, password) => { | |
| const { token, user: u } = await api.post('/login', { username, password }); | |
| setToken(token); | |
| setUser(u); | |
| }; | |
| const logout = () => { | |
| sockRef.current?.close(); | |
| sockRef.current = null; | |
| captureRef.current?.stop(); | |
| captureRef.current = null; | |
| setToken(''); | |
| setUser(null); | |
| }; | |
| const beginTalk = async () => { | |
| if (!selectedGroup || talking) return; | |
| try { | |
| captureRef.current = await startCapture((pcm) => sockRef.current?.sendAudio(selectedGroup, 0, pcm)); | |
| sockRef.current?.send({ type: 'ptt_start', groupId: selectedGroup }); | |
| setTalking(true); | |
| } catch (err) { | |
| console.error('could not start microphone:', err); | |
| } | |
| }; | |
| const endTalk = () => { | |
| sockRef.current?.send({ type: 'ptt_stop' }); | |
| captureRef.current?.stop(); | |
| captureRef.current = null; | |
| setTalking(false); | |
| }; | |
| const ackSos = (id) => api.post(`/sos/${id}/ack`).catch((e) => console.error(e)); | |
| const resolveSos = (id) => api.post(`/sos/${id}/resolve`).catch((e) => console.error(e)); | |
| if (!user) return <Login onLogin={handleLogin} />; | |
| const openCount = sos.filter((a) => a.state === 'open').length; | |
| return ( | |
| <div className="app"> | |
| <header> | |
| <div className="brand">Dispatch Console</div> | |
| <div className={`conn ${connected ? 'on' : 'off'}`}>{connected ? 'live' : 'offline'}</div> | |
| <span className="muted">{user.username}</span> | |
| <button className="secondary" onClick={logout}>Log out</button> | |
| </header> | |
| <aside> | |
| <SosPanel sos={sos} openCount={openCount} onAck={ackSos} onResolve={resolveSos} /> | |
| <div className="tabs"> | |
| <button className={tab === 'members' ? 'active' : ''} onClick={() => setTab('members')}>Members</button> | |
| <button className={tab === 'ptt' ? 'active' : ''} onClick={() => setTab('ptt')}>Intercom</button> | |
| </div> | |
| {tab === 'members' ? ( | |
| <MembersPanel members={members} groups={groups} /> | |
| ) : ( | |
| <PttPanel | |
| groups={groups} | |
| floors={floors} | |
| selected={selectedGroup} | |
| setSelected={setSelectedGroup} | |
| onTalkStart={beginTalk} | |
| onTalkStop={endTalk} | |
| talking={talking} | |
| muted={muted} | |
| setMuted={setMuted} | |
| /> | |
| )} | |
| </aside> | |
| <MapView members={members} groups={groups} sos={sos} /> | |
| </div> | |
| ); | |
| } |