Spaces:
Running on Zero
Running on Zero
| import { useState } from 'react' | |
| import { useLiveData } from '../context/LiveDataContext' | |
| import { startSimulation, stopSimulation } from '../services/api' | |
| import { Play, Square, Siren, Loader2, RadioTower } from 'lucide-react' | |
| function formatTime(seconds) { | |
| if (seconds == null) return '00:00' | |
| const m = Math.floor(seconds / 60).toString().padStart(2, '0') | |
| const s = Math.floor(seconds % 60).toString().padStart(2, '0') | |
| return `${m}:${s}` | |
| } | |
| export default function TopBar() { | |
| const { wsStatus, status } = useLiveData() | |
| const [busy, setBusy] = useState(false) | |
| const sysStatus = status?.system_status ?? 'stopped' | |
| const isRunning = sysStatus === 'running' | |
| const simTime = status?.simulation_time ?? 0 | |
| const wsLabel = wsStatus === 'connected' ? 'Connected' : wsStatus === 'connecting' ? 'Connecting' : 'Disconnected' | |
| const wsColor = wsStatus === 'connected' ? 'text-emerald-400' : wsStatus === 'connecting' ? 'text-yellow-400' : 'text-red-400' | |
| const dotColor = wsStatus === 'connected' ? 'bg-emerald-400' : wsStatus === 'connecting' ? 'bg-yellow-400' : 'bg-red-400' | |
| const handleStart = async (emergency = false) => { | |
| setBusy(true) | |
| try { | |
| await startSimulation({ steps: 200, emergency, gui: false }) | |
| } catch (_) {} | |
| setBusy(false) | |
| } | |
| const handleStop = async () => { | |
| setBusy(true) | |
| try { | |
| await stopSimulation() | |
| } catch (_) {} | |
| setBusy(false) | |
| } | |
| return ( | |
| <header className="fixed left-0 right-0 top-0 z-20 flex min-h-16 items-center gap-4 border-b border-slate-700/60 bg-slate-950/90 px-3 shadow-lg shadow-slate-950/30 backdrop-blur md:px-4"> | |
| <div className="flex min-w-0 flex-1 items-center gap-3"> | |
| <div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-cyan-400/25 bg-cyan-400/10 text-cyan-300 md:hidden"> | |
| <RadioTower className="h-5 w-5" /> | |
| </div> | |
| <div className="min-w-0"> | |
| <h1 className="truncate text-sm font-bold text-white">AI Traffic Adaptation</h1> | |
| <p className="hidden text-xs text-slate-400 sm:block">Real-time signal intelligence center</p> | |
| </div> | |
| </div> | |
| <div className="flex items-center gap-2 text-xs"> | |
| <div className="hidden items-center gap-2 border-r border-slate-800 pr-3 sm:flex"> | |
| {isRunning ? ( | |
| <button | |
| onClick={handleStop} | |
| disabled={busy} | |
| className="flex items-center gap-1.5 rounded-md border border-rose-500/30 bg-rose-600/20 px-2.5 py-1.5 font-medium text-rose-300 transition hover:bg-rose-600/30 disabled:opacity-50" | |
| > | |
| {busy ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Square className="w-3.5 h-3.5 fill-current" />} | |
| Stop SUMO | |
| </button> | |
| ) : ( | |
| <> | |
| <button | |
| onClick={() => handleStart(false)} | |
| disabled={busy} | |
| className="flex items-center gap-1.5 rounded-md border border-emerald-500/30 bg-emerald-600/20 px-2.5 py-1.5 font-medium text-emerald-300 transition hover:bg-emerald-600/30 disabled:opacity-50" | |
| > | |
| {busy ? <Loader2 className="w-3.5 h-3.5 animate-spin" /> : <Play className="w-3.5 h-3.5 fill-current" />} | |
| Run SUMO | |
| </button> | |
| <button | |
| onClick={() => handleStart(true)} | |
| disabled={busy} | |
| className="flex items-center gap-1.5 rounded-md border border-amber-500/30 bg-amber-600/20 px-2.5 py-1.5 font-medium text-amber-300 transition hover:bg-amber-600/30 disabled:opacity-50" | |
| > | |
| <Siren className="w-3.5 h-3.5" /> | |
| Emergency Demo | |
| </button> | |
| </> | |
| )} | |
| </div> | |
| <div className="flex items-center gap-1.5 rounded-md border border-slate-700/70 bg-slate-900/70 px-2.5 py-1.5"> | |
| <span className={`w-2 h-2 rounded-full ${dotColor} ${wsStatus === 'connecting' ? 'animate-pulse' : ''}`} /> | |
| <span className={`${wsColor} hidden sm:inline`}>{wsLabel}</span> | |
| </div> | |
| <div className="hidden text-slate-400 lg:block"> | |
| SUMO: <span className={isRunning ? 'text-emerald-400 font-semibold' : 'text-slate-500'}> | |
| {isRunning ? 'Running' : sysStatus === 'stopped' ? 'Stopped' : sysStatus} | |
| </span> | |
| </div> | |
| <div className="rounded-md border border-slate-700/70 bg-slate-900/70 px-2.5 py-1.5 text-slate-400"> | |
| <span className="hidden sm:inline">Sim Time: </span><span className="font-mono text-white">{formatTime(simTime)}</span> | |
| </div> | |
| </div> | |
| </header> | |
| ) | |
| } | |