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

83
frontend/pages/IOMonitorPage.tsx Normal file
View File

@@ -0,0 +1,83 @@
import React, { useState } from 'react';
import { IOPoint } from '../types';
interface IOMonitorPageProps {
ioPoints: IOPoint[];
onToggle: (id: number, type: 'input' | 'output') => void;
activeIOTab: 'in' | 'out';
onIOTabChange: (tab: 'in' | 'out') => void;
}
export const IOMonitorPage: React.FC<IOMonitorPageProps> = ({ ioPoints, onToggle, activeIOTab, onIOTabChange }) => {
const points = ioPoints.filter(p => p.type === (activeIOTab === 'in' ? 'input' : 'output'));
return (
<main className="relative w-full h-full px-6 pt-6 pb-20">
<div className="glass-holo p-6 h-full flex flex-col gap-4">
{/* Local Header / Controls */}
<div className="flex items-center justify-between shrink-0">
<div className="flex items-center gap-4">
<h2 className="text-2xl font-tech font-bold text-white tracking-wider">
SYSTEM I/O MONITOR
</h2>
<div className="h-6 w-px bg-white/20"></div>
<div className="text-sm font-mono text-neon-blue">
TOTAL POINTS: {ioPoints.length}
</div>
</div>
<div className="bg-black/40 backdrop-blur-md p-1 rounded-full border border-white/10 flex gap-1">
<button
onClick={() => onIOTabChange('in')}
className={`px-6 py-2 rounded-full font-tech font-bold text-sm transition-all ${activeIOTab === 'in' ? 'bg-neon-yellow/20 text-neon-yellow border border-neon-yellow shadow-[0_0_15px_rgba(255,230,0,0.3)]' : 'text-slate-400 hover:text-white hover:bg-white/5'}`}
>
INPUTS ({ioPoints.filter(p => p.type === 'input').length})
</button>
<button
onClick={() => onIOTabChange('out')}
className={`px-6 py-2 rounded-full font-tech font-bold text-sm transition-all ${activeIOTab === 'out' ? 'bg-neon-green/20 text-neon-green border border-neon-green shadow-[0_0_15px_rgba(10,255,0,0.3)]' : 'text-slate-400 hover:text-white hover:bg-white/5'}`}
>
OUTPUTS ({ioPoints.filter(p => p.type === 'output').length})
</button>
</div>
</div>
<div className="bg-slate-950/40 backdrop-blur-md flex-1 overflow-y-auto custom-scrollbar rounded-lg border border-white/5">
{/* Grid Layout - More columns for full screen */}
{/* Grid Layout - 2 Columns for list view */}
<div className="grid grid-cols-2 gap-x-8 gap-y-2 p-4">
{points.map(p => (
<div
key={p.id}
onClick={() => onToggle(p.id, p.type)}
className={`
flex items-center gap-4 px-4 py-3 cursor-pointer transition-all border
clip-tech-sm group hover:translate-x-1
${p.state
? (p.type === 'output'
? 'bg-neon-green/10 border-neon-green text-neon-green shadow-[0_0_15px_rgba(10,255,0,0.2)]'
: 'bg-neon-yellow/10 border-neon-yellow text-neon-yellow shadow-[0_0_15px_rgba(255,230,0,0.2)]')
: 'bg-slate-900/40 border-slate-800 text-slate-500 hover:border-slate-600 hover:bg-slate-800/40'}
`}
>
{/* LED Indicator */}
<div className={`w-3 h-3 rounded-full shrink-0 transition-all ${p.state ? (p.type === 'output' ? 'bg-neon-green shadow-[0_0_8px_#0aff00]' : 'bg-neon-yellow shadow-[0_0_8px_#ffe600]') : 'bg-slate-800 border border-slate-700'}`}></div>
{/* ID Badge */}
<div className={`w-12 font-mono font-bold text-lg ${p.state ? 'text-white' : 'text-slate-600'}`}>
{p.type === 'input' ? 'I' : 'Q'}{p.id.toString().padStart(2, '0')}
</div>
{/* Name */}
<div className={`flex-1 font-bold uppercase tracking-wide truncate ${p.state ? 'text-white' : 'text-slate-500'} group-hover:text-white transition-colors`}>
{p.name}
</div>
</div>
))}
</div>
</div>
</div>
</main>
);
};