56 lines
3.6 KiB
Svelte
56 lines
3.6 KiB
Svelte
<script>
|
|
import Field from './Field.svelte';
|
|
|
|
export let mealTypes = [];
|
|
export let mealDate;
|
|
export let mealTime;
|
|
export let mealType;
|
|
export let description;
|
|
export let measure;
|
|
export let selectedImageDataUrl;
|
|
export let status;
|
|
export let statusError;
|
|
export let savingMeal;
|
|
export let editingEntryId;
|
|
export let estimateDraft;
|
|
export let chooseImage;
|
|
export let saveMeal;
|
|
export let saveMealEdits;
|
|
export let cancelEdit;
|
|
</script>
|
|
|
|
<section class="space-y-4">
|
|
<div>
|
|
<h2 class="text-xl font-bold">{editingEntryId ? 'Edit meal' : 'Log meal'}</h2>
|
|
</div>
|
|
<form class="card" on:submit|preventDefault={saveMeal}>
|
|
<h3 class="card-title">Meal details</h3>
|
|
<div class="grid gap-4 p-4 md:grid-cols-3">
|
|
<Field label="Date"><input id="mealDate" class="input" type="date" bind:value={mealDate} required></Field>
|
|
<Field label="Time of day"><input id="mealTime" class="input" type="time" bind:value={mealTime} required></Field>
|
|
<Field label="Meal type"><select id="mealType" class="input" bind:value={mealType} required>{#each mealTypes as type}<option>{type}</option>{/each}</select></Field>
|
|
<Field className="md:col-span-3" label="Description"><textarea id="description" class="input min-h-32" bind:value={description} placeholder="Example: grilled salmon, rice, broccoli, berries"></textarea></Field>
|
|
<Field label="Portion or measure"><input id="measure" class="input" bind:value={measure} placeholder="Example: one plate, 450g, 2 cups"></Field>
|
|
<Field label="Meal image"><input id="image" class="input" type="file" accept="image/*" on:change={chooseImage}></Field>
|
|
</div>
|
|
{#if selectedImageDataUrl}<img id="preview" class="mx-4 mb-4 max-h-80 w-[calc(100%-2rem)] rounded-2xl object-cover" src={selectedImageDataUrl} alt="Selected meal preview">{/if}
|
|
{#if editingEntryId}
|
|
<div class="grid gap-3 border-t border-slate-200 p-4 md:grid-cols-4">
|
|
<Field className="md:col-span-2" label="Meal name"><input class="input" bind:value={estimateDraft.mealName}></Field>
|
|
<Field label="Calories"><input class="input" type="number" min="0" bind:value={estimateDraft.calories}></Field>
|
|
<Field label="Protein (g)"><input class="input" type="number" min="0" bind:value={estimateDraft.proteinGrams}></Field>
|
|
<Field label="Carbs (g)"><input class="input" type="number" min="0" bind:value={estimateDraft.carbsGrams}></Field>
|
|
<Field label="Fat (g)"><input class="input" type="number" min="0" bind:value={estimateDraft.fatGrams}></Field>
|
|
<Field label="Fruit servings"><input class="input" type="number" min="0" step="0.1" bind:value={estimateDraft.fruitServings}></Field>
|
|
<Field label="Vegetable servings"><input class="input" type="number" min="0" step="0.1" bind:value={estimateDraft.vegetableServings}></Field>
|
|
<Field className="md:col-span-2" label="Food groups"><input class="input" bind:value={estimateDraft.foodGroups}></Field>
|
|
<Field className="md:col-span-2" label="Notes"><input class="input" bind:value={estimateDraft.notes}></Field>
|
|
</div>
|
|
{/if}
|
|
<div class="flex flex-col gap-3 border-t border-slate-200 p-4 md:flex-row md:items-center">
|
|
<button class="btn-primary" type="submit" disabled={savingMeal}>{savingMeal ? 'Saving...' : editingEntryId ? 'Analyze again' : 'Analyze and save'}</button>
|
|
{#if editingEntryId}<button class="btn-secondary" type="button" on:click={saveMealEdits}>Save edits</button><button class="btn-secondary" type="button" on:click={cancelEdit}>Cancel</button>{/if}
|
|
{#if status}<p id="status" class:text-red-600={statusError} class="text-sm font-semibold text-green-700">{status}</p>{/if}
|
|
</div>
|
|
</form>
|
|
</section>
|