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>
62 lines
2.5 KiB
TypeScript
62 lines
2.5 KiB
TypeScript
import React from 'react';
|
|
import { Header } from './Header';
|
|
import { Footer } from './Footer';
|
|
import { RobotTarget } from '../../types';
|
|
|
|
interface LayoutProps {
|
|
children: React.ReactNode;
|
|
currentTime: Date;
|
|
isHostConnected: boolean;
|
|
robotTarget: RobotTarget;
|
|
onTabChange: (tab: 'recipe' | 'motion' | 'camera' | 'setting' | null) => void;
|
|
activeTab: 'recipe' | 'motion' | 'camera' | 'setting' | null;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
export const Layout: React.FC<LayoutProps> = ({
|
|
children,
|
|
currentTime,
|
|
isHostConnected,
|
|
robotTarget,
|
|
onTabChange,
|
|
activeTab,
|
|
isLoading
|
|
}) => {
|
|
return (
|
|
<div className="relative w-screen h-screen bg-slate-950 text-slate-100 overflow-hidden font-sans">
|
|
{/* Animated Nebula Background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-slate-950 via-[#050a15] to-[#0a0f20] animate-gradient bg-[length:400%_400%] z-0"></div>
|
|
<div className="absolute inset-0 grid-bg opacity-30 z-0"></div>
|
|
<div className="absolute inset-0 scanlines z-50 pointer-events-none"></div>
|
|
|
|
{/* LOADING OVERLAY */}
|
|
{isLoading && (
|
|
<div className="absolute inset-0 z-[100] bg-black flex flex-col items-center justify-center gap-6">
|
|
<div className="relative">
|
|
<div className="w-24 h-24 border-4 border-neon-blue/30 rounded-full animate-spin"></div>
|
|
<div className="absolute inset-0 border-t-4 border-neon-blue rounded-full animate-spin"></div>
|
|
<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-neon-blue text-2xl font-tech font-bold">●</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<h2 className="text-2xl font-tech font-bold text-white tracking-widest mb-2">SYSTEM INITIALIZING</h2>
|
|
<p className="font-mono text-neon-blue text-sm animate-pulse">ESTABLISHING CONNECTION...</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<Header
|
|
currentTime={currentTime}
|
|
onTabChange={onTabChange}
|
|
activeTab={activeTab}
|
|
/>
|
|
|
|
{/* Main Content Area */}
|
|
<div className="absolute inset-0 pt-20 pb-10 z-10">
|
|
{children}
|
|
</div>
|
|
|
|
<Footer isHostConnected={isHostConnected} robotTarget={robotTarget} />
|
|
</div>
|
|
);
|
|
};
|