functioning Add recipe (not submitting) missing: season
modals partly stylized add steps stylized
This commit is contained in:
@ -1,4 +1,7 @@
|
||||
<script lang="ts">
|
||||
|
||||
import Cross from '$lib/assets/icons/Cross.svelte'
|
||||
|
||||
export let tags:string[] = []
|
||||
let new_tag
|
||||
|
||||
@ -208,9 +211,16 @@ input::placeholder{
|
||||
padding-inline: 0.5em;
|
||||
padding-block: 0.2em;
|
||||
}
|
||||
.card .name:hover{
|
||||
color:var(--nord0);
|
||||
}
|
||||
.card .description{
|
||||
padding-inline: 1em;
|
||||
color: var(--nord4);
|
||||
width: calc(300px - 2em); /*??*/
|
||||
}
|
||||
.card .description:hover{
|
||||
color: var(--nord0);
|
||||
}
|
||||
.card .tags{
|
||||
display: flex;
|
||||
@ -322,13 +332,15 @@ input::placeholder{
|
||||
|
||||
|
||||
<div class=card href="" >
|
||||
|
||||
<input class=icon placeholder=😀/>
|
||||
{#if image_preview_url}
|
||||
<img src={image_preview_url} class=img_preview width=300px height=300px />
|
||||
{/if}
|
||||
<div class=img_label_wrapper>
|
||||
{#if image_preview_url}
|
||||
<button class=delete on:click={remove_selected_images}><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512">><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>
|
||||
<button class=delete on:click={remove_selected_images}>
|
||||
<Cross fill=white style="width:2rem;height:2rem;"></Cross>
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
@ -351,4 +363,5 @@ input::placeholder{
|
||||
<div class="tag input_wrapper"><span class=input>+</span><input class="tag_input" type="text" on:keypress={add_on_enter} on:focusout={add_to_tags} size="1" bind:value={new_tag} placeholder=Stichwort...></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
151
src/lib/components/CreateIngredientList.svelte
Normal file
151
src/lib/components/CreateIngredientList.svelte
Normal file
@ -0,0 +1,151 @@
|
||||
<script lang='ts'>
|
||||
|
||||
import Pen from '$lib/assets/icons/Pen.svelte'
|
||||
import Cross from '$lib/assets/icons/Cross.svelte'
|
||||
import Plus from '$lib/assets/icons/Plus.svelte'
|
||||
import Check from '$lib/assets/icons/Check.svelte'
|
||||
|
||||
let ingredients_lists = [
|
||||
{name: "",
|
||||
ingredients: [],
|
||||
}
|
||||
]
|
||||
|
||||
let new_ingredient = {
|
||||
amount: "",
|
||||
unit: "",
|
||||
name: "",
|
||||
sublist: "",
|
||||
}
|
||||
|
||||
let edit_ingredient = {
|
||||
amount: "",
|
||||
unit: "",
|
||||
name: "",
|
||||
list_index: "",
|
||||
ingredient_index: "",
|
||||
}
|
||||
|
||||
let edit_heading = {
|
||||
name:"",
|
||||
list_index: "",
|
||||
}
|
||||
|
||||
function get_sublist_index(sublist_name, list){
|
||||
for(var i =0; i < list.length; i++){
|
||||
if(list[i].name == sublist_name){
|
||||
return i
|
||||
}
|
||||
}
|
||||
return -1
|
||||
}
|
||||
export function show_modal_edit_subheading_ingredient(list_index){
|
||||
edit_heading.name = ingredients_lists[list_index].name
|
||||
edit_heading.list_index = list_index
|
||||
const el = document.querySelector('#edit_subheading_ingredient_modal')
|
||||
el.showModal()
|
||||
}
|
||||
export function edit_subheading_and_close_modal(){
|
||||
ingredients_lists[edit_heading.list_index].name = edit_heading.name
|
||||
const el = document.querySelector('#edit_subheading_ingredient_modal')
|
||||
el.close()
|
||||
}
|
||||
|
||||
export function add_new_ingredient(){
|
||||
let list_index = get_sublist_index(new_ingredient.sublist, ingredients_lists)
|
||||
if(list_index == -1){
|
||||
ingredients_lists.push({
|
||||
name: new_ingredient.sublist,
|
||||
ingredients: [],
|
||||
})
|
||||
list_index = ingredients_lists.length - 1
|
||||
}
|
||||
ingredients_lists[list_index].ingredients.push({ ...new_ingredient})
|
||||
ingredients_lists = ingredients_lists //tells svelte to update dom
|
||||
}
|
||||
export function remove_list(list_index){
|
||||
ingredients_lists.splice(list_index, 1);
|
||||
ingredients_lists = ingredients_lists //tells svelte to update dom
|
||||
}
|
||||
export function remove_ingredient(list_index, ingredient_index){
|
||||
ingredients_lists[list_index].ingredients.splice(ingredient_index, 1)
|
||||
ingredients_lists = ingredients_lists //tells svelte to update dom
|
||||
}
|
||||
|
||||
export function show_modal_edit_ingredient(list_index, ingredient_index){
|
||||
edit_ingredient = {...ingredients_lists[list_index].ingredients[ingredient_index]}
|
||||
edit_ingredient.list_index = list_index
|
||||
edit_ingredient.ingredient_index = ingredient_index
|
||||
const modal_el = document.querySelector("#edit_ingredient_modal");
|
||||
modal_el.showModal();
|
||||
}
|
||||
export function edit_ingredient_and_close_modal(){
|
||||
ingredients_lists[edit_ingredient.list_index].ingredients[edit_ingredient.ingredient_index] = {
|
||||
amount: edit_ingredient.amount,
|
||||
unit: edit_ingredient.unit,
|
||||
name: edit_ingredient.name,
|
||||
}
|
||||
const modal_el = document.querySelector("#edit_ingredient_modal");
|
||||
modal_el.close();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
|
||||
|
||||
{#each ingredients_lists as list, list_index}
|
||||
<h3>
|
||||
{#if list.name}
|
||||
{list.name}
|
||||
{:else}
|
||||
Leer
|
||||
{/if}
|
||||
<button class=edit on:click="{() => show_modal_edit_subheading_ingredient(list_index)}">
|
||||
<Pen></Pen> </button>
|
||||
<button class=remove on:click="{() => remove_list(list_index)}">
|
||||
<Cross></Cross>
|
||||
</button>
|
||||
</h3>
|
||||
<ul>
|
||||
{#each list.ingredients as ingredient, ingredient_index}
|
||||
<li>{ingredient.amount} {ingredient.unit} {ingredient.name}
|
||||
<button class=edit on:click={() => show_modal_edit_ingredient(list_index, ingredient_index)}>
|
||||
<Pen></Pen>
|
||||
</button>
|
||||
<button class=remove on:click="{() => remove_ingredient(list_index, ingredient_index)}">
|
||||
<Cross></Cross>
|
||||
</button>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/each}
|
||||
|
||||
<input type="text" bind:value={new_ingredient.sublist} placeholder="Unterkategorie (optional)">
|
||||
<div class=ingredient>
|
||||
<input type="text" id=amount placeholder="250..." bind:value={new_ingredient.amount}>
|
||||
<input type="text" id=unit placeholder="mL..." bind:value={new_ingredient.unit}>
|
||||
<input type="text" id=name placeholder="Milch..." bind:value={new_ingredient.name}>
|
||||
<button on:click={() => add_new_ingredient()}>
|
||||
<Plus></Plus>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<dialog class=ingredient id=edit_ingredient_modal>
|
||||
<input type="text" id=amount placeholder="250..." bind:value={edit_ingredient.amount}>
|
||||
<input type="text" id=unit placeholder="mL..." bind:value={edit_ingredient.unit}>
|
||||
<input type="text" id=name placeholder="Milch..." bind:value={edit_ingredient.name}>
|
||||
<button on:click={edit_ingredient_and_close_modal}>
|
||||
<Check></Check>
|
||||
</button>
|
||||
|
||||
</dialog>
|
||||
|
||||
<dialog id=edit_subheading_ingredient_modal>
|
||||
<input type="text" bind:value={edit_heading.name}>
|
||||
<button on:click={edit_subheading_and_close_modal}>
|
||||
<Check></Check>
|
||||
</button>
|
||||
</dialog>
|
||||
298
src/lib/components/CreateStepList.svelte
Normal file
298
src/lib/components/CreateStepList.svelte
Normal file
@ -0,0 +1,298 @@
|
||||
<script lang='ts'>
|
||||
|
||||
import Pen from '$lib/assets/icons/Pen.svelte'
|
||||
import Cross from '$lib/assets/icons/Cross.svelte'
|
||||
import Plus from '$lib/assets/icons/Plus.svelte'
|
||||
import Check from '$lib/assets/icons/Check.svelte'
|
||||
|
||||
import '$lib/components/nordtheme.css'
|
||||
|
||||
const step_placeholder = "Kartoffeln schälen..."
|
||||
let instructions = [{
|
||||
name: "",
|
||||
steps: [],
|
||||
}]
|
||||
|
||||
let new_step = {
|
||||
name: "",
|
||||
step: "Kartoffeln schälen..."
|
||||
}
|
||||
|
||||
let edit_heading = {
|
||||
name:"",
|
||||
list_index: "",
|
||||
}
|
||||
|
||||
function get_sublist_index(sublist_name, list){
|
||||
for(var i =0; i < list.length; i++){
|
||||
if(list[i].name == sublist_name){
|
||||
return i
|
||||
}
|
||||
}
|
||||
return -1
|
||||
}
|
||||
export function remove_list(list_index){
|
||||
instructions.splice(list_index, 1);
|
||||
instructions = instructions //tells svelte to update dom
|
||||
}
|
||||
|
||||
export function add_new_step(){
|
||||
let list_index = get_sublist_index(new_step.name, instructions)
|
||||
if(list_index == -1){
|
||||
instructions.push({
|
||||
name: new_step.name,
|
||||
steps: [ new_step.step ],
|
||||
})
|
||||
list_index = instructions.length - 1
|
||||
}
|
||||
else{
|
||||
instructions[list_index].steps.push(new_step.step)
|
||||
}
|
||||
const el = document.querySelector("#step")
|
||||
el.innerHTML = step_placeholder
|
||||
instructions = instructions //tells svelte to update dom
|
||||
|
||||
new_step.step = ""
|
||||
add_placeholder()
|
||||
}
|
||||
|
||||
export function remove_step(list_index, step_index){
|
||||
instructions[list_index].steps.splice(step_index, 1)
|
||||
instructions = instructions //tells svelte to update dom
|
||||
}
|
||||
|
||||
let edit_step = {
|
||||
name: "",
|
||||
step: "",
|
||||
list_index: 0,
|
||||
step_index: 0,
|
||||
}
|
||||
export function show_modal_edit_step(list_index, step_index){
|
||||
edit_step = {
|
||||
step: instructions[list_index].steps[step_index],
|
||||
name: instructions[list_index].name,
|
||||
}
|
||||
edit_step.list_index = list_index
|
||||
edit_step.step_index = step_index
|
||||
const modal_el = document.querySelector("#edit_step_modal");
|
||||
modal_el.showModal();
|
||||
}
|
||||
|
||||
export function edit_step_and_close_modal(){
|
||||
instructions[edit_step.list_index].steps[edit_step.step_index] = edit_step.step
|
||||
const modal_el = document.querySelector("#edit_step_modal");
|
||||
modal_el.close();
|
||||
}
|
||||
|
||||
export function show_modal_edit_subheading_step(list_index){
|
||||
edit_heading.name = instructions[list_index].name
|
||||
edit_heading.list_index = list_index
|
||||
const el = document.querySelector('#edit_subheading_steps_modal')
|
||||
el.showModal()
|
||||
}
|
||||
|
||||
export function edit_subheading_steps_and_close_modal(){
|
||||
instructions[edit_heading.list_index].name = edit_heading.name
|
||||
const modal_el = document.querySelector("#edit_subheading_steps_modal");
|
||||
modal_el.close();
|
||||
}
|
||||
|
||||
|
||||
export function clear_step(){
|
||||
const el = document.querySelector("#step")
|
||||
if(el.innerHTML == step_placeholder){
|
||||
el.innerHTML = ""
|
||||
}
|
||||
}
|
||||
export function add_placeholder(){
|
||||
const el = document.querySelector("#step")
|
||||
if(el.innerHTML == ""){
|
||||
el.innerHTML = "Kartoffeln schälen..."
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
input::placeholder{
|
||||
all:unset;
|
||||
}
|
||||
|
||||
.adder{
|
||||
margin-inline: auto;
|
||||
position: relative;
|
||||
margin-block: 3rem;
|
||||
width: 50ch;
|
||||
border-radius: 20px;
|
||||
transition: 200ms;
|
||||
}
|
||||
.shadow{
|
||||
box-shadow: 0 0 1em 0.2em rgba(0,0,0,0.3);
|
||||
}
|
||||
.adder button{
|
||||
all:unset;
|
||||
position: absolute;
|
||||
right: -1.5rem;
|
||||
bottom: -1.5rem;
|
||||
cursor: pointer;
|
||||
display:flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--red);
|
||||
border-radius:100000px;
|
||||
padding: 1rem;
|
||||
transition: 100ms;
|
||||
box-shadow: 0 0 1em 0.4em rgba(0,0,0,0.3);
|
||||
}
|
||||
.adder button:hover{
|
||||
background-color: var(--nord0);
|
||||
transform: scale(1.1,1.1);
|
||||
box-shadow: 0 0 1em 0.8em rgba(0,0,0,0.3);
|
||||
}
|
||||
.category{
|
||||
all: unset;
|
||||
position: absolute;
|
||||
--font_size: 1.5rem;
|
||||
top: -1em;
|
||||
left: -1em;
|
||||
font-family: sans-serif;
|
||||
font-size: 1.5rem;
|
||||
background-color: var(--nord0);
|
||||
color: var(--nord4);
|
||||
border-radius: 1000000px;
|
||||
width: 23ch;
|
||||
padding: 0.5em 1em;
|
||||
transition: 100ms;
|
||||
box-shadow: 0.5em 0.5em 1em 0.4em rgba(0,0,0,0.3);
|
||||
}
|
||||
.category:hover{
|
||||
background-color: var(--nord1);
|
||||
transform: scale(1.05,1.05);
|
||||
}
|
||||
.adder:hover{
|
||||
transform: scale(1.1, 1.1);
|
||||
}
|
||||
|
||||
.add_step p{
|
||||
font-family: sans-serif;
|
||||
width: 100%;
|
||||
font-size: 1.2rem;
|
||||
padding: 2rem;
|
||||
padding-top: 2.5rem;
|
||||
border-radius: 20px;
|
||||
background-color: var(--blue);
|
||||
color: #bbb;
|
||||
transition: 200ms;
|
||||
}
|
||||
.add_step p:hover,
|
||||
.add_step p:focus-visible
|
||||
{
|
||||
color: white;
|
||||
}
|
||||
|
||||
dialog{
|
||||
box-sizing: content-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
border: unset;
|
||||
margin: 0;
|
||||
}
|
||||
dialog .adder{
|
||||
margin-top: 5rem;
|
||||
}
|
||||
dialog h2{
|
||||
font-size: 3rem;
|
||||
font-family: sans-serif;
|
||||
color: white;
|
||||
text-align: center;
|
||||
margin-top: 30%;
|
||||
}
|
||||
|
||||
@keyframes shake{
|
||||
0%{
|
||||
transform: rotate(0)
|
||||
scale(1,1);
|
||||
}
|
||||
25%{
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(30deg)
|
||||
scale(1.2,1.2)
|
||||
;
|
||||
}
|
||||
50%{
|
||||
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(-30deg)
|
||||
scale(1.2,1.2);
|
||||
}
|
||||
74%{
|
||||
|
||||
box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
|
||||
transform: rotate(30deg)
|
||||
scale(1.2, 1.2);
|
||||
}
|
||||
100%{
|
||||
transform: rotate(0)
|
||||
scale(1,1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
{#each instructions as list, list_index}
|
||||
<h3>
|
||||
{#if list.name}
|
||||
{list.name}
|
||||
{:else}
|
||||
Leer
|
||||
{/if}
|
||||
<button class=edit on:click="{() => show_modal_edit_subheading_step(list_index)}">
|
||||
<Pen></Pen> </button>
|
||||
<button class=remove on:click="{() => remove_list(list_index)}">
|
||||
<Cross></Cross>
|
||||
</button>
|
||||
</h3>
|
||||
<ol>
|
||||
{#each list.steps as step, step_index}
|
||||
<li>{step}
|
||||
<button class=edit on:click={() => show_modal_edit_step(list_index, step_index)}>
|
||||
<Pen></Pen>
|
||||
</button>
|
||||
<button class=remove on:click="{() => remove_step(list_index, step_index)}">
|
||||
<Cross></Cross>
|
||||
</button>
|
||||
|
||||
</li>
|
||||
{/each}
|
||||
</ol>
|
||||
{/each}
|
||||
|
||||
<div class='adder shadow'>
|
||||
<input class=category type="text" bind:value={new_step.name} placeholder="Unterkategorie (optional)">
|
||||
<div class=add_step>
|
||||
<p id=step contenteditable on:focus='{clear_step}' on:blur={add_placeholder} bind:innerHTML={new_step.step}></p>
|
||||
<button on:click={() => add_new_step()}>
|
||||
<Plus fill=white style="height: 2rem; width: 2rem"></Plus>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<dialog id=edit_step_modal>
|
||||
<h2>Schritt verändern</h2>
|
||||
<div class=adder>
|
||||
<input class=category type="text" bind:value={edit_step.name} placeholder="Unterkategorie (optional)">
|
||||
<div class=add_step>
|
||||
<p id=step contenteditable bind:innerHTML={edit_step.step}></p>
|
||||
<button on:click="{() => edit_step_and_close_modal()}" >
|
||||
<Check fill=white style="height: 2rem; width: 2rem"></Check>
|
||||
</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id=edit_subheading_steps_modal>
|
||||
<input type="text" bind:value={edit_heading.name}>
|
||||
<button on:click={edit_subheading_steps_and_close_modal}>
|
||||
<Check></Check>
|
||||
</button>
|
||||
</dialog>
|
||||
Reference in New Issue
Block a user