optimization

mikeiken · Nov 30, 2024 · 0e9908b · 0e9908b
1 parent 07f447e
commit 0e9908b
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 86 deletions.
diff --git a/frontend/src/components/main-page/Basket/Order/Order.js b/frontend/src/components/main-page/Basket/Order/Order.js
@@ -28,25 +28,40 @@ export default function Order({
   const declension = getDeclension(count, "грядка", "грядки", "грядок");
   const [comment, setComment] = useState("");
   const [selectedPlant, setSelectedPlant] = useState(null); // Состояние для выбранного растения
+  const [fertilize, setFertilization] = useState(false);
+
+  const handleSetFertilizeFalse = () => {
+    setFertilization(false);
+  };
+
+  const handleSetFertilizeTrue = () => {
+    setFertilization(true);
+  };
 
   useEffect(() => {
     if (selectedPlant) {
-      console.log("Выбранное растение:", selectedPlant);
-      console.log(count);
+      console.log(
+        "Выбранное поле:",
+        item.id,
+        "Выбранное растение:",
+        selectedPlant.id,
+        "количество выбранных грядок:",
+        Number(count),
+        "Комментарий: ",
+        comment,
+        "Удобрять?",
+        fertilize
+      );
     }
-  }, [selectedPlant, count]);
+  }, [selectedPlant, count, comment]);
 
   return (
     <div className="order-wrapper">
       <div className="order">
         <div className="order-info">
           <div className="order-info-wrapper">
             <div className={"order-image-align"}>
-              <img
-                src={process.env.PUBLIC_URL + "/user.png"}
-                alt="object"
-                className="order-image"
-              ></img>
+              <img src={item.url} alt="object" className="order-image"></img>
             </div>
             <div className="oreder-description">
               {name} - {price} руб. <br />
@@ -65,14 +80,34 @@ export default function Order({
           <textarea
             className="order-input"
             placeholder="Введите комментарий"
-            value={comment}
             onChange={(e) => setComment(e.target.value)}
           ></textarea>
           <div className="order-submit-wrapper">
             <div>Дата заказа: {date}</div>
             <div className="order-change-volume">
-              Итог: <Counter />
-              {declension}
+              <div className="order-wrapper-itog">
+                Итог: <Counter />
+                {declension}
+              </div>
+            </div>
+            <div>
+              Удобрять?{" "}
+              <button
+                className={
+                  fertilize ? "fertilize_btn" + " green" : "fertilize_btn"
+                }
+                onClick={handleSetFertilizeTrue}
+              >
+                Да
+              </button>
+              <button
+                className={
+                  fertilize ? "fertilize_btn" : "fertilize_btn" + " red"
+                }
+                onClick={handleSetFertilizeFalse}
+              >
+                Нет
+              </button>
             </div>
             <div className="order-selected-plant">
               {selectedPlant ? (

diff --git a/frontend/src/components/main-page/Basket/Order/order.css b/frontend/src/components/main-page/Basket/Order/order.css
@@ -68,7 +68,7 @@
   padding: 10px;
 }
 
-.order-image-align{
+.order-image-align {
   width: auto;
   height: auto;
   display: flex;
@@ -157,3 +157,29 @@
   overflow: auto;
   padding: 10px;
 }
+
+.fertilize_btn {
+  width: 50px;
+  border: 1px solid #ddd;
+}
+
+.green {
+  background-color: #45a049;
+}
+
+.green:active {
+  background-color: #2c6c30;
+}
+.red {
+  background-color: #f44336;
+}
+
+.red:active {
+  background-color: #e53935;
+}
+
+.order-wrapper-itog {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
diff --git a/frontend/src/components/main-page/Garden/PlotInfo/PlotInfoWindow/PlotInfoWindow.js b/frontend/src/components/main-page/Garden/PlotInfo/PlotInfoWindow/PlotInfoWindow.js
@@ -1,50 +1,38 @@
-import React, {useState, useEffect} from "react";
+import React, { useState, useEffect } from "react";
 
-export default function PlotInfoWindow({item}) {
-    const [isVisible, setIsVisible] = useState(false);
+export default function PlotInfoWindow({ item }) {
+  const [isVisible, setIsVisible] = useState(false);
 
-    useEffect(() => {
-        if (item) {
-            setIsVisible(true);
-        } else {
-            setIsVisible(false);
-        }
-    }, [item]);
+  useEffect(() => {
+    if (item) {
+      setIsVisible(true);
+    } else {
+      setIsVisible(false);
+    }
+  }, [item]);
 
-    return (
-        <div className={`container-plot-wrapper ${isVisible ? "visible" : ""}`}>
-            <div className="container-plot-info">
-                <div className={"container-wrapper-info"}>
-                    <div className={"container-wrapper-img"}>
-                        <img
-                            className="plot-card-img"
-                            src="https://avatars.mds.yandex.net/i?id=b4560f26cb2f9fab2f7395b28c1fed50_l-5236855-images-thumbs&n=13"
-                            alt="img"
-                        ></img>
-                    </div>
-                    <div className={"container-for-text"}>
-                        <h3>Лучшее решение для начинающего предпринимателя!</h3>
-                        <ul>
-                            <li>
-                                Минимальные обязательства
-                            </li>
-                            <li>
-                                Простое обслуживание
-                            </li>
-                            <li>
-                                Идеально для сезонного использования
-                            </li>
-                            <li>
-                                Цена: {item.price}
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-            </div>
-
-            <div className="container-plot-products">
-                <h1>ID: {item.id}</h1>
-            </div>
+  return (
+    <div className={`container-plot-wrapper ${isVisible ? "visible" : ""}`}>
+      <div className="container-plot-info">
+        <div className={"container-wrapper-info"}>
+          <div className={"container-wrapper-img"}>
+            <img className="plot-card-img" src={item.url} alt="img"></img>
+          </div>
+          <div className={"container-for-text"}>
+            <h3>Лучшее решение для начинающего предпринимателя!</h3>
+            <ul>
+              <li>Минимальные обязательства</li>
+              <li>Простое обслуживание</li>
+              <li>Идеально для сезонного использования</li>
+              <li>Цена: {item.price}</li>
+            </ul>
+          </div>
         </div>
-    );
+      </div>
+
+      <div className="container-plot-products">
+        <h1>ID: {item.id}</h1>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/src/components/main-page/Garden/SearchCard/SearchCard.js b/frontend/src/components/main-page/Garden/SearchCard/SearchCard.js
@@ -1,33 +1,31 @@
 import React from "react";
-import {useBasket} from "../../../basket-context/BasketContext";
+import { useBasket } from "../../../basket-context/BasketContext";
 
-export default function SearchCard({item, onClick}) {
-    const {addToBasket} = useBasket();
-    return (
-        <div className="search-card-wrapper" onClick={onClick}>
-            <div className="search-card-wrapper-v2">
-                <img
-                    className="search-card-img"
-                    src="https://avatars.mds.yandex.net/i?id=b4560f26cb2f9fab2f7395b28c1fed50_l-5236855-images-thumbs&n=13"
-                    alt="img"
-                ></img>
-                <div>
-                    <h3 className={"header-into-card"}>{item.name}, {item.id}</h3>
+export default function SearchCard({ item, onClick }) {
+  const { addToBasket } = useBasket();
+  return (
+    <div className="search-card-wrapper" onClick={onClick}>
+      <div className="search-card-wrapper-v2">
+        <img className="search-card-img" src={item.url} alt="img"></img>
+        <div>
+          <h3 className={"header-into-card"}>
+            {item.name}, {item.id}
+          </h3>
 
-                    <div>
-                            Свободно {item.count_free_beds} грядок
-                            <br/>
-                            Цена: {item.price} Рублей / грядка
-                    </div>
-                </div>
-            </div>
-            <div className="add-to-basket" onClick={() => addToBasket(item)}>
-                <img
-                    className="add-to-basket-img"
-                    src={process.env.PUBLIC_URL + "/plus.svg"}
-                    alt="img"
-                ></img>
-            </div>
+          <div>
+            Свободно {item.count_free_beds} грядок
+            <br />
+            Цена: {item.price} Рублей / грядка
+          </div>
         </div>
-    );
+      </div>
+      <div className="add-to-basket" onClick={() => addToBasket(item)}>
+        <img
+          className="add-to-basket-img"
+          src={process.env.PUBLIC_URL + "/plus.svg"}
+          alt="img"
+        ></img>
+      </div>
+    </div>
+  );
 }
diff --git a/frontend/src/components/main-page/Garden/garden.css b/frontend/src/components/main-page/Garden/garden.css
@@ -157,6 +157,8 @@
   align-items: center;
   width: auto;
   height: 44vh;
+  overflow: hidden;
+  border-radius: 20px;
 }
 
 .container-for-text {
@@ -170,8 +172,10 @@
 
 .plot-card-img {
   border-radius: 10px;
-  width: 400px;
+  width: 600px;
   transition: 0.5s ease;
+  height: 100%;
+  border-radius: 20px;
 }
 
 .plot-card-img:hover {