recipes-front/src/routes/+page.svelte

92 lines
3.1 KiB
Svelte
Raw Normal View History

2023-11-10 12:58:42 +02:00
<script>
2023-11-13 10:17:00 +02:00
// import { onMount } from "svelte";
2023-11-10 12:58:42 +02:00
import axios from 'axios';
2023-11-13 10:17:00 +02:00
import InfiniteLoading from '/src/lib/InfiniteLoading.svelte';
2023-11-15 10:09:34 +02:00
import LoadingScreen from "/src/lib/LoadingScreen.svelte";
import ErrorLoading from '/src/lib/ErrorLoading.svelte';
2023-11-13 10:17:00 +02:00
let serverurl = 'http://192.168.0.105:3000';
let last_page = 1;
let recipes_list = [];
2023-11-15 11:52:43 +02:00
let last_recipe;
2023-11-13 10:17:00 +02:00
// First loading
let recipes_p = axios.get(serverurl+"/recipes?page=" + last_page);
2023-11-10 12:58:42 +02:00
recipes_p.then(function (response) {
2023-11-15 11:52:43 +02:00
axios.get(serverurl+"/recipe?r_id="+response.data.recipes[0].id).then(function (response) {
last_recipe = response.data.recipe;
console.log(last_recipe);
})
2023-11-13 10:17:00 +02:00
recipes_list = response.data.recipes;
2023-11-10 12:58:42 +02:00
})
.catch(function (error) {
// handle error
console.log(error);
})
2023-11-13 10:17:00 +02:00
// Inf loading
function infiniteHandler({ detail: { loaded, complete } }) {
last_page += 1;
axios.get(serverurl+"/recipes?page=" + last_page).then(
function (response) {
if (response.data.recipes.length > 0) {
recipes_list = [...recipes_list, ...response.data.recipes];
loaded();
} else {
complete();
}
}
)
}
2023-11-10 12:58:42 +02:00
</script>
<div class="bg-white">
<div class="mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8">
2023-11-13 10:17:00 +02:00
<h2 class="sr-only">Рецепты</h2>
{#await recipes_p}
2023-11-15 10:09:34 +02:00
<LoadingScreen/>
{:then}
2023-11-15 11:52:43 +02:00
<div class="mb-10">
{#if last_recipe != undefined}
<!-- <h2>Новый рецепт</h2> -->
<div class="flex flex-col-reverse md:flex-row gap-6">
<div class="flex-1">
<h3 class="text-3xl box-border mb-5">{last_recipe.title}</h3>
<p>{last_recipe.desc}</p>
</div>
<div class="flex-1 duration-300 hover:scale-110 self-center">
<a href="/recipe/{last_recipe.id}"><img class="rounded-lg h-auto w-auto" alt={last_recipe.title} src="{serverurl}/recipe_image?filename={last_recipe.img}" /></a>
</div>
</div>
{/if}
</div>
2023-11-13 10:17:00 +02:00
<div class="grid grid-cols-1 gap-x-6 gap-y-10 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8">
{#each recipes_list as recipe}
<a href="/recipe/{recipe.id}" class="group transition duration-300 hover:scale-110">
<div class="aspect-h-1 aspect-w-1 w-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
<img src="{serverurl}/recipe_image?filename={recipe.img}" alt="{recipe.title}" class="h-full w-full object-cover object-center transition duration-700 group-hover:opacity-90">
</div>
2023-11-15 11:52:43 +02:00
<h4 class="mt-3 text-base text-gray-700">{recipe.ctime} / {recipe.cal}</h4>
2023-11-13 10:17:00 +02:00
<p class="mt-0 text-lg font-medium text-gray-900">{recipe.title}</p>
</a>
{/each}
</div>
<InfiniteLoading on:infinite={infiniteHandler} />
2023-11-15 10:09:34 +02:00
{:catch}
<ErrorLoading/>
2023-11-13 10:17:00 +02:00
{/await}
2023-11-10 12:58:42 +02:00
</div>
2023-11-15 11:52:43 +02:00
</div>
<style>
@font-face {
font-family: 'AlegreyaSansSC';
font-style: normal;
font-weight: 800;
src: url('/fonts/Alegreyasansscextrabold.ttf');
}
h3 {
font-family: 'AlegreyaSansSC', sans-serif;
}
</style>