LGram16
82cf4b8fd0
Backend changes (C#): - Add SelectRecipe method to MachineBridge for recipe selection - Add currentRecipeId tracking in MainForm - Implement SELECT_RECIPE handler in WebSocketServer Frontend changes (React/TypeScript): - Add selectRecipe method to communication layer - Update handleSelectRecipe to call backend and handle response - Recipe selection updates ModelInfoPanel automatically - Add error handling and logging for recipe operations Layout improvements: - Add Layout component with persistent Header and Footer - Create separate IOMonitorPage for full-screen I/O monitoring - Add dynamic IO tab switcher in Header (Inputs/Outputs) - Ensure consistent UI across all pages 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
32 lines
1.5 KiB
TypeScript
32 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import { RobotTarget } from '../../types';
|
|
|
|
interface FooterProps {
|
|
isHostConnected: boolean;
|
|
robotTarget: RobotTarget;
|
|
}
|
|
|
|
export const Footer: React.FC<FooterProps> = ({ isHostConnected, robotTarget }) => {
|
|
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-6">
|
|
{['PLC', 'MOTION', 'VISION', 'LIGHT'].map(hw => (
|
|
<div key={hw} className="flex items-center gap-2">
|
|
<div className="w-2 h-2 bg-neon-green rounded-full shadow-[0_0_5px_#0aff00]"></div>
|
|
<span className="font-bold text-slate-300">{hw}</span>
|
|
</div>
|
|
))}
|
|
<div className="flex items-center gap-2">
|
|
<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-slate-300' : '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>
|
|
);
|
|
};
|