Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement base recipe references with customizable ingredients and instructions

Browse Source 
Add comprehensive base recipe system allowing recipes to reference other recipes dynamically. References can include custom items before/after the base recipe content and render as unified lists.

Features:
- Mark recipes as base recipes with isBaseRecipe flag
- Insert base recipe references at any position in ingredients/instructions
- Add custom items before/after referenced content (itemsBefore/itemsAfter, stepsBefore/stepsAfter)
- Combined rendering displays all items in single unified lists
- Full edit/remove functionality for additional items with modal reuse
- Empty item validation prevents accidental blank entries
- HTML rendering in section titles for proper <wbr> and &shy; support
- Reference links in section headings with multiplier preservation
- Subtle hover effects (2% scale) on add buttons
- Translation support for all reference fields
- Deletion handling expands references before removing base recipes
This commit is contained in:
Alexander Bocken
2026-01-04 15:21:17 +01:00
parent 2696f09653
commit b67e2434b5
14 changed files with 1499 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

249
src/lib/components/BaseRecipeSelector.svelte Normal file
View File

@@ -0,0 +1,249 @@
<script lang="ts">
import { onMount } from 'svelte';
import { browser } from '$app/environment';
import { do_on_key } from '$lib/components/do_on_key.js'
import Check from '$lib/assets/icons/Check.svelte'
export let type: 'ingredients' | 'instructions' = 'ingredients';
export let onSelect: (recipe: any, options: any) => void;
export let open = false;
// Unique dialog ID based on type to prevent conflicts when both are on the same page
const dialogId = `base-recipe-selector-modal-${type}`;
let baseRecipes: any[] = [];
let selectedRecipe: any = null;
let options = {
includeIngredients: false,
includeInstructions: false,
showLabel: true,
labelOverride: ''
};
// Reset options whenever type or modal state changes
$: {
if (open || type) {
options.includeIngredients = type === 'ingredients';
options.includeInstructions = type === 'instructions';
}
}
onMount(async () => {
const res = await fetch('/api/rezepte/base-recipes');
baseRecipes = await res.json();
});
function handleInsert() {
if (selectedRecipe) {
onSelect(selectedRecipe, options);
// Reset modal
selectedRecipe = null;
options.labelOverride = '';
options.showLabel = true;
closeModal();
}
}
function closeModal() {
open = false;
if (browser) {
const modal = document.querySelector(`#${dialogId}`) as HTMLDialogElement;
if (modal) {
modal.close();
}
}
}
function openModal() {
if (browser) {
const modal = document.querySelector(`#${dialogId}`) as HTMLDialogElement;
if (modal) {
modal.showModal();
}
}
}
$: if (browser) {
if (open) {
setTimeout(openModal, 0);
} else {
closeModal();
}
}
</script>
<style>
dialog {
box-sizing: content-box;
width: 100%;
height: 100%;
background-color: transparent;
border: unset;
margin: 0;
transition: 500ms;
}
dialog[open]::backdrop {
animation: show 200ms ease forwards;
}
@keyframes show {
from {
backdrop-filter: blur(0px);
}
to {
backdrop-filter: blur(10px);
}
}
dialog h2 {
font-size: 3rem;
font-family: sans-serif;
color: white;
text-align: center;
margin-top: 30vh;
margin-top: 30dvh;
filter: drop-shadow(0 0 0.4em black)
drop-shadow(0 0 1em black);
}
.selector-content {
box-sizing: border-box;
margin-inline: auto;
margin-top: 2rem;
max-width: 600px;
padding: 2rem;
border-radius: 20px;
background-color: var(--blue);
color: white;
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
}
.selector-content label {
display: block;
margin-block: 1rem;
font-size: 1.1rem;
}
.selector-content select,
.selector-content input[type="text"] {
width: 100%;
padding: 0.5em 1em;
margin-top: 0.5em;
border-radius: 1000px;
border: 2px solid var(--nord4);
background-color: white;
color: var(--nord0);
font-size: 1rem;
transition: 100ms;
}
.selector-content select:hover,
.selector-content select:focus,
.selector-content input[type="text"]:hover,
.selector-content input[type="text"]:focus {
border-color: var(--nord9);
transform: scale(1.02, 1.02);
}
.selector-content input[type="checkbox"] {
width: 1.2em;
height: 1.2em;
margin-right: 0.5em;
vertical-align: middle;
}
.button-group {
display: flex;
gap: 1rem;
margin-top: 2rem;
justify-content: center;
}
.button-group button {
padding: 0.75em 2em;
font-size: 1.1rem;
border-radius: 1000px;
border: none;
cursor: pointer;
transition: 200ms;
font-weight: bold;
}
.button-insert {
background-color: var(--nord14);
color: var(--nord0);
}
.button-cancel {
background-color: var(--nord3);
color: white;
}
.button-group button:hover {
transform: scale(1.1, 1.1);
box-shadow: 0 0 1em 0.3em rgba(0,0,0,0.3);
}
@media (prefers-color-scheme: dark) {
.selector-content {
background-color: var(--nord1);
}
}
</style>
<dialog id={dialogId}>
<h2>Basisrezept einfügen</h2>
<div class="selector-content">
<label>
Basisrezept auswählen:
<select bind:value={selectedRecipe}>
<option value={null}>-- Auswählen --</option>
{#each baseRecipes as recipe}
<option value={recipe}>{recipe.icon} {recipe.name}</option>
{/each}
</select>
</label>
{#if type === 'ingredients'}
<label>
<input type="checkbox" bind:checked={options.includeIngredients} />
Zutaten einbeziehen
</label>
{/if}
{#if type === 'instructions'}
<label>
<input type="checkbox" bind:checked={options.includeInstructions} />
Zubereitungsschritte einbeziehen
</label>
{/if}
<label>
<input type="checkbox" bind:checked={options.showLabel} />
Rezeptname als Überschrift anzeigen
</label>
{#if options.showLabel}
<label>
Eigene Überschrift (optional):
<input
type="text"
bind:value={options.labelOverride}
placeholder={selectedRecipe?.name || 'Überschrift eingeben...'}
on:keydown={(event) => do_on_key(event, 'Enter', false, handleInsert)}
/>
</label>
{/if}
<div class="button-group">
<button class="button-insert" on:click={handleInsert} disabled={!selectedRecipe}>
Einfügen
</button>
<button class="button-cancel" on:click={closeModal}>
Abbrechen
</button>
</div>
</div>
</dialog>

380
src/lib/components/CreateIngredientList.svelte
View File

@@ -10,6 +10,7 @@ import "$lib/css/action_button.css"
import { do_on_key } from '$lib/components/do_on_key.js'
import { portions } from '$lib/js/portions_store.js'
import BaseRecipeSelector from '$lib/components/BaseRecipeSelector.svelte'
let portions_local
portions.subscribe((p) => {
@@ -43,6 +44,122 @@ let edit_heading = {
list_index: "",
}
// Base recipe selector state
let showSelector = false;
let insertPosition = 0;
// State for adding items to references
let addingToReference = {
active: false,
list_index: -1,
position: 'before' as 'before' | 'after',
editing: false,
item_index: -1
};
function openSelector(position: number) {
insertPosition = position;
showSelector = true;
}
function handleSelect(recipe: any, options: any) {
const reference = {
type: 'reference',
name: options.labelOverride || (options.showLabel ? recipe.name : ''),
baseRecipeRef: recipe._id,
includeIngredients: options.includeIngredients,
showLabel: options.showLabel,
labelOverride: options.labelOverride || '',
itemsBefore: [],
itemsAfter: []
};
ingredients.splice(insertPosition, 0, reference);
ingredients = ingredients;
showSelector = false;
}
export function removeReference(list_index: number) {
const confirmed = confirm("Bist du dir sicher, dass du diese Referenz löschen möchtest?");
if (confirmed) {
ingredients.splice(list_index, 1);
ingredients = ingredients;
}
}
// Functions to manage items before/after base recipe in references
function addItemToReference(list_index: number, position: 'before' | 'after', item: any) {
if (!ingredients[list_index].itemsBefore) ingredients[list_index].itemsBefore = [];
if (!ingredients[list_index].itemsAfter) ingredients[list_index].itemsAfter = [];
if (position === 'before') {
ingredients[list_index].itemsBefore.push(item);
} else {
ingredients[list_index].itemsAfter.push(item);
}
ingredients = ingredients;
}
function removeItemFromReference(list_index: number, position: 'before' | 'after', item_index: number) {
if (position === 'before') {
ingredients[list_index].itemsBefore.splice(item_index, 1);
} else {
ingredients[list_index].itemsAfter.splice(item_index, 1);
}
ingredients = ingredients;
}
function editItemFromReference(list_index: number, position: 'before' | 'after', item_index: number) {
const items = position === 'before' ? ingredients[list_index].itemsBefore : ingredients[list_index].itemsAfter;
const item = items[item_index];
// Set up edit state
addingToReference = {
active: true,
list_index,
position,
editing: true,
item_index
};
edit_ingredient = {
amount: item.amount || "",
unit: item.unit || "",
name: item.name || "",
sublist: "",
list_index: "",
ingredient_index: "",
};
const modal_el = document.querySelector("#edit_ingredient_modal") as HTMLDialogElement;
if (modal_el) {
modal_el.showModal();
}
}
function openAddToReferenceModal(list_index: number, position: 'before' | 'after') {
addingToReference = {
active: true,
list_index,
position,
editing: false,
item_index: -1
};
// Clear and open the edit ingredient modal for adding
edit_ingredient = {
amount: "",
unit: "",
name: "",
sublist: "",
list_index: "",
ingredient_index: "",
};
const modal_el = document.querySelector("#edit_ingredient_modal") as HTMLDialogElement;
if (modal_el) {
modal_el.showModal();
}
}
function get_sublist_index(sublist_name, list){
for(var i =0; i < list.length; i++){
if(list[i].name == sublist_name){
@@ -102,12 +219,55 @@ export function show_modal_edit_ingredient(list_index, ingredient_index){
modal_el.showModal();
}
export function edit_ingredient_and_close_modal(){
ingredients[edit_ingredient.list_index].list[edit_ingredient.ingredient_index] = {
amount: edit_ingredient.amount,
unit: edit_ingredient.unit,
name: edit_ingredient.name,
// Check if we're adding to or editing a reference
if (addingToReference.active) {
// Don't add empty ingredients
if (!edit_ingredient.name) {
addingToReference = {
active: false,
list_index: -1,
position: 'before',
editing: false,
item_index: -1
};
const modal_el = document.querySelector("#edit_ingredient_modal");
modal_el.close();
return;
}
const item = {
amount: edit_ingredient.amount,
unit: edit_ingredient.unit,
name: edit_ingredient.name
};
if (addingToReference.editing) {
// Edit existing item in reference
const items = addingToReference.position === 'before'
? ingredients[addingToReference.list_index].itemsBefore
: ingredients[addingToReference.list_index].itemsAfter;
items[addingToReference.item_index] = item;
ingredients = ingredients;
} else {
// Add new item to reference
addItemToReference(addingToReference.list_index, addingToReference.position, item);
}
addingToReference = {
active: false,
list_index: -1,
position: 'before',
editing: false,
item_index: -1
};
} else {
// Normal edit behavior
ingredients[edit_ingredient.list_index].list[edit_ingredient.ingredient_index] = {
amount: edit_ingredient.amount,
unit: edit_ingredient.unit,
name: edit_ingredient.name,
}
ingredients[edit_ingredient.list_index].name = edit_ingredient.sublist
}
ingredients[edit_ingredient.list_index].name = edit_ingredient.sublist
const modal_el = document.querySelector("#edit_ingredient_modal");
modal_el.close();
}
@@ -430,6 +590,66 @@ h3{
width: 100%;
text-align: left;
}
/* Base recipe reference styles */
.reference-container {
margin-block: 1em;
padding: 1em;
background-color: var(--nord14);
border-radius: 10px;
border: 2px solid var(--nord9);
box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
}
.reference-header {
display: flex;
align-items: center;
gap: 1em;
margin-bottom: 0.5em;
}
.reference-badge {
flex-grow: 1;
font-weight: bold;
color: var(--nord0);
font-size: 1.1rem;
}
@media (prefers-color-scheme: dark) {
.reference-container {
background-color: var(--nord1);
}
.reference-badge {
color: var(--nord6);
}
}
.insert-base-recipe-button {
margin-block: 1rem;
padding: 1em 2em;
font-size: 1.1rem;
border-radius: 1000px;
background-color: var(--nord9);
color: white;
border: none;
cursor: pointer;
transition: 200ms;
box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
}
.insert-base-recipe-button:hover {
transform: scale(1.05, 1.05);
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
}
.add-to-reference-button {
color: white;
}
.add-to-reference-button:hover {
scale: 1.02 1.02 !important;
transform: scale(1.02) !important;
}
</style>
<div class=list_wrapper >
@@ -438,32 +658,118 @@ h3{
<h2>Zutaten</h2>
{#each ingredients as list, list_index}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3>
<div class=move_buttons_container>
<button on:click="{() => update_list_position(list_index, 1)}" aria-label="Liste nach oben verschieben">
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click="{() => update_list_position(list_index, -1)}" aria-label="Liste nach unten verschieben">
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
{#if list.type === 'reference'}
<!-- Reference item display -->
<div class="reference-container">
<div class="reference-header">
<div class="move_buttons_container">
<button on:click={() => update_list_position(list_index, 1)} aria-label="Referenz nach oben verschieben">
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click={() => update_list_position(list_index, -1)} aria-label="Referenz nach unten verschieben">
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
<div class="reference-badge">
📋 Basisrezept: {list.name || 'Unbenannt'}
</div>
<div class="mod_icons">
<button class="action_button button_subtle" on:click={() => removeReference(list_index)} aria-label="Referenz entfernen">
<Cross fill="var(--nord11)"></Cross>
</button>
</div>
</div>
<button on:click="{() => show_modal_edit_subheading_ingredient(list_index)}" class="subheading-button">
{#if list.name }
{list.name}
<!-- Items before base recipe -->
{#if list.itemsBefore && list.itemsBefore.length > 0}
<h4 style="margin-block: 0.5em; color: var(--nord9);">Zusätzliche Zutaten davor:</h4>
<div class="ingredients_grid">
{#each list.itemsBefore as item, item_index}
<div class=move_buttons_container>
<!-- Empty for consistency -->
</div>
<button on:click={() => editItemFromReference(list_index, 'before', item_index)} class="ingredient-amount-button">
{item.amount} {item.unit}
</button>
<button class="force_wrap ingredient-name-button" on:click={() => editItemFromReference(list_index, 'before', item_index)}>
{@html item.name}
</button>
<div class="mod_icons">
<button class="action_button button_subtle" on:click={() => editItemFromReference(list_index, 'before', item_index)} aria-label="Zutat bearbeiten">
<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
</button>
<button class="action_button button_subtle" on:click={() => removeItemFromReference(list_index, 'before', item_index)} aria-label="Zutat entfernen">
<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
</button>
</div>
{/each}
</div>
{/if}
<button class="action_button button_subtle add-to-reference-button" on:click={() => openAddToReferenceModal(list_index, 'before')}>
<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> Zutat davor hinzufügen
</button>
<!-- Base recipe content indicator -->
<div style="text-align: center; padding: 0.5em; margin: 0.5em 0; font-style: italic; color: var(--nord10); background-color: rgba(143, 188, 187, 0.4); border-radius: 5px;">
→ Inhalt vom Basisrezept wird hier eingefügt ←
</div>
<!-- Items after base recipe -->
<button class="action_button button_subtle add-to-reference-button" on:click={() => openAddToReferenceModal(list_index, 'after')}>
<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> Zutat danach hinzufügen
</button>
{#if list.itemsAfter && list.itemsAfter.length > 0}
<h4 style="margin-block: 0.5em; color: var(--nord9);">Zusätzliche Zutaten danach:</h4>
<div class="ingredients_grid">
{#each list.itemsAfter as item, item_index}
<div class=move_buttons_container>
<!-- Empty for consistency -->
</div>
<button on:click={() => editItemFromReference(list_index, 'after', item_index)} class="ingredient-amount-button">
{item.amount} {item.unit}
</button>
<button class="force_wrap ingredient-name-button" on:click={() => editItemFromReference(list_index, 'after', item_index)}>
{@html item.name}
</button>
<div class="mod_icons">
<button class="action_button button_subtle" on:click={() => editItemFromReference(list_index, 'after', item_index)} aria-label="Zutat bearbeiten">
<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
</button>
<button class="action_button button_subtle" on:click={() => removeItemFromReference(list_index, 'after', item_index)} aria-label="Zutat entfernen">
<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
</button>
</div>
{/each}
</div>
{/if}
</div>
{:else}
Leer
{/if}
</button>
<div class=mod_icons>
<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_ingredient(list_index)}" aria-label="Überschrift bearbeiten">
<Pen fill=var(--nord1)></Pen> </button>
<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}" aria-label="Liste entfernen">
<Cross fill=var(--nord1)></Cross></button>
</div>
</h3>
<div class=ingredients_grid>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3>
<div class=move_buttons_container>
<button on:click="{() => update_list_position(list_index, 1)}" aria-label="Liste nach oben verschieben">
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click="{() => update_list_position(list_index, -1)}" aria-label="Liste nach unten verschieben">
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
<button on:click="{() => show_modal_edit_subheading_ingredient(list_index)}" class="subheading-button">
{#if list.name }
{list.name}
{:else}
Leer
{/if}
</button>
<div class=mod_icons>
<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_ingredient(list_index)}" aria-label="Überschrift bearbeiten">
<Pen fill=var(--nord1)></Pen> </button>
<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}" aria-label="Liste entfernen">
<Cross fill=var(--nord1)></Cross></button>
</div>
</h3>
<div class=ingredients_grid>
{#each list.list as ingredient, ingredient_index (ingredient_index)}
<div class=move_buttons_container>
<button on:click="{() => update_ingredient_position(list_index, ingredient_index, 1)}" aria-label="Zutat nach oben verschieben">
@@ -483,8 +789,15 @@ h3{
<Pen fill=var(--nord1) height=1em width=1em></Pen></button>
<button class="action_button button_subtle" on:click="{() => remove_ingredient(list_index, ingredient_index)}" aria-label="Zutat entfernen"><Cross fill=var(--nord1) height=1em width=1em></Cross></button></div>
{/each}
</div>
</div>
{/if}
{/each}
<!-- Button to insert base recipe -->
<button class="insert-base-recipe-button" on:click={() => openSelector(ingredients.length)}>
<Plus fill="white" style="display: inline; width: 1.5em; height: 1.5em; vertical-align: middle;"></Plus>
Basisrezept einfügen
</button>
</div>
<div class="adder shadow">
@@ -522,3 +835,10 @@ h3{
</button>
</div>
</dialog>
<!-- Base recipe selector -->
<BaseRecipeSelector
type="ingredients"
onSelect={handleSelect}
bind:open={showSelector}
/>

354
src/lib/components/CreateStepList.svelte
View File

@@ -9,6 +9,7 @@ import '$lib/css/nordtheme.css'
import "$lib/css/action_button.css"
import { do_on_key } from '$lib/components/do_on_key.js'
import BaseRecipeSelector from '$lib/components/BaseRecipeSelector.svelte'
const step_placeholder = "Kartoffeln schälen..."
export let instructions
@@ -24,6 +25,118 @@ let edit_heading = {
list_index: "",
}
// Base recipe selector state
let showSelector = false;
let insertPosition = 0;
// State for adding steps to references
let addingToReference = {
active: false,
list_index: -1,
position: 'before' as 'before' | 'after',
editing: false,
step_index: -1
};
function openSelector(position: number) {
insertPosition = position;
showSelector = true;
}
function handleSelect(recipe: any, options: any) {
const reference = {
type: 'reference',
name: options.labelOverride || (options.showLabel ? recipe.name : ''),
baseRecipeRef: recipe._id,
includeInstructions: options.includeInstructions,
showLabel: options.showLabel,
labelOverride: options.labelOverride || '',
stepsBefore: [],
stepsAfter: []
};
instructions.splice(insertPosition, 0, reference);
instructions = instructions;
showSelector = false;
}
export function removeReference(list_index: number) {
const confirmed = confirm("Bist du dir sicher, dass du diese Referenz löschen möchtest?");
if (confirmed) {
instructions.splice(list_index, 1);
instructions = instructions;
}
}
// Functions to manage steps before/after base recipe in references
function addStepToReference(list_index: number, position: 'before' | 'after', step: string) {
if (!instructions[list_index].stepsBefore) instructions[list_index].stepsBefore = [];
if (!instructions[list_index].stepsAfter) instructions[list_index].stepsAfter = [];
if (position === 'before') {
instructions[list_index].stepsBefore.push(step);
} else {
instructions[list_index].stepsAfter.push(step);
}
instructions = instructions;
}
function removeStepFromReference(list_index: number, position: 'before' | 'after', step_index: number) {
if (position === 'before') {
instructions[list_index].stepsBefore.splice(step_index, 1);
} else {
instructions[list_index].stepsAfter.splice(step_index, 1);
}
instructions = instructions;
}
function editStepFromReference(list_index: number, position: 'before' | 'after', step_index: number) {
const steps = position === 'before' ? instructions[list_index].stepsBefore : instructions[list_index].stepsAfter;
const step = steps[step_index];
// Set up edit state
addingToReference = {
active: true,
list_index,
position,
editing: true,
step_index
};
edit_step = {
step: step || "",
name: "",
list_index: 0,
step_index: 0,
};
const modal_el = document.querySelector("#edit_step_modal") as HTMLDialogElement;
if (modal_el) {
modal_el.showModal();
}
}
function openAddToReferenceModal(list_index: number, position: 'before' | 'after') {
addingToReference = {
active: true,
list_index,
position,
editing: false,
step_index: -1
};
// Clear and open the edit step modal for adding
edit_step = {
step: "",
name: "",
list_index: 0,
step_index: 0,
};
const modal_el = document.querySelector("#edit_step_modal") as HTMLDialogElement;
if (modal_el) {
modal_el.showModal();
}
}
function get_sublist_index(sublist_name, list){
for(var i =0; i < list.length; i++){
if(list[i].name == sublist_name){
@@ -86,7 +199,44 @@ export function show_modal_edit_step(list_index, step_index){
}
export function edit_step_and_close_modal(){
instructions[edit_step.list_index].steps[edit_step.step_index] = edit_step.step
// Check if we're adding to or editing a reference
if (addingToReference.active) {
// Don't add empty steps
if (!edit_step.step || edit_step.step.trim() === '') {
addingToReference = {
active: false,
list_index: -1,
position: 'before',
editing: false,
step_index: -1
};
const modal_el = document.querySelector("#edit_step_modal");
modal_el.close();
return;
}
if (addingToReference.editing) {
// Edit existing step in reference
const steps = addingToReference.position === 'before'
? instructions[addingToReference.list_index].stepsBefore
: instructions[addingToReference.list_index].stepsAfter;
steps[addingToReference.step_index] = edit_step.step;
instructions = instructions;
} else {
// Add new step to reference
addStepToReference(addingToReference.list_index, addingToReference.position, edit_step.step);
}
addingToReference = {
active: false,
list_index: -1,
position: 'before',
editing: false,
step_index: -1
};
} else {
// Normal edit behavior
instructions[edit_step.list_index].steps[edit_step.step_index] = edit_step.step
}
const modal_el = document.querySelector("#edit_step_modal");
modal_el.close();
}
@@ -451,6 +601,66 @@ h3{
width: 100%;
text-align: left;
}
/* Base recipe reference styles */
.reference-container {
margin-block: 1em;
padding: 1em;
background-color: var(--nord14);
border-radius: 10px;
border: 2px solid var(--nord9);
box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
}
.reference-header {
display: flex;
align-items: center;
gap: 1em;
margin-bottom: 0.5em;
}
.reference-badge {
flex-grow: 1;
font-weight: bold;
color: var(--nord0);
font-size: 1.1rem;
}
@media (prefers-color-scheme: dark) {
.reference-container {
background-color: var(--nord1);
}
.reference-badge {
color: var(--nord6);
}
}
.insert-base-recipe-button {
margin-block: 1rem;
padding: 1em 2em;
font-size: 1.1rem;
border-radius: 1000px;
background-color: var(--nord9);
color: white;
border: none;
cursor: pointer;
transition: 200ms;
box-shadow: 0 0 0.5em 0.1em rgba(0,0,0,0.2);
}
.insert-base-recipe-button:hover {
transform: scale(1.05, 1.05);
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
}
.add-to-reference-button {
color: white;
}
.add-to-reference-button:hover {
scale: 1.02 1.02 !important;
transform: scale(1.02) !important;
}
</style>
<div class=instructions>
@@ -483,27 +693,115 @@ h3{
<h2>Zubereitung</h2>
{#each instructions as list, list_index}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3>
<div class=move_buttons_container>
<button on:click="{() => update_list_position(list_index, 1)}" aria-label="Liste nach oben verschieben">
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click="{() => update_list_position(list_index, -1)}" aria-label="Liste nach unten verschieben">
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
<button on:click={() => show_modal_edit_subheading_step(list_index)} class="subheading-button">
{#if list.name}
{list.name}
{#if list.type === 'reference'}
<!-- Reference item display -->
<div class="reference-container">
<div class="reference-header">
<div class="move_buttons_container">
<button on:click={() => update_list_position(list_index, 1)} aria-label="Referenz nach oben verschieben">
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click={() => update_list_position(list_index, -1)} aria-label="Referenz nach unten verschieben">
<svg class="button_arrow" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
<div class="reference-badge">
📋 Basisrezept: {list.name || 'Unbenannt'}
</div>
<div class="mod_icons">
<button class="action_button button_subtle" on:click={() => removeReference(list_index)} aria-label="Referenz entfernen">
<Cross fill="var(--nord11)"></Cross>
</button>
</div>
</div>
<!-- Steps before base recipe -->
{#if list.stepsBefore && list.stepsBefore.length > 0}
<h4 style="margin-block: 0.5em; color: var(--nord9);">Zusätzliche Schritte davor:</h4>
<ol>
{#each list.stepsBefore as step, step_index}
<li>
<div style="display: flex; align-items: center;">
<div class="move_buttons_container step_move_buttons">
<!-- Empty for consistency -->
</div>
<button on:click={() => editStepFromReference(list_index, 'before', step_index)} class="step-button" style="flex-grow: 1;">
{@html step}
</button>
<div>
<button class="action_button button_subtle" on:click={() => editStepFromReference(list_index, 'before', step_index)} aria-label="Schritt bearbeiten">
<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
</button>
<button class="action_button button_subtle" on:click={() => removeStepFromReference(list_index, 'before', step_index)} aria-label="Schritt entfernen">
<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
</button>
</div>
</div>
</li>
{/each}
</ol>
{/if}
<button class="action_button button_subtle add-to-reference-button" on:click={() => openAddToReferenceModal(list_index, 'before')}>
<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> Schritt davor hinzufügen
</button>
<!-- Base recipe content indicator -->
<div style="text-align: center; padding: 0.5em; margin: 0.5em 0; font-style: italic; color: var(--nord10); background-color: rgba(143, 188, 187, 0.4); border-radius: 5px;">
→ Inhalt vom Basisrezept wird hier eingefügt ←
</div>
<!-- Steps after base recipe -->
<button class="action_button button_subtle add-to-reference-button" on:click={() => openAddToReferenceModal(list_index, 'after')}>
<Plus fill="var(--nord9)" height="1em" width="1em"></Plus> Schritt danach hinzufügen
</button>
{#if list.stepsAfter && list.stepsAfter.length > 0}
<h4 style="margin-block: 0.5em; color: var(--nord9);">Zusätzliche Schritte danach:</h4>
<ol>
{#each list.stepsAfter as step, step_index}
<li>
<div style="display: flex; align-items: center;">
<div class="move_buttons_container step_move_buttons">
<!-- Empty for consistency -->
</div>
<button on:click={() => editStepFromReference(list_index, 'after', step_index)} class="step-button" style="flex-grow: 1;">
{@html step}
</button>
<div>
<button class="action_button button_subtle" on:click={() => editStepFromReference(list_index, 'after', step_index)} aria-label="Schritt bearbeiten">
<Pen fill="var(--nord6)" height="1em" width="1em"></Pen>
</button>
<button class="action_button button_subtle" on:click={() => removeStepFromReference(list_index, 'after', step_index)} aria-label="Schritt entfernen">
<Cross fill="var(--nord6)" height="1em" width="1em"></Cross>
</button>
</div>
</div>
</li>
{/each}
</ol>
{/if}
</div>
{:else}
Leer
{/if}
</button>
<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_step(list_index)}" aria-label="Überschrift bearbeiten">
<Pen fill=var(--nord1)></Pen> </button>
<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}" aria-label="Liste entfernen">
<Cross fill=var(--nord1)></Cross>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<h3>
<div class=move_buttons_container>
<button on:click="{() => update_list_position(list_index, 1)}" aria-label="Liste nach oben verschieben">
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
</button>
<button on:click="{() => update_list_position(list_index, -1)}" aria-label="Liste nach unten verschieben">
<svg class=button_arrow xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
</button>
</div>
<button on:click={() => show_modal_edit_subheading_step(list_index)} class="subheading-button">
{#if list.name}
{list.name}
{:else}
Leer
{/if}
</button>
<button class="action_button button_subtle" on:click="{() => show_modal_edit_subheading_step(list_index)}" aria-label="Überschrift bearbeiten">
<Pen fill=var(--nord1)></Pen> </button>
<button class="action_button button_subtle" on:click="{() => remove_list(list_index)}" aria-label="Liste entfernen">
<Cross fill=var(--nord1)></Cross>
</button>
</h3>
<ol>
@@ -532,7 +830,14 @@ h3{
</li>
{/each}
</ol>
{/if}
{/each}
<!-- Button to insert base recipe -->
<button class="insert-base-recipe-button" on:click={() => openSelector(instructions.length)}>
<Plus fill="white" style="display: inline; width: 1.5em; height: 1.5em; vertical-align: middle;"></Plus>
Basisrezept einfügen
</button>
</div>
<div class='adder shadow'>
@@ -566,3 +871,10 @@ h3{
</button>
</div>
</dialog>
<!-- Base recipe selector -->
<BaseRecipeSelector
type="instructions"
onSelect={handleSelect}
bind:open={showSelector}
/>

82
src/lib/components/IngredientsPage.svelte
View File

@@ -6,6 +6,65 @@ import { page } from '$app/stores';
import HefeSwapper from './HefeSwapper.svelte';
let { data } = $props();
// Flatten ingredient references for display
const flattenedIngredients = $derived.by(() => {
if (!data.ingredients) return [];
return data.ingredients.flatMap((item) => {
if (item.type === 'reference' && item.resolvedRecipe) {
const sections = [];
// Get translated or original ingredients
const lang = data.lang || 'de';
const ingredientsToUse = (lang === 'en' &&
item.resolvedRecipe.translations?.en?.ingredients)
? item.resolvedRecipe.translations.en.ingredients
: item.resolvedRecipe.ingredients || [];
// Filter to only sections (not nested references)
const baseIngredients = item.includeIngredients
? ingredientsToUse.filter(i => i.type === 'section' || !i.type)
: [];
// Combine all items into one section
const combinedList = [];
// Add items before
if (item.itemsBefore && item.itemsBefore.length > 0) {
combinedList.push(...item.itemsBefore);
}
// Add base recipe ingredients
baseIngredients.forEach(section => {
if (section.list) {
combinedList.push(...section.list);
}
});
// Add items after
if (item.itemsAfter && item.itemsAfter.length > 0) {
combinedList.push(...item.itemsAfter);
}
// Push as one section with optional label
if (combinedList.length > 0) {
sections.push({
type: 'section',
name: item.showLabel ? (item.labelOverride || item.resolvedRecipe.name) : '',
list: combinedList,
isReference: item.showLabel,
short_name: item.resolvedRecipe.short_name
});
}
return sections;
}
// Regular section - pass through
return [item];
});
});
let multiplier = $state(data.multiplier || 1);
const isEnglish = $derived(data.lang === 'en');
@@ -324,6 +383,19 @@ span
background-color: var(--orange);
box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0, 0.3);
}
/* Base recipe reference link styling */
h3 a {
color: var(--nord11);
text-decoration: underline;
text-decoration-color: var(--nord11);
}
h3 a:hover {
color: var(--nord11);
text-decoration: underline;
text-decoration-color: var(--nord11);
}
</style>
{#if data.ingredients}
<div class=ingredients>
@@ -400,10 +472,15 @@ span
</div>
<h2>{labels.ingredients}</h2>
{#each data.ingredients as list, listIndex}
{#each flattenedIngredients as list, listIndex}
{#if list.name}
<h3>{list.name}</h3>
{#if list.isReference}
<h3><a href="{list.short_name}?multiplier={multiplier}">{@html list.name}</a></h3>
{:else}
<h3>{@html list.name}</h3>
{/if}
{/if}
{#if list.list}
<div class=ingredients_grid>
{#each list.list as item, ingredientIndex}
<div class=amount>{@html adjust_amount(item.amount, multiplier)} {item.unit}</div>
@@ -416,6 +493,7 @@ span
</div>
{/each}
</div>
{/if}
{/each}
</div>
{/if}

82
src/lib/components/InstructionsPage.svelte
View File

@@ -1,6 +1,65 @@
<script>
let { data } = $props();
let multiplier = $state(data.multiplier || 1);
// Flatten instruction references for display
const flattenedInstructions = $derived.by(() => {
if (!data.instructions) return [];
return data.instructions.flatMap((item) => {
if (item.type === 'reference' && item.resolvedRecipe) {
// Get translated or original instructions
const lang = data.lang || 'de';
const instructionsToUse = (lang === 'en' &&
item.resolvedRecipe.translations?.en?.instructions)
? item.resolvedRecipe.translations.en.instructions
: item.resolvedRecipe.instructions || [];
// Filter to only sections (not nested references)
const baseInstructions = item.includeInstructions
? instructionsToUse.filter(i => i.type === 'section' || !i.type)
: [];
// Combine all steps into one section
const combinedSteps = [];
// Add steps before
if (item.stepsBefore && item.stepsBefore.length > 0) {
combinedSteps.push(...item.stepsBefore);
}
// Add base recipe instructions
baseInstructions.forEach(section => {
if (section.steps) {
combinedSteps.push(...section.steps);
}
});
// Add steps after
if (item.stepsAfter && item.stepsAfter.length > 0) {
combinedSteps.push(...item.stepsAfter);
}
// Push as one section with optional label
if (combinedSteps.length > 0) {
return [{
type: 'section',
name: item.showLabel ? (item.labelOverride || item.resolvedRecipe.name) : '',
steps: combinedSteps,
isReference: item.showLabel,
short_name: item.resolvedRecipe.short_name
}];
}
return [];
}
// Regular section - pass through
return [item];
});
});
const isEnglish = $derived(data.lang === 'en');
const labels = $derived({
preparation: isEnglish ? 'Preparation:' : 'Vorbereitung:',
@@ -67,6 +126,19 @@ ol li::marker{
h4{
margin-block: 0;
}
/* Base recipe reference link styling */
h3 a {
color: var(--nord11);
text-decoration: underline;
text-decoration-color: var(--nord11);
}
h3 a:hover {
color: var(--nord11);
text-decoration: underline;
text-decoration-color: var(--nord11);
}
</style>
<div class=instructions>
<div class=additional_info>
@@ -100,15 +172,21 @@ h4{
{#if data.instructions}
<h2>{labels.instructions}</h2>
{#each data.instructions as list}
{#each flattenedInstructions as list}
{#if list.name}
<h3>{list.name}</h3>
{#if list.isReference}
<h3><a href="{list.short_name}?multiplier={multiplier}">{@html list.name}</a></h3>
{:else}
<h3>{@html list.name}</h3>
{/if}
{/if}
{#if list.steps}
<ol>
{#each list.steps as step}
<li>{@html step}</li>
{/each}
</ol>
{/if}
{/each}
{/if}
</div>