update for new backend

.dockerignore

@@ -0,0 +1 @@
+node_modules

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:21 AS build
+
+WORKDIR /app
+
+COPY package.json ./
+COPY package-lock.json ./
+RUN npm install
+COPY . ./
+RUN npm run build
+
+RUN npm install --global http-server
+
+EXPOSE 8000
+
+CMD ["npm", "run", "preview", "--", "--host", "--port", "8000"]

Makefile

@@ -1,2 +1,6 @@
 run:
 	npm run dev -- --host
+docker_build:
+	docker build -t registry.computernetthings.ru/recipes/front . && docker image prune -f
+docker_push:
+	docker push registry.computernetthings.ru/recipes/front

src/routes/+page.svelte

@@ -5,15 +5,15 @@
   import LoadingScreen from "/src/lib/LoadingScreen.svelte";
   import ErrorLoading from '/src/lib/ErrorLoading.svelte';
 
-  let serverurl = 'http://192.168.0.105:3000';
+  let serverurl = 'https://recipesapi.computernetthings.ru';
   let last_page = 1;
   let recipes_list = [];
   let last_recipe;
 
   // First loading
-  let recipes_p = axios.get(serverurl+"/recipes?page=" + last_page);
+  let recipes_p = axios.post(serverurl+"/recipes_page", {page: last_page});
   recipes_p.then(function (response) {
-    axios.get(serverurl+"/recipe?r_id="+response.data.recipes[0].id).then(function (response) {
+    axios.post(serverurl+"/recipe", {recipe_id:response.data.recipes[0].id}).then(function (response) {
       last_recipe = response.data.recipe;
       console.log(last_recipe);
     })
@@ -27,7 +27,7 @@
   // Inf loading
   function infiniteHandler({ detail: { loaded, complete } }) {
     last_page += 1;
-    axios.get(serverurl+"/recipes?page=" + last_page).then(
+    axios.post(serverurl+"/recipes_page", {page:last_page}).then(
       function (response) {
         if (response.data.recipes.length > 0) {
           recipes_list = [...recipes_list, ...response.data.recipes];
@@ -55,7 +55,7 @@
               <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>
+              <a href="/recipe/{last_recipe.id}"><img class="rounded-lg h-auto w-auto" alt={last_recipe.title} src="{serverurl}/recipe_img?filename={last_recipe.img}" /></a>
             </div>
           </div>
         {/if}
@@ -64,7 +64,7 @@
         {#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">
+              <img src="{serverurl}/recipe_img?filename={recipe.img}" alt="{recipe.title}" class="h-full w-full object-cover object-center transition duration-700 group-hover:opacity-90">
             </div>
             <h4 class="mt-3 text-base text-gray-700">{recipe.ctime} / {recipe.cal}</h4>
             <p class="mt-0 text-lg font-medium text-gray-900">{recipe.title}</p>

src/routes/Header.svelte

@@ -25,7 +25,7 @@
       <div class="hidden lg:flex lg:gap-x-12">
         <a href="/" class="text-sm font-semibold leading-6 text-gray-900">Все рецепты</a>
         <a href="/categories" class="text-sm font-semibold leading-6 text-gray-900">Категории</a>
-        <a href="/donate" class="text-sm font-semibold leading-6 text-gray-900">Поддержать сайт</a>
+        <!-- <a href="/donate" class="text-sm font-semibold leading-6 text-gray-900">Поддержать сайт</a> -->
       </div>
       <div class="hidden lg:flex lg:flex-1 lg:justify-end">
         
@@ -54,7 +54,7 @@
             <div class="space-y-2 py-6">
               <a href="/" on:click={changeMenuState} class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Все рецепты</a>
               <a href="/categories" on:click={changeMenuState} class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Категории</a>
-              <a href="/donate" on:click={changeMenuState} class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Поддержать сайт</a>
+              <!-- <a href="/donate" on:click={changeMenuState} class="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">Поддержать сайт</a> -->
             </div>
           </div>
         </div>
@@ -63,7 +63,6 @@
     </div>
   </header>
 
-
 <!-- todo:
   добавить env
   донат

src/routes/categories/+page.svelte

@@ -2,42 +2,42 @@
     let category_list = [
         {
             title: "Основные блюда",
-            img: "d6960f87-4936-439a-86fe-54d5508f06f8.jpg"
+            img: "b087e87a-64d0-447d-be54-354657edc129.jpg"
         },
         {
             title: "На сковороде",
-            img: "1b0dc44c-5dc3-4a74-9bb8-1a079999caa9.jpg"
+            img: "d908f9a4-5bd1-40c6-9a20-74aa54b8ed8f.jpg"
         },
         {
             title: "Домашняя кухня",
-            img: "0334e507-d2c2-4ca5-9aea-c144fbcafb76.jpg"
+            img: "40273cc9-7ac1-4560-8737-a0e538869d52.jpg"
         },
         {
             title: "Итальянская кухня",
-            img: "00651793-d00c-4f39-aa07-3d5d5911aa8c.jpg"
+            img: "9c24c4d7-b4ec-45d7-b069-a7360af0b579.jpg"
         },
         {
             title: "Китайская кухня",
-            img: "039b0932-56fc-47da-83c9-62c95f227412.jpg"
+            img: "2b4091fa-74bb-4608-981f-b115ed8273de.jpg"
         },
         {
             title: "Соусы",
-            img: "06b85ba2-0665-40b7-9e3e-b2473dde97f2.jpg"
+            img: "fe444b6d-6db1-4e9a-b6aa-8a1242272a2c.jpg"
         },
         {
             title: "Десерты",
-            img: "07bcfe9b-d44a-47b1-adfb-3afa0694eda2.jpg"
+            img: "2b4870ad-f0c5-4f09-95a3-2368a5cef56b.jpg"
         },
         {
             title: "В духовке",
-            img: "06f68dda-2949-41e2-a307-efaaf5eecbbf.jpg"
+            img: "3c530d7c-652c-4e37-99c0-32b2722b15b1.jpg"
         },
         {
-            title: "Еврейская кухня",
+            title: "Корейская кухня",
-            img: "08c99a7f-66ef-4651-b26b-c2e48e901294.jpg"
+            img: "575663f0-0a9f-40de-a6e0-4c9a4d6baac2.jpg"
         },
     ]
-    let serverurl = 'http://192.168.0.105:3000';
+    let serverurl = 'https://recipesapi.computernetthings.ru';
 </script>
 
 <div class="bg-white">
@@ -47,7 +47,7 @@
         {#each category_list as category}
         <a href="/categories/{category.title}" class="relative group transition duration-300 hover:scale-110">
             <div id="category" class="aspect-h-1 aspect-w-1 w-full h-full overflow-hidden rounded-lg bg-gray-200 xl:aspect-h-8 xl:aspect-w-7">
-                <img src="{serverurl}/recipe_image?filename={category.img}" alt="{category.title}" class="brightness-30 h-full w-full object-cover object-center transition duration-700 group-hover:brightness-50">
+                <img src="{serverurl}/recipe_img?filename={category.img}" alt="{category.title}" class="brightness-30 h-full w-full object-cover object-center transition duration-700 group-hover:brightness-50">
                 <p class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center font-bold text-slate-200 group-hover:text-white duration-700">{category.title}</p>
             </div>
         </a>

src/routes/categories/[category]/+page.svelte

@@ -5,13 +5,13 @@
   import LoadingScreen from "/src/lib/LoadingScreen.svelte";
   import ErrorLoading from '/src/lib/ErrorLoading.svelte';
 
-  let serverurl = 'http://192.168.0.105:3000';
+  let serverurl = 'https://recipesapi.computernetthings.ru';
 
   let recipes_list = [];
   let last_page = 1
 
   // First loading
-  let recipes = axios.get(serverurl+"/category_recipes?page=" + last_page + "&category=" + $page.params.category);
+  let recipes = axios.post(serverurl+"/recipes_by_category", {page:last_page, category:$page.params.category});
   recipes.then(function (response) {
       recipes_list = response.data.recipes;
   })
@@ -23,7 +23,7 @@
     // Inf loading
   function infiniteHandler({ detail: { loaded, complete } }) {
     last_page += 1;
-    axios.get(serverurl+"/category_recipes?page=" + last_page + "&category=" + $page.params.category).then(
+    axios.post(serverurl+"/recipes_by_category", {page:last_page, category:$page.params.category}).then(
       function (response) {
         if (response.data.recipes != null) {
           recipes_list = [...recipes_list, ...response.data.recipes];
@@ -50,7 +50,7 @@
               {#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">
+                    <img src="{serverurl}/recipe_img?filename={recipe.img}" alt="{recipe.title}" class="h-full w-full object-cover object-center transition duration-700 group-hover:opacity-90">
                   </div>
                   <h3 class="mt-3 text-base text-gray-700">{recipe.ctime} / {recipe.cal}</h3>
                   <p class="mt-0 text-lg font-medium text-gray-900">{recipe.title}</p>

src/routes/recipe/[recipeid]/+page.svelte

@@ -5,8 +5,8 @@
     import ErrorLoading from '/src/lib/ErrorLoading.svelte';
 
     // create request
-    let serverurl = 'http://192.168.0.105:3000';
+    let serverurl = 'https://recipesapi.computernetthings.ru';
-    let recipe_p = axios.get(serverurl+"/recipe?r_id="+$page.params.recipeid)
+    let recipe_p = axios.post(serverurl+"/recipe",{recipe_id:parseInt($page.params.recipeid)})
     recipe_p.then(function (response) {
         console.log(response);
     })
@@ -58,7 +58,7 @@
             <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}" />
+                    <img class="rounded-lg h-full w-auto" alt={data.data.recipe.title} src="{serverurl}/recipe_img?filename={data.data.recipe.img}" />
                 </div>
                 <!-- description -->
                 <div class="recipedesc">
@@ -71,9 +71,9 @@
                     <!-- ing -->
                     {#each data.data.recipe.ingredients as ingredients}
                         <div class="text-lg">
-                            <b><h5>{ingredients.Title}</h5></b>
+                            <b><h5>{ingredients.title}</h5></b>
                             <ul>
-                                {#each ingredients.Ingredients as ingredient}
+                                {#each ingredients.ingredients as ingredient}
                                     <li>{ingredient}</li>
                                 {/each}
                             </ul>