feat: Enhance ingredient parsing to support mixed fractions and add description extraction in recipe parsers
This commit is contained in:
Nils-Johan Gynther
@@ -59,15 +59,25 @@ export abstract class RecipeParser {
|
||||
cleaned = cleaned.replace(/\s*\([^)]*\)/, '').trim();
|
||||
}
|
||||
|
||||
// Hantera bråkdelar: "1/2" eller "1 / 2"
|
||||
const fractionMatch = cleaned.match(/^([\d.]+)\s*\/\s*([\d.]+)/);
|
||||
// Hantera bråkdelar: "1/2" eller "1 1/2" eller "1 1 / 2"
|
||||
// Regex: (optional whole)? numerator / denominator
|
||||
const fractionMatch = cleaned.match(/^(\d+)?\s*(\d+)\s*\/\s*([\d.]+)/);
|
||||
let quantity = 0;
|
||||
let remainingText = cleaned;
|
||||
|
||||
if (fractionMatch) {
|
||||
const numerator = parseFloat(fractionMatch[1]);
|
||||
const denominator = parseFloat(fractionMatch[2]);
|
||||
quantity = numerator / denominator;
|
||||
if (fractionMatch[1]) {
|
||||
// Heltal + bråk: "1 1/2"
|
||||
const whole = parseFloat(fractionMatch[1]);
|
||||
const numerator = parseFloat(fractionMatch[2]);
|
||||
const denominator = parseFloat(fractionMatch[3]);
|
||||
quantity = whole + (numerator / denominator);
|
||||
} else {
|
||||
// Bara bråk: "1/2"
|
||||
const numerator = parseFloat(fractionMatch[2]);
|
||||
const denominator = parseFloat(fractionMatch[3]);
|
||||
quantity = numerator / denominator;
|
||||
}
|
||||
remainingText = cleaned.substring(fractionMatch[0].length).trim();
|
||||
} else {
|
||||
const numberMatch = remainingText.match(/^([\d.,]+)/);
|
||||
|
||||
@@ -42,6 +42,7 @@ export class GenericRecipeParser extends RecipeParser {
|
||||
|
||||
private extractFromJsonLd(recipe: any): ParsedRecipe {
|
||||
const name = recipe.name || '';
|
||||
const description = recipe.description || '';
|
||||
|
||||
const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
|
||||
if (recipe.recipeIngredient && Array.isArray(recipe.recipeIngredient)) {
|
||||
@@ -71,6 +72,7 @@ export class GenericRecipeParser extends RecipeParser {
|
||||
|
||||
return {
|
||||
name,
|
||||
description,
|
||||
ingredients,
|
||||
instructions,
|
||||
};
|
||||
@@ -90,6 +92,15 @@ export class GenericRecipeParser extends RecipeParser {
|
||||
name = titleMatch[1].trim();
|
||||
}
|
||||
|
||||
// Försöka extrahera beskrivning från meta-taggar
|
||||
let description = '';
|
||||
const descMatch = html.match(
|
||||
/<meta\s+name="description"\s+content="([^"]+)"/i
|
||||
);
|
||||
if (descMatch) {
|
||||
description = descMatch[1].trim();
|
||||
}
|
||||
|
||||
// Försöka extrahera ingredienser från vanliga strukturer
|
||||
const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
|
||||
|
||||
@@ -129,6 +140,7 @@ export class GenericRecipeParser extends RecipeParser {
|
||||
|
||||
return {
|
||||
name,
|
||||
description,
|
||||
ingredients,
|
||||
instructions,
|
||||
};
|
||||
|
||||
@@ -45,6 +45,9 @@ export class IcaRecipeParser extends RecipeParser {
|
||||
// Extrahera titel
|
||||
const name = recipe.name || '';
|
||||
|
||||
// Extrahera beskrivning
|
||||
const description = recipe.description || '';
|
||||
|
||||
// Extrahera ingredienser
|
||||
const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
|
||||
if (recipe.recipeIngredient && Array.isArray(recipe.recipeIngredient)) {
|
||||
@@ -75,6 +78,7 @@ export class IcaRecipeParser extends RecipeParser {
|
||||
|
||||
return {
|
||||
name,
|
||||
description,
|
||||
ingredients,
|
||||
instructions,
|
||||
};
|
||||
@@ -96,6 +100,15 @@ export class IcaRecipeParser extends RecipeParser {
|
||||
}
|
||||
}
|
||||
|
||||
// Extrahera beskrivning från meta-taggar
|
||||
let description = '';
|
||||
const descMatch = html.match(
|
||||
/<meta\s+name="description"\s+content="([^"]+)"/i
|
||||
);
|
||||
if (descMatch) {
|
||||
description = descMatch[1].trim();
|
||||
}
|
||||
|
||||
const ingredients: Array<{ quantity: number; unit: string; name: string; note?: string }> = [];
|
||||
const ingredientRegex =
|
||||
/<li[^>]*class="[^"]*ingredient[^"]*"[^>]*>([^<]+)<\/li>/gi;
|
||||
@@ -117,6 +130,7 @@ export class IcaRecipeParser extends RecipeParser {
|
||||
|
||||
return {
|
||||
name,
|
||||
description,
|
||||
ingredients,
|
||||
instructions,
|
||||
};
|
||||
|
||||
@@ -529,7 +529,7 @@ function parseRecipeMarkdown(markdown: string): ParsedRecipe {
|
||||
const heading = trimmed.replace(/^##\s+/, '').trim().toLowerCase();
|
||||
if (/ingrediens/.test(heading)) {
|
||||
currentSection = 'ingredients';
|
||||
} else if (/instruktion|tillagning|gör så här|steg/.test(heading)) {
|
||||
} else if (/instruktion|tillagning|gör så här|steg|tillväg|metod/.test(heading)) {
|
||||
currentSection = 'instructions';
|
||||
} else {
|
||||
currentSection = 'none';
|
||||
@@ -570,12 +570,21 @@ function parseRecipeMarkdown(markdown: string): ParsedRecipe {
|
||||
* Parsar en ingrediensrad, t.ex.:
|
||||
* "400 g kycklingfilé"
|
||||
* "2 dl grädde (eller crème fraiche)"
|
||||
* "1 1/2 dl crème fraiche"
|
||||
* "1 polka- eller gulbeta"
|
||||
* "1 kruka basilika"
|
||||
* "salt"
|
||||
*/
|
||||
function parseIngredientLine(text: string): ParsedIngredient {
|
||||
const trimmed = text.trim();
|
||||
|
||||
// Kända enheter
|
||||
const knownUnits = [
|
||||
'g', 'kg', 'hg', 'mg', 'ml', 'dl', 'l', 'tl',
|
||||
'st', 'tsk', 'msk', 'krm', 'matsled', 'tesled',
|
||||
'pris', 'portion', 'burk', 'förp', 'paket',
|
||||
];
|
||||
|
||||
// Extrahera eventuell parentes-not i slutet
|
||||
let note: string | null = null;
|
||||
let main = trimmed;
|
||||
@@ -585,13 +594,44 @@ function parseIngredientLine(text: string): ParsedIngredient {
|
||||
main = trimmed.slice(0, parenMatch.index).trim();
|
||||
}
|
||||
|
||||
// Försök matcha bråk först: "1 1/2 dl crème fraiche" eller "1/2 dl"
|
||||
const fractionMatch = main.match(/^(\d+)?\s*(\d+)\s*\/\s*([\d.]+)\s+(\S+)\s+(.*)$/);
|
||||
if (fractionMatch) {
|
||||
let quantity = 0;
|
||||
if (fractionMatch[1]) {
|
||||
quantity = parseFloat(fractionMatch[1]) + parseFloat(fractionMatch[2]) / parseFloat(fractionMatch[3]);
|
||||
} else {
|
||||
quantity = parseFloat(fractionMatch[2]) / parseFloat(fractionMatch[3]);
|
||||
}
|
||||
const candidateUnit = fractionMatch[4].toLowerCase();
|
||||
if (knownUnits.includes(candidateUnit)) {
|
||||
return {
|
||||
quantity,
|
||||
unit: candidateUnit,
|
||||
rawName: fractionMatch[5].trim(),
|
||||
note,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Försök matcha "kvantitet enhet namn" — t.ex. "400 g kycklingfilé" eller "2.5 dl grädde"
|
||||
const fullMatch = main.match(/^(\d+(?:[.,]\d+)?)\s+(\S+)\s+(.+)$/);
|
||||
if (fullMatch) {
|
||||
const candidateUnit = fullMatch[2].toLowerCase();
|
||||
// Validera att det andra ordet är en känd enhet
|
||||
if (knownUnits.includes(candidateUnit)) {
|
||||
return {
|
||||
quantity: parseNumber(fullMatch[1]),
|
||||
unit: candidateUnit,
|
||||
rawName: fullMatch[3].trim(),
|
||||
note,
|
||||
};
|
||||
}
|
||||
// Om inte känd enhet, behandla som "kvantitet namn" utan enhet
|
||||
return {
|
||||
quantity: parseNumber(fullMatch[1]),
|
||||
unit: fullMatch[2],
|
||||
rawName: fullMatch[3].trim(),
|
||||
unit: 'st',
|
||||
rawName: fullMatch[2] + ' ' + fullMatch[3],
|
||||
note,
|
||||
};
|
||||
}
|
||||
|
||||
@@ -311,243 +311,263 @@ Stek löken i lite smör. Tillsätt köttfärsen...`}</pre>
|
||||
|
||||
{/* STEG 2: Granskning */}
|
||||
{step === 'review' && parsed && (
|
||||
<section style={{ display: 'grid', gap: '1.5rem' }}>
|
||||
{/* Debug Panel - Import Output */}
|
||||
<details
|
||||
open={showDebugPanel}
|
||||
onChange={(e) => setShowDebugPanel((e.target as HTMLDetailsElement).open)}
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '1rem',
|
||||
background: '#f9f9f9',
|
||||
}}
|
||||
>
|
||||
<summary style={{ cursor: 'pointer', fontWeight: 600, fontSize: '0.95rem', color: '#666' }}>
|
||||
🔍 Import Debug Output {showDebugPanel ? '▼' : '▶'}
|
||||
</summary>
|
||||
<div style={{ marginTop: '1rem', display: 'grid', gap: '1rem' }}>
|
||||
{/* Raw Markdown */}
|
||||
<section style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: '1.5rem' }}>
|
||||
{/* Vänster: Receptdetaljer + Ingredienser */}
|
||||
<div style={{ display: 'grid', gap: '1.5rem' }}>
|
||||
{/* Receptdetaljer */}
|
||||
<div style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
|
||||
|
||||
<div>
|
||||
<h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', color: '#555' }}>Raw Markdown:</h4>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Receptnamn *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedName}
|
||||
onChange={(e) => setEditedName(e.target.value)}
|
||||
required
|
||||
style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Beskrivning</label>
|
||||
<textarea
|
||||
value={editedDescription}
|
||||
onChange={(e) => setEditedDescription(e.target.value)}
|
||||
style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', minHeight: '80px', fontFamily: 'inherit', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Instruktioner</label>
|
||||
<textarea
|
||||
value={editedInstructions}
|
||||
onChange={(e) => setEditedInstructions(e.target.value)}
|
||||
style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', minHeight: '150px', fontFamily: 'monospace', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ingredienser */}
|
||||
<div style={{ display: 'grid', gap: '0.75rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>
|
||||
Ingredienser{' '}
|
||||
<span style={{ fontWeight: 400, fontSize: '0.875rem', color: '#666' }}>
|
||||
— välj produkt från databasen för varje rad
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{ingredients.map((ing, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{ display: 'grid', gap: '0.5rem', padding: '0.75rem', background: '#f9f9f9', borderRadius: '6px', border: '1px solid #eee' }}
|
||||
>
|
||||
{/* Rå text från Markdown */}
|
||||
<div style={{ fontSize: '0.85rem', color: '#888', fontStyle: 'italic' }}>
|
||||
Tolkad som: <strong style={{ color: '#555' }}>{ing.rawName}</strong>
|
||||
{ing.suggestions.length > 0 && (
|
||||
<span style={{ marginLeft: '0.5rem', color: '#0070f3' }}>
|
||||
(bästa match: {ing.suggestions[0].productName}, {ing.suggestions[0].score}%)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'end' }}>
|
||||
{/* Produktval */}
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Produkt *</label>
|
||||
<select
|
||||
value={ing.selectedProductId}
|
||||
onChange={(e) => updateIngredient(index, 'selectedProductId', Number(e.target.value))}
|
||||
style={{ width: '100%', padding: '0.5rem', border: ing.selectedProductId === 0 ? '1px solid #f59e0b' : '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem', background: ing.selectedProductId === 0 ? '#fffbeb' : 'white' }}
|
||||
>
|
||||
<option value={0}>— Välj produkt —</option>
|
||||
{/* Förslag från backend (sorterade efter matchningspoäng) */}
|
||||
{ing.suggestions.length > 0 && (
|
||||
<optgroup label="Föreslagna matchningar">
|
||||
{ing.suggestions.map((s) => (
|
||||
<option key={s.productId} value={s.productId}>
|
||||
{s.productName} ({s.score}%)
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
)}
|
||||
<optgroup label="Alla produkter">
|
||||
{allProducts.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.canonicalName || p.name}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Mängd */}
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Mängd</label>
|
||||
<input
|
||||
type="number"
|
||||
value={ing.editedQuantity}
|
||||
onChange={(e) => updateIngredient(index, 'editedQuantity', e.target.value)}
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Enhet */}
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Enhet</label>
|
||||
<select
|
||||
value={ing.editedUnit}
|
||||
onChange={(e) => updateIngredient(index, 'editedUnit', e.target.value)}
|
||||
style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem' }}
|
||||
>
|
||||
{UNIT_OPTIONS.map((u) => (
|
||||
<option key={u.value} value={u.value}>{u.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Ta bort */}
|
||||
<button
|
||||
onClick={() => removeIngredient(index)}
|
||||
title="Ta bort ingrediens"
|
||||
style={{ padding: '0.5rem 0.75rem', background: '#fee2e2', color: '#dc2626', border: '1px solid #fca5a5', borderRadius: '4px', cursor: 'pointer', fontSize: '0.9rem', alignSelf: 'end' }}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Anteckning */}
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', color: '#666' }}>Anteckning</label>
|
||||
<input
|
||||
type="text"
|
||||
value={ing.editedNote}
|
||||
onChange={(e) => updateIngredient(index, 'editedNote', e.target.value)}
|
||||
placeholder="Valfri anteckning..."
|
||||
style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.85rem', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{ingredients.length === 0 && (
|
||||
<p style={{ color: '#888', fontStyle: 'italic', margin: 0 }}>
|
||||
Inga ingredienser tolkades från Markdown-texten.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Knappar */}
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving || !editedName.trim() || ingredients.filter((i) => i.selectedProductId > 0).length === 0}
|
||||
style={{
|
||||
padding: '0.75rem 1.5rem',
|
||||
background: '#0070f3',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: isSaving ? 'not-allowed' : 'pointer',
|
||||
opacity: isSaving ? 0.6 : 1,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{isSaving ? 'Sparar...' : 'Spara recept'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStep('input')}
|
||||
style={{ padding: '0.75rem 1rem', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
|
||||
>
|
||||
← Redigera
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/recipes')}
|
||||
style={{ padding: '0.75rem 1rem', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
|
||||
>
|
||||
Avbryt
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Höger: Debug Panel (Sticky) */}
|
||||
<div style={{ position: 'sticky', top: '1rem', height: 'fit-content' }}>
|
||||
<details
|
||||
open={showDebugPanel}
|
||||
onChange={(e) => setShowDebugPanel((e.target as HTMLDetailsElement).open)}
|
||||
style={{
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '8px',
|
||||
padding: '0.75rem',
|
||||
background: '#f9f9f9',
|
||||
}}
|
||||
>
|
||||
<summary style={{ cursor: 'pointer', fontWeight: 600, fontSize: '0.9rem', color: '#666', userSelect: 'none' }}>
|
||||
🔍 Import Debug {showDebugPanel ? '▼' : '▶'}
|
||||
</summary>
|
||||
|
||||
{/* Raw Markdown */}
|
||||
<details
|
||||
style={{
|
||||
marginTop: '0.75rem',
|
||||
paddingTop: '0.75rem',
|
||||
borderTop: '1px solid #ddd',
|
||||
}}
|
||||
>
|
||||
<summary style={{ cursor: 'pointer', fontSize: '0.8rem', fontWeight: 500, color: '#555', userSelect: 'none' }}>
|
||||
Raw Markdown
|
||||
</summary>
|
||||
<pre
|
||||
style={{
|
||||
background: 'white',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
padding: '0.75rem',
|
||||
fontSize: '0.8rem',
|
||||
padding: '0.5rem',
|
||||
fontSize: '0.7rem',
|
||||
overflow: 'auto',
|
||||
maxHeight: '200px',
|
||||
margin: 0,
|
||||
margin: '0.5rem 0 0',
|
||||
fontFamily: 'monospace',
|
||||
color: '#333',
|
||||
}}
|
||||
>
|
||||
{markdown}
|
||||
</pre>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{/* Parse Results as JSON */}
|
||||
<div>
|
||||
<h4 style={{ margin: '0 0 0.5rem 0', fontSize: '0.85rem', color: '#555' }}>Parse Result:</h4>
|
||||
{/* Parse Result */}
|
||||
<details
|
||||
style={{
|
||||
marginTop: '0.5rem',
|
||||
paddingTop: '0.5rem',
|
||||
borderTop: '1px solid #ddd',
|
||||
}}
|
||||
>
|
||||
<summary style={{ cursor: 'pointer', fontSize: '0.8rem', fontWeight: 500, color: '#555', userSelect: 'none' }}>
|
||||
Parse Result
|
||||
</summary>
|
||||
<pre
|
||||
style={{
|
||||
background: 'white',
|
||||
border: '1px solid #ddd',
|
||||
borderRadius: '4px',
|
||||
padding: '0.75rem',
|
||||
fontSize: '0.75rem',
|
||||
padding: '0.5rem',
|
||||
fontSize: '0.65rem',
|
||||
overflow: 'auto',
|
||||
maxHeight: '250px',
|
||||
margin: 0,
|
||||
maxHeight: '200px',
|
||||
margin: '0.5rem 0 0',
|
||||
fontFamily: 'monospace',
|
||||
color: '#333',
|
||||
}}
|
||||
>
|
||||
{JSON.stringify(parsed, null, 2)}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
{/* Receptdetaljer */}
|
||||
<div style={{ display: 'grid', gap: '1rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>Receptdetaljer</h2>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Receptnamn *</label>
|
||||
<input
|
||||
type="text"
|
||||
value={editedName}
|
||||
onChange={(e) => setEditedName(e.target.value)}
|
||||
required
|
||||
style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Beskrivning</label>
|
||||
<textarea
|
||||
value={editedDescription}
|
||||
onChange={(e) => setEditedDescription(e.target.value)}
|
||||
style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', minHeight: '80px', fontFamily: 'inherit', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.5rem', fontWeight: 600 }}>Instruktioner</label>
|
||||
<textarea
|
||||
value={editedInstructions}
|
||||
onChange={(e) => setEditedInstructions(e.target.value)}
|
||||
style={{ width: '100%', padding: '0.75rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '1rem', minHeight: '150px', fontFamily: 'monospace', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ingredienser */}
|
||||
<div style={{ display: 'grid', gap: '0.75rem', padding: '1rem', border: '1px solid #ddd', borderRadius: '8px' }}>
|
||||
<h2 style={{ margin: 0, fontSize: '1.1rem' }}>
|
||||
Ingredienser{' '}
|
||||
<span style={{ fontWeight: 400, fontSize: '0.875rem', color: '#666' }}>
|
||||
— välj produkt från databasen för varje rad
|
||||
</span>
|
||||
</h2>
|
||||
|
||||
{ingredients.map((ing, index) => (
|
||||
<div
|
||||
key={index}
|
||||
style={{ display: 'grid', gap: '0.5rem', padding: '0.75rem', background: '#f9f9f9', borderRadius: '6px', border: '1px solid #eee' }}
|
||||
>
|
||||
{/* Rå text från Markdown */}
|
||||
<div style={{ fontSize: '0.85rem', color: '#888', fontStyle: 'italic' }}>
|
||||
Tolkad som: <strong style={{ color: '#555' }}>{ing.rawName}</strong>
|
||||
{ing.suggestions.length > 0 && (
|
||||
<span style={{ marginLeft: '0.5rem', color: '#0070f3' }}>
|
||||
(bästa match: {ing.suggestions[0].productName}, {ing.suggestions[0].score}%)
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr 1fr auto', gap: '0.5rem', alignItems: 'end' }}>
|
||||
{/* Produktval */}
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Produkt *</label>
|
||||
<select
|
||||
value={ing.selectedProductId}
|
||||
onChange={(e) => updateIngredient(index, 'selectedProductId', Number(e.target.value))}
|
||||
style={{ width: '100%', padding: '0.5rem', border: ing.selectedProductId === 0 ? '1px solid #f59e0b' : '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem', background: ing.selectedProductId === 0 ? '#fffbeb' : 'white' }}
|
||||
>
|
||||
<option value={0}>— Välj produkt —</option>
|
||||
{/* Förslag från backend (sorterade efter matchningspoäng) */}
|
||||
{ing.suggestions.length > 0 && (
|
||||
<optgroup label="Föreslagna matchningar">
|
||||
{ing.suggestions.map((s) => (
|
||||
<option key={s.productId} value={s.productId}>
|
||||
{s.productName} ({s.score}%)
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
)}
|
||||
<optgroup label="Alla produkter">
|
||||
{allProducts.map((p) => (
|
||||
<option key={p.id} value={p.id}>
|
||||
{p.canonicalName || p.name}
|
||||
</option>
|
||||
))}
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Mängd */}
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Mängd</label>
|
||||
<input
|
||||
type="number"
|
||||
value={ing.editedQuantity}
|
||||
onChange={(e) => updateIngredient(index, 'editedQuantity', e.target.value)}
|
||||
min="0.01"
|
||||
step="0.01"
|
||||
style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Enhet */}
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', fontWeight: 600 }}>Enhet</label>
|
||||
<select
|
||||
value={ing.editedUnit}
|
||||
onChange={(e) => updateIngredient(index, 'editedUnit', e.target.value)}
|
||||
style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.9rem' }}
|
||||
>
|
||||
{UNIT_OPTIONS.map((u) => (
|
||||
<option key={u.value} value={u.value}>{u.label}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Ta bort */}
|
||||
<button
|
||||
onClick={() => removeIngredient(index)}
|
||||
title="Ta bort ingrediens"
|
||||
style={{ padding: '0.5rem 0.75rem', background: '#fee2e2', color: '#dc2626', border: '1px solid #fca5a5', borderRadius: '4px', cursor: 'pointer', fontSize: '0.9rem', alignSelf: 'end' }}
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Anteckning */}
|
||||
<div>
|
||||
<label style={{ display: 'block', marginBottom: '0.25rem', fontSize: '0.85rem', color: '#666' }}>Anteckning</label>
|
||||
<input
|
||||
type="text"
|
||||
value={ing.editedNote}
|
||||
onChange={(e) => updateIngredient(index, 'editedNote', e.target.value)}
|
||||
placeholder="Valfri anteckning..."
|
||||
style={{ width: '100%', padding: '0.5rem', border: '1px solid #ddd', borderRadius: '4px', fontSize: '0.85rem', boxSizing: 'border-box' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
|
||||
{ingredients.length === 0 && (
|
||||
<p style={{ color: '#888', fontStyle: 'italic', margin: 0 }}>
|
||||
Inga ingredienser tolkades från Markdown-texten.
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Knappar */}
|
||||
<div style={{ display: 'flex', gap: '1rem' }}>
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving || !editedName.trim() || ingredients.filter((i) => i.selectedProductId > 0).length === 0}
|
||||
style={{
|
||||
padding: '0.75rem 1.5rem',
|
||||
background: '#0070f3',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
cursor: isSaving ? 'not-allowed' : 'pointer',
|
||||
opacity: isSaving ? 0.6 : 1,
|
||||
fontSize: '1rem',
|
||||
fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
{isSaving ? 'Sparar...' : 'Spara recept'}
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setStep('input')}
|
||||
style={{ padding: '0.75rem 1rem', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
|
||||
>
|
||||
← Redigera
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/recipes')}
|
||||
style={{ padding: '0.75rem 1rem', background: 'transparent', border: '1px solid #ddd', borderRadius: '4px', cursor: 'pointer', fontSize: '1rem' }}
|
||||
>
|
||||
Avbryt
|
||||
</button>
|
||||
</details>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user