// Moderis — Receptenbibliotheek (kern). Zelfstandig scherm met drie views: // list — overzicht van opgeslagen recepten (favorieten eerst) // detail — één recept: macro's per portie, ingrediënten, bereiding, feedback // edit — maken/bewerken; ingrediënten (naam + gram) → macro's bij opslaan // via /api/recepten. "Genereer met Moderis" vult een concept voor. // // Macro's komen altijd serverside uit de Open Food Facts + AI-pipeline; de // client stuurt alleen naam + gram. Een ⚠ bij een ingrediënt = geschat. const MOMENT_LABELS = { ontbijt: 'Ontbijt', lunch: 'Lunch', snack: 'Snack', avondeten: 'Avondeten', meeneem: 'Meeneem' }; const MOMENT_KEYS = ['ontbijt', 'lunch', 'snack', 'avondeten', 'meeneem']; function recMacroObj(r) { return { p: Math.round(r.eiwitten || 0), c: Math.round(r.koolhydraten || 0), f: Math.round(r.vetten || 0) }; } function bronBadge(bron) { if (bron === 'ai_nieuw') return { label: 'Nieuw idee', cls: 'm-label-omega' }; if (bron === 'aangepast') return { label: 'Aangepast', cls: 'm-label-fiber' }; return { label: 'Eigen recept', cls: 'm-label-light' }; } // ── Kaart in de lijst ────────────────────────────────────────────────── function ReceptKaart({ r, onOpen, onFav }) { return (
onOpen(r)} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 14px', borderRadius: 16, border: '1px solid var(--m-line)', marginBottom: 10, background: 'var(--m-card)', cursor: 'pointer' }}>
{r.naam}
{Math.round(r.kcal || 0)} kcal {(r.momenten || []).length > 0 && ( · {r.momenten.map((m) => MOMENT_LABELS[m] || m).join(', ')} )}
); } // ── Detail-view ──────────────────────────────────────────────────────── function ReceptDetail({ r, onBack, onEdit, onDelete, onFav, onBeoordeel, onVulIngredienten, vullenBusy, onMaakGerecht }) { const { useState } = React; const b = bronBadge(r.bron); const [pGemaakt, setPGemaakt] = useState(r.porties || 1); return (

{r.naam}

{b.label} {(r.momenten || []).map((m) => ( {MOMENT_LABELS[m] || m} ))}
{/* Macro's per portie */}
Per portie {r.porties} {r.porties === 1 ? 'portie' : 'porties'} totaal
{Math.round(r.kcal || 0)} kcal
{/* Ingrediënten */} Ingrediënten
{(r.ingredienten || []).map((i, idx) => (
{i.naam} {i.geschat && ( ⚠ )} {Math.round(i.hoeveelheid_g || 0)} g {Math.round(i.kcal || 0)} kcal
))} {!(r.ingredienten || []).length && (
⚠ Dit recept heeft nog geen ingrediënten — de macro's zijn niet onderbouwd. Laat Moderis ze aanvullen, dan worden de macro's herberekend.
)}
{/* Bereiding */} {r.bereiding && ( Bereiding
{r.bereiding}
 )} {/* Feedback — voedt straks de suggesties (fase 2) */}
{/* Gekookt? Porties als restje in de voorraad zetten */} {onMaakGerecht && (
Gekookt? Zet de porties in je voorraad — de ingrediënten worden dan afgehaald en de porties komen bij "op te maken".
Porties gemaakt: setPGemaakt(e.target.value)} style={{ width: 64, padding: '8px 10px', fontSize: 13.5, borderRadius: 10, border: '1px solid var(--m-line-2)', background: 'var(--m-card)', fontFamily: 'inherit' }} />
)}
); } // iPhone-foto's zijn vaak HEIC/HEIF — dat kan een laptop-browser (Chrome/ // Firefox) niet in een /canvas decoderen, en het AI-model accepteert het // ook niet. We zetten zulke bestanden client-side om naar JPEG met heic2any, // dat pas ingeladen wordt zodra er écht een HEIC-bestand gekozen is. function isHeicBestand(file) { const t = String((file && file.type) || '').toLowerCase(); const n = String((file && file.name) || '').toLowerCase(); return t === 'image/heic' || t === 'image/heif' || /\.hei[cf]$/.test(n); } function laadHeic2any() { if (window.heic2any) return Promise.resolve(); if (!window.__heic2anyLaden) { window.__heic2anyLaden = new Promise((resolve, reject) => { const s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/heic2any@0.0.4/dist/heic2any.min.js'; s.onload = () => resolve(); s.onerror = () => reject(new Error('HEIC-omzetter kon niet laden (geen internet?).')); document.head.appendChild(s); }); } return window.__heic2anyLaden; } // Zet een HEIC/HEIF-bestand om naar een JPEG-blob. Probeer eerst heic-to (heeft // een recentere libheif die veel meer iPhone-varianten aankan); lukt dat niet, // val terug op heic2any. Faalt alles → duidelijke, uitvoerbare tip. async function heicNaarJpegBlob(file) { try { const mod = await import('https://esm.sh/heic-to@1.5.2'); const fn = mod.heicTo || (mod.default && mod.default.heicTo); if (fn) { const out = await fn({ blob: file, type: 'image/jpeg', quality: 0.85 }); return Array.isArray(out) ? out[0] : out; } } catch (e) { /* val terug op heic2any */ } try { await laadHeic2any(); const out = await window.heic2any({ blob: file, toType: 'image/jpeg', quality: 0.85 }); return Array.isArray(out) ? out[0] : out; } catch (e) { /* beide mislukt */ } throw new Error('Deze HEIC-foto kon niet omgezet worden. Tip: zet op je iPhone bij Instellingen → Camera → Formaten op "Meest compatibel" (maakt JPEG), of upload een JPEG/screenshot.'); } async function normaliseerFoto(file) { if (!isHeicBestand(file)) return file; return await heicNaarJpegBlob(file); } // Schaal een foto/screenshot terug (max 1600 px, JPEG) vóór de upload: de // serverless body-limiet is ~4,5 MB en het AI-model heeft geen 4K nodig. // HEIC (iPhone) wordt eerst naar JPEG omgezet. async function comprimeerAfbeelding(file) { const bron = await normaliseerFoto(file); return await new Promise((resolve, reject) => { const reader = new FileReader(); reader.onerror = () => reject(new Error('Afbeelding lezen mislukt.')); reader.onload = () => { const img = new Image(); img.onerror = () => reject(new Error('Dit is geen geldige afbeelding.')); img.onload = () => { const max = 1600; const f = Math.min(1, max / Math.max(img.width, img.height)); const canvas = document.createElement('canvas'); canvas.width = Math.max(1, Math.round(img.width * f)); canvas.height = Math.max(1, Math.round(img.height * f)); canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height); const dataUrl = canvas.toDataURL('image/jpeg', 0.82); resolve({ image: dataUrl.split(',')[1], media_type: 'image/jpeg' }); }; img.src = reader.result; }; reader.readAsDataURL(bron); }); } // Bekende per-100g-macro's van een ingrediënt: uit het recept (per100 zit in // de opgeslagen jsonb) of afgeleid uit de opgeslagen macro's + gram. Hiermee // herschaalt de editor een gewichtswijziging lokaal i.p.v. de macro's te // wissen — zo verspringt het totaal niet als je één gram aanpast. function leidPer100Af(i) { if (i && i.per100 && i.per100.kcal_100g != null) return i.per100; const g = Number(i && i.hoeveelheid_g) || 0; if (!(g > 0) || i == null || i.kcal == null) return null; const r1 = (n) => Math.round(((Number(n) || 0) * 100 / g) * 10) / 10; return { kcal_100g: r1(i.kcal), eiwitten_100g: r1(i.eiwitten), koolhydraten_100g: r1(i.koolhydraten), vetten_100g: r1(i.vetten) }; } // ── Edit/Create-view ─────────────────────────────────────────────────── function ReceptEdit({ start, onBack, onSaved, showToast }) { const { useState, useRef } = React; const [naam, setNaam] = useState(start?.naam || ''); const [porties, setPorties] = useState(start?.porties || 1); const [momenten, setMomenten] = useState(start?.momenten || []); const [bereiding, setBereiding] = useState(start?.bereiding || ''); const [ingredienten, setIngredienten] = useState( (start?.ingredienten || []).map((i) => ({ naam: i.naam || '', hoeveelheid_g: i.hoeveelheid_g || '', kcal: i.kcal, eiwitten: i.eiwitten, koolhydraten: i.koolhydraten, vetten: i.vetten, geschat: i.geschat, per100: leidPer100Af(i) })), ); const [wens, setWens] = useState(''); const [genereren, setGenereren] = useState(false); const [fotoBusy, setFotoBusy] = useState(false); const fotoInput = useRef(null); const [opslaan, setOpslaan] = useState(false); // Schaal-hint: verschijnt als je één hoeveelheid of de porties wijzigt, en // biedt aan de rest evenredig mee te schalen (als je dat wilt). const [scaleHint, setScaleHint] = useState(null); // Baseline = de "vastgestelde" porties/hoeveelheden. De hint vergelijkt // hiertegen — niet tegen een vorige tussenwaarde — zodat terug naar de oude // waarde de hint weer laat verdwijnen i.p.v. een omgekeerde factor te tonen. const baseline = React.useRef({ porties: Number(start?.porties) || 1, amounts: (start?.ingredienten || []).map((i) => Number(i.hoeveelheid_g) || 0), }); const isEdit = !!start?.id; const round = (n) => Math.round(Number(n) || 0); const fmtRatio = (r) => '×' + r.toFixed(2).replace(/\.?0+$/, '').replace('.', ','); const rnd1 = (n) => Math.round((Number(n) || 0) * 10) / 10; // Gewicht gewijzigd → macro's HERSCHALEN uit per100, niet wissen: de // preview blijft dan kloppen (1 g meer is 1 g meer, geen sprong). Alleen // een andere NAAM is een ander product — dan gaan de macro's weg en zoekt // herberekenRegel ze proactief opnieuw op (bij het verlaten van het veld). const setIng = (idx, veld, waarde) => { setIngredienten((arr) => arr.map((it, i) => { if (i !== idx) return it; if (veld === 'hoeveelheid_g' && it.per100) { const f = (Number(waarde) || 0) / 100; return { ...it, hoeveelheid_g: waarde, kcal: rnd1(it.per100.kcal_100g * f), eiwitten: rnd1(it.per100.eiwitten_100g * f), koolhydraten: rnd1(it.per100.koolhydraten_100g * f), vetten: rnd1(it.per100.vetten_100g * f) }; } return { ...it, [veld]: waarde, per100: veld === 'naam' ? null : it.per100, kcal: undefined, eiwitten: undefined, koolhydraten: undefined, vetten: undefined, geschat: undefined }; })); }; // Proactief inladen bij openen: alle macro's vers van de server halen — de // opgeslagen waarden kunnen verouderd zijn (database verbeterd, voorraad // veranderd) en de server-pipeline is de waarheid. Zo zie je in de editor // meteen dezelfde macro's die opslaan ook zou opleveren. React.useEffect(() => { (async () => { const rijen = ingredienten.map((r, i) => ({ r, i })).filter((x) => String(x.r.naam).trim()); if (!rijen.length) return; try { const resp = await api.berekenMacros(rijen.map((x) => ({ naam: String(x.r.naam).trim(), hoeveelheid_g: Number(x.r.hoeveelheid_g) || 0 }))); const verr = resp.ingredienten || []; setIngredienten((arr) => { const next = [...arr]; rijen.forEach((x, k) => { const v = verr[k]; if (!v || !next[x.i]) return; // Schaal naar de HUIDIGE grammen (niet v.kcal letterlijk): heb je // tijdens het laden al een gram aangepast, dan telt die mee. const f = (Number(next[x.i].hoeveelheid_g) || 0) / 100; const p = v.per100; next[x.i] = { ...next[x.i], per100: p, geschat: v.geschat, kcal: p ? rnd1(p.kcal_100g * f) : v.kcal, eiwitten: p ? rnd1(p.eiwitten_100g * f) : v.eiwitten, koolhydraten: p ? rnd1(p.koolhydraten_100g * f) : v.koolhydraten, vetten: p ? rnd1(p.vetten_100g * f) : v.vetten }; }); return next; }); } catch (_) { /* stil — bij opslaan rekent de server sowieso */ } })(); // eslint-disable-next-line }, []); // Proactief inladen per regel: een nieuw of hernoemd ingrediënt wordt // meteen opgezocht zodra je het veld verlaat — je ziet de juiste macro's // dus al vóór het opslaan, niet pas erna. const herberekenRegel = async (idx, naamOverride) => { const r = ingredienten[idx]; const naamNu = String(naamOverride != null ? naamOverride : (r && r.naam) || '').trim(); if (!naamNu) return; if (naamOverride == null && r && r.per100) return; // al bekend → niets doen try { const resp = await api.berekenMacros([{ naam: naamNu, hoeveelheid_g: Number(r && r.hoeveelheid_g) || 0 }]); const v = (resp.ingredienten || [])[0]; if (v) setIngredienten((arr) => arr.map((it, i) => { if (i !== idx) return it; // Schaal naar de huidige grammen — die kunnen intussen gewijzigd zijn. const f = (Number(it.hoeveelheid_g) || 0) / 100; const p = v.per100; return { ...it, per100: p, geschat: v.geschat, kcal: p ? rnd1(p.kcal_100g * f) : v.kcal, eiwitten: p ? rnd1(p.eiwitten_100g * f) : v.eiwitten, koolhydraten: p ? rnd1(p.koolhydraten_100g * f) : v.koolhydraten, vetten: p ? rnd1(p.vetten_100g * f) : v.vetten }; })); } catch (_) { /* stil — opslaan berekent alsnog wat ontbreekt */ } }; // Vergelijk bij blur tegen de baseline → toon, vervang of wis de hint. const onAmountBlur = (idx) => { const now = Number(ingredienten[idx] && ingredienten[idx].hoeveelheid_g) || 0; const base = baseline.current.amounts[idx]; if (base > 0 && now > 0 && now !== base) { setScaleHint({ type: 'ing', idx, naam: ingredienten[idx].naam || 'dit ingrediënt', ratio: now / base }); } else { setScaleHint((h) => (h && h.type === 'ing' && h.idx === idx) ? null : h); } }; // Porties is puur de DELER (totaal ÷ porties); het herschaalt de ingrediënten // niet meer. Zo kun je na een import gewoon zeggen "dit is voor 2 porties". // "Ja" — schaal de overige hoeveelheden mee en verschuif de baseline mee. const pasScaleToe = () => { if (!scaleHint) return; const r = scaleHint.ratio; setIngredienten((arr) => { const next = arr.map((it, i) => { if (scaleHint.type === 'ing' && i === scaleHint.idx) return it; const g = Number(it.hoeveelheid_g) || 0; if (!g) return it; const ng = round(g * r); // Zelfde principe als setIng: herschalen uit per100 waar dat kan. if (it.per100) { const f = ng / 100; return { ...it, hoeveelheid_g: ng, kcal: rnd1(it.per100.kcal_100g * f), eiwitten: rnd1(it.per100.eiwitten_100g * f), koolhydraten: rnd1(it.per100.koolhydraten_100g * f), vetten: rnd1(it.per100.vetten_100g * f) }; } return { ...it, hoeveelheid_g: ng, kcal: undefined, geschat: undefined }; }); baseline.current.amounts = next.map((it) => Number(it.hoeveelheid_g) || 0); return next; }); baseline.current.porties = Number(porties) || baseline.current.porties; setScaleHint(null); }; // "Nee" — accepteer de losse wijziging als nieuwe baseline, zonder schalen. const negeerScale = () => { if (scaleHint) { if (scaleHint.type === 'por') { baseline.current.porties = Number(porties) || baseline.current.porties; } else { baseline.current.amounts[scaleHint.idx] = Number(ingredienten[scaleHint.idx] && ingredienten[scaleHint.idx].hoeveelheid_g) || 0; } } setScaleHint(null); }; const addIng = () => { baseline.current.amounts = [...baseline.current.amounts, 0]; setIngredienten((arr) => [...arr, { naam: '', hoeveelheid_g: '' }]); }; const removeIng = (idx) => { baseline.current.amounts = baseline.current.amounts.filter((_, i) => i !== idx); setIngredienten((arr) => arr.filter((_, i) => i !== idx)); setScaleHint((h) => (h && h.type === 'ing') ? null : h); }; const toggleMoment = (m) => setMomenten((ms) => ms.includes(m) ? ms.filter((x) => x !== m) : [...ms, m]); // Concept (van AI of foto) in het formulier zetten — zelfde pad voor beide. const vulConcept = (draft, fallbackNaam) => { setNaam(draft.naam || fallbackNaam || ''); setPorties(draft.porties || 1); setMomenten(draft.momenten && draft.momenten.length ? draft.momenten.filter((m) => MOMENT_KEYS.includes(m)) : momenten); setBereiding(draft.bereiding || ''); const nieuweIng = (draft.ingredienten || []).map((i) => ({ naam: i.naam, hoeveelheid_g: i.hoeveelheid_g, kcal: i.kcal, eiwitten: i.eiwitten, koolhydraten: i.koolhydraten, vetten: i.vetten, geschat: i.geschat, per100: leidPer100Af(i) })); setIngredienten(nieuweIng); // Verse baseline → geen valse schaal-hint direct na het invullen. baseline.current = { porties: draft.porties || 1, amounts: nieuweIng.map((i) => Number(i.hoeveelheid_g) || 0) }; setScaleHint(null); }; const genereer = async () => { if (!wens.trim() || genereren || fotoBusy) return; setGenereren(true); try { const draft = await api.genereerRecept({ wens: wens.trim(), moment: momenten[0] || null }); vulConcept(draft, wens.trim()); showToast('Concept klaar — pas aan en sla op'); } catch (err) { showToast('Genereren mislukt: ' + err.message); } setGenereren(false); }; // Eén of meer foto's/screenshots van een recept → Moderis leest ze (en // combineert ze, bv. ingrediënten + bereiding van een HelloFresh-kaart) en // vult het formulier. const vanFotos = async (files) => { const lijst = Array.from(files || []).slice(0, 5); if (!lijst.length || fotoBusy || genereren) return; setFotoBusy(true); try { const images = []; for (const f of lijst) images.push(await comprimeerAfbeelding(f)); const draft = await api.receptFoto({ images }); vulConcept(draft); showToast(lijst.length > 1 ? lijst.length + ' foto’s gelezen — controleer en sla op' : 'Recept van de foto gelezen — controleer en sla op'); } catch (err) { showToast(err.message || 'Foto lezen mislukt'); } setFotoBusy(false); }; const bewaar = async () => { if (!naam.trim()) { showToast('Geef het recept een naam'); return; } if (opslaan) return; setOpslaan(true); const payload = { naam: naam.trim(), bereiding, porties: Math.max(1, Math.floor(Number(porties) || 1)), momenten, ingredienten: ingredienten .filter((i) => String(i.naam).trim()) .map((i) => ({ naam: String(i.naam).trim(), hoeveelheid_g: Number(i.hoeveelheid_g) || 0 })), }; try { const saved = isEdit ? await api.updateRecept(start.id, { ...payload, bron: start.bron === 'ai_nieuw' ? 'aangepast' : start.bron }) : await api.addRecept({ ...payload, bron: start?.bron || 'eigen' }); showToast(isEdit ? 'Recept bijgewerkt' : 'Recept opgeslagen'); onSaved(saved); } catch (err) { showToast('Opslaan mislukt: ' + err.message); } setOpslaan(false); }; const inputStyle = { width: '100%', boxSizing: 'border-box', padding: '11px 13px', fontSize: 14, border: '1px solid var(--m-line-2)', borderRadius: 12, background: 'var(--m-card)', color: 'var(--forest-950)', fontFamily: 'inherit', }; // Live per-portie-preview: som van de ingrediënt-macro's ÷ porties. Direct // na een import dragen de ingrediënten hun macro's, dus dit klopt meteen; bij // handmatig getypte ingrediënten worden de macro's pas bij opslaan bepaald. const por = Math.max(1, Number(porties) || 1); const totMacro = ingredienten.reduce((s, i) => ({ kcal: s.kcal + (Number(i.kcal) || 0), eiwitten: s.eiwitten + (Number(i.eiwitten) || 0), koolhydraten: s.koolhydraten + (Number(i.koolhydraten) || 0), vetten: s.vetten + (Number(i.vetten) || 0), }), { kcal: 0, eiwitten: 0, koolhydraten: 0, vetten: 0 }); const heeftMacros = ingredienten.some((i) => i.kcal != null); const perPortie = { kcal: totMacro.kcal / por, eiwitten: totMacro.eiwitten / por, koolhydraten: totMacro.koolhydraten / por, vetten: totMacro.vetten / por, }; const zetPorties = (v) => setPorties(String(Math.max(1, Math.floor(Number(v) || 1)))); return (

{isEdit ? 'Recept bewerken' : 'Nieuw recept'}

{/* Genereer met Moderis of lees van een foto (alleen bij nieuw) */} {!isEdit && (
Laat Moderis een recept bedenken
setWens(e.target.value)} placeholder="bv. eiwitrijke lunch met kip" onKeyDown={(e) => e.key === 'Enter' && genereer()} style={{ ...inputStyle, flex: 1 }} />
{/* Foto('s) van een recept (kookboek, site, HelloFresh-kaart) → concept. multiple = camera of galerij; meerdere foto's worden gecombineerd. */} { const fs = Array.from(e.target.files || []); e.target.value = ''; vanFotos(fs); }} />
Tip: fotografeer de ingrediëntenlijst (en eventueel de bereiding) — meerdere foto’s mag.
)} {/* Naam */} setNaam(e.target.value)} placeholder="Naam van het recept" style={{ ...inputStyle, marginBottom: 16 }} /> {/* Voor hoeveel porties? Porties is de DELER: de hoeveelheden zijn het totaal, de macro's gelden per portie. Handig bij een import (bv. HelloFresh voor 2 personen → zet op 2). */}
setPorties(e.target.value)} style={{ width: 54, height: 44, textAlign: 'center', border: 'none', borderLeft: '1px solid var(--m-line)', borderRight: '1px solid var(--m-line)', background: 'var(--m-card)', fontSize: 16, fontWeight: 600, fontFamily: 'inherit', color: 'var(--forest-950)' }} />
{heeftMacros && (
Per portie ≈{' '} {round(perPortie.kcal)} kcal · E {round(perPortie.eiwitten)} K {round(perPortie.koolhydraten)} V {round(perPortie.vetten)}
)}
De hoeveelheden hieronder zijn het totaal van het recept; de macro's worden per portie berekend (totaal ÷ porties).
{MOMENT_KEYS.map((m) => ( ))}
{/* Ingrediënten */}
{ingredienten.map((i, idx) => (
setIng(idx, 'naam', v)} onPick={(r) => { setIng(idx, 'naam', r.naam); herberekenRegel(idx, r.naam); }} onBlur={() => herberekenRegel(idx)} style={{ ...inputStyle, flex: 1 }} /> setIng(idx, 'hoeveelheid_g', e.target.value)} placeholder="g" onBlur={() => { onAmountBlur(idx); herberekenRegel(idx); }} style={{ ...inputStyle, width: 72 }} /> {i.kcal != null ? Math.round(i.kcal) + (i.geschat ? '⚠' : '') : '–'}
))}
{scaleHint && (
{scaleHint.type === 'ing' ? `Rest meeschalen met ${scaleHint.naam} (${fmtRatio(scaleHint.ratio)})?` : `Ingrediënten meeschalen met de porties (${fmtRatio(scaleHint.ratio)})?`}
)}
Macro's rekenen live mee: gram wijzigen herschaalt, een nieuw of hernoemd ingrediënt wordt automatisch opgezocht (⚠ = geschat).
{/* Bereiding */}