update for new backend

2024-01-31 14:52:27 +03:00 · 2024-01-31 14:52:27 +03:00 · 733807510b
parent bf677bbd07
commit 733807510b
8 changed files with 49 additions and 30 deletions
--- a/.dockerignore
+++ b/.dockerignore
@ -0,0 +1 @@
+node_modules
--- a/15
+++ b/15
@ -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"]
--- a/4
+++ b/4
@ -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
--- a/src/routes/+page.svelte
+++ b/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>
--- a/src/routes/Header.svelte
+++ b/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
  донат
--- a/src/routes/categories/+page.svelte
+++ b/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: "Еврейская кухня",
-            img: "08c99a7f-66ef-4651-b26b-c2e48e901294.jpg"
+            title: "Корейская кухня",
+            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>
--- a/src/routes/categories/[category]/+page.svelte
+++ b/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>
--- a/src/routes/recipe/[recipeid]/+page.svelte
+++ b/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 recipe_p = axios.get(serverurl+"/recipe?r_id="+$page.params.recipeid)
+    let serverurl = 'https://recipesapi.computernetthings.ru';
+    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>