feat: Migrate RecipePage to use real OPModel data
- Updated RecipePage to load actual recipe data from OPModel table - Added GetRecipe() and SaveRecipe() methods to communication layer - Implemented real-time recipe editing with change tracking - Added type definitions for GetRecipe and SaveRecipe in types.ts - Recipe editor now displays all major fields: - Basic Settings (Motion Model, Auto Out Conveyor, Vendor Name, MFG) - Barcode Settings (1D, QR, Data Matrix) - Feature Flags (IgnoreOtherBarcode, DisableCamera, etc.) - Copy and Delete operations now use recipe Title instead of id - Added unsaved changes warning when switching recipes 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,62 +1,118 @@
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { Layers, Plus, Trash2, Copy, Save, ArrowLeft, FileText, Calendar } from 'lucide-react';
|
||||
import { Layers, Plus, Trash2, Copy, Save, ArrowLeft, FileText, Calendar, Check } from 'lucide-react';
|
||||
import { Recipe } from '../types';
|
||||
import { comms } from '../communication';
|
||||
import { TechButton } from '../components/common/TechButton';
|
||||
|
||||
interface RecipeData {
|
||||
idx?: number;
|
||||
Title?: string;
|
||||
Motion?: string;
|
||||
BCD_1D?: boolean;
|
||||
BCD_QR?: boolean;
|
||||
BCD_DM?: boolean;
|
||||
vOption?: number;
|
||||
vWMSInfo?: number;
|
||||
vSIDInfo?: number;
|
||||
vJobInfo?: number;
|
||||
vSIDConv?: number;
|
||||
Def_VName?: string;
|
||||
Def_MFG?: string;
|
||||
IgnoreOtherBarcode?: boolean;
|
||||
DisableCamera?: boolean;
|
||||
DisablePrinter?: boolean;
|
||||
CheckSIDExsit?: boolean;
|
||||
bOwnZPL?: boolean;
|
||||
IgnorePartNo?: boolean;
|
||||
IgnoreBatch?: boolean;
|
||||
BSave?: number;
|
||||
AutoOutConveyor?: number;
|
||||
[key: string]: any;
|
||||
}
|
||||
|
||||
export const RecipePage: React.FC = () => {
|
||||
const navigate = useNavigate();
|
||||
const [recipes, setRecipes] = useState<Recipe[]>([]);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
const [editedRecipe, setEditedRecipe] = useState<Recipe | null>(null);
|
||||
const [selectedTitle, setSelectedTitle] = useState<string | null>(null);
|
||||
const [editedRecipe, setEditedRecipe] = useState<RecipeData | null>(null);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [hasChanges, setHasChanges] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const loadRecipes = async () => {
|
||||
try {
|
||||
const recipeStr = await comms.getRecipeList();
|
||||
const recipeData = JSON.parse(recipeStr);
|
||||
setRecipes(recipeData);
|
||||
if (recipeData.length > 0) {
|
||||
setSelectedId(recipeData[0].id);
|
||||
setEditedRecipe(recipeData[0]);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to load recipes", e);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
loadRecipes();
|
||||
}, []);
|
||||
|
||||
const handleSelect = (r: Recipe) => {
|
||||
setSelectedId(r.id);
|
||||
setEditedRecipe({ ...r });
|
||||
const loadRecipes = async () => {
|
||||
try {
|
||||
const recipeStr = await comms.getRecipeList();
|
||||
const recipeData = JSON.parse(recipeStr);
|
||||
setRecipes(recipeData);
|
||||
if (recipeData.length > 0 && !selectedTitle) {
|
||||
await handleSelect(recipeData[0]);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Failed to load recipes", e);
|
||||
}
|
||||
setIsLoading(false);
|
||||
};
|
||||
|
||||
const handleSelect = async (r: Recipe) => {
|
||||
if (hasChanges) {
|
||||
const confirmed = window.confirm("You have unsaved changes. Do you want to discard them?");
|
||||
if (!confirmed) return;
|
||||
}
|
||||
|
||||
setSelectedTitle(r.name);
|
||||
try {
|
||||
const recipeStr = await comms.getRecipe(r.name);
|
||||
const recipeData = JSON.parse(recipeStr);
|
||||
setEditedRecipe(recipeData);
|
||||
setHasChanges(false);
|
||||
} catch (e) {
|
||||
console.error("Failed to load recipe details", e);
|
||||
alert("Failed to load recipe details");
|
||||
}
|
||||
};
|
||||
|
||||
const handleFieldChange = (field: string, value: any) => {
|
||||
if (!editedRecipe) return;
|
||||
setEditedRecipe({ ...editedRecipe, [field]: value });
|
||||
setHasChanges(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
// Mock Save Logic
|
||||
console.log("Saving recipe:", editedRecipe);
|
||||
// In real app: await comms.saveRecipe(editedRecipe);
|
||||
if (!editedRecipe || !selectedTitle) return;
|
||||
|
||||
try {
|
||||
const result = await comms.saveRecipe(selectedTitle, JSON.stringify(editedRecipe));
|
||||
if (result.success) {
|
||||
setHasChanges(false);
|
||||
alert("Recipe saved successfully!");
|
||||
await loadRecipes();
|
||||
} else {
|
||||
alert(`Failed to save recipe: ${result.message}`);
|
||||
}
|
||||
} catch (error: any) {
|
||||
alert(`Error saving recipe: ${error.message || 'Unknown error'}`);
|
||||
console.error('Recipe save error:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopy = async () => {
|
||||
if (!selectedId) return;
|
||||
if (!selectedTitle) return;
|
||||
|
||||
const selectedRecipe = recipes.find(r => r.id === selectedId);
|
||||
const selectedRecipe = recipes.find(r => r.name === selectedTitle);
|
||||
if (!selectedRecipe) return;
|
||||
|
||||
const newName = prompt(`Copy "${selectedRecipe.name}" as:`, `${selectedRecipe.name}_Copy`);
|
||||
if (!newName || newName.trim() === '') return;
|
||||
|
||||
try {
|
||||
const result = await comms.copyRecipe(selectedId, newName.trim());
|
||||
const result = await comms.copyRecipe(selectedTitle, newName.trim());
|
||||
if (result.success && result.newRecipe) {
|
||||
const newRecipeList = [...recipes, result.newRecipe];
|
||||
setRecipes(newRecipeList);
|
||||
setSelectedId(result.newRecipe.id);
|
||||
setEditedRecipe(result.newRecipe);
|
||||
await loadRecipes();
|
||||
await handleSelect(result.newRecipe);
|
||||
console.log("Recipe copied successfully:", result.newRecipe);
|
||||
} else {
|
||||
alert(`Failed to copy recipe: ${result.message}`);
|
||||
@@ -68,26 +124,25 @@ export const RecipePage: React.FC = () => {
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!selectedId) return;
|
||||
if (!selectedTitle) return;
|
||||
|
||||
const selectedRecipe = recipes.find(r => r.id === selectedId);
|
||||
const selectedRecipe = recipes.find(r => r.name === selectedTitle);
|
||||
if (!selectedRecipe) return;
|
||||
|
||||
const confirmed = window.confirm(`Are you sure you want to delete "${selectedRecipe.name}"?`);
|
||||
if (!confirmed) return;
|
||||
|
||||
try {
|
||||
const result = await comms.deleteRecipe(selectedId);
|
||||
const result = await comms.deleteRecipe(selectedTitle);
|
||||
if (result.success) {
|
||||
const newRecipeList = recipes.filter(r => r.id !== selectedId);
|
||||
setRecipes(newRecipeList);
|
||||
await loadRecipes();
|
||||
|
||||
// Select first recipe or clear selection
|
||||
const newRecipeList = recipes.filter(r => r.name !== selectedTitle);
|
||||
if (newRecipeList.length > 0) {
|
||||
setSelectedId(newRecipeList[0].id);
|
||||
setEditedRecipe(newRecipeList[0]);
|
||||
await handleSelect(newRecipeList[0]);
|
||||
} else {
|
||||
setSelectedId(null);
|
||||
setSelectedTitle(null);
|
||||
setEditedRecipe(null);
|
||||
}
|
||||
|
||||
@@ -135,7 +190,7 @@ export const RecipePage: React.FC = () => {
|
||||
onClick={() => handleSelect(r)}
|
||||
className={`
|
||||
p-3 rounded border cursor-pointer transition-all group
|
||||
${selectedId === r.id
|
||||
${selectedTitle === r.name
|
||||
? 'bg-neon-blue/20 border-neon-blue text-white shadow-glow-blue'
|
||||
: 'bg-white/5 border-white/5 text-slate-400 hover:bg-white/10 hover:border-white/20'}
|
||||
`}
|
||||
@@ -149,16 +204,13 @@ export const RecipePage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* List Actions */}
|
||||
<div className="p-3 border-t border-white/10 bg-black/20 grid grid-cols-3 gap-2">
|
||||
<TechButton variant="default" className="flex justify-center" title="Add New">
|
||||
<Plus className="w-4 h-4" />
|
||||
</TechButton>
|
||||
<div className="p-3 border-t border-white/10 bg-black/20 grid grid-cols-2 gap-2">
|
||||
<TechButton
|
||||
variant="default"
|
||||
className="flex justify-center"
|
||||
title="Copy Selected"
|
||||
onClick={handleCopy}
|
||||
disabled={!selectedId}
|
||||
disabled={!selectedTitle}
|
||||
>
|
||||
<Copy className="w-4 h-4" />
|
||||
</TechButton>
|
||||
@@ -167,7 +219,7 @@ export const RecipePage: React.FC = () => {
|
||||
className="flex justify-center"
|
||||
title="Delete Selected"
|
||||
onClick={handleDelete}
|
||||
disabled={!selectedId}
|
||||
disabled={!selectedTitle}
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</TechButton>
|
||||
@@ -179,44 +231,129 @@ export const RecipePage: React.FC = () => {
|
||||
<div className="flex-1 bg-slate-950/40 backdrop-blur-md border border-white/10 rounded-lg flex flex-col overflow-hidden">
|
||||
<div className="p-3 border-b border-white/10 bg-white/5 font-bold text-sm tracking-wider text-slate-300 flex justify-between items-center">
|
||||
<span>RECIPE EDITOR</span>
|
||||
{editedRecipe && <span className="text-neon-blue font-mono">{editedRecipe.id}</span>}
|
||||
{editedRecipe && <span className="text-neon-blue font-mono">{editedRecipe.Title || selectedTitle}</span>}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 p-6 overflow-y-auto custom-scrollbar">
|
||||
{editedRecipe ? (
|
||||
<div className="max-w-2xl space-y-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Recipe Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedRecipe.name}
|
||||
onChange={(e) => setEditedRecipe({ ...editedRecipe, name: e.target.value })}
|
||||
className="w-full bg-black/40 border border-white/10 rounded px-4 py-3 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono"
|
||||
/>
|
||||
</div>
|
||||
<div className="max-w-3xl space-y-6">
|
||||
{/* Basic Settings */}
|
||||
<div className="space-y-4 p-4 border border-white/10 rounded-lg bg-white/5">
|
||||
<h3 className="text-xs font-bold text-neon-blue uppercase tracking-wider border-b border-white/10 pb-2">Basic Settings</h3>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Description</label>
|
||||
<textarea
|
||||
className="w-full h-32 bg-black/40 border border-white/10 rounded px-4 py-3 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono resize-none"
|
||||
placeholder="Enter recipe description..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-6">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Process Time (sec)</label>
|
||||
<input type="number" className="w-full bg-black/40 border border-white/10 rounded px-4 py-3 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono" defaultValue="120" />
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Motion Model</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedRecipe.Motion || ''}
|
||||
onChange={(e) => handleFieldChange('Motion', e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded px-4 py-2 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Auto Out Conveyor</label>
|
||||
<input
|
||||
type="number"
|
||||
value={editedRecipe.AutoOutConveyor || 0}
|
||||
onChange={(e) => handleFieldChange('AutoOutConveyor', parseInt(e.target.value) || 0)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded px-4 py-2 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Temperature (°C)</label>
|
||||
<input type="number" className="w-full bg-black/40 border border-white/10 rounded px-4 py-3 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono" defaultValue="24.5" />
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Default Vendor Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedRecipe.Def_VName || ''}
|
||||
onChange={(e) => handleFieldChange('Def_VName', e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded px-4 py-2 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-bold text-slate-400 uppercase tracking-wider">Default MFG</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedRecipe.Def_MFG || ''}
|
||||
onChange={(e) => handleFieldChange('Def_MFG', e.target.value)}
|
||||
className="w-full bg-black/40 border border-white/10 rounded px-4 py-2 text-white focus:border-neon-blue focus:outline-none transition-colors font-mono text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Placeholder for more parameters */}
|
||||
<div className="p-4 border border-dashed border-white/10 rounded bg-white/5 text-center text-slate-500 text-sm">
|
||||
Additional process parameters would go here...
|
||||
{/* Barcode Settings */}
|
||||
<div className="space-y-4 p-4 border border-white/10 rounded-lg bg-white/5">
|
||||
<h3 className="text-xs font-bold text-neon-blue uppercase tracking-wider border-b border-white/10 pb-2">Barcode Settings</h3>
|
||||
<div className="grid grid-cols-3 gap-4">
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<div className={`w-5 h-5 rounded border transition-all flex items-center justify-center ${editedRecipe.BCD_1D ? 'bg-neon-green border-neon-green' : 'bg-black/40 border-white/20'}`}>
|
||||
{editedRecipe.BCD_1D && <Check className="w-3 h-3 text-black" />}
|
||||
</div>
|
||||
<span className="text-sm text-slate-300">1D Barcode</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editedRecipe.BCD_1D || false}
|
||||
onChange={(e) => handleFieldChange('BCD_1D', e.target.checked)}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<div className={`w-5 h-5 rounded border transition-all flex items-center justify-center ${editedRecipe.BCD_QR ? 'bg-neon-green border-neon-green' : 'bg-black/40 border-white/20'}`}>
|
||||
{editedRecipe.BCD_QR && <Check className="w-3 h-3 text-black" />}
|
||||
</div>
|
||||
<span className="text-sm text-slate-300">QR Code</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editedRecipe.BCD_QR || false}
|
||||
onChange={(e) => handleFieldChange('BCD_QR', e.target.checked)}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
<label className="flex items-center gap-3 cursor-pointer">
|
||||
<div className={`w-5 h-5 rounded border transition-all flex items-center justify-center ${editedRecipe.BCD_DM ? 'bg-neon-green border-neon-green' : 'bg-black/40 border-white/20'}`}>
|
||||
{editedRecipe.BCD_DM && <Check className="w-3 h-3 text-black" />}
|
||||
</div>
|
||||
<span className="text-sm text-slate-300">Data Matrix</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editedRecipe.BCD_DM || false}
|
||||
onChange={(e) => handleFieldChange('BCD_DM', e.target.checked)}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Feature Flags */}
|
||||
<div className="space-y-4 p-4 border border-white/10 rounded-lg bg-white/5">
|
||||
<h3 className="text-xs font-bold text-neon-blue uppercase tracking-wider border-b border-white/10 pb-2">Feature Flags</h3>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
{[
|
||||
{ key: 'IgnoreOtherBarcode', label: 'Ignore Other Barcode' },
|
||||
{ key: 'DisableCamera', label: 'Disable Camera' },
|
||||
{ key: 'DisablePrinter', label: 'Disable Printer' },
|
||||
{ key: 'CheckSIDExsit', label: 'Check SID Exist' },
|
||||
{ key: 'bOwnZPL', label: 'Own ZPL' },
|
||||
{ key: 'IgnorePartNo', label: 'Ignore Part No' },
|
||||
{ key: 'IgnoreBatch', label: 'Ignore Batch' },
|
||||
].map(({ key, label }) => (
|
||||
<label key={key} className="flex items-center gap-3 cursor-pointer">
|
||||
<div className={`w-5 h-5 rounded border transition-all flex items-center justify-center ${editedRecipe[key] ? 'bg-neon-green border-neon-green' : 'bg-black/40 border-white/20'}`}>
|
||||
{editedRecipe[key] && <Check className="w-3 h-3 text-black" />}
|
||||
</div>
|
||||
<span className="text-sm text-slate-300">{label}</span>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={editedRecipe[key] || false}
|
||||
onChange={(e) => handleFieldChange(key, e.target.checked)}
|
||||
className="hidden"
|
||||
/>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
@@ -228,15 +365,20 @@ export const RecipePage: React.FC = () => {
|
||||
</div>
|
||||
|
||||
{/* Editor Actions */}
|
||||
<div className="p-4 border-t border-white/10 bg-black/20 flex justify-end">
|
||||
<TechButton
|
||||
variant="green"
|
||||
className="flex items-center gap-2 px-8"
|
||||
onClick={handleSave}
|
||||
disabled={!editedRecipe}
|
||||
>
|
||||
<Save className="w-4 h-4" /> SAVE CHANGES
|
||||
</TechButton>
|
||||
<div className="p-4 border-t border-white/10 bg-black/20 flex justify-between items-center">
|
||||
{hasChanges && (
|
||||
<span className="text-xs text-neon-yellow font-mono animate-pulse">● UNSAVED CHANGES</span>
|
||||
)}
|
||||
<div className="ml-auto">
|
||||
<TechButton
|
||||
variant="green"
|
||||
className="flex items-center gap-2 px-8"
|
||||
onClick={handleSave}
|
||||
disabled={!editedRecipe || !hasChanges}
|
||||
>
|
||||
<Save className="w-4 h-4" /> SAVE CHANGES
|
||||
</TechButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user