feat: add nutrition/food logging to fitness section
All checks were successful
CI / update (push) Successful in 4m47s
All checks were successful
CI / update (push) Successful in 4m47s
Daily food log with calorie and macro tracking against configurable diet goals (presets: WHO balanced, cut, bulk, keto, etc.). Includes USDA/BLS food search with portion-based units, favorite ingredients, custom reusable meals, per-food micronutrient detail pages, and recipe-to-log integration via AddToFoodLogButton. Extends FitnessGoal with nutrition targets and adds birth year to user profile for BMR calculation.
This commit is contained in:
482
src/lib/components/fitness/FoodSearch.svelte
Normal file
482
src/lib/components/fitness/FoodSearch.svelte
Normal file
@@ -0,0 +1,482 @@
|
|||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { Heart, ExternalLink, Search, X } from 'lucide-svelte';
|
||||||
|
import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @type {{
|
||||||
|
* onselect: (food: { name: string, source: string, sourceId: string, amountGrams: number, per100g: any, portions?: any[], selectedPortion?: { description: string, grams: number } }) => void,
|
||||||
|
* oncancel?: () => void,
|
||||||
|
* showFavorites?: boolean,
|
||||||
|
* showDetailLinks?: boolean,
|
||||||
|
* autofocus?: boolean,
|
||||||
|
* confirmLabel?: string,
|
||||||
|
* }}
|
||||||
|
*/
|
||||||
|
let {
|
||||||
|
onselect,
|
||||||
|
oncancel = undefined,
|
||||||
|
showFavorites = true,
|
||||||
|
showDetailLinks = true,
|
||||||
|
autofocus = false,
|
||||||
|
confirmLabel = undefined,
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
const lang = $derived(detectFitnessLang($page.url.pathname));
|
||||||
|
const s = $derived(fitnessSlugs(lang));
|
||||||
|
const isEn = $derived(lang === 'en');
|
||||||
|
const btnLabel = $derived(confirmLabel ?? t('log_food', lang));
|
||||||
|
|
||||||
|
// --- Search state ---
|
||||||
|
let query = $state('');
|
||||||
|
let results = $state([]);
|
||||||
|
let loading = $state(false);
|
||||||
|
let timeout = $state(null);
|
||||||
|
|
||||||
|
// --- Selection state ---
|
||||||
|
let selected = $state(null);
|
||||||
|
let amountInput = $state('100');
|
||||||
|
let portionIdx = $state(-1); // -1 = grams
|
||||||
|
|
||||||
|
function doSearch() {
|
||||||
|
if (timeout) clearTimeout(timeout);
|
||||||
|
if (query.length < 2) {
|
||||||
|
results = [];
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
loading = true;
|
||||||
|
timeout = setTimeout(async () => {
|
||||||
|
try {
|
||||||
|
const favParam = showFavorites ? '&favorites=true' : '';
|
||||||
|
const res = await fetch(`/api/nutrition/search?q=${encodeURIComponent(query)}&full=true${favParam}`);
|
||||||
|
if (res.ok) results = await res.json();
|
||||||
|
} catch {} finally {
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
}, 300);
|
||||||
|
}
|
||||||
|
|
||||||
|
function selectItem(item) {
|
||||||
|
selected = item;
|
||||||
|
if (item.portions?.length > 0) {
|
||||||
|
portionIdx = 0;
|
||||||
|
amountInput = '1';
|
||||||
|
} else {
|
||||||
|
portionIdx = -1;
|
||||||
|
amountInput = '100';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resolveGrams() {
|
||||||
|
const qty = Number(amountInput) || 0;
|
||||||
|
if (portionIdx >= 0 && selected?.portions?.[portionIdx]) {
|
||||||
|
return Math.round(qty * selected.portions[portionIdx].grams);
|
||||||
|
}
|
||||||
|
return qty;
|
||||||
|
}
|
||||||
|
|
||||||
|
const previewGrams = $derived.by(() => {
|
||||||
|
const qty = Number(amountInput) || 0;
|
||||||
|
if (portionIdx >= 0 && selected?.portions?.[portionIdx]) {
|
||||||
|
return Math.round(qty * selected.portions[portionIdx].grams);
|
||||||
|
}
|
||||||
|
return qty;
|
||||||
|
});
|
||||||
|
|
||||||
|
function confirm() {
|
||||||
|
if (!selected) return;
|
||||||
|
const grams = resolveGrams();
|
||||||
|
if (!grams || grams <= 0) return;
|
||||||
|
|
||||||
|
const food = {
|
||||||
|
name: selected.name,
|
||||||
|
source: selected.source,
|
||||||
|
sourceId: selected.id,
|
||||||
|
amountGrams: grams,
|
||||||
|
per100g: selected.per100g,
|
||||||
|
};
|
||||||
|
if (selected.portions?.length > 0) {
|
||||||
|
food.portions = selected.portions;
|
||||||
|
}
|
||||||
|
if (portionIdx >= 0 && selected.portions?.[portionIdx]) {
|
||||||
|
food.selectedPortion = selected.portions[portionIdx];
|
||||||
|
}
|
||||||
|
onselect(food);
|
||||||
|
reset();
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
selected = null;
|
||||||
|
query = '';
|
||||||
|
results = [];
|
||||||
|
amountInput = '100';
|
||||||
|
portionIdx = -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function toggleFavorite(item) {
|
||||||
|
const wasFav = item.favorited;
|
||||||
|
item.favorited = !wasFav;
|
||||||
|
results = [...results];
|
||||||
|
try {
|
||||||
|
if (wasFav) {
|
||||||
|
await fetch('/api/fitness/favorite-ingredients', {
|
||||||
|
method: 'DELETE',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ source: item.source, sourceId: item.id })
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
await fetch('/api/fitness/favorite-ingredients', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({ source: item.source, sourceId: item.id, name: item.name })
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
item.favorited = wasFav;
|
||||||
|
results = [...results];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmt(v) {
|
||||||
|
if (v >= 100) return Math.round(v).toString();
|
||||||
|
if (v >= 10) return v.toFixed(1);
|
||||||
|
return v.toFixed(1);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if !selected}
|
||||||
|
<!-- svelte-ignore a11y_autofocus -->
|
||||||
|
<input
|
||||||
|
type="search"
|
||||||
|
class="fs-search-input"
|
||||||
|
placeholder={t('search_food', lang)}
|
||||||
|
bind:value={query}
|
||||||
|
oninput={doSearch}
|
||||||
|
autofocus={autofocus}
|
||||||
|
/>
|
||||||
|
{#if loading}
|
||||||
|
<p class="fs-status">{t('loading', lang)}</p>
|
||||||
|
{/if}
|
||||||
|
{#if results.length > 0}
|
||||||
|
<div class="fs-results">
|
||||||
|
{#each results as item}
|
||||||
|
<div class="fs-result-row">
|
||||||
|
{#if showFavorites}
|
||||||
|
<button class="fs-fav" class:is-fav={item.favorited} onclick={() => toggleFavorite(item)} aria-label="Toggle favorite">
|
||||||
|
<Heart size={14} fill={item.favorited ? 'var(--nord11)' : 'none'} />
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
<button class="fs-result" onclick={() => selectItem(item)}>
|
||||||
|
<div class="fs-result-info">
|
||||||
|
<span class="fs-result-name">{item.name}</span>
|
||||||
|
<span class="fs-result-meta">
|
||||||
|
<span class="fs-source-badge" class:usda={item.source === 'usda'}>{item.source === 'bls' ? 'BLS' : 'USDA'}</span>
|
||||||
|
{item.category}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<span class="fs-result-cal">{item.calories}<small> kcal</small></span>
|
||||||
|
</button>
|
||||||
|
{#if showDetailLinks}
|
||||||
|
<a class="fs-detail-link" href="/fitness/{s.nutrition}/food/{item.source}/{item.id}" aria-label="View details">
|
||||||
|
<ExternalLink size={13} />
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if oncancel}
|
||||||
|
<button class="fs-btn-cancel" onclick={oncancel}>{t('cancel', lang)}</button>
|
||||||
|
{/if}
|
||||||
|
{:else}
|
||||||
|
<!-- Selected food — amount & portion -->
|
||||||
|
<div class="fs-selected">
|
||||||
|
<div class="fs-selected-header">
|
||||||
|
<span class="fs-selected-name">
|
||||||
|
<span class="fs-source-badge" class:usda={selected.source === 'usda'}>{selected.source === 'bls' ? 'BLS' : 'USDA'}</span>
|
||||||
|
{selected.name}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="fs-amount-row">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="fs-amount-input"
|
||||||
|
bind:value={amountInput}
|
||||||
|
min="0.1"
|
||||||
|
step={portionIdx >= 0 ? '0.5' : '1'}
|
||||||
|
/>
|
||||||
|
{#if selected.portions?.length > 0}
|
||||||
|
<select class="fs-unit-select" bind:value={portionIdx} onchange={() => {
|
||||||
|
const grams = resolveGrams();
|
||||||
|
if (portionIdx >= 0 && selected.portions[portionIdx]) {
|
||||||
|
amountInput = String(Math.round((grams / selected.portions[portionIdx].grams) * 10) / 10 || 1);
|
||||||
|
} else {
|
||||||
|
amountInput = String(grams || 100);
|
||||||
|
}
|
||||||
|
}}>
|
||||||
|
<option value={-1}>g</option>
|
||||||
|
{#each selected.portions as p, pi}
|
||||||
|
<option value={pi}>{p.description} ({Math.round(p.grams)}g)</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
{:else}
|
||||||
|
<span class="fs-unit-label">g</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{#if previewGrams > 0}
|
||||||
|
<div class="fs-preview">
|
||||||
|
{#if portionIdx >= 0}
|
||||||
|
<span class="fs-preview-grams">{previewGrams}g</span>
|
||||||
|
{/if}
|
||||||
|
<span class="fs-preview-cal">{Math.round((selected.per100g?.calories ?? 0) * previewGrams / 100)} <small>kcal</small></span>
|
||||||
|
<span class="fs-preview-p">{fmt((selected.per100g?.protein ?? 0) * previewGrams / 100)}g P</span>
|
||||||
|
<span class="fs-preview-f">{fmt((selected.per100g?.fat ?? 0) * previewGrams / 100)}g F</span>
|
||||||
|
<span class="fs-preview-c">{fmt((selected.per100g?.carbs ?? 0) * previewGrams / 100)}g C</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="fs-actions">
|
||||||
|
<button class="fs-btn-cancel" onclick={() => { selected = null; }}>{t('cancel', lang)}</button>
|
||||||
|
<button class="fs-btn-confirm" onclick={confirm}>{btnLabel}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
/* ── Search input ── */
|
||||||
|
.fs-search-input {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.55rem 0.65rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
}
|
||||||
|
.fs-search-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--nord8);
|
||||||
|
}
|
||||||
|
.fs-status {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
margin: 0.4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Results ── */
|
||||||
|
.fs-results {
|
||||||
|
max-height: 260px;
|
||||||
|
overflow-y: auto;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.fs-result-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.fs-result-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.fs-fav {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.4rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.fs-fav.is-fav { color: var(--nord11); }
|
||||||
|
.fs-fav:hover { color: var(--nord11); }
|
||||||
|
|
||||||
|
.fs-result {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0.55rem 0.65rem;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: left;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
gap: 0.75rem;
|
||||||
|
transition: background 0.12s;
|
||||||
|
}
|
||||||
|
.fs-result:hover {
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
}
|
||||||
|
.fs-result-info {
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.1rem;
|
||||||
|
}
|
||||||
|
.fs-result-name {
|
||||||
|
font-size: 0.83rem;
|
||||||
|
font-weight: 500;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.fs-result-meta {
|
||||||
|
font-size: 0.68rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
.fs-source-badge {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.55rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
padding: 0.05rem 0.25rem;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
.fs-source-badge.usda {
|
||||||
|
background: color-mix(in srgb, var(--nord10) 15%, transparent);
|
||||||
|
color: var(--nord10);
|
||||||
|
}
|
||||||
|
.fs-result-cal {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
flex-shrink: 0;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.fs-result-cal small {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
font-weight: 500;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
.fs-detail-link {
|
||||||
|
display: flex;
|
||||||
|
padding: 0.4rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
flex-shrink: 0;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.fs-detail-link:hover {
|
||||||
|
color: var(--nord10);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Selected food ── */
|
||||||
|
.fs-selected {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.6rem;
|
||||||
|
}
|
||||||
|
.fs-selected-name {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
letter-spacing: -0.01em;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
.fs-amount-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.fs-amount-input {
|
||||||
|
width: 5rem;
|
||||||
|
padding: 0.45rem 0.55rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
text-align: right;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.fs-amount-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--nord8);
|
||||||
|
}
|
||||||
|
.fs-unit-select {
|
||||||
|
padding: 0.45rem 0.4rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.fs-unit-select:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--nord8);
|
||||||
|
}
|
||||||
|
.fs-unit-label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Preview ── */
|
||||||
|
.fs-preview {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
padding: 0.5rem 0.6rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border-radius: 8px;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.fs-preview-grams {
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
.fs-preview-cal { font-weight: 700; color: var(--color-text-primary); }
|
||||||
|
.fs-preview-cal small { font-weight: 500; color: var(--color-text-secondary); }
|
||||||
|
.fs-preview-p { color: var(--nord14); font-weight: 600; }
|
||||||
|
.fs-preview-f { color: var(--nord12); font-weight: 600; }
|
||||||
|
.fs-preview-c { color: var(--nord9); font-weight: 600; }
|
||||||
|
|
||||||
|
/* ── Buttons ── */
|
||||||
|
.fs-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
.fs-btn-cancel {
|
||||||
|
padding: 0.5rem 1.1rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
.fs-btn-cancel:hover {
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
}
|
||||||
|
.fs-btn-confirm {
|
||||||
|
padding: 0.5rem 1.1rem;
|
||||||
|
background: var(--nord8);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
font-weight: 700;
|
||||||
|
transition: background 0.15s, transform 0.1s;
|
||||||
|
}
|
||||||
|
.fs-btn-confirm:hover {
|
||||||
|
background: var(--nord10);
|
||||||
|
}
|
||||||
|
.fs-btn-confirm:active {
|
||||||
|
transform: scale(0.97);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
383
src/lib/components/recipes/AddToFoodLogButton.svelte
Normal file
383
src/lib/components/recipes/AddToFoodLogButton.svelte
Normal file
@@ -0,0 +1,383 @@
|
|||||||
|
<script>
|
||||||
|
import { UtensilsCrossed, X } from 'lucide-svelte';
|
||||||
|
import { toast } from '$lib/js/toast.svelte';
|
||||||
|
|
||||||
|
let {
|
||||||
|
recipeName,
|
||||||
|
recipeId = '',
|
||||||
|
nutritionMappings = [],
|
||||||
|
referencedNutrition = [],
|
||||||
|
ingredients = [],
|
||||||
|
portions = '',
|
||||||
|
isEnglish = true,
|
||||||
|
} = $props();
|
||||||
|
|
||||||
|
// Flatten ingredient sections into a flat array with indices
|
||||||
|
const flatIngredients = $derived.by(() => {
|
||||||
|
const flat = [];
|
||||||
|
for (let si = 0; si < ingredients.length; si++) {
|
||||||
|
const section = ingredients[si];
|
||||||
|
const items = section?.list ?? section?.ingredients ?? section?.items ?? [];
|
||||||
|
for (let ii = 0; ii < items.length; ii++) {
|
||||||
|
const ing = items[ii];
|
||||||
|
flat.push({ name: ing.name, unit: ing.unit, amount: ing.amount, sectionIndex: si, ingredientIndex: ii });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return flat;
|
||||||
|
});
|
||||||
|
|
||||||
|
let showDialog = $state(false);
|
||||||
|
let portionAmount = $state('1');
|
||||||
|
let mealType = $state('lunch');
|
||||||
|
let saving = $state(false);
|
||||||
|
let customGrams = $state('');
|
||||||
|
let useGrams = $state(false);
|
||||||
|
|
||||||
|
const labels = $derived({
|
||||||
|
addToLog: isEnglish ? 'Add to food log' : 'Zum Ernährungstagebuch',
|
||||||
|
portions: isEnglish ? 'Portions' : 'Portionen',
|
||||||
|
grams: isEnglish ? 'Grams' : 'Gramm',
|
||||||
|
meal: isEnglish ? 'Meal' : 'Mahlzeit',
|
||||||
|
breakfast: isEnglish ? 'Breakfast' : 'Frühstück',
|
||||||
|
lunch: isEnglish ? 'Lunch' : 'Mittagessen',
|
||||||
|
dinner: isEnglish ? 'Dinner' : 'Abendessen',
|
||||||
|
snack: isEnglish ? 'Snack' : 'Snack',
|
||||||
|
log: isEnglish ? 'Log' : 'Eintragen',
|
||||||
|
cancel: isEnglish ? 'Cancel' : 'Abbrechen',
|
||||||
|
});
|
||||||
|
|
||||||
|
// Parse portion count from recipe's portions string (e.g. "4 Portionen")
|
||||||
|
const basePortionCount = $derived.by(() => {
|
||||||
|
if (!portions) return 0;
|
||||||
|
const match = portions.match(/^(\d+(?:[.,]\d+)?)/);
|
||||||
|
return match ? parseFloat(match[1].replace(',', '.')) : 0;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Parse amount string to number (simplified from nutrition.svelte.ts)
|
||||||
|
function parseAmount(amount) {
|
||||||
|
if (!amount?.trim()) return 0;
|
||||||
|
let s = amount.trim().replace(',', '.');
|
||||||
|
const rangeMatch = s.match(/^(\d+(?:\.\d+)?)\s*[-–]\s*(\d+(?:\.\d+)?)$/);
|
||||||
|
if (rangeMatch) return (parseFloat(rangeMatch[1]) + parseFloat(rangeMatch[2])) / 2;
|
||||||
|
const fractionMatch = s.match(/^(\d+)\s*\/\s*(\d+)$/);
|
||||||
|
if (fractionMatch) return parseInt(fractionMatch[1]) / parseInt(fractionMatch[2]);
|
||||||
|
const mixedMatch = s.match(/^(\d+)\s+(\d+)\s*\/\s*(\d+)$/);
|
||||||
|
if (mixedMatch) return parseInt(mixedMatch[1]) + parseInt(mixedMatch[2]) / parseInt(mixedMatch[3]);
|
||||||
|
const parsed = parseFloat(s);
|
||||||
|
return isNaN(parsed) ? 0 : parsed;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compute total recipe nutrition (all ingredients at multiplier=1)
|
||||||
|
const recipeTotals = $derived.by(() => {
|
||||||
|
const result = {};
|
||||||
|
const nutrientKeys = [
|
||||||
|
'calories', 'protein', 'fat', 'saturatedFat', 'carbs', 'fiber', 'sugars',
|
||||||
|
'calcium', 'iron', 'magnesium', 'phosphorus', 'potassium', 'sodium', 'zinc',
|
||||||
|
'vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK',
|
||||||
|
'thiamin', 'riboflavin', 'niacin', 'vitaminB6', 'vitaminB12', 'folate', 'cholesterol',
|
||||||
|
'isoleucine', 'leucine', 'lysine', 'methionine', 'phenylalanine',
|
||||||
|
'threonine', 'tryptophan', 'valine', 'histidine', 'alanine',
|
||||||
|
'arginine', 'asparticAcid', 'cysteine', 'glutamicAcid', 'glycine',
|
||||||
|
'proline', 'serine', 'tyrosine',
|
||||||
|
];
|
||||||
|
for (const k of nutrientKeys) result[k] = 0;
|
||||||
|
|
||||||
|
let totalWeightGrams = 0;
|
||||||
|
|
||||||
|
// Build mapping index
|
||||||
|
const mappingIndex = new Map();
|
||||||
|
for (const m of nutritionMappings) {
|
||||||
|
mappingIndex.set(`${m.sectionIndex}-${m.ingredientIndex}`, m);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const ing of flatIngredients) {
|
||||||
|
const mapping = mappingIndex.get(`${ing.sectionIndex}-${ing.ingredientIndex}`);
|
||||||
|
if (!mapping || mapping.matchMethod === 'none' || mapping.excluded || !mapping.per100g) continue;
|
||||||
|
if (!mapping.gramsPerUnit) continue;
|
||||||
|
|
||||||
|
const parsedAmount = parseAmount(ing.amount) || (mapping.defaultAmountUsed ? 1 : 0);
|
||||||
|
const grams = parsedAmount * mapping.gramsPerUnit;
|
||||||
|
totalWeightGrams += grams;
|
||||||
|
const factor = grams / 100;
|
||||||
|
|
||||||
|
for (const k of nutrientKeys) {
|
||||||
|
result[k] += factor * (mapping.per100g[k] ?? 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Add referenced recipe nutrition
|
||||||
|
for (const ref of referencedNutrition) {
|
||||||
|
const refMult = ref.baseMultiplier ?? 1;
|
||||||
|
for (const k of nutrientKeys) {
|
||||||
|
result[k] += (ref.nutrition?.[k] ?? 0) * refMult;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return { totals: result, totalWeightGrams };
|
||||||
|
});
|
||||||
|
|
||||||
|
// Per-100g for the entire recipe
|
||||||
|
const per100g = $derived.by(() => {
|
||||||
|
const w = recipeTotals.totalWeightGrams;
|
||||||
|
if (w <= 0) return recipeTotals.totals;
|
||||||
|
const result = {};
|
||||||
|
for (const [k, v] of Object.entries(recipeTotals.totals)) {
|
||||||
|
result[k] = v / w * 100;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Grams for the selected portion
|
||||||
|
const portionGrams = $derived.by(() => {
|
||||||
|
if (useGrams) return Number(customGrams) || 0;
|
||||||
|
const numPortions = Number(portionAmount) || 0;
|
||||||
|
if (basePortionCount <= 0 || numPortions <= 0) return 0;
|
||||||
|
return (recipeTotals.totalWeightGrams / basePortionCount) * numPortions;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Preview calories
|
||||||
|
const previewCal = $derived(portionGrams > 0 ? (per100g.calories ?? 0) * portionGrams / 100 : 0);
|
||||||
|
|
||||||
|
function openDialog() {
|
||||||
|
portionAmount = '1';
|
||||||
|
mealType = 'lunch';
|
||||||
|
customGrams = '';
|
||||||
|
useGrams = false;
|
||||||
|
showDialog = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function submit() {
|
||||||
|
const grams = portionGrams;
|
||||||
|
if (grams <= 0) return;
|
||||||
|
|
||||||
|
saving = true;
|
||||||
|
try {
|
||||||
|
const today = new Date().toISOString().slice(0, 10);
|
||||||
|
const res = await fetch('/api/fitness/food-log', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify({
|
||||||
|
date: today,
|
||||||
|
mealType,
|
||||||
|
name: recipeName,
|
||||||
|
source: 'recipe',
|
||||||
|
sourceId: recipeId,
|
||||||
|
amountGrams: Math.round(grams),
|
||||||
|
per100g,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
if (res.ok) {
|
||||||
|
toast.success(isEnglish ? 'Added to food log' : 'Zum Ernährungstagebuch hinzugefügt');
|
||||||
|
showDialog = false;
|
||||||
|
} else {
|
||||||
|
toast.error(isEnglish ? 'Failed to add' : 'Fehler beim Hinzufügen');
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
toast.error(isEnglish ? 'Failed to add' : 'Fehler beim Hinzufügen');
|
||||||
|
} finally {
|
||||||
|
saving = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<button class="add-to-log-btn" onclick={openDialog} title={labels.addToLog}>
|
||||||
|
<UtensilsCrossed size={14} />
|
||||||
|
<span>{labels.addToLog}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if showDialog}
|
||||||
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
|
<div class="dialog-overlay" onclick={() => showDialog = false} onkeydown={(e) => e.key === 'Escape' && (showDialog = false)}>
|
||||||
|
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||||
|
<div class="dialog" onclick={(e) => e.stopPropagation()}>
|
||||||
|
<div class="dialog-header">
|
||||||
|
<h3>{labels.addToLog}</h3>
|
||||||
|
<button class="close-btn" onclick={() => showDialog = false}><X size={18} /></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dialog-body">
|
||||||
|
<div class="field">
|
||||||
|
<label for="log-meal">{labels.meal}</label>
|
||||||
|
<select id="log-meal" bind:value={mealType}>
|
||||||
|
<option value="breakfast">{labels.breakfast}</option>
|
||||||
|
<option value="lunch">{labels.lunch}</option>
|
||||||
|
<option value="dinner">{labels.dinner}</option>
|
||||||
|
<option value="snack">{labels.snack}</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="amount-toggle">
|
||||||
|
<button class:active={!useGrams} onclick={() => useGrams = false}>{labels.portions}</button>
|
||||||
|
<button class:active={useGrams} onclick={() => useGrams = true}>{labels.grams}</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if useGrams}
|
||||||
|
<div class="field">
|
||||||
|
<label for="log-grams">{labels.grams}</label>
|
||||||
|
<input id="log-grams" type="number" bind:value={customGrams} min="1" />
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<div class="field">
|
||||||
|
<label for="log-portions">{labels.portions}</label>
|
||||||
|
<input id="log-portions" type="number" bind:value={portionAmount} min="0.25" step="0.25" />
|
||||||
|
{#if basePortionCount > 0}
|
||||||
|
<span class="portion-hint">{Math.round(portionGrams)}g</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if previewCal > 0}
|
||||||
|
<div class="preview">
|
||||||
|
{Math.round(previewCal)} kcal
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="dialog-actions">
|
||||||
|
<button class="btn-cancel" onclick={() => showDialog = false}>{labels.cancel}</button>
|
||||||
|
<button class="btn-primary" onclick={submit} disabled={saving || portionGrams <= 0}>
|
||||||
|
{saving ? '…' : labels.log}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.add-to-log-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--color-primary, var(--nord10));
|
||||||
|
padding: 0;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.3rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-decoration-style: dotted;
|
||||||
|
}
|
||||||
|
.add-to-log-btn:hover {
|
||||||
|
color: var(--nord15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-overlay {
|
||||||
|
position: fixed;
|
||||||
|
inset: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
}
|
||||||
|
.dialog {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: 0.75rem;
|
||||||
|
width: 90%;
|
||||||
|
max-width: 360px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.dialog-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.dialog-header h3 {
|
||||||
|
margin: 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.close-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-body {
|
||||||
|
padding: 1rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
.field {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.25rem;
|
||||||
|
}
|
||||||
|
.field label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.field input,
|
||||||
|
.field select {
|
||||||
|
padding: 0.5rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.amount-toggle {
|
||||||
|
display: flex;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.amount-toggle button {
|
||||||
|
flex: 1;
|
||||||
|
padding: 0.4rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border: none;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.amount-toggle button.active {
|
||||||
|
background: var(--nord8);
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.portion-hint {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.preview {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
justify-content: flex-end;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
border-top: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.btn-primary {
|
||||||
|
padding: 0.45rem 1rem;
|
||||||
|
background: var(--nord8);
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.btn-primary:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
.btn-cancel {
|
||||||
|
padding: 0.45rem 1rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -5,7 +5,10 @@ import { browser } from '$app/environment';
|
|||||||
import { page } from '$app/stores';
|
import { page } from '$app/stores';
|
||||||
import HefeSwapper from './HefeSwapper.svelte';
|
import HefeSwapper from './HefeSwapper.svelte';
|
||||||
import NutritionSummary from './NutritionSummary.svelte';
|
import NutritionSummary from './NutritionSummary.svelte';
|
||||||
|
import AddToFoodLogButton from './AddToFoodLogButton.svelte';
|
||||||
let { data } = $props();
|
let { data } = $props();
|
||||||
|
const isLoggedIn = $derived(!!data.session?.user);
|
||||||
|
const hasNutrition = $derived(!!data.nutritionMappings?.length);
|
||||||
|
|
||||||
// Helper function to multiply numbers in ingredient amounts
|
// Helper function to multiply numbers in ingredient amounts
|
||||||
/** @param {string} amount @param {number} multiplier */
|
/** @param {string} amount @param {number} multiplier */
|
||||||
@@ -635,6 +638,20 @@ const nutritionFlatIngredients = $derived.by(() => {
|
|||||||
{multiplier}
|
{multiplier}
|
||||||
portions={data.portions}
|
portions={data.portions}
|
||||||
isEnglish={isEnglish}
|
isEnglish={isEnglish}
|
||||||
|
>
|
||||||
|
{#snippet actions()}
|
||||||
|
{#if isLoggedIn && hasNutrition}
|
||||||
|
<AddToFoodLogButton
|
||||||
|
recipeName={data.strippedName || data.name}
|
||||||
|
recipeId={data._id}
|
||||||
|
nutritionMappings={data.nutritionMappings}
|
||||||
|
referencedNutrition={data.referencedNutrition || []}
|
||||||
|
ingredients={data.ingredients || []}
|
||||||
|
portions={data.portions || ''}
|
||||||
|
{isEnglish}
|
||||||
/>
|
/>
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
|
</NutritionSummary>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { createNutritionCalculator } from '$lib/js/nutrition.svelte';
|
import { createNutritionCalculator } from '$lib/js/nutrition.svelte';
|
||||||
|
|
||||||
let { flatIngredients, nutritionMappings, sectionNames, referencedNutrition, multiplier, portions, isEnglish } = $props();
|
let { flatIngredients, nutritionMappings, sectionNames, referencedNutrition, multiplier, portions, isEnglish, actions } = $props();
|
||||||
|
|
||||||
const nutrition = createNutritionCalculator(
|
const nutrition = createNutritionCalculator(
|
||||||
() => flatIngredients,
|
() => flatIngredients,
|
||||||
@@ -138,7 +138,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.details-toggle-row {
|
.details-toggle-row {
|
||||||
text-align: center;
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 0.75rem;
|
||||||
margin-top: 0.5rem;
|
margin-top: 0.5rem;
|
||||||
}
|
}
|
||||||
.details-toggle {
|
.details-toggle {
|
||||||
@@ -290,6 +293,9 @@
|
|||||||
<button class="details-toggle" onclick={() => showDetails = !showDetails}>
|
<button class="details-toggle" onclick={() => showDetails = !showDetails}>
|
||||||
{showDetails ? '−' : '+'} {labels.details}
|
{showDetails ? '−' : '+'} {labels.details}
|
||||||
</button>
|
</button>
|
||||||
|
{#if actions}
|
||||||
|
{@render actions()}
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|||||||
125
src/lib/data/dailyReferenceIntake.ts
Normal file
125
src/lib/data/dailyReferenceIntake.ts
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
/**
|
||||||
|
* Daily Reference Intake (DRI) values for micronutrients.
|
||||||
|
* Sources: WHO, EFSA, US DRI (IOM).
|
||||||
|
* Values are daily recommended amounts for adults.
|
||||||
|
* Units match NutritionPer100g: vitamins in mcg/mg as stored, minerals in mg.
|
||||||
|
*/
|
||||||
|
|
||||||
|
export type DRI = {
|
||||||
|
// Macros (g)
|
||||||
|
protein: number;
|
||||||
|
fat: number;
|
||||||
|
carbs: number;
|
||||||
|
fiber: number;
|
||||||
|
sugars: number; // max recommended
|
||||||
|
// Minerals (mg)
|
||||||
|
calcium: number;
|
||||||
|
iron: number;
|
||||||
|
magnesium: number;
|
||||||
|
phosphorus: number;
|
||||||
|
potassium: number;
|
||||||
|
sodium: number; // max recommended
|
||||||
|
zinc: number;
|
||||||
|
// Vitamins
|
||||||
|
vitaminA: number; // mcg RAE
|
||||||
|
vitaminC: number; // mg
|
||||||
|
vitaminD: number; // mcg
|
||||||
|
vitaminE: number; // mg
|
||||||
|
vitaminK: number; // mcg
|
||||||
|
thiamin: number; // mg
|
||||||
|
riboflavin: number; // mg
|
||||||
|
niacin: number; // mg
|
||||||
|
vitaminB6: number; // mg
|
||||||
|
vitaminB12: number; // mcg
|
||||||
|
folate: number; // mcg
|
||||||
|
cholesterol: number; // mg max
|
||||||
|
};
|
||||||
|
|
||||||
|
/** DRI for adult males (19-50) */
|
||||||
|
export const DRI_MALE: DRI = {
|
||||||
|
protein: 56,
|
||||||
|
fat: 78, // ~35% of 2000 kcal
|
||||||
|
carbs: 300,
|
||||||
|
fiber: 38,
|
||||||
|
sugars: 50, // WHO max free sugars
|
||||||
|
calcium: 1000,
|
||||||
|
iron: 8,
|
||||||
|
magnesium: 420,
|
||||||
|
phosphorus: 700,
|
||||||
|
potassium: 3400,
|
||||||
|
sodium: 2300,
|
||||||
|
zinc: 11,
|
||||||
|
vitaminA: 900,
|
||||||
|
vitaminC: 90,
|
||||||
|
vitaminD: 15,
|
||||||
|
vitaminE: 15,
|
||||||
|
vitaminK: 120,
|
||||||
|
thiamin: 1.2,
|
||||||
|
riboflavin: 1.3,
|
||||||
|
niacin: 16,
|
||||||
|
vitaminB6: 1.3,
|
||||||
|
vitaminB12: 2.4,
|
||||||
|
folate: 400,
|
||||||
|
cholesterol: 300,
|
||||||
|
};
|
||||||
|
|
||||||
|
/** DRI for adult females (19-50) */
|
||||||
|
export const DRI_FEMALE: DRI = {
|
||||||
|
protein: 46,
|
||||||
|
fat: 62, // ~35% of 1600 kcal
|
||||||
|
carbs: 250,
|
||||||
|
fiber: 25,
|
||||||
|
sugars: 50,
|
||||||
|
calcium: 1000,
|
||||||
|
iron: 18,
|
||||||
|
magnesium: 320,
|
||||||
|
phosphorus: 700,
|
||||||
|
potassium: 2600,
|
||||||
|
sodium: 2300,
|
||||||
|
zinc: 8,
|
||||||
|
vitaminA: 700,
|
||||||
|
vitaminC: 75,
|
||||||
|
vitaminD: 15,
|
||||||
|
vitaminE: 15,
|
||||||
|
vitaminK: 90,
|
||||||
|
thiamin: 1.1,
|
||||||
|
riboflavin: 1.1,
|
||||||
|
niacin: 14,
|
||||||
|
vitaminB6: 1.3,
|
||||||
|
vitaminB12: 2.4,
|
||||||
|
folate: 400,
|
||||||
|
cholesterol: 300,
|
||||||
|
};
|
||||||
|
|
||||||
|
/** Get DRI values by sex */
|
||||||
|
export function getDRI(sex: 'male' | 'female'): DRI {
|
||||||
|
return sex === 'female' ? DRI_FEMALE : DRI_MALE;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Nutrient display metadata: label, unit, and whether it's a max (upper limit) */
|
||||||
|
export const NUTRIENT_META: Record<keyof DRI, { label: string; labelDe: string; unit: string; isMax?: boolean }> = {
|
||||||
|
protein: { label: 'Protein', labelDe: 'Eiweiß', unit: 'g' },
|
||||||
|
fat: { label: 'Fat', labelDe: 'Fett', unit: 'g' },
|
||||||
|
carbs: { label: 'Carbs', labelDe: 'Kohlenhydrate', unit: 'g' },
|
||||||
|
fiber: { label: 'Fiber', labelDe: 'Ballaststoffe', unit: 'g' },
|
||||||
|
sugars: { label: 'Sugars', labelDe: 'Zucker', unit: 'g', isMax: true },
|
||||||
|
calcium: { label: 'Calcium', labelDe: 'Kalzium', unit: 'mg' },
|
||||||
|
iron: { label: 'Iron', labelDe: 'Eisen', unit: 'mg' },
|
||||||
|
magnesium: { label: 'Magnesium', labelDe: 'Magnesium', unit: 'mg' },
|
||||||
|
phosphorus: { label: 'Phosphorus', labelDe: 'Phosphor', unit: 'mg' },
|
||||||
|
potassium: { label: 'Potassium', labelDe: 'Kalium', unit: 'mg' },
|
||||||
|
sodium: { label: 'Sodium', labelDe: 'Natrium', unit: 'mg', isMax: true },
|
||||||
|
zinc: { label: 'Zinc', labelDe: 'Zink', unit: 'mg' },
|
||||||
|
vitaminA: { label: 'Vitamin A', labelDe: 'Vitamin A', unit: 'mcg' },
|
||||||
|
vitaminC: { label: 'Vitamin C', labelDe: 'Vitamin C', unit: 'mg' },
|
||||||
|
vitaminD: { label: 'Vitamin D', labelDe: 'Vitamin D', unit: 'mcg' },
|
||||||
|
vitaminE: { label: 'Vitamin E', labelDe: 'Vitamin E', unit: 'mg' },
|
||||||
|
vitaminK: { label: 'Vitamin K', labelDe: 'Vitamin K', unit: 'mcg' },
|
||||||
|
thiamin: { label: 'Thiamin (B1)', labelDe: 'Thiamin (B1)', unit: 'mg' },
|
||||||
|
riboflavin: { label: 'Riboflavin (B2)', labelDe: 'Riboflavin (B2)', unit: 'mg' },
|
||||||
|
niacin: { label: 'Niacin (B3)', labelDe: 'Niacin (B3)', unit: 'mg' },
|
||||||
|
vitaminB6: { label: 'Vitamin B6', labelDe: 'Vitamin B6', unit: 'mg' },
|
||||||
|
vitaminB12: { label: 'Vitamin B12', labelDe: 'Vitamin B12', unit: 'mcg' },
|
||||||
|
folate: { label: 'Folate', labelDe: 'Folsäure', unit: 'mcg' },
|
||||||
|
cholesterol: { label: 'Cholesterol', labelDe: 'Cholesterin', unit: 'mg', isMax: true },
|
||||||
|
};
|
||||||
@@ -1,8 +1,8 @@
|
|||||||
/** Fitness route i18n — slug mappings and UI translations */
|
/** Fitness route i18n — slug mappings and UI translations */
|
||||||
|
|
||||||
const slugMap: Record<string, Record<string, string>> = {
|
const slugMap: Record<string, Record<string, string>> = {
|
||||||
en: { statistik: 'stats', verlauf: 'history', training: 'workout', aktiv: 'active', uebungen: 'exercises', messen: 'measure' },
|
en: { statistik: 'stats', verlauf: 'history', training: 'workout', aktiv: 'active', uebungen: 'exercises', messen: 'measure', ernaehrung: 'nutrition' },
|
||||||
de: { stats: 'statistik', history: 'verlauf', workout: 'training', active: 'aktiv', exercises: 'uebungen', measure: 'messen' }
|
de: { stats: 'statistik', history: 'verlauf', workout: 'training', active: 'aktiv', exercises: 'uebungen', measure: 'messen', nutrition: 'ernaehrung' }
|
||||||
};
|
};
|
||||||
|
|
||||||
const germanSlugs = new Set(Object.keys(slugMap.en));
|
const germanSlugs = new Set(Object.keys(slugMap.en));
|
||||||
@@ -31,7 +31,8 @@ export function fitnessSlugs(lang: 'en' | 'de') {
|
|||||||
workout: lang === 'en' ? 'workout' : 'training',
|
workout: lang === 'en' ? 'workout' : 'training',
|
||||||
active: lang === 'en' ? 'active' : 'aktiv',
|
active: lang === 'en' ? 'active' : 'aktiv',
|
||||||
exercises: lang === 'en' ? 'exercises' : 'uebungen',
|
exercises: lang === 'en' ? 'exercises' : 'uebungen',
|
||||||
measure: lang === 'en' ? 'measure' : 'messen'
|
measure: lang === 'en' ? 'measure' : 'messen',
|
||||||
|
nutrition: lang === 'en' ? 'nutrition' : 'ernaehrung'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -42,7 +43,8 @@ export function fitnessLabels(lang: 'en' | 'de') {
|
|||||||
history: lang === 'en' ? 'History' : 'Verlauf',
|
history: lang === 'en' ? 'History' : 'Verlauf',
|
||||||
workout: lang === 'en' ? 'Workout' : 'Training',
|
workout: lang === 'en' ? 'Workout' : 'Training',
|
||||||
exercises: lang === 'en' ? 'Exercises' : 'Übungen',
|
exercises: lang === 'en' ? 'Exercises' : 'Übungen',
|
||||||
measure: lang === 'en' ? 'Measure' : 'Messen'
|
measure: lang === 'en' ? 'Measure' : 'Messen',
|
||||||
|
nutrition: lang === 'en' ? 'Nutrition' : 'Ernährung'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -80,6 +82,7 @@ const translations: Translations = {
|
|||||||
male: { en: 'Male', de: 'Männlich' },
|
male: { en: 'Male', de: 'Männlich' },
|
||||||
female: { en: 'Female', de: 'Weiblich' },
|
female: { en: 'Female', de: 'Weiblich' },
|
||||||
height: { en: 'Height (cm)', de: 'Grösse (cm)' },
|
height: { en: 'Height (cm)', de: 'Grösse (cm)' },
|
||||||
|
birth_year: { en: 'Birth Year', de: 'Geburtsjahr' },
|
||||||
no_workout_data: { en: 'No workout data to display yet.', de: 'Noch keine Trainingsdaten vorhanden.' },
|
no_workout_data: { en: 'No workout data to display yet.', de: 'Noch keine Trainingsdaten vorhanden.' },
|
||||||
weight: { en: 'Weight', de: 'Gewicht' },
|
weight: { en: 'Weight', de: 'Gewicht' },
|
||||||
|
|
||||||
@@ -263,6 +266,67 @@ const translations: Translations = {
|
|||||||
label_tempo: { en: 'Tempo', de: 'Tempo' },
|
label_tempo: { en: 'Tempo', de: 'Tempo' },
|
||||||
label_warm_up: { en: 'Warm Up', de: 'Aufwärmen' },
|
label_warm_up: { en: 'Warm Up', de: 'Aufwärmen' },
|
||||||
label_cool_down: { en: 'Cool Down', de: 'Abkühlen' },
|
label_cool_down: { en: 'Cool Down', de: 'Abkühlen' },
|
||||||
|
|
||||||
|
// Nutrition / Food log
|
||||||
|
nutrition_title: { en: 'Nutrition', de: 'Ernährung' },
|
||||||
|
breakfast: { en: 'Breakfast', de: 'Frühstück' },
|
||||||
|
lunch: { en: 'Lunch', de: 'Mittagessen' },
|
||||||
|
dinner: { en: 'Dinner', de: 'Abendessen' },
|
||||||
|
snack: { en: 'Snack', de: 'Snack' },
|
||||||
|
add_food: { en: 'Add food', de: 'Essen hinzufügen' },
|
||||||
|
search_food: { en: 'Search food…', de: 'Essen suchen…' },
|
||||||
|
amount_grams: { en: 'Amount (g)', de: 'Menge (g)' },
|
||||||
|
meal_type: { en: 'Meal', de: 'Mahlzeit' },
|
||||||
|
daily_goal: { en: 'Daily Goal', de: 'Tagesziel' },
|
||||||
|
calorie_target: { en: 'Calorie target (kcal)', de: 'Kalorienziel (kcal)' },
|
||||||
|
protein_goal: { en: 'Protein goal', de: 'Proteinziel' },
|
||||||
|
protein_fixed: { en: 'Fixed (g/day)', de: 'Fest (g/Tag)' },
|
||||||
|
protein_per_kg: { en: 'Per kg bodyweight', de: 'Pro kg Körpergewicht' },
|
||||||
|
fat_percent: { en: 'Fat (%)', de: 'Fett (%)' },
|
||||||
|
carb_percent: { en: 'Carbs (%)', de: 'Kohlenhydrate (%)' },
|
||||||
|
kcal: { en: 'kcal', de: 'kcal' },
|
||||||
|
protein: { en: 'Protein', de: 'Protein' },
|
||||||
|
fat: { en: 'Fat', de: 'Fett' },
|
||||||
|
carbs: { en: 'Carbs', de: 'Kohlenhydrate' },
|
||||||
|
remaining: { en: 'remaining', de: 'übrig' },
|
||||||
|
over: { en: 'over', de: 'über' },
|
||||||
|
no_entries_yet: { en: 'No entries yet. Add food to start tracking.', de: 'Noch keine Einträge. Füge Essen hinzu, um zu tracken.' },
|
||||||
|
set_goal_prompt: { en: 'Set a daily calorie goal to start tracking.', de: 'Setze ein Kalorienziel, um mit dem Tracking zu beginnen.' },
|
||||||
|
micro_details: { en: 'Micronutrients', de: 'Mikronährstoffe' },
|
||||||
|
of_daily: { en: 'of daily goal', de: 'vom Tagesziel' },
|
||||||
|
per_serving: { en: 'per serving', de: 'pro Portion' },
|
||||||
|
log_food: { en: 'Log', de: 'Eintragen' },
|
||||||
|
delete_entry_confirm: { en: 'Delete this food entry?', de: 'Diesen Eintrag löschen?' },
|
||||||
|
|
||||||
|
// Custom meals
|
||||||
|
custom_meals: { en: 'Custom Meals', de: 'Eigene Mahlzeiten' },
|
||||||
|
custom_meal: { en: 'Custom Meal', de: 'Eigene Mahlzeit' },
|
||||||
|
new_meal: { en: 'New Meal', de: 'Neue Mahlzeit' },
|
||||||
|
meal_name: { en: 'Meal name', de: 'Name der Mahlzeit' },
|
||||||
|
add_ingredient: { en: 'Add ingredient', de: 'Zutat hinzufügen' },
|
||||||
|
no_custom_meals: { en: 'No custom meals yet.', de: 'Noch keine eigenen Mahlzeiten.' },
|
||||||
|
create_meal_hint: { en: 'Create reusable meals for quick logging.', de: 'Erstelle wiederverwendbare Mahlzeiten zum schnellen Eintragen.' },
|
||||||
|
ingredients: { en: 'Ingredients', de: 'Zutaten' },
|
||||||
|
total: { en: 'Total', de: 'Gesamt' },
|
||||||
|
log_meal: { en: 'Log Meal', de: 'Mahlzeit eintragen' },
|
||||||
|
delete_meal_confirm: { en: 'Delete this custom meal?', de: 'Diese Mahlzeit löschen?' },
|
||||||
|
save_meal: { en: 'Save Meal', de: 'Mahlzeit speichern' },
|
||||||
|
|
||||||
|
// Favorites
|
||||||
|
favorites: { en: 'Favorites', de: 'Favoriten' },
|
||||||
|
|
||||||
|
// Ingredient detail
|
||||||
|
per_100g: { en: 'per 100 g', de: 'pro 100 g' },
|
||||||
|
macros: { en: 'Macronutrients', de: 'Makronährstoffe' },
|
||||||
|
minerals: { en: 'Minerals', de: 'Mineralstoffe' },
|
||||||
|
vitamins: { en: 'Vitamins', de: 'Vitamine' },
|
||||||
|
amino_acids: { en: 'Amino Acids', de: 'Aminosäuren' },
|
||||||
|
essential: { en: 'Essential', de: 'Essenziell' },
|
||||||
|
non_essential: { en: 'Non-Essential', de: 'Nicht-essenziell' },
|
||||||
|
saturated_fat: { en: 'Saturated Fat', de: 'Gesättigte Fettsäuren' },
|
||||||
|
fiber: { en: 'Fiber', de: 'Ballaststoffe' },
|
||||||
|
sugars: { en: 'Sugars', de: 'Zucker' },
|
||||||
|
source_db: { en: 'Source', de: 'Quelle' },
|
||||||
};
|
};
|
||||||
|
|
||||||
/** Get a translated string */
|
/** Get a translated string */
|
||||||
|
|||||||
79
src/models/CustomMeal.ts
Normal file
79
src/models/CustomMeal.ts
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
import mongoose from 'mongoose';
|
||||||
|
|
||||||
|
interface ICustomMealIngredient {
|
||||||
|
name: string;
|
||||||
|
source: 'bls' | 'usda' | 'custom';
|
||||||
|
sourceId?: string;
|
||||||
|
amountGrams: number;
|
||||||
|
portions?: { description: string; grams: number }[];
|
||||||
|
selectedPortion?: { description: string; grams: number };
|
||||||
|
per100g: {
|
||||||
|
calories: number; protein: number; fat: number; saturatedFat: number;
|
||||||
|
carbs: number; fiber: number; sugars: number;
|
||||||
|
calcium: number; iron: number; magnesium: number; phosphorus: number;
|
||||||
|
potassium: number; sodium: number; zinc: number;
|
||||||
|
vitaminA: number; vitaminC: number; vitaminD: number; vitaminE: number;
|
||||||
|
vitaminK: number; thiamin: number; riboflavin: number; niacin: number;
|
||||||
|
vitaminB6: number; vitaminB12: number; folate: number; cholesterol: number;
|
||||||
|
isoleucine?: number; leucine?: number; lysine?: number; methionine?: number;
|
||||||
|
phenylalanine?: number; threonine?: number; tryptophan?: number; valine?: number;
|
||||||
|
histidine?: number; alanine?: number; arginine?: number; asparticAcid?: number;
|
||||||
|
cysteine?: number; glutamicAcid?: number; glycine?: number; proline?: number;
|
||||||
|
serine?: number; tyrosine?: number;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ICustomMeal {
|
||||||
|
_id?: string;
|
||||||
|
name: string;
|
||||||
|
ingredients: ICustomMealIngredient[];
|
||||||
|
createdBy: string;
|
||||||
|
createdAt?: Date;
|
||||||
|
updatedAt?: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NutritionSnapshotSchema = new mongoose.Schema({
|
||||||
|
calories: Number, protein: Number, fat: Number, saturatedFat: Number,
|
||||||
|
carbs: Number, fiber: Number, sugars: Number,
|
||||||
|
calcium: Number, iron: Number, magnesium: Number, phosphorus: Number,
|
||||||
|
potassium: Number, sodium: Number, zinc: Number,
|
||||||
|
vitaminA: Number, vitaminC: Number, vitaminD: Number, vitaminE: Number,
|
||||||
|
vitaminK: Number, thiamin: Number, riboflavin: Number, niacin: Number,
|
||||||
|
vitaminB6: Number, vitaminB12: Number, folate: Number, cholesterol: Number,
|
||||||
|
isoleucine: Number, leucine: Number, lysine: Number, methionine: Number,
|
||||||
|
phenylalanine: Number, threonine: Number, tryptophan: Number, valine: Number,
|
||||||
|
histidine: Number, alanine: Number, arginine: Number, asparticAcid: Number,
|
||||||
|
cysteine: Number, glutamicAcid: Number, glycine: Number, proline: Number,
|
||||||
|
serine: Number, tyrosine: Number,
|
||||||
|
}, { _id: false });
|
||||||
|
|
||||||
|
const PortionSchema = new mongoose.Schema({
|
||||||
|
description: { type: String, required: true },
|
||||||
|
grams: { type: Number, required: true },
|
||||||
|
}, { _id: false });
|
||||||
|
|
||||||
|
const IngredientSchema = new mongoose.Schema({
|
||||||
|
name: { type: String, required: true, trim: true },
|
||||||
|
source: { type: String, enum: ['bls', 'usda', 'custom'], required: true },
|
||||||
|
sourceId: { type: String },
|
||||||
|
amountGrams: { type: Number, required: true, min: 0 },
|
||||||
|
portions: { type: [PortionSchema], default: undefined },
|
||||||
|
selectedPortion: { type: PortionSchema, default: undefined },
|
||||||
|
per100g: { type: NutritionSnapshotSchema, required: true },
|
||||||
|
}, { _id: false });
|
||||||
|
|
||||||
|
const CustomMealSchema = new mongoose.Schema(
|
||||||
|
{
|
||||||
|
name: { type: String, required: true, trim: true },
|
||||||
|
ingredients: { type: [IngredientSchema], required: true, validate: [(v: any[]) => v.length > 0, 'At least one ingredient is required'] },
|
||||||
|
createdBy: { type: String, required: true },
|
||||||
|
},
|
||||||
|
{ timestamps: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
CustomMealSchema.index({ createdBy: 1 });
|
||||||
|
|
||||||
|
let _model: mongoose.Model<ICustomMeal>;
|
||||||
|
try { _model = mongoose.model<ICustomMeal>('CustomMeal'); } catch { _model = mongoose.model<ICustomMeal>('CustomMeal', CustomMealSchema); }
|
||||||
|
export const CustomMeal = _model;
|
||||||
|
export type { ICustomMeal, ICustomMealIngredient };
|
||||||
24
src/models/FavoriteIngredient.ts
Normal file
24
src/models/FavoriteIngredient.ts
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import mongoose from 'mongoose';
|
||||||
|
|
||||||
|
const FavoriteIngredientSchema = new mongoose.Schema(
|
||||||
|
{
|
||||||
|
source: { type: String, enum: ['bls', 'usda'], required: true },
|
||||||
|
sourceId: { type: String, required: true },
|
||||||
|
name: { type: String, required: true },
|
||||||
|
createdBy: { type: String, required: true },
|
||||||
|
},
|
||||||
|
{ timestamps: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
FavoriteIngredientSchema.index({ createdBy: 1, source: 1, sourceId: 1 }, { unique: true });
|
||||||
|
|
||||||
|
interface IFavoriteIngredient {
|
||||||
|
source: 'bls' | 'usda';
|
||||||
|
sourceId: string;
|
||||||
|
name: string;
|
||||||
|
createdBy: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
let _model: mongoose.Model<IFavoriteIngredient>;
|
||||||
|
try { _model = mongoose.model<IFavoriteIngredient>("FavoriteIngredient"); } catch { _model = mongoose.model<IFavoriteIngredient>("FavoriteIngredient", FavoriteIngredientSchema); }
|
||||||
|
export const FavoriteIngredient = _model;
|
||||||
@@ -5,7 +5,14 @@ const FitnessGoalSchema = new mongoose.Schema(
|
|||||||
username: { type: String, required: true, unique: true },
|
username: { type: String, required: true, unique: true },
|
||||||
weeklyWorkouts: { type: Number, required: true, default: 4, min: 1, max: 14 },
|
weeklyWorkouts: { type: Number, required: true, default: 4, min: 1, max: 14 },
|
||||||
sex: { type: String, enum: ['male', 'female'], default: 'male' },
|
sex: { type: String, enum: ['male', 'female'], default: 'male' },
|
||||||
heightCm: { type: Number, min: 100, max: 250 }
|
heightCm: { type: Number, min: 100, max: 250 },
|
||||||
|
birthYear: { type: Number, min: 1900, max: 2020 },
|
||||||
|
activityLevel: { type: String, enum: ['sedentary', 'light', 'moderate', 'very_active'], default: 'light' },
|
||||||
|
dailyCalories: { type: Number, min: 500, max: 10000 },
|
||||||
|
proteinMode: { type: String, enum: ['fixed', 'per_kg'] },
|
||||||
|
proteinTarget: { type: Number, min: 0 },
|
||||||
|
fatPercent: { type: Number, min: 0, max: 100 },
|
||||||
|
carbPercent: { type: Number, min: 0, max: 100 },
|
||||||
},
|
},
|
||||||
{ timestamps: true }
|
{ timestamps: true }
|
||||||
);
|
);
|
||||||
@@ -15,6 +22,13 @@ interface IFitnessGoal {
|
|||||||
weeklyWorkouts: number;
|
weeklyWorkouts: number;
|
||||||
sex?: 'male' | 'female';
|
sex?: 'male' | 'female';
|
||||||
heightCm?: number;
|
heightCm?: number;
|
||||||
|
birthYear?: number;
|
||||||
|
activityLevel?: 'sedentary' | 'light' | 'moderate' | 'very_active';
|
||||||
|
dailyCalories?: number;
|
||||||
|
proteinMode?: 'fixed' | 'per_kg';
|
||||||
|
proteinTarget?: number;
|
||||||
|
fatPercent?: number;
|
||||||
|
carbPercent?: number;
|
||||||
}
|
}
|
||||||
|
|
||||||
let _model: mongoose.Model<IFitnessGoal>;
|
let _model: mongoose.Model<IFitnessGoal>;
|
||||||
|
|||||||
64
src/models/FoodLogEntry.ts
Normal file
64
src/models/FoodLogEntry.ts
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import mongoose from 'mongoose';
|
||||||
|
|
||||||
|
interface IFoodLogEntry {
|
||||||
|
_id?: string;
|
||||||
|
date: Date;
|
||||||
|
mealType: 'breakfast' | 'lunch' | 'dinner' | 'snack';
|
||||||
|
name: string;
|
||||||
|
source: 'bls' | 'usda' | 'recipe' | 'custom';
|
||||||
|
sourceId?: string;
|
||||||
|
amountGrams: number;
|
||||||
|
per100g: {
|
||||||
|
calories: number; protein: number; fat: number; saturatedFat: number;
|
||||||
|
carbs: number; fiber: number; sugars: number;
|
||||||
|
calcium: number; iron: number; magnesium: number; phosphorus: number;
|
||||||
|
potassium: number; sodium: number; zinc: number;
|
||||||
|
vitaminA: number; vitaminC: number; vitaminD: number; vitaminE: number;
|
||||||
|
vitaminK: number; thiamin: number; riboflavin: number; niacin: number;
|
||||||
|
vitaminB6: number; vitaminB12: number; folate: number; cholesterol: number;
|
||||||
|
isoleucine?: number; leucine?: number; lysine?: number; methionine?: number;
|
||||||
|
phenylalanine?: number; threonine?: number; tryptophan?: number; valine?: number;
|
||||||
|
histidine?: number; alanine?: number; arginine?: number; asparticAcid?: number;
|
||||||
|
cysteine?: number; glutamicAcid?: number; glycine?: number; proline?: number;
|
||||||
|
serine?: number; tyrosine?: number;
|
||||||
|
};
|
||||||
|
createdBy: string;
|
||||||
|
createdAt?: Date;
|
||||||
|
updatedAt?: Date;
|
||||||
|
}
|
||||||
|
|
||||||
|
const NutritionSnapshotSchema = new mongoose.Schema({
|
||||||
|
calories: Number, protein: Number, fat: Number, saturatedFat: Number,
|
||||||
|
carbs: Number, fiber: Number, sugars: Number,
|
||||||
|
calcium: Number, iron: Number, magnesium: Number, phosphorus: Number,
|
||||||
|
potassium: Number, sodium: Number, zinc: Number,
|
||||||
|
vitaminA: Number, vitaminC: Number, vitaminD: Number, vitaminE: Number,
|
||||||
|
vitaminK: Number, thiamin: Number, riboflavin: Number, niacin: Number,
|
||||||
|
vitaminB6: Number, vitaminB12: Number, folate: Number, cholesterol: Number,
|
||||||
|
isoleucine: Number, leucine: Number, lysine: Number, methionine: Number,
|
||||||
|
phenylalanine: Number, threonine: Number, tryptophan: Number, valine: Number,
|
||||||
|
histidine: Number, alanine: Number, arginine: Number, asparticAcid: Number,
|
||||||
|
cysteine: Number, glutamicAcid: Number, glycine: Number, proline: Number,
|
||||||
|
serine: Number, tyrosine: Number,
|
||||||
|
}, { _id: false });
|
||||||
|
|
||||||
|
const FoodLogEntrySchema = new mongoose.Schema(
|
||||||
|
{
|
||||||
|
date: { type: Date, required: true },
|
||||||
|
mealType: { type: String, enum: ['breakfast', 'lunch', 'dinner', 'snack'], required: true },
|
||||||
|
name: { type: String, required: true, trim: true },
|
||||||
|
source: { type: String, enum: ['bls', 'usda', 'recipe', 'custom'], required: true },
|
||||||
|
sourceId: { type: String },
|
||||||
|
amountGrams: { type: Number, required: true, min: 0 },
|
||||||
|
per100g: { type: NutritionSnapshotSchema, required: true },
|
||||||
|
createdBy: { type: String, required: true },
|
||||||
|
},
|
||||||
|
{ timestamps: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
FoodLogEntrySchema.index({ createdBy: 1, date: -1 });
|
||||||
|
|
||||||
|
let _model: mongoose.Model<IFoodLogEntry>;
|
||||||
|
try { _model = mongoose.model<IFoodLogEntry>('FoodLogEntry'); } catch { _model = mongoose.model<IFoodLogEntry>('FoodLogEntry', FoodLogEntrySchema); }
|
||||||
|
export const FoodLogEntry = _model;
|
||||||
|
export type { IFoodLogEntry };
|
||||||
5
src/params/fitnessNutrition.ts
Normal file
5
src/params/fitnessNutrition.ts
Normal file
@@ -0,0 +1,5 @@
|
|||||||
|
import type { ParamMatcher } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
export const match: ParamMatcher = (param) => {
|
||||||
|
return param === 'nutrition' || param === 'ernaehrung';
|
||||||
|
};
|
||||||
@@ -281,7 +281,6 @@ h2{
|
|||||||
@keyframes slide-down {
|
@keyframes slide-down {
|
||||||
to { transform: translateY(var(--title-slide, 100vh)); }
|
to { transform: translateY(var(--title-slide, 100vh)); }
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<title>{data.strippedName} - {labels.title}</title>
|
<title>{data.strippedName} - {labels.title}</title>
|
||||||
|
|||||||
32
src/routes/api/fitness/custom-meals/+server.ts
Normal file
32
src/routes/api/fitness/custom-meals/+server.ts
Normal file
@@ -0,0 +1,32 @@
|
|||||||
|
import { json, error } from '@sveltejs/kit';
|
||||||
|
import type { RequestHandler } from './$types';
|
||||||
|
import { requireAuth } from '$lib/server/middleware/auth';
|
||||||
|
import { dbConnect } from '$utils/db';
|
||||||
|
import { CustomMeal } from '$models/CustomMeal';
|
||||||
|
|
||||||
|
export const GET: RequestHandler = async ({ locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const meals = await CustomMeal.find({ createdBy: user.nickname }).sort({ updatedAt: -1 }).lean();
|
||||||
|
return json({ meals });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const POST: RequestHandler = async ({ request, locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const { name, ingredients } = body;
|
||||||
|
|
||||||
|
if (!name?.trim()) throw error(400, 'name is required');
|
||||||
|
if (!Array.isArray(ingredients) || ingredients.length === 0) throw error(400, 'At least one ingredient is required');
|
||||||
|
|
||||||
|
const meal = await CustomMeal.create({
|
||||||
|
name: name.trim(),
|
||||||
|
ingredients,
|
||||||
|
createdBy: user.nickname,
|
||||||
|
});
|
||||||
|
|
||||||
|
return json(meal.toObject(), { status: 201 });
|
||||||
|
};
|
||||||
39
src/routes/api/fitness/custom-meals/[id]/+server.ts
Normal file
39
src/routes/api/fitness/custom-meals/[id]/+server.ts
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
import { json, error } from '@sveltejs/kit';
|
||||||
|
import type { RequestHandler } from './$types';
|
||||||
|
import { requireAuth } from '$lib/server/middleware/auth';
|
||||||
|
import { dbConnect } from '$utils/db';
|
||||||
|
import { CustomMeal } from '$models/CustomMeal';
|
||||||
|
|
||||||
|
export const PUT: RequestHandler = async ({ params, request, locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const meal = await CustomMeal.findById(params.id);
|
||||||
|
if (!meal) throw error(404, 'Meal not found');
|
||||||
|
if (meal.createdBy !== user.nickname) throw error(403, 'Not authorized');
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
if (body.name !== undefined) {
|
||||||
|
if (!body.name?.trim()) throw error(400, 'name cannot be empty');
|
||||||
|
meal.name = body.name.trim();
|
||||||
|
}
|
||||||
|
if (body.ingredients !== undefined) {
|
||||||
|
if (!Array.isArray(body.ingredients) || body.ingredients.length === 0) throw error(400, 'At least one ingredient is required');
|
||||||
|
meal.ingredients = body.ingredients;
|
||||||
|
}
|
||||||
|
|
||||||
|
await meal.save();
|
||||||
|
return json(meal.toObject());
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DELETE: RequestHandler = async ({ params, locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const deleted = await CustomMeal.findOneAndDelete({
|
||||||
|
_id: params.id,
|
||||||
|
createdBy: user.nickname,
|
||||||
|
});
|
||||||
|
if (!deleted) throw error(404, 'Meal not found');
|
||||||
|
return json({ ok: true });
|
||||||
|
};
|
||||||
54
src/routes/api/fitness/favorite-ingredients/+server.ts
Normal file
54
src/routes/api/fitness/favorite-ingredients/+server.ts
Normal file
@@ -0,0 +1,54 @@
|
|||||||
|
import { json } from '@sveltejs/kit';
|
||||||
|
import type { RequestHandler } from './$types';
|
||||||
|
import { requireAuth } from '$lib/server/middleware/auth';
|
||||||
|
import { dbConnect } from '$utils/db';
|
||||||
|
import { FavoriteIngredient } from '$models/FavoriteIngredient';
|
||||||
|
|
||||||
|
export const GET: RequestHandler = async ({ locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const favorites = await FavoriteIngredient.find({ createdBy: user.nickname }).lean();
|
||||||
|
return json({ favorites });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const POST: RequestHandler = async ({ request, locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
const { source, sourceId, name } = await request.json();
|
||||||
|
|
||||||
|
if (!source || !sourceId || !name) {
|
||||||
|
return json({ error: 'source, sourceId, and name are required' }, { status: 400 });
|
||||||
|
}
|
||||||
|
if (source !== 'bls' && source !== 'usda') {
|
||||||
|
return json({ error: 'source must be "bls" or "usda"' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
await FavoriteIngredient.findOneAndUpdate(
|
||||||
|
{ createdBy: user.nickname, source, sourceId: String(sourceId) },
|
||||||
|
{ createdBy: user.nickname, source, sourceId: String(sourceId), name },
|
||||||
|
{ upsert: true, new: true }
|
||||||
|
);
|
||||||
|
|
||||||
|
return json({ ok: true }, { status: 201 });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DELETE: RequestHandler = async ({ request, locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
const { source, sourceId } = await request.json();
|
||||||
|
|
||||||
|
if (!source || !sourceId) {
|
||||||
|
return json({ error: 'source and sourceId are required' }, { status: 400 });
|
||||||
|
}
|
||||||
|
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
await FavoriteIngredient.deleteOne({
|
||||||
|
createdBy: user.nickname,
|
||||||
|
source,
|
||||||
|
sourceId: String(sourceId),
|
||||||
|
});
|
||||||
|
|
||||||
|
return json({ ok: true });
|
||||||
|
};
|
||||||
62
src/routes/api/fitness/food-log/+server.ts
Normal file
62
src/routes/api/fitness/food-log/+server.ts
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
import { json, error } from '@sveltejs/kit';
|
||||||
|
import type { RequestHandler } from './$types';
|
||||||
|
import { requireAuth } from '$lib/server/middleware/auth';
|
||||||
|
import { dbConnect } from '$utils/db';
|
||||||
|
import { FoodLogEntry } from '$models/FoodLogEntry';
|
||||||
|
|
||||||
|
const VALID_MEALS = ['breakfast', 'lunch', 'dinner', 'snack'];
|
||||||
|
|
||||||
|
export const GET: RequestHandler = async ({ locals, url }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const dateParam = url.searchParams.get('date');
|
||||||
|
const from = url.searchParams.get('from');
|
||||||
|
const to = url.searchParams.get('to');
|
||||||
|
|
||||||
|
const query: Record<string, any> = { createdBy: user.nickname };
|
||||||
|
|
||||||
|
if (dateParam) {
|
||||||
|
const d = new Date(dateParam + 'T00:00:00.000Z');
|
||||||
|
const next = new Date(d);
|
||||||
|
next.setUTCDate(next.getUTCDate() + 1);
|
||||||
|
query.date = { $gte: d, $lt: next };
|
||||||
|
} else if (from || to) {
|
||||||
|
query.date = {};
|
||||||
|
if (from) query.date.$gte = new Date(from + 'T00:00:00.000Z');
|
||||||
|
if (to) {
|
||||||
|
const t = new Date(to + 'T00:00:00.000Z');
|
||||||
|
t.setUTCDate(t.getUTCDate() + 1);
|
||||||
|
query.date.$lt = t;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const entries = await FoodLogEntry.find(query).sort({ date: -1, mealType: 1 }).lean();
|
||||||
|
return json({ entries });
|
||||||
|
};
|
||||||
|
|
||||||
|
export const POST: RequestHandler = async ({ request, locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const { date, mealType, name, source, sourceId, amountGrams, per100g } = body;
|
||||||
|
|
||||||
|
if (!date || !name?.trim()) throw error(400, 'date and name are required');
|
||||||
|
if (!VALID_MEALS.includes(mealType)) throw error(400, 'Invalid mealType');
|
||||||
|
if (typeof amountGrams !== 'number' || amountGrams <= 0) throw error(400, 'amountGrams must be positive');
|
||||||
|
if (!per100g || typeof per100g.calories !== 'number') throw error(400, 'per100g with calories is required');
|
||||||
|
|
||||||
|
const entry = await FoodLogEntry.create({
|
||||||
|
date: new Date(date + 'T00:00:00.000Z'),
|
||||||
|
mealType,
|
||||||
|
name: name.trim(),
|
||||||
|
source: source || 'custom',
|
||||||
|
sourceId,
|
||||||
|
amountGrams,
|
||||||
|
per100g,
|
||||||
|
createdBy: user.nickname,
|
||||||
|
});
|
||||||
|
|
||||||
|
return json(entry.toObject(), { status: 201 });
|
||||||
|
};
|
||||||
35
src/routes/api/fitness/food-log/[id]/+server.ts
Normal file
35
src/routes/api/fitness/food-log/[id]/+server.ts
Normal file
@@ -0,0 +1,35 @@
|
|||||||
|
import { json, error } from '@sveltejs/kit';
|
||||||
|
import type { RequestHandler } from './$types';
|
||||||
|
import { requireAuth } from '$lib/server/middleware/auth';
|
||||||
|
import { dbConnect } from '$utils/db';
|
||||||
|
import { FoodLogEntry } from '$models/FoodLogEntry';
|
||||||
|
|
||||||
|
export const PUT: RequestHandler = async ({ params, request, locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const entry = await FoodLogEntry.findById(params.id);
|
||||||
|
if (!entry) throw error(404, 'Entry not found');
|
||||||
|
if (entry.createdBy !== user.nickname) throw error(403, 'Not authorized');
|
||||||
|
|
||||||
|
const body = await request.json();
|
||||||
|
const allowed = ['amountGrams', 'mealType', 'name'] as const;
|
||||||
|
for (const key of allowed) {
|
||||||
|
if (body[key] !== undefined) (entry as any)[key] = body[key];
|
||||||
|
}
|
||||||
|
|
||||||
|
await entry.save();
|
||||||
|
return json(entry.toObject());
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DELETE: RequestHandler = async ({ params, locals }) => {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
|
||||||
|
const deleted = await FoodLogEntry.findOneAndDelete({
|
||||||
|
_id: params.id,
|
||||||
|
createdBy: user.nickname,
|
||||||
|
});
|
||||||
|
if (!deleted) throw error(404, 'Entry not found');
|
||||||
|
return json({ ok: true });
|
||||||
|
};
|
||||||
@@ -12,13 +12,22 @@ export const GET: RequestHandler = async ({ locals }) => {
|
|||||||
const goal = await FitnessGoal.findOne({ username: user.nickname }).lean() as any;
|
const goal = await FitnessGoal.findOne({ username: user.nickname }).lean() as any;
|
||||||
const weeklyWorkouts = goal?.weeklyWorkouts ?? null;
|
const weeklyWorkouts = goal?.weeklyWorkouts ?? null;
|
||||||
|
|
||||||
|
const nutritionGoals = {
|
||||||
|
activityLevel: goal?.activityLevel ?? 'light',
|
||||||
|
dailyCalories: goal?.dailyCalories ?? null,
|
||||||
|
proteinMode: goal?.proteinMode ?? null,
|
||||||
|
proteinTarget: goal?.proteinTarget ?? null,
|
||||||
|
fatPercent: goal?.fatPercent ?? null,
|
||||||
|
carbPercent: goal?.carbPercent ?? null,
|
||||||
|
};
|
||||||
|
|
||||||
// If no goal set, return early
|
// If no goal set, return early
|
||||||
if (weeklyWorkouts === null) {
|
if (weeklyWorkouts === null) {
|
||||||
return json({ weeklyWorkouts: null, streak: 0, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null });
|
return json({ weeklyWorkouts: null, streak: 0, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null, birthYear: goal?.birthYear ?? null, ...nutritionGoals });
|
||||||
}
|
}
|
||||||
|
|
||||||
const streak = await computeStreak(user.nickname, weeklyWorkouts);
|
const streak = await computeStreak(user.nickname, weeklyWorkouts);
|
||||||
return json({ weeklyWorkouts, streak, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null });
|
return json({ weeklyWorkouts, streak, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null, birthYear: goal?.birthYear ?? null, ...nutritionGoals });
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PUT: RequestHandler = async ({ request, locals }) => {
|
export const PUT: RequestHandler = async ({ request, locals }) => {
|
||||||
@@ -33,6 +42,14 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
|
|||||||
const update: Record<string, unknown> = { weeklyWorkouts };
|
const update: Record<string, unknown> = { weeklyWorkouts };
|
||||||
if (sex === 'male' || sex === 'female') update.sex = sex;
|
if (sex === 'male' || sex === 'female') update.sex = sex;
|
||||||
if (typeof heightCm === 'number' && heightCm >= 100 && heightCm <= 250) update.heightCm = heightCm;
|
if (typeof heightCm === 'number' && heightCm >= 100 && heightCm <= 250) update.heightCm = heightCm;
|
||||||
|
if (typeof body.birthYear === 'number' && body.birthYear >= 1900 && body.birthYear <= 2020) update.birthYear = body.birthYear;
|
||||||
|
const validActivity = ['sedentary', 'light', 'moderate', 'very_active'];
|
||||||
|
if (validActivity.includes(body.activityLevel)) update.activityLevel = body.activityLevel;
|
||||||
|
if (typeof body.dailyCalories === 'number' && body.dailyCalories >= 500 && body.dailyCalories <= 10000) update.dailyCalories = body.dailyCalories;
|
||||||
|
if (body.proteinMode === 'fixed' || body.proteinMode === 'per_kg') update.proteinMode = body.proteinMode;
|
||||||
|
if (typeof body.proteinTarget === 'number' && body.proteinTarget >= 0) update.proteinTarget = body.proteinTarget;
|
||||||
|
if (typeof body.fatPercent === 'number' && body.fatPercent >= 0 && body.fatPercent <= 100) update.fatPercent = body.fatPercent;
|
||||||
|
if (typeof body.carbPercent === 'number' && body.carbPercent >= 0 && body.carbPercent <= 100) update.carbPercent = body.carbPercent;
|
||||||
|
|
||||||
await dbConnect();
|
await dbConnect();
|
||||||
|
|
||||||
@@ -43,7 +60,16 @@ export const PUT: RequestHandler = async ({ request, locals }) => {
|
|||||||
).lean() as any;
|
).lean() as any;
|
||||||
|
|
||||||
const streak = await computeStreak(user.nickname, weeklyWorkouts);
|
const streak = await computeStreak(user.nickname, weeklyWorkouts);
|
||||||
return json({ weeklyWorkouts, streak, sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null });
|
return json({
|
||||||
|
weeklyWorkouts, streak,
|
||||||
|
sex: goal?.sex ?? 'male', heightCm: goal?.heightCm ?? null, birthYear: goal?.birthYear ?? null,
|
||||||
|
activityLevel: goal?.activityLevel ?? 'light',
|
||||||
|
dailyCalories: goal?.dailyCalories ?? null,
|
||||||
|
proteinMode: goal?.proteinMode ?? null,
|
||||||
|
proteinTarget: goal?.proteinTarget ?? null,
|
||||||
|
fatPercent: goal?.fatPercent ?? null,
|
||||||
|
carbPercent: goal?.carbPercent ?? null,
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
async function computeStreak(username: string, weeklyGoal: number): Promise<number> {
|
async function computeStreak(username: string, weeklyGoal: number): Promise<number> {
|
||||||
|
|||||||
@@ -2,13 +2,73 @@ import { json, type RequestHandler } from '@sveltejs/kit';
|
|||||||
import { NUTRITION_DB } from '$lib/data/nutritionDb';
|
import { NUTRITION_DB } from '$lib/data/nutritionDb';
|
||||||
import { BLS_DB } from '$lib/data/blsDb';
|
import { BLS_DB } from '$lib/data/blsDb';
|
||||||
import { fuzzyScore } from '$lib/js/fuzzy';
|
import { fuzzyScore } from '$lib/js/fuzzy';
|
||||||
|
import { requireAuth } from '$lib/server/middleware/auth';
|
||||||
|
import { dbConnect } from '$utils/db';
|
||||||
|
import { FavoriteIngredient } from '$models/FavoriteIngredient';
|
||||||
|
|
||||||
|
type SearchResult = { source: 'bls' | 'usda'; id: string; name: string; category: string; calories: number; favorited?: boolean; per100g?: any; portions?: any[] };
|
||||||
|
|
||||||
|
function lookupBls(blsCode: string, full: boolean): SearchResult | null {
|
||||||
|
const entry = BLS_DB.find(e => e.blsCode === blsCode);
|
||||||
|
if (!entry) return null;
|
||||||
|
return {
|
||||||
|
source: 'bls',
|
||||||
|
id: entry.blsCode,
|
||||||
|
name: `${entry.nameDe}${entry.nameEn ? ` (${entry.nameEn})` : ''}`,
|
||||||
|
category: entry.category,
|
||||||
|
calories: entry.per100g.calories,
|
||||||
|
...(full && { per100g: entry.per100g }),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function lookupUsda(fdcId: string, full: boolean): SearchResult | null {
|
||||||
|
const entry = NUTRITION_DB.find(e => String(e.fdcId) === fdcId);
|
||||||
|
if (!entry) return null;
|
||||||
|
return {
|
||||||
|
source: 'usda',
|
||||||
|
id: String(entry.fdcId),
|
||||||
|
name: entry.name,
|
||||||
|
category: entry.category,
|
||||||
|
calories: entry.per100g.calories,
|
||||||
|
...(full && { per100g: entry.per100g, portions: entry.portions }),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/** GET: Search BLS + USDA nutrition databases by fuzzy name match */
|
/** GET: Search BLS + USDA nutrition databases by fuzzy name match */
|
||||||
export const GET: RequestHandler = async ({ url }) => {
|
export const GET: RequestHandler = async ({ url, locals }) => {
|
||||||
const q = (url.searchParams.get('q') || '').toLowerCase().trim();
|
const q = (url.searchParams.get('q') || '').toLowerCase().trim();
|
||||||
if (q.length < 2) return json([]);
|
if (q.length < 2) return json([]);
|
||||||
|
|
||||||
const scored: { source: 'bls' | 'usda'; id: string; name: string; category: string; calories: number; score: number }[] = [];
|
const full = url.searchParams.get('full') === 'true';
|
||||||
|
const wantFavorites = url.searchParams.get('favorites') === 'true';
|
||||||
|
|
||||||
|
// Optionally load user favorites
|
||||||
|
let favResults: SearchResult[] = [];
|
||||||
|
let favKeys = new Set<string>();
|
||||||
|
|
||||||
|
if (wantFavorites) {
|
||||||
|
try {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
const favDocs = await FavoriteIngredient.find({ createdBy: user.nickname }).lean();
|
||||||
|
|
||||||
|
for (const fav of favDocs) {
|
||||||
|
const key = `${fav.source}:${fav.sourceId}`;
|
||||||
|
const result = fav.source === 'bls'
|
||||||
|
? lookupBls(fav.sourceId, full)
|
||||||
|
: lookupUsda(fav.sourceId, full);
|
||||||
|
if (result) {
|
||||||
|
result.favorited = true;
|
||||||
|
favResults.push(result);
|
||||||
|
favKeys.add(key);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// Not authenticated or DB error — ignore, just return normal results
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const scored: (SearchResult & { score: number })[] = [];
|
||||||
|
|
||||||
// Search BLS (primary)
|
// Search BLS (primary)
|
||||||
for (const entry of BLS_DB) {
|
for (const entry of BLS_DB) {
|
||||||
@@ -23,6 +83,8 @@ export const GET: RequestHandler = async ({ url }) => {
|
|||||||
category: entry.category,
|
category: entry.category,
|
||||||
calories: entry.per100g.calories,
|
calories: entry.per100g.calories,
|
||||||
score: best,
|
score: best,
|
||||||
|
...(full && { per100g: entry.per100g }),
|
||||||
|
...(favKeys.has(`bls:${entry.blsCode}`) && { favorited: true }),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -38,11 +100,22 @@ export const GET: RequestHandler = async ({ url }) => {
|
|||||||
category: entry.category,
|
category: entry.category,
|
||||||
calories: entry.per100g.calories,
|
calories: entry.per100g.calories,
|
||||||
score: s,
|
score: s,
|
||||||
|
...(full && { per100g: entry.per100g, portions: entry.portions }),
|
||||||
|
...(favKeys.has(`usda:${entry.fdcId}`) && { favorited: true }),
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Sort by score descending, return top 30 (without score field)
|
// Sort by score descending, return top 30 (without score field)
|
||||||
scored.sort((a, b) => b.score - a.score);
|
scored.sort((a, b) => b.score - a.score);
|
||||||
return json(scored.slice(0, 30).map(({ score, ...rest }) => rest));
|
const searchResults = scored.slice(0, 30).map(({ score, ...rest }) => rest);
|
||||||
|
|
||||||
|
// Prepend favorites, deduplicating
|
||||||
|
if (favResults.length > 0) {
|
||||||
|
const searchKeys = new Set(searchResults.map(r => `${r.source}:${r.id}`));
|
||||||
|
const uniqueFavs = favResults.filter(f => !searchKeys.has(`${f.source}:${f.id}`));
|
||||||
|
return json([...uniqueFavs, ...searchResults]);
|
||||||
|
}
|
||||||
|
|
||||||
|
return json(searchResults);
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
import Header from '$lib/components/Header.svelte';
|
import Header from '$lib/components/Header.svelte';
|
||||||
import UserHeader from '$lib/components/UserHeader.svelte';
|
import UserHeader from '$lib/components/UserHeader.svelte';
|
||||||
import LanguageSelector from '$lib/components/LanguageSelector.svelte';
|
import LanguageSelector from '$lib/components/LanguageSelector.svelte';
|
||||||
import { BarChart3, Clock, Dumbbell, ListChecks, Ruler } from 'lucide-svelte';
|
import { BarChart3, Clock, Dumbbell, ListChecks, Ruler, UtensilsCrossed } from 'lucide-svelte';
|
||||||
import { getWorkout } from '$lib/js/workout.svelte';
|
import { getWorkout } from '$lib/js/workout.svelte';
|
||||||
import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
|
import { getWorkoutSync } from '$lib/js/workoutSync.svelte';
|
||||||
import WorkoutFab from '$lib/components/fitness/WorkoutFab.svelte';
|
import WorkoutFab from '$lib/components/fitness/WorkoutFab.svelte';
|
||||||
@@ -27,7 +27,8 @@
|
|||||||
const slugs = [
|
const slugs = [
|
||||||
'workout', 'training', 'workout/active', 'training/aktiv',
|
'workout', 'training', 'workout/active', 'training/aktiv',
|
||||||
'exercises', 'uebungen', 'stats', 'statistik',
|
'exercises', 'uebungen', 'stats', 'statistik',
|
||||||
'history', 'verlauf', 'measure', 'messen'
|
'history', 'verlauf', 'measure', 'messen',
|
||||||
|
'nutrition', 'ernaehrung'
|
||||||
];
|
];
|
||||||
const urls = slugs.map((s) => `/fitness/${s}`);
|
const urls = slugs.map((s) => `/fitness/${s}`);
|
||||||
navigator.serviceWorker.controller.postMessage({ type: 'CACHE_PAGES', urls });
|
navigator.serviceWorker.controller.postMessage({ type: 'CACHE_PAGES', urls });
|
||||||
@@ -79,6 +80,7 @@
|
|||||||
<li style="--active-fill: var(--nord8)"><a href="/fitness/{s.workout}" class:active={isActive(`/fitness/${s.workout}`)}><Dumbbell size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.workout}</span></a></li>
|
<li style="--active-fill: var(--nord8)"><a href="/fitness/{s.workout}" class:active={isActive(`/fitness/${s.workout}`)}><Dumbbell size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.workout}</span></a></li>
|
||||||
<li style="--active-fill: var(--nord14)"><a href="/fitness/{s.exercises}" class:active={isActive(`/fitness/${s.exercises}`)}><ListChecks size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.exercises}</span></a></li>
|
<li style="--active-fill: var(--nord14)"><a href="/fitness/{s.exercises}" class:active={isActive(`/fitness/${s.exercises}`)}><ListChecks size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.exercises}</span></a></li>
|
||||||
<li style="--active-fill: var(--nord12)"><a href="/fitness/{s.measure}" class:active={isActive(`/fitness/${s.measure}`)}><Ruler size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.measure}</span></a></li>
|
<li style="--active-fill: var(--nord12)"><a href="/fitness/{s.measure}" class:active={isActive(`/fitness/${s.measure}`)}><Ruler size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.measure}</span></a></li>
|
||||||
|
<li style="--active-fill: var(--nord15)"><a href="/fitness/{s.nutrition}" class:active={isActive(`/fitness/${s.nutrition}`)}><UtensilsCrossed size={16} strokeWidth={1.5} class="nav-icon" /><span class="nav-label">{labels.nutrition}</span></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
|
|
||||||
|
|||||||
@@ -15,14 +15,16 @@
|
|||||||
let latest = $state(data.latest ? { ...data.latest } : {});
|
let latest = $state(data.latest ? { ...data.latest } : {});
|
||||||
let measurements = $state(data.measurements?.measurements ? [...data.measurements.measurements] : []);
|
let measurements = $state(data.measurements?.measurements ? [...data.measurements.measurements] : []);
|
||||||
|
|
||||||
// Profile fields (sex, height) — stored in FitnessGoal
|
// Profile fields (sex, height, birth year) — stored in FitnessGoal
|
||||||
let showProfile = $state(false);
|
let showProfile = $state(false);
|
||||||
let profileSex = $state(data.profile?.sex ?? 'male');
|
let profileSex = $state(data.profile?.sex ?? 'male');
|
||||||
let profileHeight = $state(data.profile?.heightCm != null ? String(data.profile.heightCm) : '');
|
let profileHeight = $state(data.profile?.heightCm != null ? String(data.profile.heightCm) : '');
|
||||||
|
let profileBirthYear = $state(data.profile?.birthYear != null ? String(data.profile.birthYear) : '');
|
||||||
let profileSaving = $state(false);
|
let profileSaving = $state(false);
|
||||||
let profileDirty = $derived(
|
let profileDirty = $derived(
|
||||||
profileSex !== (data.profile?.sex ?? 'male') ||
|
profileSex !== (data.profile?.sex ?? 'male') ||
|
||||||
profileHeight !== (data.profile?.heightCm != null ? String(data.profile.heightCm) : '')
|
profileHeight !== (data.profile?.heightCm != null ? String(data.profile.heightCm) : '') ||
|
||||||
|
profileBirthYear !== (data.profile?.birthYear != null ? String(data.profile.birthYear) : '')
|
||||||
);
|
);
|
||||||
|
|
||||||
async function saveProfile() {
|
async function saveProfile() {
|
||||||
@@ -35,6 +37,8 @@
|
|||||||
};
|
};
|
||||||
const h = Number(profileHeight);
|
const h = Number(profileHeight);
|
||||||
if (h >= 100 && h <= 250) body.heightCm = h;
|
if (h >= 100 && h <= 250) body.heightCm = h;
|
||||||
|
const by = Number(profileBirthYear);
|
||||||
|
if (by >= 1900 && by <= 2020) body.birthYear = by;
|
||||||
const res = await fetch('/api/fitness/goal', {
|
const res = await fetch('/api/fitness/goal', {
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: { 'Content-Type': 'application/json' },
|
headers: { 'Content-Type': 'application/json' },
|
||||||
@@ -123,6 +127,10 @@
|
|||||||
<label for="p-height">{t('height', lang)}</label>
|
<label for="p-height">{t('height', lang)}</label>
|
||||||
<input id="p-height" type="number" min="100" max="250" placeholder="175" bind:value={profileHeight} />
|
<input id="p-height" type="number" min="100" max="250" placeholder="175" bind:value={profileHeight} />
|
||||||
</div>
|
</div>
|
||||||
|
<div class="form-group">
|
||||||
|
<label for="p-birthyear">{t('birth_year', lang)}</label>
|
||||||
|
<input id="p-birthyear" type="number" min="1900" max="2020" placeholder="1990" bind:value={profileBirthYear} />
|
||||||
|
</div>
|
||||||
{#if profileDirty}
|
{#if profileDirty}
|
||||||
<button class="profile-save-btn" onclick={saveProfile} disabled={profileSaving}>
|
<button class="profile-save-btn" onclick={saveProfile} disabled={profileSaving}>
|
||||||
{profileSaving ? t('saving', lang) : t('save', lang)}
|
{profileSaving ? t('saving', lang) : t('save', lang)}
|
||||||
|
|||||||
@@ -0,0 +1,67 @@
|
|||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
import { requireAuth } from '$lib/server/middleware/auth';
|
||||||
|
import { dbConnect } from '$utils/db';
|
||||||
|
import { WorkoutSession } from '$models/WorkoutSession';
|
||||||
|
import { Recipe } from '$models/Recipe';
|
||||||
|
import mongoose from 'mongoose';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ fetch, url, locals }) => {
|
||||||
|
const dateParam = url.searchParams.get('date') || new Date().toISOString().slice(0, 10);
|
||||||
|
|
||||||
|
const [foodRes, goalRes, weightRes] = await Promise.all([
|
||||||
|
fetch(`/api/fitness/food-log?date=${dateParam}`),
|
||||||
|
fetch('/api/fitness/goal'),
|
||||||
|
fetch('/api/fitness/measurements/latest')
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Fetch today's workout kcal burned
|
||||||
|
let exerciseKcal = 0;
|
||||||
|
try {
|
||||||
|
const user = await requireAuth(locals);
|
||||||
|
await dbConnect();
|
||||||
|
const dayStart = new Date(dateParam + 'T00:00:00.000Z');
|
||||||
|
const dayEnd = new Date(dateParam + 'T23:59:59.999Z');
|
||||||
|
const sessions = await WorkoutSession.find({
|
||||||
|
createdBy: user.nickname,
|
||||||
|
startTime: { $gte: dayStart, $lte: dayEnd }
|
||||||
|
}).select('kcalEstimate').lean();
|
||||||
|
|
||||||
|
for (const s of sessions) {
|
||||||
|
if (s.kcalEstimate?.kcal) exerciseKcal += s.kcalEstimate.kcal;
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
|
||||||
|
const foodLog = foodRes.ok ? await foodRes.json() : { entries: [] };
|
||||||
|
|
||||||
|
// Resolve recipe images for entries with source=recipe
|
||||||
|
const recipeImages: Record<string, string> = {};
|
||||||
|
const recipeIds = foodLog.entries
|
||||||
|
?.filter((e: any) => e.source === 'recipe' && e.sourceId)
|
||||||
|
.map((e: any) => e.sourceId)
|
||||||
|
.filter((id: string) => mongoose.Types.ObjectId.isValid(id));
|
||||||
|
|
||||||
|
if (recipeIds?.length > 0) {
|
||||||
|
try {
|
||||||
|
await dbConnect();
|
||||||
|
const recipes = await Recipe.find(
|
||||||
|
{ _id: { $in: [...new Set(recipeIds)] } },
|
||||||
|
{ _id: 1, short_name: 1, 'images.mediapath': 1 }
|
||||||
|
).lean();
|
||||||
|
for (const r of recipes as any[]) {
|
||||||
|
const mediapath = r.images?.[0]?.mediapath;
|
||||||
|
if (mediapath) {
|
||||||
|
recipeImages[String(r._id)] = `https://bocken.org/static/rezepte/thumb/${mediapath}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
date: dateParam,
|
||||||
|
foodLog,
|
||||||
|
goal: goalRes.ok ? await goalRes.json() : {},
|
||||||
|
latestWeight: weightRes.ok ? await weightRes.json() : {},
|
||||||
|
exerciseKcal: Math.round(exerciseKcal),
|
||||||
|
recipeImages,
|
||||||
|
};
|
||||||
|
};
|
||||||
1794
src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
Normal file
1794
src/routes/fitness/[nutrition=fitnessNutrition]/+page.svelte
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,46 @@
|
|||||||
|
import type { PageServerLoad } from './$types';
|
||||||
|
import { error } from '@sveltejs/kit';
|
||||||
|
import { NUTRITION_DB } from '$lib/data/nutritionDb';
|
||||||
|
import { BLS_DB } from '$lib/data/blsDb';
|
||||||
|
import { DRI_MALE } from '$lib/data/dailyReferenceIntake';
|
||||||
|
|
||||||
|
export const load: PageServerLoad = async ({ params }) => {
|
||||||
|
const { source, id } = params;
|
||||||
|
|
||||||
|
if (source !== 'bls' && source !== 'usda') {
|
||||||
|
throw error(404, 'Invalid source');
|
||||||
|
}
|
||||||
|
|
||||||
|
if (source === 'bls') {
|
||||||
|
const entry = BLS_DB.find(e => e.blsCode === id);
|
||||||
|
if (!entry) throw error(404, 'Food not found');
|
||||||
|
return {
|
||||||
|
food: {
|
||||||
|
source: 'bls' as const,
|
||||||
|
id: entry.blsCode,
|
||||||
|
name: `${entry.nameDe}${entry.nameEn ? ` (${entry.nameEn})` : ''}`,
|
||||||
|
nameDe: entry.nameDe,
|
||||||
|
nameEn: entry.nameEn,
|
||||||
|
category: entry.category,
|
||||||
|
per100g: entry.per100g,
|
||||||
|
},
|
||||||
|
dri: DRI_MALE,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// USDA
|
||||||
|
const fdcId = Number(id);
|
||||||
|
const entry = NUTRITION_DB.find(e => e.fdcId === fdcId);
|
||||||
|
if (!entry) throw error(404, 'Food not found');
|
||||||
|
return {
|
||||||
|
food: {
|
||||||
|
source: 'usda' as const,
|
||||||
|
id: String(entry.fdcId),
|
||||||
|
name: entry.name,
|
||||||
|
category: entry.category,
|
||||||
|
per100g: entry.per100g,
|
||||||
|
portions: entry.portions,
|
||||||
|
},
|
||||||
|
dri: DRI_MALE,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,658 @@
|
|||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { ChevronLeft, ChevronDown } from 'lucide-svelte';
|
||||||
|
import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
|
||||||
|
import { NUTRIENT_META } from '$lib/data/dailyReferenceIntake';
|
||||||
|
|
||||||
|
let { data } = $props();
|
||||||
|
|
||||||
|
const lang = $derived(detectFitnessLang($page.url.pathname));
|
||||||
|
const s = $derived(fitnessSlugs(lang));
|
||||||
|
const isEn = $derived(lang === 'en');
|
||||||
|
|
||||||
|
const food = $derived(data.food);
|
||||||
|
const dri = $derived(data.dri);
|
||||||
|
const n = $derived(food.per100g);
|
||||||
|
|
||||||
|
// --- Portion selector (USDA only) ---
|
||||||
|
let selectedPortionIdx = $state(-1); // -1 = per 100g
|
||||||
|
const portions = $derived(food.portions ?? []);
|
||||||
|
const portionMultiplier = $derived(
|
||||||
|
selectedPortionIdx >= 0 && portions[selectedPortionIdx]
|
||||||
|
? portions[selectedPortionIdx].grams / 100
|
||||||
|
: 1
|
||||||
|
);
|
||||||
|
const portionLabel = $derived(
|
||||||
|
selectedPortionIdx >= 0 && portions[selectedPortionIdx]
|
||||||
|
? `${portions[selectedPortionIdx].description} (${portions[selectedPortionIdx].grams}g)`
|
||||||
|
: isEn ? 'per 100 g' : 'pro 100 g'
|
||||||
|
);
|
||||||
|
|
||||||
|
/** Scale a nutrient value by the selected portion */
|
||||||
|
function scaled(val) {
|
||||||
|
return (val ?? 0) * portionMultiplier;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Macro calorie percentages ---
|
||||||
|
const macroPercent = $derived.by(() => {
|
||||||
|
const proteinCal = n.protein * 4;
|
||||||
|
const fatCal = n.fat * 9;
|
||||||
|
const carbsCal = n.carbs * 4;
|
||||||
|
const total = proteinCal + fatCal + carbsCal;
|
||||||
|
if (total === 0) return { protein: 0, fat: 0, carbs: 0 };
|
||||||
|
return {
|
||||||
|
protein: Math.round(proteinCal / total * 100),
|
||||||
|
fat: Math.round(fatCal / total * 100),
|
||||||
|
carbs: 100 - Math.round(proteinCal / total * 100) - Math.round(fatCal / total * 100),
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- SVG ring constants (same as NutritionSummary) ---
|
||||||
|
const RADIUS = 28;
|
||||||
|
const ARC_DEGREES = 300;
|
||||||
|
const ARC_LENGTH = (ARC_DEGREES / 360) * 2 * Math.PI * RADIUS;
|
||||||
|
const ARC_ROTATE = 120;
|
||||||
|
|
||||||
|
function strokeOffset(percent) {
|
||||||
|
return ARC_LENGTH - (percent / 100) * ARC_LENGTH;
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Formatting ---
|
||||||
|
function fmt(v) {
|
||||||
|
if (v == null || isNaN(v)) return '0';
|
||||||
|
if (v >= 100) return Math.round(v).toString();
|
||||||
|
if (v >= 10) return v.toFixed(1);
|
||||||
|
return v.toFixed(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- Micronutrient sections ---
|
||||||
|
const mineralKeys = ['calcium', 'iron', 'magnesium', 'phosphorus', 'potassium', 'sodium', 'zinc'];
|
||||||
|
const vitaminKeys = ['vitaminA', 'vitaminC', 'vitaminD', 'vitaminE', 'vitaminK', 'thiamin', 'riboflavin', 'niacin', 'vitaminB6', 'vitaminB12', 'folate'];
|
||||||
|
const otherKeys = ['cholesterol'];
|
||||||
|
|
||||||
|
function mkMicroRows(keys) {
|
||||||
|
return keys.map(k => {
|
||||||
|
const meta = NUTRIENT_META[k];
|
||||||
|
const value = scaled(n[k]);
|
||||||
|
const goal = dri[k] ?? 0;
|
||||||
|
const pct = goal > 0 ? Math.round(value / goal * 100) : 0;
|
||||||
|
return { key: k, label: isEn ? meta.label : meta.labelDe, unit: meta.unit, value, goal, pct, isMax: meta.isMax };
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const microSections = $derived([
|
||||||
|
{ title: isEn ? 'Minerals' : 'Mineralstoffe', rows: mkMicroRows(mineralKeys) },
|
||||||
|
{ title: isEn ? 'Vitamins' : 'Vitamine', rows: mkMicroRows(vitaminKeys) },
|
||||||
|
{ title: isEn ? 'Other' : 'Sonstiges', rows: mkMicroRows(otherKeys) },
|
||||||
|
]);
|
||||||
|
|
||||||
|
// --- Amino acids ---
|
||||||
|
const AMINO_META = {
|
||||||
|
leucine: { en: 'Leucine', de: 'Leucin' },
|
||||||
|
isoleucine: { en: 'Isoleucine', de: 'Isoleucin' },
|
||||||
|
valine: { en: 'Valine', de: 'Valin' },
|
||||||
|
lysine: { en: 'Lysine', de: 'Lysin' },
|
||||||
|
methionine: { en: 'Methionine', de: 'Methionin' },
|
||||||
|
phenylalanine: { en: 'Phenylalanine', de: 'Phenylalanin' },
|
||||||
|
threonine: { en: 'Threonine', de: 'Threonin' },
|
||||||
|
tryptophan: { en: 'Tryptophan', de: 'Tryptophan' },
|
||||||
|
histidine: { en: 'Histidine', de: 'Histidin' },
|
||||||
|
alanine: { en: 'Alanine', de: 'Alanin' },
|
||||||
|
arginine: { en: 'Arginine', de: 'Arginin' },
|
||||||
|
asparticAcid: { en: 'Aspartic Acid', de: 'Asparaginsäure' },
|
||||||
|
cysteine: { en: 'Cysteine', de: 'Cystein' },
|
||||||
|
glutamicAcid: { en: 'Glutamic Acid', de: 'Glutaminsäure' },
|
||||||
|
glycine: { en: 'Glycine', de: 'Glycin' },
|
||||||
|
proline: { en: 'Proline', de: 'Prolin' },
|
||||||
|
serine: { en: 'Serine', de: 'Serin' },
|
||||||
|
tyrosine: { en: 'Tyrosine', de: 'Tyrosin' },
|
||||||
|
};
|
||||||
|
|
||||||
|
const essentialOrder = ['leucine', 'isoleucine', 'valine', 'lysine', 'methionine', 'phenylalanine', 'threonine', 'tryptophan', 'histidine'];
|
||||||
|
const nonEssentialOrder = ['alanine', 'arginine', 'asparticAcid', 'cysteine', 'glutamicAcid', 'glycine', 'proline', 'serine', 'tyrosine'];
|
||||||
|
|
||||||
|
const hasAminos = $derived.by(() => {
|
||||||
|
return essentialOrder.some(k => (n[k] ?? 0) > 0) || nonEssentialOrder.some(k => (n[k] ?? 0) > 0);
|
||||||
|
});
|
||||||
|
|
||||||
|
const aminoRows = $derived(
|
||||||
|
[...essentialOrder, ...nonEssentialOrder]
|
||||||
|
.filter(k => (n[k] ?? 0) > 0)
|
||||||
|
.map(k => ({
|
||||||
|
key: k,
|
||||||
|
label: isEn ? AMINO_META[k].en : AMINO_META[k].de,
|
||||||
|
value: scaled(n[k]),
|
||||||
|
essential: essentialOrder.includes(k),
|
||||||
|
}))
|
||||||
|
);
|
||||||
|
|
||||||
|
// --- Expand toggles ---
|
||||||
|
let showMicros = $state(true);
|
||||||
|
let showAminos = $state(false);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{food.name} | {isEn ? 'Nutrition' : 'Ernährung'}</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="food-detail">
|
||||||
|
<!-- Back link -->
|
||||||
|
<a class="back-link" href="/fitness/{s.nutrition}">
|
||||||
|
<ChevronLeft size={16} />
|
||||||
|
{t('nutrition_title', lang)}
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<!-- Header -->
|
||||||
|
<header class="food-header">
|
||||||
|
<h1>{food.nameDe ?? food.name}</h1>
|
||||||
|
{#if food.nameEn && food.nameDe}
|
||||||
|
<p class="name-alt">{food.nameEn}</p>
|
||||||
|
{/if}
|
||||||
|
<div class="badges">
|
||||||
|
<span class="badge badge-source">{food.source === 'bls' ? 'BLS' : 'USDA'}</span>
|
||||||
|
<span class="badge badge-category">{food.category}</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<!-- Portion selector (USDA only) -->
|
||||||
|
{#if portions.length > 0}
|
||||||
|
<div class="portion-selector">
|
||||||
|
<label for="portion-select">{isEn ? 'Serving size' : 'Portionsgröße'}</label>
|
||||||
|
<select id="portion-select" bind:value={selectedPortionIdx}>
|
||||||
|
<option value={-1}>{isEn ? 'Per 100 g' : 'Pro 100 g'}</option>
|
||||||
|
{#each portions as portion, i}
|
||||||
|
<option value={i}>{portion.description} ({portion.grams}g)</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Calorie headline -->
|
||||||
|
<div class="calorie-headline">
|
||||||
|
<span class="cal-number">{Math.round(scaled(n.calories))}</span>
|
||||||
|
<span class="cal-unit">kcal</span>
|
||||||
|
<span class="cal-basis">{portionLabel}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Macro rings -->
|
||||||
|
<div class="macro-rings">
|
||||||
|
{#each [
|
||||||
|
{ pct: macroPercent.protein, label: isEn ? 'Protein' : 'Eiweiß', cls: 'ring-protein', grams: scaled(n.protein) },
|
||||||
|
{ pct: macroPercent.fat, label: isEn ? 'Fat' : 'Fett', cls: 'ring-fat', grams: scaled(n.fat) },
|
||||||
|
{ pct: macroPercent.carbs, label: isEn ? 'Carbs' : 'Kohlenh.', cls: 'ring-carbs', grams: scaled(n.carbs) },
|
||||||
|
] as macro}
|
||||||
|
<div class="macro-ring">
|
||||||
|
<svg width="90" height="90" viewBox="0 0 70 70">
|
||||||
|
<circle
|
||||||
|
class="ring-bg"
|
||||||
|
cx="35" cy="35" r={RADIUS}
|
||||||
|
stroke-dasharray="{ARC_LENGTH} {2 * Math.PI * RADIUS}"
|
||||||
|
transform="rotate({ARC_ROTATE} 35 35)"
|
||||||
|
/>
|
||||||
|
<circle
|
||||||
|
class="ring-fill {macro.cls}"
|
||||||
|
cx="35" cy="35" r={RADIUS}
|
||||||
|
stroke-dasharray="{ARC_LENGTH} {2 * Math.PI * RADIUS}"
|
||||||
|
stroke-dashoffset={strokeOffset(macro.pct)}
|
||||||
|
transform="rotate({ARC_ROTATE} 35 35)"
|
||||||
|
/>
|
||||||
|
<text class="ring-text" x="35" y="35">{macro.pct}%</text>
|
||||||
|
</svg>
|
||||||
|
<span class="macro-label">{macro.label}</span>
|
||||||
|
<span class="macro-grams">{fmt(macro.grams)}g</span>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Macro detail grid -->
|
||||||
|
<div class="macro-detail-card">
|
||||||
|
<div class="detail-row">
|
||||||
|
<span class="detail-name">{isEn ? 'Protein' : 'Eiweiß'}</span>
|
||||||
|
<span class="detail-val">{fmt(scaled(n.protein))} g</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-row">
|
||||||
|
<span class="detail-name">{isEn ? 'Fat' : 'Fett'}</span>
|
||||||
|
<span class="detail-val">{fmt(scaled(n.fat))} g</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-row sub">
|
||||||
|
<span class="detail-name">{isEn ? 'Saturated Fat' : 'Ges. Fettsäuren'}</span>
|
||||||
|
<span class="detail-val">{fmt(scaled(n.saturatedFat))} g</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-row">
|
||||||
|
<span class="detail-name">{isEn ? 'Carbohydrates' : 'Kohlenhydrate'}</span>
|
||||||
|
<span class="detail-val">{fmt(scaled(n.carbs))} g</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-row sub">
|
||||||
|
<span class="detail-name">{isEn ? 'Sugars' : 'Zucker'}</span>
|
||||||
|
<span class="detail-val">{fmt(scaled(n.sugars))} g</span>
|
||||||
|
</div>
|
||||||
|
<div class="detail-row">
|
||||||
|
<span class="detail-name">{isEn ? 'Fiber' : 'Ballaststoffe'}</span>
|
||||||
|
<span class="detail-val">{fmt(scaled(n.fiber))} g</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Micronutrients -->
|
||||||
|
<div class="section-card">
|
||||||
|
<button class="section-toggle" onclick={() => showMicros = !showMicros}>
|
||||||
|
<h2>{isEn ? 'Micronutrients' : 'Mikronährstoffe'}</h2>
|
||||||
|
<ChevronDown size={18} style={showMicros ? 'transform: rotate(180deg)' : ''} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if showMicros}
|
||||||
|
<div class="micro-details">
|
||||||
|
{#each microSections as section}
|
||||||
|
<div class="micro-section">
|
||||||
|
<h4>{section.title}</h4>
|
||||||
|
{#each section.rows as row}
|
||||||
|
<div class="micro-row">
|
||||||
|
<span class="micro-label">{row.label}</span>
|
||||||
|
<div class="micro-bar-wrap">
|
||||||
|
<div class="micro-bar" class:is-max={row.isMax} style="width: {Math.min(row.pct, 100)}%"></div>
|
||||||
|
</div>
|
||||||
|
<span class="micro-value">{fmt(row.value)} {row.unit}</span>
|
||||||
|
<span class="micro-pct">{row.pct}%</span>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Amino Acids -->
|
||||||
|
{#if hasAminos}
|
||||||
|
<div class="section-card">
|
||||||
|
<button class="section-toggle" onclick={() => showAminos = !showAminos}>
|
||||||
|
<h2>{isEn ? 'Amino Acids' : 'Aminosäuren'}</h2>
|
||||||
|
<ChevronDown size={18} style={showAminos ? 'transform: rotate(180deg)' : ''} />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{#if showAminos}
|
||||||
|
<div class="amino-list">
|
||||||
|
{#each aminoRows as row}
|
||||||
|
<div class="amino-row" class:essential={row.essential}>
|
||||||
|
<span class="amino-label">{row.label}</span>
|
||||||
|
<span class="amino-value">{fmt(row.value)} g</span>
|
||||||
|
{#if row.essential}
|
||||||
|
<span class="amino-badge">{isEn ? 'essential' : 'essenziell'}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Portions table (USDA only) -->
|
||||||
|
{#if portions.length > 0}
|
||||||
|
<div class="section-card">
|
||||||
|
<h2>{isEn ? 'Common Serving Sizes' : 'Übliche Portionsgrößen'}</h2>
|
||||||
|
<div class="portions-table">
|
||||||
|
<div class="portions-header">
|
||||||
|
<span>{isEn ? 'Serving' : 'Portion'}</span>
|
||||||
|
<span>kcal</span>
|
||||||
|
<span>{isEn ? 'Protein' : 'Eiweiß'}</span>
|
||||||
|
<span>{isEn ? 'Fat' : 'Fett'}</span>
|
||||||
|
<span>{isEn ? 'Carbs' : 'KH'}</span>
|
||||||
|
</div>
|
||||||
|
{#each portions as portion}
|
||||||
|
{@const m = portion.grams / 100}
|
||||||
|
<div class="portions-row">
|
||||||
|
<span class="portion-desc">{portion.description} <small>({portion.grams}g)</small></span>
|
||||||
|
<span>{Math.round(n.calories * m)}</span>
|
||||||
|
<span>{fmt(n.protein * m)}g</span>
|
||||||
|
<span>{fmt(n.fat * m)}g</span>
|
||||||
|
<span>{fmt(n.carbs * m)}g</span>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.food-detail {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.back-link:hover {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Header */
|
||||||
|
.food-header {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.food-header h1 {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
margin: 0 0 0.25rem;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
.name-alt {
|
||||||
|
margin: 0 0 0.5rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
.badges {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.5rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.badge {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.15rem 0.5rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
.badge-source {
|
||||||
|
background: var(--nord10);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.badge-category {
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Portion selector */
|
||||||
|
.portion-selector {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.portion-selector label {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-bottom: 0.25rem;
|
||||||
|
}
|
||||||
|
.portion-selector select {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.4rem 0.5rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Calorie headline */
|
||||||
|
.calorie-headline {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.cal-number {
|
||||||
|
font-size: 2.8rem;
|
||||||
|
font-weight: 800;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
line-height: 1;
|
||||||
|
}
|
||||||
|
.cal-unit {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-left: 0.25rem;
|
||||||
|
}
|
||||||
|
.cal-basis {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Macro rings */
|
||||||
|
.macro-rings {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
margin: 0 0 1.25rem;
|
||||||
|
}
|
||||||
|
.macro-ring {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.15rem;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.ring-bg {
|
||||||
|
fill: none;
|
||||||
|
stroke: var(--color-border);
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
}
|
||||||
|
.ring-fill {
|
||||||
|
fill: none;
|
||||||
|
stroke-width: 5;
|
||||||
|
stroke-linecap: round;
|
||||||
|
transition: stroke-dashoffset 0.4s ease;
|
||||||
|
}
|
||||||
|
.ring-text {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 700;
|
||||||
|
fill: currentColor;
|
||||||
|
text-anchor: middle;
|
||||||
|
dominant-baseline: central;
|
||||||
|
}
|
||||||
|
.ring-protein { stroke: var(--nord14); }
|
||||||
|
.ring-fat { stroke: var(--nord12); }
|
||||||
|
.ring-carbs { stroke: var(--nord9); }
|
||||||
|
|
||||||
|
.macro-label {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.macro-grams {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Macro detail card */
|
||||||
|
.macro-detail-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.detail-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0.35rem 0;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.detail-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.detail-row.sub .detail-name {
|
||||||
|
padding-left: 1rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.detail-name {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.detail-val {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Section cards */
|
||||||
|
.section-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 0.75rem 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.section-card h2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
margin: 0;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.section-toggle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Micro details */
|
||||||
|
.micro-details {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
.micro-section {
|
||||||
|
margin-bottom: 0.75rem;
|
||||||
|
}
|
||||||
|
.micro-section h4 {
|
||||||
|
margin: 0 0 0.4rem;
|
||||||
|
font-size: 0.7rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.06em;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.micro-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 7rem 1fr 4rem 2.5rem;
|
||||||
|
gap: 0.5rem;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0.2rem 0;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
}
|
||||||
|
.micro-label {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.micro-bar-wrap {
|
||||||
|
height: 5px;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border-radius: 3px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.micro-bar {
|
||||||
|
height: 100%;
|
||||||
|
background: var(--nord14);
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
.micro-bar.is-max {
|
||||||
|
background: var(--nord12);
|
||||||
|
}
|
||||||
|
.micro-value {
|
||||||
|
text-align: right;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
white-space: nowrap;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.micro-pct {
|
||||||
|
text-align: right;
|
||||||
|
font-weight: 700;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Amino acids */
|
||||||
|
.amino-list {
|
||||||
|
margin-top: 0.75rem;
|
||||||
|
}
|
||||||
|
.amino-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.5rem;
|
||||||
|
padding: 0.3rem 0;
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
.amino-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.amino-label {
|
||||||
|
flex: 1;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.amino-value {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.amino-badge {
|
||||||
|
font-size: 0.65rem;
|
||||||
|
padding: 0.1rem 0.35rem;
|
||||||
|
border-radius: 3px;
|
||||||
|
background: var(--nord14);
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 600;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Portions table */
|
||||||
|
.portions-table {
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-size: 0.82rem;
|
||||||
|
}
|
||||||
|
.portions-header, .portions-row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 3.5rem 3.5rem 3.5rem 3.5rem;
|
||||||
|
gap: 0.25rem;
|
||||||
|
padding: 0.35rem 0;
|
||||||
|
}
|
||||||
|
.portions-header {
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
border-bottom: 2px solid var(--color-border);
|
||||||
|
}
|
||||||
|
.portions-row {
|
||||||
|
border-bottom: 1px solid var(--color-border);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.portions-row:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.portions-row span:not(.portion-desc) {
|
||||||
|
text-align: right;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
.portion-desc {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
.portion-desc small {
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 500px) {
|
||||||
|
.micro-row {
|
||||||
|
grid-template-columns: 5.5rem 1fr 3.5rem 2.2rem;
|
||||||
|
gap: 0.3rem;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
.portions-header, .portions-row {
|
||||||
|
grid-template-columns: 1fr 3rem 3rem 3rem 3rem;
|
||||||
|
font-size: 0.72rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,726 @@
|
|||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
import { untrack } from 'svelte';
|
||||||
|
import { ChevronLeft, Plus, Trash2, Pencil, UtensilsCrossed, X } from 'lucide-svelte';
|
||||||
|
import { detectFitnessLang, fitnessSlugs, t } from '$lib/js/fitnessI18n';
|
||||||
|
import { toast } from '$lib/js/toast.svelte';
|
||||||
|
import FoodSearch from '$lib/components/fitness/FoodSearch.svelte';
|
||||||
|
|
||||||
|
const lang = $derived(detectFitnessLang($page.url.pathname));
|
||||||
|
const s = $derived(fitnessSlugs(lang));
|
||||||
|
const isEn = $derived(lang === 'en');
|
||||||
|
|
||||||
|
// --- Meals state ---
|
||||||
|
let meals = $state([]);
|
||||||
|
let loading = $state(true);
|
||||||
|
|
||||||
|
// --- Form state ---
|
||||||
|
let editing = $state(false);
|
||||||
|
let editingId = $state(null);
|
||||||
|
let mealName = $state('');
|
||||||
|
let ingredients = $state([]);
|
||||||
|
let saving = $state(false);
|
||||||
|
|
||||||
|
let showSearch = $state(false);
|
||||||
|
|
||||||
|
// --- Load meals ---
|
||||||
|
async function loadMeals() {
|
||||||
|
loading = true;
|
||||||
|
try {
|
||||||
|
const res = await fetch('/api/fitness/custom-meals');
|
||||||
|
if (res.ok) {
|
||||||
|
const data = await res.json();
|
||||||
|
meals = data.meals ?? [];
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
toast.error(isEn ? 'Failed to load meals' : 'Fehler beim Laden');
|
||||||
|
} finally {
|
||||||
|
loading = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
untrack(() => loadMeals());
|
||||||
|
});
|
||||||
|
|
||||||
|
// --- Computed ---
|
||||||
|
function mealTotalCal(meal) {
|
||||||
|
return meal.ingredients.reduce((sum, ing) => sum + (ing.per100g?.calories ?? 0) * ing.amountGrams / 100, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ingredientsTotalNutrition(ings) {
|
||||||
|
let calories = 0, protein = 0, fat = 0, carbs = 0;
|
||||||
|
for (const ing of ings) {
|
||||||
|
const f = ing.amountGrams / 100;
|
||||||
|
calories += (ing.per100g?.calories ?? 0) * f;
|
||||||
|
protein += (ing.per100g?.protein ?? 0) * f;
|
||||||
|
fat += (ing.per100g?.fat ?? 0) * f;
|
||||||
|
carbs += (ing.per100g?.carbs ?? 0) * f;
|
||||||
|
}
|
||||||
|
return { calories, protein, fat, carbs };
|
||||||
|
}
|
||||||
|
|
||||||
|
const formTotals = $derived(ingredientsTotalNutrition(ingredients));
|
||||||
|
|
||||||
|
function addIngredient(food) {
|
||||||
|
ingredients = [...ingredients, food];
|
||||||
|
showSearch = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function removeIngredient(index) {
|
||||||
|
ingredients = ingredients.filter((_, i) => i !== index);
|
||||||
|
}
|
||||||
|
|
||||||
|
// --- CRUD ---
|
||||||
|
function startCreate() {
|
||||||
|
editing = true;
|
||||||
|
editingId = null;
|
||||||
|
mealName = '';
|
||||||
|
ingredients = [];
|
||||||
|
showSearch = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function startEdit(meal) {
|
||||||
|
editing = true;
|
||||||
|
editingId = meal._id;
|
||||||
|
mealName = meal.name;
|
||||||
|
ingredients = meal.ingredients.map(i => ({ ...i }));
|
||||||
|
showSearch = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
function cancelEdit() {
|
||||||
|
editing = false;
|
||||||
|
editingId = null;
|
||||||
|
mealName = '';
|
||||||
|
ingredients = [];
|
||||||
|
showSearch = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function saveMeal() {
|
||||||
|
if (!mealName.trim() || ingredients.length === 0) return;
|
||||||
|
saving = true;
|
||||||
|
try {
|
||||||
|
const body = { name: mealName.trim(), ingredients };
|
||||||
|
const url = editingId
|
||||||
|
? `/api/fitness/custom-meals/${editingId}`
|
||||||
|
: '/api/fitness/custom-meals';
|
||||||
|
const method = editingId ? 'PUT' : 'POST';
|
||||||
|
|
||||||
|
const res = await fetch(url, {
|
||||||
|
method,
|
||||||
|
headers: { 'Content-Type': 'application/json' },
|
||||||
|
body: JSON.stringify(body)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (res.ok) {
|
||||||
|
toast.success(isEn ? 'Meal saved' : 'Mahlzeit gespeichert');
|
||||||
|
cancelEdit();
|
||||||
|
await loadMeals();
|
||||||
|
} else {
|
||||||
|
toast.error(isEn ? 'Failed to save' : 'Speichern fehlgeschlagen');
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
toast.error(isEn ? 'Failed to save' : 'Speichern fehlgeschlagen');
|
||||||
|
} finally {
|
||||||
|
saving = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function deleteMeal(meal) {
|
||||||
|
if (!confirm(t('delete_meal_confirm', lang))) return;
|
||||||
|
try {
|
||||||
|
const res = await fetch(`/api/fitness/custom-meals/${meal._id}`, { method: 'DELETE' });
|
||||||
|
if (res.ok) {
|
||||||
|
meals = meals.filter(m => m._id !== meal._id);
|
||||||
|
toast.success(isEn ? 'Meal deleted' : 'Mahlzeit gelöscht');
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
toast.error(isEn ? 'Failed to delete' : 'Löschen fehlgeschlagen');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function fmt(v) {
|
||||||
|
return v >= 100 ? Math.round(v).toString() : v.toFixed(1);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{t('custom_meals', lang)} — Fitness</title>
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="meals-page">
|
||||||
|
<!-- Header -->
|
||||||
|
<div class="header">
|
||||||
|
<a href="/fitness/{s.nutrition}" class="back-link">
|
||||||
|
<ChevronLeft size={20} />
|
||||||
|
<span>{t('custom_meals', lang)}</span>
|
||||||
|
</a>
|
||||||
|
{#if !editing}
|
||||||
|
<button class="create-btn" onclick={startCreate}>
|
||||||
|
<Plus size={18} />
|
||||||
|
<span>{t('new_meal', lang)}</span>
|
||||||
|
</button>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if loading}
|
||||||
|
<div class="loading-state">
|
||||||
|
<p>{t('loading', lang)}</p>
|
||||||
|
</div>
|
||||||
|
{:else if editing}
|
||||||
|
<!-- Create/Edit Form -->
|
||||||
|
<div class="form-card">
|
||||||
|
<h2 class="form-title">{editingId ? t('edit', lang) : t('new_meal', lang)}</h2>
|
||||||
|
|
||||||
|
<label class="field-label">{t('meal_name', lang)}</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
class="text-input"
|
||||||
|
bind:value={mealName}
|
||||||
|
placeholder={t('meal_name', lang)}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<!-- Ingredients list -->
|
||||||
|
<label class="field-label">{t('ingredients', lang)} ({ingredients.length})</label>
|
||||||
|
{#if ingredients.length > 0}
|
||||||
|
<div class="ingredients-list">
|
||||||
|
{#each ingredients as ing, i}
|
||||||
|
{@const sp = ing.selectedPortion}
|
||||||
|
{@const displayQty = sp ? Math.round((ing.amountGrams / sp.grams) * 10) / 10 : ing.amountGrams}
|
||||||
|
{@const displayUnit = sp ? sp.description : 'g'}
|
||||||
|
<div class="ingredient-row">
|
||||||
|
<div class="ingredient-info">
|
||||||
|
<div class="ingredient-name-row">
|
||||||
|
<span class="ingredient-name">{ing.name}</span>
|
||||||
|
{#if ing.source !== 'custom'}
|
||||||
|
<span class="source-tag">{ing.source === 'bls' ? 'BLS' : 'USDA'}</span>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div class="ingredient-edit-row">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
class="inline-amount"
|
||||||
|
value={displayQty}
|
||||||
|
min="0.1"
|
||||||
|
step={sp ? '0.5' : '1'}
|
||||||
|
onchange={(e) => {
|
||||||
|
const qty = Number(e.target.value) || 1;
|
||||||
|
ingredients[i].amountGrams = sp ? Math.round(qty * sp.grams) : qty;
|
||||||
|
ingredients = [...ingredients];
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{#if ing.portions?.length > 0}
|
||||||
|
<select class="inline-portion" value={sp ? ing.portions.findIndex(p => p.description === sp.description) : -1} onchange={(e) => {
|
||||||
|
const idx = Number(e.target.value);
|
||||||
|
const oldGrams = ing.amountGrams;
|
||||||
|
if (idx >= 0) {
|
||||||
|
const portion = ing.portions[idx];
|
||||||
|
ingredients[i].selectedPortion = portion;
|
||||||
|
// Convert current grams to new unit, round to nearest 0.5
|
||||||
|
const qty = Math.round((oldGrams / portion.grams) * 2) / 2 || 1;
|
||||||
|
ingredients[i].amountGrams = Math.round(qty * portion.grams);
|
||||||
|
} else {
|
||||||
|
ingredients[i].selectedPortion = undefined;
|
||||||
|
}
|
||||||
|
ingredients = [...ingredients];
|
||||||
|
}}>
|
||||||
|
<option value={-1}>g</option>
|
||||||
|
{#each ing.portions as p, pi}
|
||||||
|
<option value={pi}>{p.description} ({Math.round(p.grams)}g)</option>
|
||||||
|
{/each}
|
||||||
|
</select>
|
||||||
|
{:else}
|
||||||
|
<span class="ingredient-unit">{displayUnit}</span>
|
||||||
|
{/if}
|
||||||
|
<span class="ingredient-cal">
|
||||||
|
{#if sp}<span class="ingredient-grams">{ing.amountGrams}g ·</span>{/if}
|
||||||
|
{fmt((ing.per100g?.calories ?? 0) * ing.amountGrams / 100)} {t('kcal', lang)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button class="icon-btn danger" onclick={() => removeIngredient(i)} aria-label="Remove">
|
||||||
|
<X size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Totals -->
|
||||||
|
{#if ingredients.length > 0}
|
||||||
|
<div class="totals-bar">
|
||||||
|
<span class="total-label">{t('total', lang)}</span>
|
||||||
|
<span class="total-macro">{Math.round(formTotals.calories)} {t('kcal', lang)}</span>
|
||||||
|
<span class="total-macro protein">{fmt(formTotals.protein)}g P</span>
|
||||||
|
<span class="total-macro fat">{fmt(formTotals.fat)}g F</span>
|
||||||
|
<span class="total-macro carbs">{fmt(formTotals.carbs)}g C</span>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Add ingredient -->
|
||||||
|
{#if !showSearch}
|
||||||
|
<button class="add-ingredient-btn" onclick={() => { showSearch = true; }}>
|
||||||
|
<Plus size={16} />
|
||||||
|
<span>{t('add_ingredient', lang)}</span>
|
||||||
|
</button>
|
||||||
|
{:else}
|
||||||
|
<div class="search-section">
|
||||||
|
<FoodSearch
|
||||||
|
onselect={addIngredient}
|
||||||
|
oncancel={() => { showSearch = false; }}
|
||||||
|
showDetailLinks={false}
|
||||||
|
confirmLabel={t('add_ingredient', lang)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<!-- Actions -->
|
||||||
|
<div class="form-actions">
|
||||||
|
<button class="btn secondary" onclick={cancelEdit}>{t('cancel', lang)}</button>
|
||||||
|
<button
|
||||||
|
class="btn primary"
|
||||||
|
onclick={saveMeal}
|
||||||
|
disabled={saving || !mealName.trim() || ingredients.length === 0}
|
||||||
|
>
|
||||||
|
{saving ? t('loading', lang) : t('save_meal', lang)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{:else if meals.length === 0}
|
||||||
|
<!-- Empty state -->
|
||||||
|
<div class="empty-state">
|
||||||
|
<UtensilsCrossed size={48} strokeWidth={1.2} />
|
||||||
|
<p class="empty-title">{t('no_custom_meals', lang)}</p>
|
||||||
|
<p class="empty-hint">{t('create_meal_hint', lang)}</p>
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
<!-- Meal cards -->
|
||||||
|
<div class="meals-list">
|
||||||
|
{#each meals as meal, i}
|
||||||
|
<div class="meal-card" style="animation-delay: {i * 50}ms">
|
||||||
|
<div class="meal-header">
|
||||||
|
<div class="meal-info">
|
||||||
|
<h3 class="meal-name">{meal.name}</h3>
|
||||||
|
<span class="meal-meta">
|
||||||
|
{meal.ingredients.length} {t('ingredients', lang)} — {Math.round(mealTotalCal(meal))} {t('kcal', lang)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="meal-actions">
|
||||||
|
<button class="icon-btn" onclick={() => startEdit(meal)} aria-label={t('edit', lang)}>
|
||||||
|
<Pencil size={16} />
|
||||||
|
</button>
|
||||||
|
<button class="icon-btn danger" onclick={() => deleteMeal(meal)} aria-label={t('delete_', lang)}>
|
||||||
|
<Trash2 size={16} />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="meal-ingredients">
|
||||||
|
{#each meal.ingredients as ing}
|
||||||
|
<span class="ing-chip">{ing.name} ({ing.amountGrams}g)</span>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.meals-page {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-up {
|
||||||
|
from { opacity: 0; transform: translateY(8px); }
|
||||||
|
to { opacity: 1; transform: translateY(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Header ── */
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
animation: fade-up 0.3s ease both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 0.35rem 0;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
.back-link:hover {
|
||||||
|
color: var(--nord8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.create-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
background: var(--nord8);
|
||||||
|
color: #fff;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.5rem 0.85rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s;
|
||||||
|
}
|
||||||
|
.create-btn:hover {
|
||||||
|
background: var(--nord10);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Loading ── */
|
||||||
|
.loading-state {
|
||||||
|
text-align: center;
|
||||||
|
padding: 3rem 1rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
animation: fade-up 0.3s ease both;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Empty state ── */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.75rem;
|
||||||
|
padding: 3rem 1rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
animation: fade-up 0.35s ease both;
|
||||||
|
}
|
||||||
|
.empty-title {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.empty-hint {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Meal cards ── */
|
||||||
|
.meals-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meal-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1rem 1.1rem;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
animation: fade-up 0.35s ease both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meal-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meal-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meal-name {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meal-meta {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.meal-actions {
|
||||||
|
display: flex;
|
||||||
|
gap: 0.25rem;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.meal-ingredients {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 0.3rem;
|
||||||
|
margin-top: 0.6rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ing-chip {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
padding: 0.2rem 0.5rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Icon button ── */
|
||||||
|
.icon-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.4rem;
|
||||||
|
border-radius: 6px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
transition: color 0.15s, background 0.15s;
|
||||||
|
}
|
||||||
|
.icon-btn:hover {
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.icon-btn.danger:hover {
|
||||||
|
color: var(--nord11);
|
||||||
|
background: color-mix(in srgb, var(--nord11) 10%, transparent);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Form card ── */
|
||||||
|
.form-card {
|
||||||
|
background: var(--color-surface);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 1.25rem;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
animation: fade-up 0.35s ease both;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-title {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-label {
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-input {
|
||||||
|
width: 100%;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.55rem 0.75rem;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
outline: none;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.text-input:focus {
|
||||||
|
border-color: var(--nord8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Ingredients in form ── */
|
||||||
|
.ingredients-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredient-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
gap: 0.5rem;
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
padding: 0.5rem 0.65rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredient-info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredient-name {
|
||||||
|
display: block;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredient-name-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
}
|
||||||
|
.source-tag {
|
||||||
|
font-size: 0.58rem;
|
||||||
|
font-weight: 700;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
padding: 0.05rem 0.3rem;
|
||||||
|
border-radius: 3px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.ingredient-edit-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.25rem;
|
||||||
|
margin-top: 0.15rem;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.inline-amount {
|
||||||
|
width: 3.5rem;
|
||||||
|
padding: 0.2rem 0.35rem;
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
text-align: right;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.inline-amount:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--nord8);
|
||||||
|
}
|
||||||
|
.inline-portion {
|
||||||
|
padding: 0.2rem 0.3rem;
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
border: 1px solid var(--color-border);
|
||||||
|
border-radius: 5px;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
font-size: 0.72rem;
|
||||||
|
max-width: 9rem;
|
||||||
|
}
|
||||||
|
.inline-portion:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: var(--nord8);
|
||||||
|
}
|
||||||
|
.ingredient-unit {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
}
|
||||||
|
.ingredient-cal {
|
||||||
|
font-size: 0.72rem;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Totals bar ── */
|
||||||
|
.totals-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.6rem;
|
||||||
|
background: color-mix(in srgb, var(--nord8) 8%, transparent);
|
||||||
|
padding: 0.55rem 0.75rem;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-label {
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.total-macro {
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
.total-macro.protein { color: var(--nord14); }
|
||||||
|
.total-macro.fat { color: var(--nord12); }
|
||||||
|
.total-macro.carbs { color: var(--nord9); }
|
||||||
|
|
||||||
|
/* ── Add ingredient button ── */
|
||||||
|
.add-ingredient-btn {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 0.35rem;
|
||||||
|
background: none;
|
||||||
|
border: 1.5px dashed var(--color-border);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.55rem 0.75rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.15s, border-color 0.15s;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.add-ingredient-btn:hover {
|
||||||
|
color: var(--nord8);
|
||||||
|
border-color: var(--nord8);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Search section ── */
|
||||||
|
.search-section {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ingredient-grams {
|
||||||
|
color: var(--color-text-tertiary);
|
||||||
|
font-size: 0.65rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ── Form actions ── */
|
||||||
|
.form-actions {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
gap: 0.5rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 0.55rem 1.1rem;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.15s, opacity 0.15s;
|
||||||
|
}
|
||||||
|
.btn:disabled {
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.btn.primary {
|
||||||
|
background: var(--nord8);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.btn.primary:hover:not(:disabled) {
|
||||||
|
background: var(--nord10);
|
||||||
|
}
|
||||||
|
.btn.secondary {
|
||||||
|
background: var(--color-bg-tertiary);
|
||||||
|
color: var(--color-text-secondary);
|
||||||
|
}
|
||||||
|
.btn.secondary:hover {
|
||||||
|
background: var(--color-bg-elevated);
|
||||||
|
color: var(--color-text-primary);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -40,7 +40,7 @@
|
|||||||
let goalInput = $state(4);
|
let goalInput = $state(4);
|
||||||
let goalSaving = $state(false);
|
let goalSaving = $state(false);
|
||||||
|
|
||||||
const hasDemographics = $derived(data.goal?.sex != null && data.goal?.heightCm != null);
|
const hasDemographics = $derived(data.goal?.sex != null && data.goal?.heightCm != null && data.goal?.birthYear != null);
|
||||||
|
|
||||||
function startGoalEdit() {
|
function startGoalEdit() {
|
||||||
goalInput = goalWeekly ?? 4;
|
goalInput = goalWeekly ?? 4;
|
||||||
|
|||||||
Reference in New Issue
Block a user