Update

package.json

@@ -2,6 +2,7 @@
 	"name": "sk-recipes-test",
 	"version": "0.0.1",
 	"private": true,
+	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
@@ -19,7 +20,6 @@
 		"typescript": "^5.0.0",
 		"vite": "^4.3.0"
 	},
-	"type": "module",
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.2.4",
 		"mongoose": "^7.3.0",

src/lib/components/CardAdd.svelte

@@ -5,6 +5,8 @@ import Cross from '$lib/assets/icons/Cross.svelte'
 // all data shared with rest of page in card_data
 export let card_data
 
+import { img } from '$lib/js/img_store';
+
 if(!card_data.tags){
 	card_data.tags = []
 }
@@ -20,20 +22,22 @@ let image_preview_url
 // Herbst: 🍂
 // Sommer: ☀️
 
-
 export function show_local_image(){
 	var file = this.files[0]
 	    // allowed MIME types
-    var mime_types = [ 'image/jpeg', 'image/webp' ];
+    var mime_types = [ 'image/webp' ];
 
     // validate MIME
     if(mime_types.indexOf(file.type) == -1) {
         alert('Error : Incorrect file type');
         return;
     }
-	image_preview_url = URL.createObjectURL(file);
-
-
+    image_preview_url = URL.createObjectURL(file);
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = e => {
+    	img.update(() => e.target.result.split(',')[1]);
+	};
 }
 
 export function remove_selected_images(){

src/lib/components/CreateIngredientList.svelte

@@ -8,9 +8,18 @@ import Check from '$lib/assets/icons/Check.svelte'
 import "$lib/css/action_button.css"
 
 import { do_on_key } from '$lib/components/do_on_key.js'
+import { portions } from '$lib/js/portions_store.js'
+
+let portions_local
+portions.subscribe((p) => {
+	portions_local = p
+});
+
+export function set_portions(){
+	portions.update((p) => portions_local)
+}
 
 export let ingredients
-export let portions
 
 let new_ingredient = {
 	amount: "",
@@ -348,7 +357,7 @@ h3{
 
 <div class=list_wrapper>
 <h4>Portionen:</h4>
-<p contenteditable type="text" bind:innerText={portions}></p>
+<p contenteditable type="text" bind:innerText={portions_local} on:blur={set_portions}></p>
 
 <h2>Zutaten</h2>
 {#each ingredients as list, list_index}

src/lib/components/CreateStepList.svelte

@@ -405,6 +405,10 @@ h3{
 	<div><h4>Backen:</h4>
 		<div><p type="text" bind:innerText={add_info.baking.length} contenteditable placeholder="40 min..."></p></div> bei <div><p type="text" bind:innerText={add_info.baking.temperature} contenteditable placeholder=200...></p></div> °C <div><p type="text" bind:innerText={add_info.baking.mode} contenteditable placeholder="Ober-/Unterhitze..."></p></div></div>
 
+	<div><h4>Kochen:</h4>
+		<p contenteditable type="text" bind:innerText={add_info.cooking}></p>
+	</div>
+
 	<div><h4>Auf dem Teller:</h4>
 		<p contenteditable type="text" bind:innerText={add_info.total_time}></p>
 	</div>

src/lib/components/InstructionsPage.svelte

@@ -69,6 +69,10 @@ h4{
 <div><h4>Backen:</h4> {data.baking.length} bei {data.baking.temperature} °C {data.baking.mode}</div>
 {/if}
 
+{#if data.cooking}
+<div><h4>Kochen:</h4>{data.cooking}</div>
+{/if}
+
 {#if data.total_time}
 <div><h4>Auf dem Teller:</h4>{data.total_time}</div>
 {/if}

src/models/Recipe.ts

@@ -26,6 +26,7 @@ const RecipeSchema = new mongoose.Schema(
 
 	},
     portions :{type:String, default: ""},
+    cooking: {type:String, default: ""},
     total_time : {type:String, default: ""},
     ingredients : [ { name: {type: String, default: ""},
 	    list: [{name: {type: String, default: ""},

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

@@ -8,11 +8,23 @@
 	let addendum = ""
 
 	import { season } from '$lib/js/season_store';
+	import { portions } from '$lib/js/portions_store';
+	import { img } from '$lib/js/img_store';
 	season.update(() => [])
 	let season_local
 	season.subscribe((s) => {
 		season_local = s
 	});
+	let portions_local
+	portions.update(() => "")
+	portions.subscribe((p) => {
+		portions_local = p});
+	let img_local
+	img.update(() => "")
+	img.subscribe((i) => {
+		img_local = i});
+
+
 
 	export let card_data ={
 		icon: "",
@@ -33,13 +45,12 @@
 			mode: "",
 		},
 		total_time: "",
+		cooking: "",
 	}
 
+	let password = ""
 	let images = []
-	export let portions = ""
-
 	let short_name = ""
-	let password
 	let datecreated =  new Date()
 	let datemodified = datecreated
 
@@ -70,7 +81,28 @@
 		}
 	}
 
+	async function upload_img(){
+    		console.log("uploading...")
+		console.log(img_local)
+        	const data = {
+			image: img_local,
+			filename: short_name + '.webp',
+			bearer: password,
+		}
+        	await fetch(`/api/img/add`, {
+        	    method: 'POST',
+        	    headers: {
+        	        'Content-Type': 'application/json',
+        	        Accept: 'application/json',
+			bearer: password,
+        	    },
+        	    body: JSON.stringify(data)
+        	});
+		}
+
 	async function doPost () {
+
+		upload_img()
 		console.log(add_info.total_time)
 		const res = await fetch('/api/add', {
 			method: 'POST',
@@ -81,6 +113,7 @@
 					images: {mediapath: short_name + '.webp', alt: "", caption: ""}, // TODO
 					season: season_local,
 					short_name,
+					portions: portions_local,
 					datecreated,
 					datemodified,
 					instructions,
@@ -221,7 +254,7 @@ h3{
 
 <div class=list_wrapper>
 <div>
-<CreateIngredientList {ingredients} {portions}></CreateIngredientList>
+<CreateIngredientList {ingredients}></CreateIngredientList>
 </div>
 <div>
 <CreateStepList {instructions} {add_info}></CreateStepList>

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

@@ -10,6 +10,14 @@
 	let addendum = data.recipe.addendum
 
 	import { season } from '$lib/js/season_store';
+	import { portions } from '$lib/js/portions_store';
+
+	portions.update(() => data.recipe.portions)
+	let portions_local
+	portions.subscribe((p) => {
+		portions_local = p
+		});
+
 	season.update(() => data.recipe.season)
 	let season_local
 	season.subscribe((s) => {
@@ -37,10 +45,10 @@
 			mode: data.recipe.baking.mode,
 		},
 		total_time: data.recipe.total_time,
+		cooking: data.recipe.cooking,
 	}
 
 	let images = data.recipe.images
-	export let portions = data.recipe.portions
 
 	let short_name = data.recipe.short_name
 	let password
@@ -102,6 +110,7 @@
 					season: season_local,
 					short_name,
 					datecreated,
+					portions: portions_local,
 					datemodified,
 					instructions,
 					ingredients,
@@ -247,7 +256,7 @@ h3{
 
 <div class=list_wrapper>
 <div>
-<CreateIngredientList {ingredients} {portions}></CreateIngredientList>
+<CreateIngredientList {ingredients}></CreateIngredientList>
 </div>
 <div>
 <CreateStepList {instructions} {add_info}></CreateStepList>

src/routes/test/+page.svelte

@@ -1,11 +1,41 @@
-<script lang="ts">
-import TitleImgParallax from "$lib/components/TitleImgParallax.svelte";
+<script lang=ts>
+    let fileInput;
+    let files;
+    let temp
+    let image : String;
+    let base64
+
+    export function store_img_base64(image) {
+        const reader = new FileReader();
+        reader.readAsDataURL(image);
+        reader.onload = e => {
+            base64 = e.target.result.split(',')[1];
+	    //base64 = temp.split(',')[1]
+        };
+    };
+
+    export async function upload(){
+    	console.log("uploading...")
+        const data = {
+		image: base64,
+		filename: "test.webp"
+	}
+        await fetch(`/api/img/add`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                Accept: 'application/json'
+            },
+            body: JSON.stringify(data)
+        });
+
+    }
+
 </script>
+
+<input id="file-to-upload" type="file" accept=".png,.jpg,.webp" bind:files bind:this={fileInput} on:change={() => store_img_base64(files[0])}/>
+<button class="upload-btn" on:click="{upload}">Upload</button>
+<button on:click={console.log(base64)}></button>
+
 <style>
-div{
-	transform: translateY(-1rem);
-}
 </style>
-<div>
-<TitleImgParallax></TitleImgParallax>
-</div>

src/types/types.ts

@@ -22,9 +22,10 @@ export type RecipeModelType = {
   preparation?: string;
   fermentation?:{
 	  bulk: string;
-	  final: string
+	  final: string;
 	}
   portions?: string;
+  cooking?: string;
   total_time?: string;
   ingredients?: [{
 	  name?: string;