Test/WebUITest-RealProjecT
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add detailed recipe preview in list items

Browse Source 
- Extended Recipe interface with additional fields (Motion, Barcode types, flags)
- Recipe list items now show detailed information when selected:
  - Motion model name in green
  - Barcode type badges (1D/QR/DM) with color coding
  - Feature flags (No Cam, No Print, Auto Out) as compact badges
  - Last modified date at bottom
- Selected recipes load full data and update preview automatically
- Enhanced visual hierarchy with borders, spacing, and color coding

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
tindevil
2025-11-25 21:28:22 +09:00
parent 484da44103
commit 3c4c8ded53
2 changed files with 54 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
FrontEnd/pages/RecipePage.tsx
View File

@@ -69,6 +69,11 @@ export const RecipePage: React.FC = () => {
const recipeData = JSON.parse(recipeStr);
setEditedRecipe(recipeData);
setHasChanges(false);
// Update recipes list with loaded data for preview
setRecipes(prev => prev.map(recipe =>
recipe.name === r.name ? { ...recipe, ...recipeData } : recipe
));
} catch (e) {
console.error("Failed to load recipe details", e);
alert("Failed to load recipe details");
@@ -195,8 +200,47 @@ export const RecipePage: React.FC = () => {
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/20'}
`}
>
<div className="font-bold text-sm mb-1">{r.name}</div>
<div className="text-[10px] font-mono opacity-60 flex items-center gap-2">
<div className="font-bold text-sm mb-2">{r.name}</div>
{/* Motion Model */}
{r.Motion && (
<div className="text-[10px] font-mono opacity-70 mb-1">
<span className="text-slate-500">Motion:</span> <span className="text-neon-green">{r.Motion}</span>
</div>
)}
{/* Barcode Types */}
{(r.BCD_1D !== undefined || r.BCD_QR !== undefined || r.BCD_DM !== undefined) && (
<div className="flex gap-1 mb-1">
{r.BCD_1D && (
<span className="text-[9px] px-1.5 py-0.5 bg-neon-green/20 text-neon-green rounded border border-neon-green/30">1D</span>
)}
{r.BCD_QR && (
<span className="text-[9px] px-1.5 py-0.5 bg-neon-blue/20 text-neon-blue rounded border border-neon-blue/30">QR</span>
)}
{r.BCD_DM && (
<span className="text-[9px] px-1.5 py-0.5 bg-neon-yellow/20 text-neon-yellow rounded border border-neon-yellow/30">DM</span>
)}
</div>
)}
{/* Feature Flags */}
{(r.DisableCamera || r.DisablePrinter || (r.AutoOutConveyor && r.AutoOutConveyor > 0)) && (
<div className="flex flex-wrap gap-1 mb-1">
{r.DisableCamera && (
<span className="text-[8px] px-1 py-0.5 bg-red-500/20 text-red-400 rounded">No Cam</span>
)}
{r.DisablePrinter && (
<span className="text-[8px] px-1 py-0.5 bg-red-500/20 text-red-400 rounded">No Print</span>
)}
{r.AutoOutConveyor && r.AutoOutConveyor > 0 && (
<span className="text-[8px] px-1 py-0.5 bg-purple-500/20 text-purple-400 rounded">Auto Out</span>
)}
</div>
)}
{/* Last Modified */}
<div className="text-[10px] font-mono opacity-50 flex items-center gap-1 mt-2 pt-2 border-t border-white/5">
<Calendar className="w-3 h-3" /> {r.lastModified}
</div>
</div>

8
FrontEnd/types.ts
View File

@@ -19,6 +19,14 @@ export interface Recipe {
id: string;
name: string;
lastModified: string;
Motion?: string;
BCD_1D?: boolean;
BCD_QR?: boolean;
BCD_DM?: boolean;
DisableCamera?: boolean;
DisablePrinter?: boolean;
AutoOutConveyor?: number;
[key: string]: any;
}
export interface IOPoint {