Test/hmitestWinform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement recipe selection with backend integration

Browse Source 
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>
This commit is contained in:
tindevil
2025-11-24 22:42:00 +09:00
parent 8dc6b0f921
commit 82cf4b8fd0
17 changed files with 1138 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

100
frontend/components/RecipePanel.tsx
View File

@@ -1,40 +1,84 @@
import React from 'react';
import { FileText, CheckCircle2, Layers } from 'lucide-react';
import React, { useState } from 'react';
import { Layers, Check, Settings, X } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { Recipe } from '../types';
import { PanelHeader } from './common/PanelHeader';
import { TechButton } from './common/TechButton';
interface RecipePanelProps {
recipes: Recipe[];
currentRecipe: Recipe;
onSelectRecipe: (r: Recipe) => void;
onClose: () => void;
}
export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe, onSelectRecipe }) => (
<div className="h-full flex flex-col">
<PanelHeader title="Recipe Select" icon={FileText} />
<div className="space-y-2 flex-1 overflow-y-auto custom-scrollbar pr-2">
{recipes.map(r => (
<div
key={r.id}
onClick={() => onSelectRecipe(r)}
className={`
p-3 cursor-pointer flex justify-between items-center transition-all border-l-4
${currentRecipe.id === r.id
? 'bg-white/10 border-neon-blue text-white shadow-[inset_0_0_20px_rgba(0,243,255,0.1)]'
: 'bg-black/20 border-transparent text-slate-500 hover:bg-white/5 hover:text-slate-300'}
`}
>
<div>
<div className="font-tech font-bold text-sm tracking-wide">{r.name}</div>
<div className="text-[10px] font-mono opacity-60">{r.lastModified}</div>
export const RecipePanel: React.FC<RecipePanelProps> = ({ recipes, currentRecipe, onSelectRecipe, onClose }) => {
const navigate = useNavigate();
const [selectedId, setSelectedId] = useState<string>(currentRecipe.id);
const handleConfirm = () => {
const selected = recipes.find(r => r.id === selectedId);
if (selected) {
onSelectRecipe(selected);
onClose();
}
};
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-200">
<div className="w-[500px] bg-slate-950/90 border border-neon-blue/30 rounded-lg shadow-2xl flex flex-col overflow-hidden">
{/* Header */}
<div className="h-12 bg-white/5 flex items-center justify-between px-4 border-b border-white/10">
<div className="flex items-center gap-2 text-neon-blue font-tech font-bold tracking-wider">
<Layers className="w-4 h-4" /> RECIPE SELECTION
</div>
{currentRecipe.id === r.id && <CheckCircle2 className="w-4 h-4 text-neon-blue" />}
<button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
<X className="w-5 h-5" />
</button>
</div>
))}
{/* List (Max height for ~5 items) */}
<div className="p-4 max-h-[320px] overflow-y-auto custom-scrollbar">
<div className="space-y-2">
{recipes.map(recipe => (
<div
key={recipe.id}
onClick={() => setSelectedId(recipe.id)}
className={`
p-3 rounded border cursor-pointer transition-all flex items-center justify-between
${selectedId === recipe.id
? 'bg-neon-blue/20 border-neon-blue text-white shadow-[0_0_10px_rgba(0,243,255,0.2)]'
: 'bg-white/5 border-white/10 text-slate-400 hover:bg-white/10 hover:border-white/20'}
`}
>
<div>
<div className="font-bold tracking-wide">{recipe.name}</div>
<div className="text-[10px] font-mono opacity-70">ID: {recipe.id} | MOD: {recipe.lastModified}</div>
</div>
{selectedId === recipe.id && <Check className="w-4 h-4 text-neon-blue" />}
</div>
))}
</div>
</div>
{/* Footer Actions */}
<div className="p-4 border-t border-white/10 flex justify-between gap-4 bg-black/20">
<TechButton
variant="default"
className="flex items-center gap-2 px-4"
onClick={() => navigate('/recipe')}
>
<Settings className="w-4 h-4" /> MANAGEMENT
</TechButton>
<TechButton
variant="blue"
className="flex items-center gap-2 px-8"
onClick={handleConfirm}
>
SELECT
</TechButton>
</div>
</div>
</div>
<TechButton className="w-full mt-4 flex items-center justify-center gap-2">
<Layers className="w-4 h-4" /> New Recipe
</TechButton>
</div>
);
);
};