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

recipes: add defaultForm cake pan selector to add page

Browse Source
This commit is contained in:
Alexander Bocken
2026-02-27 20:11:32 +01:00
parent 7a1321279d
commit 01ba7066fb
1 changed files with 64 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/routes/[recipeLang=recipeLang]/add/+page.svelte
View File

@@ -64,6 +64,7 @@
let short_name = $state(""); let short_name = $state("");
let isBaseRecipe = $state(false); let isBaseRecipe = $state(false);
let defaultForm = $state(null);
let ingredients = $state<any[]>([]); let ingredients = $state<any[]>([]);
let instructions = $state<any[]>([]); let instructions = $state<any[]>([]);
@@ -101,6 +102,7 @@
preamble, preamble,
addendum, addendum,
isBaseRecipe, isBaseRecipe,
defaultForm,
}); });
// Show translation workflow before submission // Show translation workflow before submission
@@ -263,6 +265,29 @@ button.action_button {
background-color: var(--nord6-dark); background-color: var(--nord6-dark);
} }
} }
.form-size-section {
max-width: 600px;
margin: 1rem auto;
text-align: center;
}
.form-size-controls {
display: flex;
gap: 1.5rem;
justify-content: center;
margin-bottom: 0.5rem;
}
.form-size-inputs {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.form-size-inputs input[type="number"] {
width: 4em;
display: inline;
margin: 0 0.3em;
}
.error-message { .error-message {
background: var(--nord11); background: var(--nord11);
color: var(--nord6); color: var(--nord6);
@@ -336,6 +361,7 @@ button.action_button {
<input type="hidden" name="icon" value={card_data.icon} /> <input type="hidden" name="icon" value={card_data.icon} />
<input type="hidden" name="portions" value={portions_local} /> <input type="hidden" name="portions" value={portions_local} />
<input type="hidden" name="isBaseRecipe" value={isBaseRecipe ? "true" : "false"} /> <input type="hidden" name="isBaseRecipe" value={isBaseRecipe ? "true" : "false"} />
<input type="hidden" name="defaultForm_json" value={defaultForm ? JSON.stringify(defaultForm) : ''} />
<div style="text-align: center; margin: 1rem;"> <div style="text-align: center; margin: 1rem;">
<Toggle <Toggle
@@ -344,6 +370,44 @@ button.action_button {
/> />
</div> </div>
<!-- Default Form (Cake Pan) -->
<div class="form-size-section">
<h3>Backform (Standard):</h3>
<div class="form-size-controls">
<label>
<input type="radio" name="formShape" value="none" checked={!defaultForm} onchange={() => { defaultForm = null; }} />
Keine
</label>
<label>
<input type="radio" name="formShape" value="round" checked={defaultForm?.shape === 'round'} onchange={() => { defaultForm = { shape: 'round', diameter: defaultForm?.diameter || 26 }; }} />
Rund
</label>
<label>
<input type="radio" name="formShape" value="rectangular" checked={defaultForm?.shape === 'rectangular'} onchange={() => { defaultForm = { shape: 'rectangular', width: defaultForm?.width || 20, length: defaultForm?.length || 30 }; }} />
Rechteckig
</label>
<label>
<input type="radio" name="formShape" value="gugelhupf" checked={defaultForm?.shape === 'gugelhupf'} onchange={() => { defaultForm = { shape: 'gugelhupf', diameter: defaultForm?.diameter || 24, innerDiameter: defaultForm?.innerDiameter || 8 }; }} />
Gugelhupf
</label>
</div>
{#if defaultForm?.shape === 'round'}
<div class="form-size-inputs">
<label>Durchmesser: <input type="number" min="1" step="1" bind:value={defaultForm.diameter} /> cm</label>
</div>
{:else if defaultForm?.shape === 'rectangular'}
<div class="form-size-inputs">
<label>Breite: <input type="number" min="1" step="1" bind:value={defaultForm.width} /> cm</label>
<label>Länge: <input type="number" min="1" step="1" bind:value={defaultForm.length} /> cm</label>
</div>
{:else if defaultForm?.shape === 'gugelhupf'}
<div class="form-size-inputs">
<label>Außen-Ø: <input type="number" min="1" step="1" bind:value={defaultForm.diameter} /> cm</label>
<label>Innen-Ø: <input type="number" min="1" step="1" bind:value={defaultForm.innerDiameter} /> cm</label>
</div>
{/if}
</div>
<div class="title_container"> <div class="title_container">
<div class="title"> <div class="title">
<h4>Eine etwas längere Beschreibung:</h4> <h4>Eine etwas längere Beschreibung:</h4>