arDTDev
3bd35ad852
- Implement real-time IO value updates via IOValueChanged event - Add interlock toggle and real-time interlock change events - Fix ToggleLight to check return value of DIO.SetRoomLight - Add HW status display in Footer matching WinForms HWState - Implement GetHWStatus API and 250ms broadcast interval - Create HistoryPage React component for work history viewing - Add GetHistoryData API for database queries - Add date range selection, search, filter, and CSV export - Add History button in Header navigation - Add PickerMoveDialog component for manage operations - Fix DataSet column names (idx, PRNATTACH, PRNVALID, qtymax) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
76 lines
3.3 KiB
TypeScript
76 lines
3.3 KiB
TypeScript
import React, { useState, useEffect } from 'react';
|
|
import { RobotTarget } from '../../types';
|
|
import { comms } from '../../communication';
|
|
|
|
// HW 상태 타입 (윈폼 HWState와 동일)
|
|
// status: 0=SET(미설정/회색), 1=ON(연결/녹색), 2=TRIG(트리거/노란색), 3=OFF(연결안됨/빨간색)
|
|
interface HWItem {
|
|
name: string;
|
|
title: string;
|
|
status: number;
|
|
}
|
|
|
|
interface FooterProps {
|
|
isHostConnected: boolean;
|
|
robotTarget: RobotTarget;
|
|
}
|
|
|
|
// 상태에 따른 LED 색상 반환
|
|
const getStatusColor = (status: number): { bg: string; shadow: string; text: string } => {
|
|
switch (status) {
|
|
case 1: // ON - 녹색
|
|
return { bg: 'bg-neon-green', shadow: 'shadow-[0_0_5px_#0aff00]', text: 'text-green-400' };
|
|
case 2: // TRIG - 노란색
|
|
return { bg: 'bg-yellow-400', shadow: 'shadow-[0_0_5px_#facc15]', text: 'text-yellow-400' };
|
|
case 3: // OFF - 빨간색
|
|
return { bg: 'bg-red-500', shadow: 'shadow-[0_0_5px_#ef4444]', text: 'text-red-400' };
|
|
default: // SET - 회색 (미설정)
|
|
return { bg: 'bg-gray-500', shadow: '', text: 'text-gray-400' };
|
|
}
|
|
};
|
|
|
|
export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget }) => {
|
|
const [hwStatus, setHwStatus] = useState<HWItem[]>([]);
|
|
|
|
useEffect(() => {
|
|
// HW_STATUS_UPDATE 이벤트 구독
|
|
const unsubscribe = comms.subscribe((msg: any) => {
|
|
if (msg?.type === 'HW_STATUS_UPDATE' && msg.data) {
|
|
setHwStatus(msg.data);
|
|
}
|
|
});
|
|
|
|
return () => {
|
|
unsubscribe();
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<footer className="absolute bottom-0 left-0 right-0 h-10 bg-black/80 border-t border-neon-blue/30 flex items-center px-6 justify-between z-40 backdrop-blur text-xs font-mono text-slate-400">
|
|
<div className="flex gap-4">
|
|
{/* H/W 상태 표시 (윈폼 HWState와 동일) */}
|
|
{hwStatus.map((hw) => {
|
|
const colors = getStatusColor(hw.status);
|
|
return (
|
|
<div key={hw.name} className="flex items-center gap-1.5" title={`${hw.name}: ${hw.title}`}>
|
|
<div className={`w-2 h-2 rounded-full transition-all ${colors.bg} ${colors.shadow}`}></div>
|
|
<span className={`font-bold ${colors.text}`}>{hw.name}</span>
|
|
<span className="text-[10px] text-slate-500">{hw.title}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
{/* HOST 연결 상태 */}
|
|
<div className="flex items-center gap-1.5 ml-2 pl-2 border-l border-slate-700">
|
|
<div className={`w-2 h-2 rounded-full transition-all ${isHostConnected ? 'bg-neon-green shadow-[0_0_5px_#0aff00]' : 'bg-red-500 shadow-[0_0_5px_#ff0000] animate-pulse'}`}></div>
|
|
<span className={`font-bold ${isHostConnected ? 'text-green-400' : 'text-red-400'}`}>HOST</span>
|
|
</div>
|
|
</div>
|
|
<div className="flex gap-8 text-neon-blue">
|
|
<span>POS.X: {robotTarget.x.toFixed(3)}</span>
|
|
<span>POS.Y: {robotTarget.y.toFixed(3)}</span>
|
|
<span>POS.Z: {robotTarget.z.toFixed(3)}</span>
|
|
</div>
|
|
</footer>
|
|
);
|
|
};
|