Alexander/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

First almost fully functioning MVP.

Browse Source 
Lacking:
- Seasons cannot be added/edited
- image upload
- layout recipe/adding
This commit is contained in:
Alexander Bocken
2023-06-23 17:23:14 +02:00
parent 4afaf7f6f3
commit 3d0d3f41e2
24 changed files with 891 additions and 275 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/routes/rezepte/+page.svelte
View File

@ -8,30 +8,17 @@
export let data: PageData;
export let current_month = new Date().getMonth() + 1
</script>
<style>
.accordion{
display:flex;
background-color: #111111;
flex-direction: row;
margin-inline: auto;
padding-inline: 1rem;
padding-block: 3rem;
margin-block: 3rem;
align-items:center;
justify-content: center;
gap: 1rem;
}
</style>
<h1>Rezepte</h1>
<h2>In Saison</h2>
<section>
<MediaScroller>
{#each data.season as recipe}
<Card {recipe} {current_month}></Card>
<Card {recipe} {current_month} search=""></Card>
{/each}
</MediaScroller>
</section>
<!--<Search></Search>-->
<Search></Search>
<h2>Alle Rezepte</h2>
<Recipes>
{#each data.all_brief as recipe}

101
src/routes/rezepte/add/+page.svelte
View File

@ -1,41 +1,43 @@
<script lang="ts">
let name
export let card_data ={
}
let short_name
let category
let icon
let description
let password
let datecreated = new Date()
let datemodified = datecreated
let tags
import type { PageData } from './$types';
import CardAdd from '$lib/components/CardAdd.svelte';
import MediaScroller from '$lib/components/MediaScroller.svelte';
import Card from '$lib/components/Card.svelte';
import Search from '$lib/components/Search.svelte';
import SeasonSelect from '$lib/components/SeasonSelect.svelte';
export let season = []
import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
export let ingredients = []
import CreateStepList from '$lib/components/CreateStepList.svelte';
export let data: PageData;
export let current_month = new Date().getMonth() + 1
export let instructions = []
async function doPost () {
const res = await fetch('/api/add', {
method: 'POST',
body: JSON.stringify({
bearer: "password1234",
recipe: {
season: get_season(),
...card_data,
images: [{
mediapath: short_name + '.webp',
alt: "",
caption: ""
}],
short_name,
name,
category,
datecreated,
datemodified,
tags,
description,
icon
instructions,
ingredients,
},
headers: {
'content-type': 'application/json',
bearer: "password1234",
bearer: password,
}
})
})
@ -44,68 +46,31 @@
result = JSON.stringify(json)
console.log(result)
}
</script>
<style>
input{
input.temp{
all: unset;
display: block;
margin: 1rem;
margin: 1rem auto;
padding: 0.2em 1em;
border-radius: 1000px;
background-color: var(--nord4);
}
.ingredient{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.ingredient > input{
display: inline;
margin-inline: 0.25em;
}
.ingredient>#unit{
max-width: 40px;
}
.ingredient>#amount{
max-width: 100px;
}
.ingredient button{
all: unset;
background-color: var(--red);
padding: 0.3em;
height: 100%;
border-radius: 1000px;
display:flex;
justify-content: center;
align-items: center;
cursor: pointer;
transition: 100ms;
}
.ingredient button svg{
fill: white;
width: 1.5rem;
height: 1.5rem;
}
.ingredient button:hover{
background-color: var(--orange);
transform: scale(1.1, 1.1);
}
.ingredient button:hover svg{
transform: scale(1.1, 1.1);
}
</style>
<h1>Rezept hinzufügen</h1>
<CardAdd></CardAdd>
<CardAdd {card_data}></CardAdd>
<input class=temp bind:value={short_name} placeholder="Kurzname"/>
<SeasonSelect {season}></SeasonSelect>
<input bind:value={short_name} placeholder="Kurzname"/>
<h2>Zutaten</h2>
<CreateIngredientList></CreateIngredientList>
<CreateIngredientList {ingredients}></CreateIngredientList>
<h2>Zubereitung</h2>
<CreateStepList></CreateStepList>
<CreateStepList {instructions} ></CreateStepList>
<input class=temp type="password" placeholder=Passwort bind:value={password}>
<button on:click={doPost}>ADD RECIPE</button>

2
src/routes/rezepte/category/[category]/+page.svelte
View File

@ -1,12 +1,14 @@
<script lang="ts">
import type { PageData } from './$types';
import Recipes from '$lib/components/Recipes.svelte';
import Search from '$lib/components/Search.svelte';
export let data: PageData;
export let current_month = new Date().getMonth() + 1;
import Card from '$lib/components/Card.svelte'
</script>
<h1>Rezepte</h1>
<h2>In Kategorie {data.category}</h2>
<Search></Search>
<section>
<Recipes>
{#each data.recipes as recipe}

1
src/routes/rezepte/edit/.jukit/.jukit_info.json Normal file
View File

@ -0,0 +1 @@
{"terminal": "nvimterm"}

102
src/routes/rezepte/edit/[name]/+page.svelte Normal file
View File

@ -0,0 +1,102 @@
<script lang="ts">
export let data: PageData;
let old_short_name = data.recipe.short_name
export let card_data ={
icon: data.recipe.icon,
category: data.recipe.category,
name: data.recipe.name,
description: data.recipe.description,
tags: data.recipe.tags,
}
let images = data.recipe.images
let season = data.recipe.season
let short_name = data.recipe.short_name
let password
let datecreated = data.recipe.datecreated
let datemodified = new Date()
import type { PageData } from './$types';
import CardAdd from '$lib/components/CardAdd.svelte';
import MediaScroller from '$lib/components/MediaScroller.svelte';
import Card from '$lib/components/Card.svelte';
import Search from '$lib/components/Search.svelte';
import CreateIngredientList from '$lib/components/CreateIngredientList.svelte';
export let ingredients = data.recipe.ingredients
import CreateStepList from '$lib/components/CreateStepList.svelte';
export let instructions = data.recipe.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 () {
const res = await fetch('/api/edit', {
method: 'POST',
body: JSON.stringify({
recipe: {
...card_data,
images, // TODO
season: get_season(),
short_name,
datecreated,
datemodified,
instructions,
ingredients,
},
old_short_name,
headers: {
'content-type': 'application/json',
bearer: password,
}
})
})
const json = await res.json()
result = JSON.stringify(json)
console.log(result)
}
</script>
<style>
input{
all: unset;
display: block;
margin: 1rem auto;
padding: 0.2em 1em;
border-radius: 1000px;
background-color: var(--nord4);
}
</style>
<h1>Rezept hinzufügen</h1>
<CardAdd {card_data}></CardAdd>
<button on:click={console.log(JSON.stringify(ingredients, null, 4))}>Printout Ingredients</button>
<button on:click={console.log(JSON.stringify(instructions, null, 4))}>Printout Instructions</button>
<button on:click={console.log(JSON.stringify(card_data, null, 4))}>Prinout Card Data</button>
<input bind:value={short_name} placeholder="Kurzname"/>
<h2>Zutaten</h2>
<CreateIngredientList {ingredients}></CreateIngredientList>
<h2>Zubereitung</h2>
<CreateStepList {instructions} ></CreateStepList>
<input type="password" placeholder=Passwort bind:value={password}>
<button on:click={doPost}>EDIT RECIPE</button>

8
src/routes/rezepte/edit/[name]/+page.ts Normal file
View File

@ -0,0 +1,8 @@
import type { PageLoad } from "./$types";
export async function load({ fetch, params}) {
let current_month = new Date().getMonth() + 1
const res = await fetch(`/api/items/${params.name}`);
const recipe = await res.json();
return {recipe};
};

1
src/routes/rezepte/edit/[name]/.jukit/.jukit_info.json Normal file
View File

@ -0,0 +1 @@
{"terminal": "nvimterm"}

2
src/routes/rezepte/season/+page.svelte
View File

@ -11,9 +11,7 @@
</script>
<SeasonLayout>
<h2 slot=test>Rezepte des Monats </h2>
<Recipes slot=recipes>
{#each data.season as recipe}
<Card {recipe} {current_month}></Card>

2
src/routes/rezepte/tag/[tag]/+page.svelte
View File

@ -4,9 +4,11 @@
export let data: PageData;
export let current_month = new Date().getMonth() + 1;
import Card from '$lib/components/Card.svelte'
import Search from '$lib/components/Search.svelte';
</script>
<h1>Rezepte</h1>
<h2>In Tag {data.tag}</h2>
<Search></Search>
<section>
<Recipes>
{#each data.recipes as recipe}