API routes now return proper Responses and basic errors are handled

slight improvements in layouting

src/lib/components/Header.svelte

@@ -5,6 +5,7 @@ function show_sidebar(){
 	const nav_el = document.querySelector("nav")
 	nav_el.hidden = !nav_el.hidden
 }
+
 </script>
 <style>
 :global(*){
@@ -28,13 +29,13 @@ nav[hidden]{
 	display:block;
 }
 
-li{
+:global(.site_header li){
 	list-style-type:none;
 	transition: 100ms;
 	color: white;
 	user-select: none;
 }
-li>a{
+:global(.site_header li>a){
 	text-decoration: none;
 	font-family: sans-serif;
 	font-size: 1.2rem;
@@ -43,14 +44,14 @@ li>a{
 	padding: 0.5rem 1rem;
 }
 
-li:hover,
-li:focus-within
+:global(.site_header li:hover),
+:global(.site_header li:focus-within)
 {
 	cursor: pointer;
 	color: var(--red);
 	transform: scale(1.1,1.1);
 }
-ul {
+:global(.site_header) {
 	padding-block: 1.5rem;
 	display: flex;
 	flex-direction: row;
@@ -104,18 +105,18 @@ ul {
 		transform: translateX(100%);
 	}
 
-	ul{
+	:global(.site_header){
 		flex-direction: column;
 		padding-top: min(10rem, 10vh);
 	}
-	li{
+	:global(.site_header li){
 		font-size: 4rem;
 	}
-	li > a{
+	:global(.site_header li > a){
 		font-size: 2rem;
 	}
-	li:hover,
-	li:focus-within{
+	:global(.site_header li:hover),
+	:global(.site_header li:focus-within){
 	transform: unset;
 	}
 }
@@ -136,14 +137,9 @@ margin-top: auto;
 <button class=nav_button on:click={show_sidebar}><svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 448 512"><!--! Font Awesome Free 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg></button>
 </div>
 <nav hidden>
-<ul>
-	<li><a href="/">Home</a></li>
-	<li><a href="/rezepte">Alle Rezepte</a></li>
-	<li><a href="/rezepte/season">In Saison</a></li>
-	<li><a href="/rezepte/category">Nach Kategorie</a></li>
-	<li><a href="/rezepte/tag">Stichwörter</a></li>
-</ul>
+	<slot name=links></slot>
 </nav>
+
 <slot></slot>
 
 </div>

src/routes/+page.svelte

@@ -1,3 +1,11 @@
-<h1>Welcome to SvelteKit</h1>
-<p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
-<a href="/rezepte"> REZEPTE </a>
+<script>
+	import Header from '$lib/components/Header.svelte'
+</script>
+<Header>
+<ul class=site_header slot=links>
+	<li><a href="/rezepte">Rezepte</a></li>
+	<li><a href="https://bilder.bocken.org">Familienbilder</a></li>
+</ul>
+
+
+</Header>

src/routes/api/add/+server.ts

@@ -3,23 +3,26 @@ import { Recipe } from '../../../models/Recipe';
 import { dbConnect, dbDisconnect } from '../../../utils/db';
 import type {RecipeModelType} from '../../../types/types';
 import { BEARER_TOKEN } from '$env/static/private'
+import { error } from '@sveltejs/kit';
 // header: use for bearer token for now
 // recipe json in body
 export const POST: RequestHandler = async ({request}) => {
   let message = await request.json()
   const recipe_json = message.recipe
   const bearer_token = message.headers.bearer
-  console.log("RECIPE:", recipe_json)
-  console.log("BEARER:", bearer_token)
   if(bearer_token === BEARER_TOKEN){
-	console.log("PASSWORD CORRECT")
   	await dbConnect();
-	await Recipe.create(recipe_json);
+	try{
+		await Recipe.create(recipe_json);
+	} catch(e){
+		throw error(400, e)
+	}
   	await dbDisconnect();
-	return {status: 200} //TODO: cleanup error throwing
-  }
+	return new Response(JSON.stringify({msg: "Added recipe successfully"}),{
+			    status: 200,
+  	});
+	}
   else{
-	console.log("PASSWORD INCORRECT")
-	  return {status: 403}
-  }
+	throw error(403, "Password incorrect")
+	}
 };

src/routes/api/delete/+server.ts

@@ -3,6 +3,7 @@ import { Recipe } from '../../../models/Recipe';
 import { dbConnect, dbDisconnect } from '../../../utils/db';
 import type {RecipeModelType} from '../../../types/types';
 import { BEARER_TOKEN } from '$env/static/private'
+import { error } from '@sveltejs/kit';
 // header: use for bearer token for now
 // recipe json in body
 export const POST: RequestHandler = async ({request}) => {
@@ -10,14 +11,14 @@ export const POST: RequestHandler = async ({request}) => {
   const short_name = message.old_short_name
   const bearer_token = message.headers.bearer
   if(bearer_token === BEARER_TOKEN){
-	console.log("PASSWORD CORRECT")
   	await dbConnect();
 	await Recipe.findOneAndDelete({short_name: short_name});
   	await dbDisconnect();
-	return {status: 400} //TODO: cleanup error throwing
+	return new Response(JSON.stringify({msg: "Deleted recipe successfully"}),{
+			    status: 200,
+  	});
   }
   else{
-	console.log("PASSWORD INCORRECT")
-	  return {status: 403}
+	throw error(403, "Password incorrect")
   }
-};
+}

src/routes/api/edit/+server.ts

@@ -15,11 +15,12 @@ export const POST: RequestHandler = async ({request}) => {
   	await dbConnect();
 	await Recipe.findOneAndUpdate({short_name: message.old_short_name }, recipe_json);
   	await dbDisconnect();
-	const res = new Response(JSON.stringify({ message: "Updated Recipe successfully"}), { status: 200 })
-	return res
+	return new Response(JSON.stringify({msg: "Edited recipe successfully"}),{
+			    status: 200,
+  	});
+
   }
   else{
-	console.log("INCORRECT PASSWORD")
 	throw error(403, "Password incorrect")
   }
 };

src/routes/api/img/add/+server.ts

@@ -6,7 +6,6 @@ import { error } from '@sveltejs/kit';
 
 export const POST =  (async ({ request })  => {
     const data = await request.json();
-    console.log(data)
     const filePath = path.join(
             process.cwd(),
             "static",
@@ -14,13 +13,13 @@ export const POST =  (async ({ request })  => {
 	    data.filename as string
         );
     const file = data.image;
-    console.log(data.headers)
     if(data.bearer === BEARER_TOKEN){
-	console.log("PASSWORD CORRECT")
     	writeFileSync(filePath, file, 'base64');
+	return new Response(JSON.stringify({msg: "Added image successfully"}),{
+			    status: 200,
+  	});
     }
     else{
-	console.log("PASSWORD INCORRECT")
     	throw error(403, "Password incorrect")
     }
 

src/routes/api/img/add/+server.ts_

@@ -1,20 +0,0 @@
-import path from 'path'
-import fs from 'fs/promises'
-import { fail, redirect } from '@sveltejs/kit';
-import type { RequestHandler } from './$types';
-
-export const POST = (async ({ request, url}) => {
-    try {
-        const data = Object.fromEntries(await request.formData())
-        const filePath = path.join(
-            process.cwd(),
-            "static",
-            "images",
-	    data.filename as string
-        );
-        await fs.writeFile(filePath, Buffer.from(await (data.image as Blob).arrayBuffer()))
-        return new Response(String({status: 200}))
-    } catch (err) {
-        throw fail(500, { err: err })
-    }
-}) satisfies RequestHandler;

src/routes/rezepte/+layout.svelte

@@ -0,0 +1,15 @@
+<script>
+import Header from '$lib/components/Header.svelte'
+
+</script>
+
+<Header>
+	<ul class=site_header slot=links>
+	<li><a href="/">Home</a></li>
+	<li><a href="/rezepte">Alle Rezepte</a></li>
+	<li><a href="/rezepte/season">In Saison</a></li>
+	<li><a href="/rezepte/category">Nach Kategorie</a></li>
+	<li><a href="/rezepte/tag">Stichwörter</a></li>
+	</ul>
+	<slot></slot>
+</Header>

src/routes/rezepte/[name]/+page.svelte

@@ -89,12 +89,13 @@ h1{
 
 .wrapper_wrapper{
 	background-color: #fbf9f3;
-	width: 100svw;
-	padding-top: 3rem;
+	padding-top: 10rem;
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	margin-bottom: 3rem;
+	transform: translateY(-7rem);
+	z-index: -2;
 }
 
 .wrapper{
@@ -118,7 +119,7 @@ h1{
 	background-color: var(--nord6);
 	padding: 1rem 2rem;
 	translate: 0 1px; /*bruh*/
-	z-index: -1;
+	z-index: 1;
 }
 .icon{
 	position: absolute;
@@ -185,22 +186,13 @@ h4{
 
 </style>
 
-
-<!--<MultiImgWrapper wrap={data.images.length>1} class=double>
-{#each data.images as img}
-	<img width=100% src="/images/{img.mediapath}" alt="{img.alt}">
-	<figure>
-	{#if img.caption}
-		<caption>{img.caption}</caption>
-	{/if}
-	</figure>
-{/each}
-</MultiImgWrapper>-->
-
 <TitleImgParallax src=/images/{data.images[0].mediapath}>
 	<div class=title>
 		<a class="icon" href='/rezepte/season/{data.season[0]}'>{data.icon}</a>
 		<h1>{data.name}</h1>
+		{#if data.description && ! data.preamble}
+			<p>{data.description}</p>
+		{/if}
 		{#if data.preamble}
 			<p>{data.preamble}</p>
 		{/if}

src/routes/rezepte/add/+page.svelte

@@ -126,7 +126,17 @@
 				bearer: password,
      				}
 			})
-		})
+		});
+		if(res.status === 200){
+			const url = location.href.split('/')
+			url.splice(url.length -1, 1);
+			url.push(short_name)
+			location.assign(url.join('/'))
+		}
+		else{
+			const item = await res.json();
+			alert(item.message)
+		}
 
 	}
 

src/routes/rezepte/edit/[name]/+page.svelte

@@ -98,6 +98,15 @@
 			})
 
 		})
+		if(res.status === 200){
+			const url = location.href.split('/')
+			url.splice(url.length -2, 2);
+			location.assign(url.join('/'))
+		}
+		else{
+			const item = await res.json();
+			alert(item.message)
+		}
 	}
 	async function doEdit() {
 		const res = await fetch('/api/edit', {
@@ -124,7 +133,15 @@
      				}
 			})
 		})
-		const item = await res.json();
+		if(res.status === 200){
+			const url = location.href.split('/');
+			url.splice(url.length -2, 1);
+			location.assign(url.join('/'))
+		}
+		else{
+			const item = await res.json()
+			alert(item.message)
+		}
 	}
 </script>
 

src/routes/test/+page.svelte_

@@ -0,0 +1,249 @@
+<form action="/api/img/add" method="post" enctype="multipart/form-data">
+  <input type="file" name="image" placeholder="avatar" />
+  <input type="text" name="filename" placeholder=filename />
+  <button type="submit">upload</button>
+</form>
+
+<script lang="ts">
+	import Check from '$lib/assets/icons/Check.svelte';
+	import SeasonSelect from '$lib/components/SeasonSelect.svelte';
+	import '$lib/css/action_button.css'
+
+    	export let data: PageData;
+	let preamble = ""
+	let addendum = ""
+
+	import { season } from '$lib/js/season_store';
+	season.update(() => [])
+	let season_local
+	season.subscribe((s) => {
+		season_local = s
+	});
+
+	export let card_data ={
+		icon: "",
+		category: "",
+		name: "",
+		description: "",
+		tags: [],
+	}
+	export let add_info ={
+		preparation: "",
+		fermentation: {
+			bulk: "",
+			final: "",
+		},
+		baking: {
+			length: "",
+			temperature: "",
+			mode: "",
+		},
+		total_time: "",
+		cooking: "",
+	}
+
+	let images = []
+	export let portions = ""
+
+	let short_name = ""
+	let password
+	let datecreated =  new Date()
+	let datemodified = datecreated
+
+    	import type { PageData } from './$types';
+	import CardAdd from '$lib/components/CardAdd.svelte';
+
+	import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
+	export let ingredients = []
+
+	import CreateStepList from '$lib/components/CreateStepList.svelte';
+	export let 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 doPost () {
+		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,
+					portions,
+					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;
+}
+</style>
+<h1>Rezept erstellen</h1>
+<form action="/api/img/add" method="post" enctype="multipart/form-data">
+<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>
+
+<div class=submit_wrapper>
+<h2>Neues Rezept hinzufügen:</h2>
+<input type="password" placeholder=Passwort bind:value={password}>
+<button type=submit class=action_button on:click={doPost}><Check fill=white width=2rem height=2rem></Check></button>
+</form>
+</div>