Add yeast type swapper with intelligent unit conversion
All checks were successful
CI / update (push) Successful in 16s
All checks were successful
CI / update (push) Successful in 16s
- Implements swap button for Frischhefe/Trockenhefe ingredients - Supports 3:1 fresh-to-dry yeast conversion ratio - Handles special Prise unit conversions (1 Prise = 1 Prise or 1g) - Accounts for recipe multipliers (0.5x, 1x, 1.5x, 2x, 3x, custom) - Automatic unit switching between grams and Prise for practical cooking 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -1,18 +1,50 @@
|
|||||||
<script>
|
<script>
|
||||||
// get ingredients_store from IngredientsPage.svelte
|
import { createEventDispatcher } from 'svelte';
|
||||||
import ingredients_store from './IngredientsPage.svelte';
|
|
||||||
let ingredients = [];
|
export let item;
|
||||||
ingredients_store.subscribe(value => {
|
export let multiplier = 1;
|
||||||
ingredients = value;
|
|
||||||
});
|
const dispatch = createEventDispatcher();
|
||||||
function toggleHefe(){
|
|
||||||
if(data.ingredients[i].list[j].name == "Frischhefe"){
|
function toggleHefe() {
|
||||||
data.ingredients[i].list[j].name = "Trockenhefe"
|
let newName, newAmount, newUnit = item.unit;
|
||||||
data.ingredients[i].list[j].amount = item.amount / 3
|
|
||||||
|
if (item.name === "Frischhefe") {
|
||||||
|
// Convert fresh yeast to dry yeast
|
||||||
|
const originalAmount = parseFloat(item.amount) / multiplier;
|
||||||
|
newName = "Trockenhefe";
|
||||||
|
|
||||||
|
if (item.unit === "Prise") {
|
||||||
|
// "1 Prise Frischhefe" → "1 Prise Trockenhefe"
|
||||||
|
newAmount = item.amount;
|
||||||
|
newUnit = "Prise";
|
||||||
|
} else if (item.unit === "g" && originalAmount === 1) {
|
||||||
|
// "1 g Frischhefe" → "1 Prise Trockenhefe"
|
||||||
|
newAmount = "1";
|
||||||
|
newUnit = "Prise";
|
||||||
|
} else {
|
||||||
|
// Normal conversion: "9 g Frischhefe" → "3 g Trockenhefe" (divide by 3)
|
||||||
|
newAmount = (originalAmount / 3).toString();
|
||||||
|
newUnit = "g";
|
||||||
|
}
|
||||||
|
} else if (item.name === "Trockenhefe") {
|
||||||
|
// Convert dry yeast to fresh yeast
|
||||||
|
const originalAmount = parseFloat(item.amount) / multiplier;
|
||||||
|
newName = "Frischhefe";
|
||||||
|
|
||||||
|
if (item.unit === "Prise") {
|
||||||
|
// "1 Prise Trockenhefe" → "1 g Frischhefe"
|
||||||
|
newAmount = "1";
|
||||||
|
newUnit = "g";
|
||||||
|
} else {
|
||||||
|
// Normal conversion: "1 g Trockenhefe" → "3 g Frischhefe" (multiply by 3)
|
||||||
|
newAmount = (originalAmount * 3).toString();
|
||||||
|
newUnit = "g";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
else{
|
|
||||||
item.name = "Frischhefe"
|
if (newName && newAmount) {
|
||||||
item.amount = item.amount * 3
|
dispatch('toggle', { name: newName, amount: newAmount, unit: newUnit });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
@@ -28,7 +60,6 @@
|
|||||||
fill: var(--blue);
|
fill: var(--blue);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<button onclick={toggleHefe}>
|
<button on:click={toggleHefe} title="Zwischen Frischhefe und Trockenhefe wechseln">
|
||||||
{item.amount} {item.unit} {item.name}
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M105.1 202.6c7.7-21.8 20.2-42.3 37.8-59.8c62.5-62.5 163.8-62.5 226.3 0L386.3 160 352 160c-17.7 0-32 14.3-32 32s14.3 32 32 32l111.5 0c0 0 0 0 0 0l.4 0c17.7 0 32-14.3 32-32l0-112c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 35.2L414.4 97.6c-87.5-87.5-229.3-87.5-316.8 0C73.2 122 55.6 150.7 44.8 181.4c-5.9 16.7 2.9 34.9 19.5 40.8s34.9-2.9 40.8-19.5zM39 289.3c-5 1.5-9.8 4.2-13.7 8.2c-4 4-6.7 8.8-8.1 14c-.3 1.2-.6 2.5-.8 3.8c-.3 1.7-.4 3.4-.4 5.1L16 432c0 17.7 14.3 32 32 32s32-14.3 32-32l0-35.1 17.6 17.5c0 0 0 0 0 0c87.5 87.4 229.3 87.4 316.7 0c24.4-24.4 42.1-53.1 52.9-83.8c5.9-16.7-2.9-34.9-19.5-40.8s-34.9 2.9-40.8 19.5c-7.7 21.8-20.2 42.3-37.8 59.8c-62.5 62.5-163.8 62.5-226.3 0l-.1-.1L125.6 352l34.4 0c17.7 0 32-14.3 32-32s-14.3-32-32-32L48.4 288c-1.6 0-3.2 .1-4.8 .3s-3.1 .5-4.6 1z"/></svg>
|
||||||
</button>
|
</button>
|
||||||
|
@@ -1,6 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import { onNavigate } from "$app/navigation";
|
import { onNavigate } from "$app/navigation";
|
||||||
|
import HefeSwapper from './HefeSwapper.svelte';
|
||||||
export let data
|
export let data
|
||||||
let multiplier;
|
let multiplier;
|
||||||
let custom_mul = "…"
|
let custom_mul = "…"
|
||||||
@@ -119,6 +120,15 @@ function apply_if_not_NaN(custom){
|
|||||||
custom_mul = "…"
|
custom_mul = "…"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleHefeToggle(event, item) {
|
||||||
|
item.name = event.detail.name;
|
||||||
|
item.amount = event.detail.amount;
|
||||||
|
if (event.detail.unit) {
|
||||||
|
item.unit = event.detail.unit;
|
||||||
|
}
|
||||||
|
data = data; // Trigger reactivity
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style>
|
||||||
*{
|
*{
|
||||||
@@ -232,7 +242,13 @@ span
|
|||||||
{/if}
|
{/if}
|
||||||
<div class=ingredients_grid>
|
<div class=ingredients_grid>
|
||||||
{#each list.list as item}
|
{#each list.list as item}
|
||||||
<div class=amount>{@html adjust_amount(item.amount, multiplier)} {item.unit}</div><div class=name>{@html item.name.replace("{{multiplier}}", multiplier * item.amount)}</div>
|
<div class=amount>{@html adjust_amount(item.amount, multiplier)} {item.unit}</div>
|
||||||
|
<div class=name>
|
||||||
|
{@html item.name.replace("{{multiplier}}", multiplier * item.amount)}
|
||||||
|
{#if item.name === "Frischhefe" || item.name === "Trockenhefe"}
|
||||||
|
<HefeSwapper {item} {multiplier} on:toggle={(event) => handleHefeToggle(event, item)} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
Reference in New Issue
Block a user