100 lines
4.0 KiB
TypeScript
100 lines
4.0 KiB
TypeScript
import React from 'react';
|
|
import { Plug, Unplug, Activity, Battery } from 'lucide-react';
|
|
|
|
interface ConnectionStatusBarProps {
|
|
agvConnected: boolean;
|
|
bmsConnected: boolean;
|
|
onConnectAgv: () => void;
|
|
onDisconnectAgv: () => void;
|
|
onConnectBms: () => void;
|
|
onDisconnectBms: () => void;
|
|
agvBaudRate: number;
|
|
setAgvBaudRate: (rate: number) => void;
|
|
bmsBaudRate: number;
|
|
setBmsBaudRate: (rate: number) => void;
|
|
}
|
|
|
|
const BAUD_RATES = [9600, 19200, 38400, 57600, 115200];
|
|
|
|
const ConnectionStatusBar: React.FC<ConnectionStatusBarProps> = ({
|
|
agvConnected,
|
|
bmsConnected,
|
|
onConnectAgv,
|
|
onDisconnectAgv,
|
|
onConnectBms,
|
|
onDisconnectBms,
|
|
agvBaudRate,
|
|
setAgvBaudRate,
|
|
bmsBaudRate,
|
|
setBmsBaudRate,
|
|
}) => {
|
|
return (
|
|
<div className="h-10 bg-gray-900 border-t border-gray-700 flex items-center justify-between px-4 select-none shrink-0">
|
|
|
|
{/* AGV Connection Controls */}
|
|
<div className="flex items-center gap-3">
|
|
<div className={`flex items-center gap-2 px-2 py-1 rounded border ${agvConnected ? 'bg-blue-900/30 border-blue-700' : 'bg-gray-800 border-gray-700'}`}>
|
|
<span className="text-xs font-bold text-gray-300 flex items-center gap-1">
|
|
<Activity size={14} className={agvConnected ? "text-green-400" : "text-gray-500"} />
|
|
AGV
|
|
</span>
|
|
<div className="h-4 w-px bg-gray-700 mx-1" />
|
|
<select
|
|
value={agvBaudRate}
|
|
onChange={(e) => setAgvBaudRate(Number(e.target.value))}
|
|
disabled={agvConnected}
|
|
className="bg-transparent text-xs text-white outline-none disabled:opacity-50 cursor-pointer"
|
|
>
|
|
{BAUD_RATES.map(rate => <option key={rate} value={rate} className="bg-gray-800">{rate}</option>)}
|
|
</select>
|
|
<button
|
|
onClick={agvConnected ? onDisconnectAgv : onConnectAgv}
|
|
className={`ml-2 px-2 py-0.5 text-[10px] font-bold rounded flex items-center gap-1 transition-colors ${
|
|
agvConnected
|
|
? 'bg-red-900/50 text-red-300 hover:bg-red-900'
|
|
: 'bg-blue-700 text-white hover:bg-blue-600'
|
|
}`}
|
|
>
|
|
{agvConnected ? <><Unplug size={10} /> DISCONNECT</> : <><Plug size={10} /> CONNECT</>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="text-xs text-gray-600 font-mono">
|
|
SERIAL COMMUNICATION
|
|
</div>
|
|
|
|
{/* BMS Connection Controls */}
|
|
<div className="flex items-center gap-3">
|
|
<div className={`flex items-center gap-2 px-2 py-1 rounded border ${bmsConnected ? 'bg-yellow-900/30 border-yellow-700' : 'bg-gray-800 border-gray-700'}`}>
|
|
<span className="text-xs font-bold text-gray-300 flex items-center gap-1">
|
|
<Battery size={14} className={bmsConnected ? "text-yellow-400" : "text-gray-500"} />
|
|
BMS
|
|
</span>
|
|
<div className="h-4 w-px bg-gray-700 mx-1" />
|
|
<select
|
|
value={bmsBaudRate}
|
|
onChange={(e) => setBmsBaudRate(Number(e.target.value))}
|
|
disabled={bmsConnected}
|
|
className="bg-transparent text-xs text-white outline-none disabled:opacity-50 cursor-pointer"
|
|
>
|
|
{BAUD_RATES.map(rate => <option key={rate} value={rate} className="bg-gray-800">{rate}</option>)}
|
|
</select>
|
|
<button
|
|
onClick={bmsConnected ? onDisconnectBms : onConnectBms}
|
|
className={`ml-2 px-2 py-0.5 text-[10px] font-bold rounded flex items-center gap-1 transition-colors ${
|
|
bmsConnected
|
|
? 'bg-red-900/50 text-red-300 hover:bg-red-900'
|
|
: 'bg-blue-700 text-white hover:bg-blue-600'
|
|
}`}
|
|
>
|
|
{bmsConnected ? <><Unplug size={10} /> DISCONNECT</> : <><Plug size={10} /> CONNECT</>}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ConnectionStatusBar;
|