new styles

mikeiken · Dec 1, 2024 · 648e060 · 648e060
1 parent 0e9908b
commit 648e060
Show file tree

Hide file tree

Showing 11 changed files with 186 additions and 87 deletions.
diff --git a/frontend/public/search.svg b/frontend/public/search.svg
diff --git a/frontend/src/components/auth/login/components/form.js b/frontend/src/components/auth/login/components/form.js
@@ -13,12 +13,14 @@ export default function Form() {
     try {
       localStorage.removeItem("accessToken");
       localStorage.removeItem("refreshToken");
+      localStorage.removeItem("wallet_balance");
       const response = await Instance.post("/login/", {
         username,
         password,
       });
       localStorage.setItem("accessToken", response.data.access);
       localStorage.setItem("refreshToken", response.data.refresh);
+      localStorage.setItem("wallet_balance", response.data.wallet_balance);
       navigate("/navigate/garden");
       //alert("Приветствуем вас!");
     } catch (error) {

diff --git a/frontend/src/components/basket-context/BasketContext.js b/frontend/src/components/basket-context/BasketContext.js
@@ -3,9 +3,7 @@ import React, { createContext, useState, useContext, useEffect } from "react";
 // Создаем контекст
 const BasketContext = createContext();
 
-// Провайдер контекста для оборачивания компонентов
 export const BasketProvider = ({ children }) => {
-  // Получаем данные из localStorage или начинаем с пустого массива
   const loadBasketItems = () => {
     const savedItems = localStorage.getItem("basketItems");
     return savedItems ? JSON.parse(savedItems) : [];

diff --git a/frontend/src/components/main-page/Basket/Order/Order.js b/frontend/src/components/main-page/Basket/Order/Order.js
@@ -3,6 +3,7 @@ import "./order.css";
 import PlantArea from "./PlantArea/PlantArea";
 import { CounterContext } from "../../ui/counter/CounterContext";
 import Counter from "../../ui/counter/Counter";
+import Instance from "../../../api/instance";
 function getDeclension(quantity, one, few, many) {
   if (quantity % 10 === 1 && quantity % 100 !== 11) {
     return one;
@@ -26,7 +27,7 @@ export default function Order({
 }) {
   const { count } = useContext(CounterContext);
   const declension = getDeclension(count, "грядка", "грядки", "грядок");
-  const [comment, setComment] = useState("");
+  const [comment, setComment] = useState(" ");
   const [selectedPlant, setSelectedPlant] = useState(null); // Состояние для выбранного растения
   const [fertilize, setFertilization] = useState(false);
 
@@ -38,6 +39,16 @@ export default function Order({
     setFertilization(true);
   };
 
+  function createOrder() {
+    Instance.post("order/", {
+      field: item.id,
+      beds_count: Number(count),
+      plant: selectedPlant.id,
+      comments: comment,
+      fertilize: fertilize,
+    }).then(removeFromBasket(id))
+  }
+
   useEffect(() => {
     if (selectedPlant) {
       console.log(
@@ -59,13 +70,19 @@ export default function Order({
     <div className="order-wrapper">
       <div className="order">
         <div className="order-info">
-          <div className="order-info-wrapper">
-            <div className={"order-image-align"}>
-              <img src={item.url} alt="object" className="order-image"></img>
-            </div>
-            <div className="oreder-description">
-              {name} - {price} руб. <br />
+          <div className="order-info-wrapper"
+               style={{
+                 backgroundImage: `url(${item.url})`, // Устанавливаем фон
+                 backgroundSize: 'cover',             // Масштабируем фон для заполнения
+                 backgroundPosition: 'center',        // Центрируем фон
+                 backgroundRepeat: 'no-repeat',        // Избегаем повторения изображения
+                 borderRadius: '20px'
+               }}
+          >
+
+            <div className="order-description">
               Поле №{id} <br />
+              {name} - {price} руб. <br />
               Свободных грядок: {item.count_free_beds}
             </div>
           </div>
@@ -86,7 +103,7 @@ export default function Order({
             <div>Дата заказа: {date}</div>
             <div className="order-change-volume">
               <div className="order-wrapper-itog">
-                Итог: <Counter />
+                Итог: <Counter /> {" "}
                 {declension}
               </div>
             </div>
@@ -116,8 +133,11 @@ export default function Order({
                 "Растение не выбрано"
               )}
             </div>
+            <div>
+              Цена: {item.price * Number(count) + (selectedPlant ? selectedPlant.price : 0)} ₽
+            </div>
             <div className="order-submit-button-container">
-              <button>Заказать</button>
+              {selectedPlant ? <button onClick={createOrder}>Заказать</button> : ""}
               <button onClick={() => removeFromBasket(id)}>Отменить</button>
             </div>
           </div>

diff --git a/frontend/src/components/main-page/Basket/Order/PlantArea/PlantArea.js b/frontend/src/components/main-page/Basket/Order/PlantArea/PlantArea.js
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import React, {useEffect, useState} from 'react';
 import Instance from '../../../../api/instance';
 import './plant-area.css';
 
-function Plant({ plant, onClick }) {
+function Plant({plant, onClick}) {
     return (
         <button className="plant-container" onClick={onClick}>
             <div className="plant-image-wrapper">
@@ -17,7 +17,7 @@ function Plant({ plant, onClick }) {
     );
 }
 
-export default function PlantArea({ onPlantSelect }) {
+export default function PlantArea({onPlantSelect}) {
     const [data, setData] = useState([]);
     const [filteredData, setFilteredData] = useState([]);
     const [searchTerm, setSearchTerm] = useState("");
@@ -49,21 +49,24 @@ export default function PlantArea({ onPlantSelect }) {
     return (
         <div>
             <div className="plant-search-area">
-                <input
-                    placeholder="Введите название..."
-                    value={searchTerm}
-                    onChange={handleSearchChange}
-                />
-                <button>
-                    <img alt="search" />
-                </button>
+                <div className={"plant-search-input-wrapper"}>
+                    <input
+                        placeholder="Введите название..."
+                        value={searchTerm}
+                        onChange={handleSearchChange}
+                        className={"plant-area-input"}
+                    />
+                    <button className={"plant-search-button"}>
+                        <img src={process.env.PUBLIC_URL + '/search.svg'} alt="search"/>
+                    </button>
+                </div>
             </div>
             <div className="plant-area">
                 {filteredData.map((item) => (
                     <Plant
                         plant={item}
                         key={item.id}
-                        onClick={() => onPlantSelect(item)} // Передаем выбранное растение
+                        onClick={() => onPlantSelect(item)} // Передаем объект растения
                     />
                 ))}
             </div>

diff --git a/frontend/src/components/main-page/Basket/Order/PlantArea/plant-area.css b/frontend/src/components/main-page/Basket/Order/PlantArea/plant-area.css
@@ -5,11 +5,21 @@
     align-items: center;
     width: 90px;
     height: 100px;
-    background-color: #0f3a42;
+    border-radius: 15px;
+    outline: none;
+    border: 3px solid white;
+    background-color: rgba(40, 37, 40, 0.5);
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    transition: 0.3s ease;
 }
 
-.plant-container:focus{
-    background-color: #1b6d85;
+.plant-container:focus {
+    background-color: #96c2a8;
+    transform: scale(0.95);
+}
+
+.plant-container:active {
+    transform: scale(0.9);
 }
 
 .plant-image-wrapper{
@@ -29,15 +39,47 @@
     flex-wrap: wrap; /* Разрешает перенос строк */
     gap: 7px;
     justify-content: center;
-    /*margin: 5px;*/
 }
 
-.plant-search-area{
-    width: 100%;
-    height: 50px;
-    background-color: #0f3a42;
-    margin: 0 0 5px 0;
+.plant-search-area {
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+.plant-search-input-wrapper {
+    position: relative; /* Для абсолютного позиционирования кнопки */
+    width: 100%; /* Чтобы адаптировать к ширине контейнера */
+    max-width: 400px; /* Опционально, максимальная ширина */
+    margin-bottom: 5px;
+}
+
+.plant-area-input {
+    width: 100%; /* Полная ширина */
+    padding: 10px 40px 10px 10px; /* Отступ справа для кнопки */
+    font-size: 16px; /* Размер шрифта */
+    border: 1px solid #ccc; /* Граница */
+    outline: none;
+    border-radius: 20px; /* Закругленные углы */
+    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
+
+}
+
+.plant-area-input:focus{
+    border: 1px solid #1b6d85;
+}
+
+.plant-search-button {
+    position: absolute; /* Абсолютное позиционирование внутри контейнера */
+    top: 50%; /* Выравнивание по вертикали */
+    right: 10px; /* Расстояние от правого края */
+    transform: translateY(-50%); /* Центровка по вертикали */
+    background: none; /* Убираем фон */
+    border: none; /* Убираем границу */
+    cursor: pointer; /* Указатель мыши */
+}
+
+.plant-search-button img {
+    width: 20px; /* Размер иконки */
+    height: 20px;
 }
diff --git a/frontend/src/components/main-page/Basket/Order/order.css b/frontend/src/components/main-page/Basket/Order/order.css
@@ -16,26 +16,33 @@
   padding: 20px;
   border-radius: 20px;
   width: 800px;
-  height: 300px;
-  background-color: burlywood;
+  height: 400px;
+  background-color: rgba(222, 184, 135, 0.7);
   display: flex;
   gap: 10px;
 }
 
 .order-order {
   padding: 20px;
   border-radius: 20px;
-  width: 20vw;
-  height: auto;
-  background-color: lightblue;
+  width: 300px;
+  height: 400px;
+  background-color: rgba(222, 184, 135, 0.7);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   align-items: center;
 }
 
-.oreder-description {
-  width: 200px;
+.order-description {
+  width: auto;
+  font-size: 20px;
+  background-color: rgba(255, 255, 255, 0.7); /* Полупрозрачный белый */
+  padding: 10px;
+  border-radius: 10px;
+  backdrop-filter: blur(2px); /* Размытие заднего фона */
+  -webkit-backdrop-filter: blur(10px); /* Для поддержки в Safari */
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Легкая тень для акцента */
 }
 
 .license-wrapper {
@@ -55,22 +62,26 @@
 
 .order-info-wrapper {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
+  align-items: center;
   width: 500px;
   height: 100%;
   background-color: cadetblue;
   gap: 20px;
 }
 
 .order-image {
-  width: 190px;
-  height: 190px;
-  padding: 10px;
+  width:100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 20px;
+
 }
 
 .order-image-align {
-  width: auto;
-  height: auto;
+  margin: 10px;
+  width: 200px;
+  height: 200px;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -90,7 +101,7 @@
 
 .order-submit-button-container {
   display: flex;
-  justify-content: space-around;
+  justify-content: center;
 }
 
 /* Стили для поля ввода комментария */
@@ -118,8 +129,9 @@
 /* Стили для кнопок */
 .order-submit-button-container {
   display: flex;
-  justify-content: space-between;
+  justify-content: center;
   margin-top: 20px;
+  gap: 40px;
 }
 
 .order-submit-button,
@@ -153,33 +165,48 @@
 .order-garden-list {
   width: 370px;
   height: 100%;
-  background-color: #ddd;
+  background-color: rgba(221, 221, 221, 0.7);
   overflow: auto;
   padding: 10px;
+  border-radius: 20px;
 }
 
 .fertilize_btn {
   width: 50px;
+  border-radius: 10px;
   border: 1px solid #ddd;
+  outline: none;
 }
 
 .green {
   background-color: #45a049;
+  border: 1px solid #0f3a42;
 }
 
 .green:active {
   background-color: #2c6c30;
 }
+
 .red {
   background-color: #f44336;
+  border: 1px solid #420f13;
+
 }
 
 .red:active {
   background-color: #e53935;
+
 }
 
 .order-wrapper-itog {
   display: flex;
   justify-content: space-around;
   align-items: center;
 }
+
+.plant-area-input{
+  width: 100%;
+  height: 80%;
+  border-radius: 20px;
+  border: 1px solid #ddd;
+}