test
This commit is contained in:
parent
71fdcf9ffd
commit
ece3b3634c
GPG Key ID:
1D237BE83F9B05E8
312
src/lib/components/EditRecipe.svelte
Normal file
312
src/lib/components/EditRecipe.svelte
Normal file
@ -0,0 +1,312 @@
|
|||||||
|
<script lang='ts'>
|
||||||
|
import Check from '$lib/assets/icons/Check.svelte';
|
||||||
|
import Cross from '$lib/assets/icons/Cross.svelte';
|
||||||
|
import SeasonSelect from '$lib/components/SeasonSelect.svelte';
|
||||||
|
import '$lib/css/action_button.css'
|
||||||
|
import { redirect } from '@sveltejs/kit';
|
||||||
|
import { RecipeModelType } from '../../types/types';
|
||||||
|
|
||||||
|
export let data: PageData;
|
||||||
|
export let actions :[String];
|
||||||
|
export let title
|
||||||
|
let preamble = data.preamble
|
||||||
|
let addendum = data.addendum
|
||||||
|
|
||||||
|
import { season } from '$lib/js/season_store';
|
||||||
|
season.update(() => data.season)
|
||||||
|
let season_local
|
||||||
|
season.subscribe((s) => {
|
||||||
|
season_local = s
|
||||||
|
});
|
||||||
|
|
||||||
|
let old_short_name = data.short_name
|
||||||
|
|
||||||
|
export let card_data ={
|
||||||
|
icon: data.icon,
|
||||||
|
category: data.category,
|
||||||
|
name: data.name,
|
||||||
|
description: data.description,
|
||||||
|
tags: data.tags,
|
||||||
|
}
|
||||||
|
export let add_info ={
|
||||||
|
preparation: data.preparation,
|
||||||
|
fermentation: {
|
||||||
|
bulk: data.fermentation.bulk,
|
||||||
|
final: data.fermentation.final,
|
||||||
|
},
|
||||||
|
baking: {
|
||||||
|
length: data.baking.length,
|
||||||
|
temperature: data.baking.temperature,
|
||||||
|
mode: data.baking.mode,
|
||||||
|
},
|
||||||
|
total_time: data.total_time,
|
||||||
|
}
|
||||||
|
|
||||||
|
let images = data.images
|
||||||
|
export let portions = data.portions
|
||||||
|
|
||||||
|
let short_name = data.short_name
|
||||||
|
let password
|
||||||
|
let datecreated = data.datecreated
|
||||||
|
let datemodified = new Date()
|
||||||
|
|
||||||
|
import type { PageData } from './$types';
|
||||||
|
import CardAdd from '$lib/components/CardAdd.svelte';
|
||||||
|
|
||||||
|
import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
|
||||||
|
export let ingredients = data.ingredients
|
||||||
|
|
||||||
|
import CreateStepList from '$lib/components/CreateStepList.svelte';
|
||||||
|
export let instructions = data.instructions
|
||||||
|
|
||||||
|
|
||||||
|
function get_season(){
|
||||||
|
let season = []
|
||||||
|
const el = document.getElementById("labels");
|
||||||
|
for(var i = 0; i < el.children.length; i++){
|
||||||
|
if(el.children[i].children[0].children[0].checked){
|
||||||
|
season.push(i+1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return season
|
||||||
|
}
|
||||||
|
function write_season(season){
|
||||||
|
const el = document.getElementById("labels");
|
||||||
|
for(var i = 0; i < season.length; i++){
|
||||||
|
el.children[i].children[0].children[0].checked = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function doDelete(){
|
||||||
|
const response = confirm("Bist du dir sicher, dass du das Rezept löschen willst?")
|
||||||
|
if(!response){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const res = await fetch('/api/delete', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
old_short_name,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/json',
|
||||||
|
bearer: password,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
async function doEdit() {
|
||||||
|
const res = await fetch('/api/edit', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
: {
|
||||||
|
...card_data,
|
||||||
|
...add_info,
|
||||||
|
images, // TODO
|
||||||
|
season: season_local,
|
||||||
|
short_name,
|
||||||
|
datecreated,
|
||||||
|
datemodified,
|
||||||
|
instructions,
|
||||||
|
ingredients,
|
||||||
|
addendum,
|
||||||
|
preamble
|
||||||
|
},
|
||||||
|
old_short_name,
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/json',
|
||||||
|
bearer: password,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
const item = await res.json();
|
||||||
|
}
|
||||||
|
async function doAdd () {
|
||||||
|
console.log(add_info.total_time)
|
||||||
|
const res = await fetch('/api/add', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
recipe: {
|
||||||
|
...card_data,
|
||||||
|
...add_info,
|
||||||
|
images: {mediapath: short_name + '.webp', alt: "", caption: ""}, // TODO
|
||||||
|
season: season_local,
|
||||||
|
short_name,
|
||||||
|
datecreated,
|
||||||
|
datemodified,
|
||||||
|
instructions,
|
||||||
|
ingredients,
|
||||||
|
preamble,
|
||||||
|
addendum,
|
||||||
|
},
|
||||||
|
headers: {
|
||||||
|
'content-type': 'application/json',
|
||||||
|
bearer: password,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
input{
|
||||||
|
display: block;
|
||||||
|
border: unset;
|
||||||
|
margin: 1rem auto;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
border-radius: 1000px;
|
||||||
|
background-color: var(--nord4);
|
||||||
|
font-size: 1.1rem;
|
||||||
|
transition: 100ms;
|
||||||
|
|
||||||
|
}
|
||||||
|
input:hover,
|
||||||
|
input:focus-visible
|
||||||
|
{
|
||||||
|
scale: 1.05 1.05;
|
||||||
|
}
|
||||||
|
.list_wrapper{
|
||||||
|
margin-inline: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
max-width: 1000px;
|
||||||
|
gap: 2rem;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 700px){
|
||||||
|
.list_wrapper{
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
input[type=password]{
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
padding-block: 0.5em;
|
||||||
|
display: inline;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.submit_wrapper{
|
||||||
|
position: relative;
|
||||||
|
margin-inline: auto;
|
||||||
|
width: max(300px, 50vw)
|
||||||
|
}
|
||||||
|
.submit_wrapper button{
|
||||||
|
position: absolute;
|
||||||
|
right:-1em;
|
||||||
|
bottom: -0.5em;
|
||||||
|
}
|
||||||
|
.submit_wrapper h2{
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
h1{
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.title_container{
|
||||||
|
max-width: 1000px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
position: relative;
|
||||||
|
width: min(800px, 80vw);
|
||||||
|
margin-block: 2rem;
|
||||||
|
margin-inline: auto;
|
||||||
|
background-color: var(--nord6);
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
}
|
||||||
|
.title p{
|
||||||
|
border: 2px solid var(--nord1);
|
||||||
|
border-radius: 10000px;
|
||||||
|
padding: 0.5em 1em;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
transition: 200ms;
|
||||||
|
}
|
||||||
|
.title p:hover,
|
||||||
|
.title p:focus-within{
|
||||||
|
scale: 1.02 1.02;
|
||||||
|
}
|
||||||
|
.addendum{
|
||||||
|
font-size: 1.1rem;
|
||||||
|
max-width: 90%;
|
||||||
|
margin-inline: auto;
|
||||||
|
border: 2px solid var(--nord1);
|
||||||
|
border-radius: 45px;
|
||||||
|
padding: 1em 1em;
|
||||||
|
transition: 100ms;
|
||||||
|
}
|
||||||
|
.addendum:hover,
|
||||||
|
.addendum:focus-within
|
||||||
|
{
|
||||||
|
scale: 1.02 1.02;
|
||||||
|
}
|
||||||
|
.addendum_wrapper{
|
||||||
|
max-width: 1000px;
|
||||||
|
margin-inline: auto;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.delete{
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: 2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<h1>{title}</h1>
|
||||||
|
|
||||||
|
<CardAdd {card_data}></CardAdd>
|
||||||
|
|
||||||
|
<h3>Kurzname (für URL):</h3>
|
||||||
|
<input bind:value={short_name} placeholder="Kurzname"/>
|
||||||
|
|
||||||
|
<div class=title_container>
|
||||||
|
<div class=title>
|
||||||
|
<h4>Eine etwas längere Beschreibung:</h4>
|
||||||
|
<p bind:innerText={preamble} contenteditable></p>
|
||||||
|
<div class=tags>
|
||||||
|
<h4>Saison:</h4>
|
||||||
|
<SeasonSelect></SeasonSelect>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=list_wrapper>
|
||||||
|
<div>
|
||||||
|
<CreateIngredientList {ingredients} {portions}></CreateIngredientList>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<CreateStepList {instructions} {add_info}></CreateStepList>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class=addendum_wrapper>
|
||||||
|
<h3>Nachtrag:</h3>
|
||||||
|
<div class=addendum bind:innerText={addendum} contenteditable></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if actions.includes('add')}
|
||||||
|
<div class=submit_wrapper>
|
||||||
|
<h2>Neues Rezept hinzufügen:</h2>
|
||||||
|
<input type="password" placeholder=Passwort bind:value={password}>
|
||||||
|
<button class=action_button on:click={doAdd}><Check fill=white width=2rem height=2rem></Check></button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
{#if actions.includes('edit')}
|
||||||
|
<div class=submit_wrapper>
|
||||||
|
<h2>Editiertes Rezept abspeichern:</h2>
|
||||||
|
<input type="password" placeholder=Passwort bind:value={password}>
|
||||||
|
<button class=action_button on:click={doEdit}><Check fill=white width=2rem height=2rem></Check></button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if actions.includes('delete')}
|
||||||
|
<div class=submit_wrapper>
|
||||||
|
<h2>Rezept löschen:</h2>
|
||||||
|
<input type="password" placeholder=Passwort bind:value={password}>
|
||||||
|
<button class=action_button on:click={doDelete}><Cross fill=white width=2rem height=2rem></Cross></button>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
Loading…
Reference in New Issue
Block a user