229 lines
7.7 KiB
Svelte
229 lines
7.7 KiB
Svelte
<script>
|
|
import { page } from '$app/stores';
|
|
import axios from 'axios';
|
|
import LoadingScreen from "/src/lib/LoadingScreen.svelte";
|
|
import ErrorLoading from '/src/lib/ErrorLoading.svelte';
|
|
|
|
// create request
|
|
let serverurl = 'http://192.168.0.105:3000';
|
|
let recipe_p = axios.get(serverurl+"/recipe?r_id="+$page.params.recipeid)
|
|
recipe_p.then(function (response) {
|
|
console.log(response);
|
|
})
|
|
.catch(function (error) {
|
|
// handle error
|
|
console.log(error);
|
|
})
|
|
</script>
|
|
|
|
<div class="mx-auto max-w-2xl px-4 py-8 sm:px-6 sm:py-12 lg:max-w-7xl lg:px-8">
|
|
<!-- await -->
|
|
{#await recipe_p}
|
|
<LoadingScreen/>
|
|
{:then data}
|
|
<div>
|
|
<!-- time / cals / protions -->
|
|
<div id="info" class="flex flex-col md:flex-row">
|
|
<div class="flex flex-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z" />
|
|
</svg>
|
|
<p><b>Время приготовления:</b> {data.data.recipe.ctime}</p>
|
|
</div>
|
|
<p class="invisible md:visible">|</p>
|
|
<div class="flex flex-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6.429 9.75L2.25 12l4.179 2.25m0-4.5l5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0l4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0l-5.571 3-5.571-3" />
|
|
</svg>
|
|
<p><b>Количество порций:</b> {data.data.recipe.snum}</p>
|
|
</div>
|
|
<p class="invisible md:visible">|</p>
|
|
<div class="flex flex-row">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 3v17.25m0 0c-1.472 0-2.882.265-4.185.75M12 20.25c1.472 0 2.882.265 4.185.75M18.75 4.97A48.416 48.416 0 0012 4.5c-2.291 0-4.545.16-6.75.47m13.5 0c1.01.143 2.01.317 3 .52m-3-.52l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.988 5.988 0 01-2.031.352 5.988 5.988 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L18.75 4.971zm-16.5.52c.99-.203 1.99-.377 3-.52m0 0l2.62 10.726c.122.499-.106 1.028-.589 1.202a5.989 5.989 0 01-2.031.352 5.989 5.989 0 01-2.031-.352c-.483-.174-.711-.703-.59-1.202L5.25 4.971z" />
|
|
</svg>
|
|
<p><b>Калорийность:</b> {data.data.recipe.cal}</p>
|
|
</div>
|
|
</div>
|
|
<div id="tags" class="mt-8">
|
|
<!-- <h5><b>Tags:</b></h5> -->
|
|
{#each data.data.recipe.categories as category}
|
|
<a href="/categories/{category}" class="text-gray-50 text-center">{category}</a>
|
|
{/each}
|
|
</div>
|
|
<!-- title -->
|
|
<h1 class="pt-8 pb-5 text-3xl font-bold font-title">
|
|
{data.data.recipe.title}
|
|
</h1>
|
|
<div class="desc_container flex-col gap-5 lg:flex-row text-lg">
|
|
<!-- image -->
|
|
<div class="mainimg">
|
|
<img class="rounded-lg h-full w-auto" alt={data.data.recipe.title} src="{serverurl}/recipe_image?filename={data.data.recipe.img}" />
|
|
</div>
|
|
<!-- description -->
|
|
<div class="recipedesc">
|
|
{data.data.recipe.desc}
|
|
</div>
|
|
</div>
|
|
<div class="recipe_container flex-col lg:flex-row">
|
|
<!-- ingredients -->
|
|
<div id="ingredients">
|
|
<!-- ing -->
|
|
{#each data.data.recipe.ingredients as ingredients}
|
|
<div class="text-lg">
|
|
<b><h5>{ingredients.Title}</h5></b>
|
|
<ul>
|
|
{#each ingredients.Ingredients as ingredient}
|
|
<li>{ingredient}</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<!-- steps -->
|
|
<div id="steps" class="text-lg">
|
|
<b><h5>Как приготовить {data.data.recipe.title.toLowerCase()}</h5></b>
|
|
<ol class="list-outside list-decimal list-image-none">
|
|
{#each data.data.recipe.recipe_steps as step}
|
|
<li class="relative">{step}</li>
|
|
{/each}
|
|
</ol>
|
|
</div>
|
|
</div>
|
|
<!-- advices -->
|
|
{#if data.data.recipe.advices !== undefined}
|
|
<div id="advices" class="text-lg">
|
|
<b><h5>Советы</h5></b>
|
|
<ul>
|
|
{#each data.data.recipe.advices as advice}
|
|
<li>{advice}</li>
|
|
{/each}
|
|
</ul>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
{:catch}
|
|
<ErrorLoading/>
|
|
{/await}
|
|
|
|
</div>
|
|
|
|
<style>
|
|
.font-title {
|
|
font-family: 'AlegreyaSansSC', sans-serif;
|
|
font-size: 2.4em;
|
|
}
|
|
@font-face {
|
|
font-family: 'AlegreyaSansSC';
|
|
font-style: normal;
|
|
font-weight: 800;
|
|
src: url('/fonts/Alegreyasansscextrabold.ttf');
|
|
}
|
|
@font-face {
|
|
font-family: 'RobotoRegular';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url('/fonts/Roboto-Regular.ttf');
|
|
}
|
|
|
|
p, li {
|
|
font-family: 'RobotoRegular', sans-serif;
|
|
}
|
|
|
|
h5 {
|
|
font-family: 'AlegreyaSansSC', sans-serif;
|
|
font-size: 1.4em;
|
|
margin-bottom: 1vh;
|
|
}
|
|
|
|
.desc_container {
|
|
display: flex;
|
|
align-items: center;
|
|
/* font-size: 1.3em; */
|
|
/* gap: 14px; */
|
|
}
|
|
|
|
.mainimg {
|
|
flex: 1 0;
|
|
/* border: dashed blue 1px; */
|
|
}
|
|
|
|
.mainimg img {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.recipedesc {
|
|
flex: 1;
|
|
box-sizing: border-box;
|
|
/* padding: 0px 20px 0px 20px; */
|
|
}
|
|
|
|
#info svg {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#info p {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#tags {
|
|
/* display: flex; */
|
|
align-items: flex-start;
|
|
}
|
|
|
|
#tags a {
|
|
margin-top: 5px;
|
|
min-width: 3em;
|
|
border-radius: 13px;
|
|
font-size: 0.9em;
|
|
padding: 3px 10px 4px 10px;
|
|
/* margin-bottom: 10px; */
|
|
display: inline-block;
|
|
margin-right: 6px;
|
|
background-color: #64aa34;
|
|
}
|
|
|
|
.recipe_container {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
gap: 5vw;
|
|
/* align-content: space-between; */
|
|
/* justify-content: space-between; */
|
|
padding-top: 5vh;
|
|
}
|
|
|
|
.recipe_container #ingredients {
|
|
flex: 1;
|
|
display: flex;
|
|
gap: 5vw;
|
|
/* align-content: center; */
|
|
/* align-items: flex-start; */
|
|
/* justify-content: center; */
|
|
}
|
|
|
|
.recipe_container #ingredients div {
|
|
flex: 1;
|
|
/* max-width: 50%; */
|
|
}
|
|
|
|
.recipe_container #steps {
|
|
flex: 1;
|
|
}
|
|
|
|
#steps ol {
|
|
padding: 0;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
#steps li {
|
|
margin-bottom: 10px;
|
|
padding-left: 1vw;
|
|
/* padding-left: 4.5rem; */
|
|
}
|
|
|
|
#advices {
|
|
padding-top: 5vh;
|
|
}
|
|
</style> |