From 24619de64eedd22ef10f687486a93ce648746958 Mon Sep 17 00:00:00 2001
From: AlexBocken <alexander@bocken.org>
Date: Wed, 21 Jun 2023 22:54:16 +0200
Subject: [PATCH] Image upload stylized

---
 src/lib/components/ActionButton.svelte |  78 ++++++
 src/lib/components/AddButton.svelte    |   6 +
 src/lib/components/CardAdd.svelte      | 354 +++++++++++++++++++++++++
 src/lib/components/EditButton.svelte   |   7 +
 src/lib/components/TagSelector.svelte  |   0
 src/routes/rezepte/add/+page.svelte    |   8 +-
 6 files changed, 447 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/ActionButton.svelte
 create mode 100644 src/lib/components/AddButton.svelte
 create mode 100644 src/lib/components/CardAdd.svelte
 create mode 100644 src/lib/components/EditButton.svelte
 create mode 100644 src/lib/components/TagSelector.svelte

diff --git a/src/lib/components/ActionButton.svelte b/src/lib/components/ActionButton.svelte
new file mode 100644
index 0000000..b54d420
--- /dev/null
+++ b/src/lib/components/ActionButton.svelte
@@ -0,0 +1,78 @@
+<script lang='ts'>
+export let href
+import "$lib/components/nordtheme.css"
+</script>
+
+<style>
+.container{
+position: fixed;
+bottom:0;
+right:0;
+width: 2rem;
+height: 2rem;
+padding: 2rem;
+border-radius: 1000px;
+margin: 2rem;
+transition: 200ms;
+background-color: var(--red);
+box-shadow: 0em 0em 0.2em 0.2em rgba(0,0,0,0.2);
+display: grid;
+justify-content: center;
+align-content: center;
+
+}
+:global(.icon_svg){
+width: 2rem;
+height: 2rem;
+fill: var(--nord4);
+}
+
+:root{
+    --angle: 15deg;
+}
+.container:hover,
+.container:focus-within
+{
+	background-color: var(--nord3);
+box-shadow: 0em 0em 0.5em 0.5em rgba(0,0,0,0.2);
+	/*transform: scale(1.2,1.2);*/
+	animation: shake 0.5s;
+	animation-fill-mode: forwards;
+}
+:global(.container:hover .icon_svg),
+:global(.container:focus-within .icon_svg){
+	fill: white;
+}
+
+@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(var(--angle))
+      		scale(1.2,1.2)
+      ;
+    }
+    50%{
+
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+      	transform: rotate(calc(-1* var(--angle)))
+      		scale(1.2,1.2);
+    }
+    74%{
+
+    	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+  	transform: rotate(var(--angle))
+  		scale(1.2, 1.2);
+	}
+	100%{
+      transform: rotate(0)
+      scale(1.2,1.2);
+    }
+  }
+</style>
+<a class=container {href}>
+	<slot></slot>
+</a>
diff --git a/src/lib/components/AddButton.svelte b/src/lib/components/AddButton.svelte
new file mode 100644
index 0000000..382e829
--- /dev/null
+++ b/src/lib/components/AddButton.svelte
@@ -0,0 +1,6 @@
+<script lang='ts'>
+import ActionButton from "./ActionButton.svelte";
+</script>
+<ActionButton href="/rezepte/add">
+<svg class=icon_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="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>
+</ActionButton>
diff --git a/src/lib/components/CardAdd.svelte b/src/lib/components/CardAdd.svelte
new file mode 100644
index 0000000..3278066
--- /dev/null
+++ b/src/lib/components/CardAdd.svelte
@@ -0,0 +1,354 @@
+<script lang="ts">
+export let tags:string[] = []
+let new_tag
+
+let image_preview_url
+
+// Winter: ❄️
+// Weihnachten: 🎄
+// Ostern: 🐇
+// Fastenzeit: ✝️
+// Herbst: 🍂
+// Sommer: ☀️
+import upload_src from "$lib/assets/icons/upload.svg"
+
+
+export function show_local_image(){
+	var file = this.files[0]
+	    // allowed MIME types
+    var mime_types = [ 'image/jpeg', 'image/webp' ];
+
+    // validate MIME
+    if(mime_types.indexOf(file.type) == -1) {
+        alert('Error : Incorrect file type');
+        return;
+    }
+	image_preview_url = URL.createObjectURL(file);
+
+
+}
+
+export function remove_selected_images(){
+	image_preview_url = ""
+}
+
+
+export function add_to_tags(){
+	if(new_tag){
+		if(! tags.includes(new_tag)){
+			tags.push(new_tag)
+			tags = tags;
+		}
+	}
+	new_tag = ""
+}
+export function remove_from_tags(tag){
+	tags = tags.filter(item => item !== tag)
+}
+export function add_on_enter(event){
+	if(event.key === 'Enter'){
+		add_to_tags()
+	}
+}
+export function remove_on_enter(event, tag){
+	if(event.key === 'Enter'){
+		tags = tags.filter(item => item !== tag)
+	}
+}
+</script>
+<style>
+.card{
+	position: relative;
+	margin-left: 100px;
+	--card-width: 300px;
+	text-decoration: none;
+	position: relative;
+	box-sizing: border-box;
+	font-family: sans-serif;
+	width: var(--card-width);
+	aspect-ratio: 4/7;
+	border-radius: 20px;
+	background-size: contain;
+	display: flex;
+	flex-direction: column;
+	justify-content: end;
+	transition: 200ms;
+	background-color:  var(--blue);
+	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.3);
+	z-index: 0;
+}
+
+.img_label{
+	position :absolute;
+	z-index: 1;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	cursor: pointer;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	border-radius: 20px 20px 0 0 ;
+	transition: 200ms;
+}
+.img_label_wrapper:hover{
+	background-color: var(--red);
+	box-shadow: 0 2em 1em 0.5em rgba(0,0,0,0.3);
+	transform:scale(1.02, 1.02);
+}
+.img_label_wrapper{
+	position: absolute;
+	height: 50%;
+	width: 100%;
+	top:0;
+	left: 0;
+	border-radius: 20px 20px 0 0;
+	transition: 200ms;
+}
+.img_label_wrapper:hover .delete{
+	opacity: 100%;
+}
+.img_label svg{
+	width: 100px;
+	height: 100px;
+	fill: white;
+	transition: 200ms;
+}
+.delete{
+	cursor: pointer;
+	all: unset;
+	position: absolute;
+	top:2rem;
+	left: 2rem;
+	opacity: 0%;
+	z-index: 4;
+	transition:200ms;
+}
+.delete svg{
+	width: 2rem;
+	height: 2rem;
+	fill: white;
+}
+.delete:hover{
+	transform: scale(1.2, 1.2);
+}
+.upload{
+	z-index: 1;
+}
+.img_label:hover .upload{
+	transform: scale(1.2, 1.2);
+	z-index: 10;
+}
+
+#img_picker{
+	display: none;
+	width: 300px;
+	height: 300px;
+	position:absolute;
+}
+input{
+	all: unset;
+}
+input::placeholder{
+	all:unset;
+}
+.card .icon{
+	z-index: 3;
+	box-sizing: border-box;
+	text-decoration: unset;
+	text-align:center;
+	width: 2.6rem;
+	aspect-ratio: 1/1;
+	transition: 100ms;
+	position: absolute;
+	font-size: 1.5rem;
+	top:-0.5em;
+	right:-0.5em;
+	padding: 0.25em;
+	background-color: var(--nord6);
+	border-radius:1000px;
+	box-shadow: 0em 0em 2em 0.1em rgba(0, 0, 0, 0.6);
+}
+.card .icon:hover,
+.card .icon:focus-visible
+{
+	box-shadow: 0em 0em 1em 0.2em rgba(0, 0, 0, 0.6);
+	transform:scale(1.2, 1.2)
+}
+.card:hover,
+.card:focus-within{
+	transform: scale(1.02,1.02);
+	box-shadow: 0.2em 0.2em 2em 1em rgba(0, 0, 0, 0.3);
+}
+
+.card img{
+	height: 50%;
+	object-fit: cover;
+	border-top-left-radius: inherit;
+	border-top-right-radius: inherit;
+}
+.card .title {
+	position: relative;
+	box-sizing: border-box;
+	padding-top: 0.5em;
+	height: 50%;
+	width: 100% ;
+	border-bottom-left-radius: inherit;
+	border-bottom-right-radius: inherit;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	transition: 100ms;
+}
+.card .name{
+	all: unset;
+	width:100%;
+	font-size: 2em;
+	color: white;
+	padding-inline: 0.5em;
+	padding-block: 0.2em;
+}
+.card .description{
+	padding-inline: 1em;
+	color: var(--nord4);
+}
+.card .tags{
+	display: flex;
+	flex-wrap: wrap;
+	overflow: hidden;
+	column-gap: 0.25em;
+	padding-inline: 0.5em;
+	padding-top: 0.25em;
+	margin-bottom:0.5em;
+	flex-grow: 0;
+}
+.card .tag{
+	cursor: pointer;
+	text-decoration: unset;
+	background-color: var(--nord4);
+	color: var(--nord0);
+	border-radius: 100px;
+	padding-inline: 1em;
+	line-height: 1.5em;
+	margin-bottom: 0.5em;
+	transition: 100ms;
+	box-shadow: 0.2em 0.2em 0.2em 0.05em rgba(0, 0, 0, 0.3);
+}
+.card .tag:hover,
+.card .tag:focus-visible,
+.card .tag:focus-within
+{
+	transform: scale(1.04, 1.04);
+	background-color: var(--orange);
+	box-shadow: 0.2em 0.2em 0.2em 0.1em rgba(0, 0, 0, 0.3);
+}
+
+.card .title .category{
+	z-index: 2;
+	position: absolute;
+	box-shadow: 0em 0em 1em 0.1em rgba(0, 0, 0, 0.6);
+	text-decoration: none;
+	color: var(--nord6);
+	font-size: 1.5rem;
+	top: -0.8em;
+	left: -0.5em;
+	width: 10rem;
+	background-color: var(--nord0);
+	padding-inline: 1em;
+	border-radius: 1000px;
+	transition: 100ms;
+
+}
+.card .title .category:hover,
+.card .title .category:focus-within
+{
+	box-shadow: -0.2em 0.2em 1em 0.1em rgba(0, 0, 0, 0.6);
+	background-color: var(--nord3);
+	transform: scale(1.05, 1.05)
+}
+.card:hover .icon,
+.card:focus-visible .icon
+{
+	animation:  shake 0.6s
+}
+
+  @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);
+    }
+  }
+
+.input_wrapper{
+	position: relative;
+	padding-left: 3rem;
+	padding-left: 40rem;
+}
+.input_wrapper > input{
+	margin-left: 1ch;
+}
+.input{
+	position:absolute;
+	top: -.1ch;
+	left: 0.6ch;
+	font-size: 1.6rem;
+}
+.tag_input{
+	width: 12ch;
+}
+</style>
+
+
+<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>
+		{/if}
+
+
+		<label class=img_label for=img_picker>
+		<svg class="upload over_img" xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
+		</label>
+	</div>
+	<input type="file" id=img_picker accept="image/webp image/jpeg" on:change={show_local_image}>
+	<div class=title>
+		<input class=category placeholder=Kategorie.../>
+		<div>
+			<input class=name placeholder=Name.../>
+			<input class=description placeholder=Kurzbeschreibung.../>
+		</div>
+		<div class=tags>
+			{#each tags as tag}
+				<div class="tag" tabindex="0" on:keypress={remove_on_enter(event ,tag)} on:click='{remove_from_tags(tag)}'>{tag}</div>
+			{/each}
+        	<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>
diff --git a/src/lib/components/EditButton.svelte b/src/lib/components/EditButton.svelte
new file mode 100644
index 0000000..3b93ce8
--- /dev/null
+++ b/src/lib/components/EditButton.svelte
@@ -0,0 +1,7 @@
+<script lang='ts'>
+import ActionButton from "./ActionButton.svelte";
+export let href
+</script>
+<ActionButton {href}>
+<svg class=icon_svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 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="M410.3 231l11.3-11.3-33.9-33.9-62.1-62.1L291.7 89.8l-11.3 11.3-22.6 22.6L58.6 322.9c-10.4 10.4-18 23.3-22.2 37.4L1 480.7c-2.5 8.4-.2 17.5 6.1 23.7s15.3 8.5 23.7 6.1l120.3-35.4c14.1-4.2 27-11.8 37.4-22.2L387.7 253.7 410.3 231zM160 399.4l-9.1 22.7c-4 3.1-8.5 5.4-13.3 6.9L59.4 452l23-78.1c1.4-4.9 3.8-9.4 6.9-13.3l22.7-9.1v32c0 8.8 7.2 16 16 16h32zM362.7 18.7L348.3 33.2 325.7 55.8 314.3 67.1l33.9 33.9 62.1 62.1 33.9 33.9 11.3-11.3 22.6-22.6 14.5-14.5c25-25 25-65.5 0-90.5L453.3 18.7c-25-25-65.5-25-90.5 0zm-47.4 168l-144 144c-6.2 6.2-16.4 6.2-22.6 0s-6.2-16.4 0-22.6l144-144c6.2-6.2 16.4-6.2 22.6 0s6.2 16.4 0 22.6z"/></svg>
+</ActionButton>
diff --git a/src/lib/components/TagSelector.svelte b/src/lib/components/TagSelector.svelte
new file mode 100644
index 0000000..e69de29
diff --git a/src/routes/rezepte/add/+page.svelte b/src/routes/rezepte/add/+page.svelte
index 7dc7899..fdc536d 100644
--- a/src/routes/rezepte/add/+page.svelte
+++ b/src/routes/rezepte/add/+page.svelte
@@ -6,7 +6,7 @@
 	let description
 	let datecreated = new Date()
 	let datemodified = datecreated
-	let tags : string[] = []
+	let tags
 
     	import type { PageData } from './$types';
 	import CardAdd from '$lib/components/CardAdd.svelte';
@@ -61,15 +61,11 @@ input{
 <CardAdd></CardAdd>
 
 <input bind:value={short_name} placeholder="Kurzname"/>
-<input bind:value={name} placeholder="Name des Rezeptes"/>
-<input bind:value={icon} placeholder="Saison-Emoji"/>
-<input bind:value={category} placeholder="Kategorie" />
-<input bind:value={description} placeholder="Kurzbeschreibung"/>
-<input bind:value={tags} placeholder="Stichwort 1, Stichwort 2, ...">
 <h2>Zutaten</h2>
 <input>
 <h2>Zubereitung</h2>
 <button on:click={doPost}>HIT IT</button>
+<button on:click={console.log(tags)}>TAGS</button>
 <h3>Zutaten</h3>
 
 <!-- already added ingredients