diff --git a/lab4/src/components/card/BasketCard.css b/lab4/src/components/card/BasketCard.css deleted file mode 100644 index 7a674da..0000000 --- a/lab4/src/components/card/BasketCard.css +++ /dev/null @@ -1,4 +0,0 @@ -.btn-opaque { - background-color: rgba(255, 255, 255, 0.8); /* You can adjust the alpha value for opacity */ - /* You can also set other styles to make the buttons more visible */ - } \ No newline at end of file diff --git a/lab4/src/components/card/ProductCard.css b/lab4/src/components/card/ProductCard.css deleted file mode 100644 index e69de29..0000000 diff --git a/lab4/src/main.jsx b/lab4/src/main.jsx index 4750943..a2f09db 100644 --- a/lab4/src/main.jsx +++ b/lab4/src/main.jsx @@ -14,6 +14,8 @@ import PersonalAccountRegister from './pages/PersonalAccountRegister.jsx'; import PasswordRecovery from './pages/PasswordRecovery.jsx'; import Administrator from './pages/Administrator.jsx'; import Basket from './pages/Basket.jsx'; +import MakingAnOrder from './pages/MakingAnOrder.jsx'; +import PageEdit from './pages/PageEdit.jsx'; const routes = [ { @@ -55,6 +57,14 @@ const routes = [ { path: '/Basket', element: , + }, + { + path: '/MakingAnOrder', + element: , + }, + { + path: '/PageEdit', + element: , } ]; diff --git a/lab4/src/pages/Administrator.jsx b/lab4/src/pages/Administrator.jsx index e11a1c7..b9e1223 100644 --- a/lab4/src/pages/Administrator.jsx +++ b/lab4/src/pages/Administrator.jsx @@ -7,7 +7,7 @@ const Administrator = () => {

Панель администратора

-
diff --git a/lab4/src/pages/Basket.jsx b/lab4/src/pages/Basket.jsx index 7cbcfb2..07ac2d8 100644 --- a/lab4/src/pages/Basket.jsx +++ b/lab4/src/pages/Basket.jsx @@ -24,7 +24,7 @@ const Basket = () => { Сумма ₽ - К оплате + К оплате ); }; diff --git a/lab4/src/pages/MakingAnOrder.jsx b/lab4/src/pages/MakingAnOrder.jsx new file mode 100644 index 0000000..6077f81 --- /dev/null +++ b/lab4/src/pages/MakingAnOrder.jsx @@ -0,0 +1,194 @@ +import { useState } from 'react'; +import { Container, Row, Col, Card, Form, Button } from 'react-bootstrap'; + +const MakingAnOrder = () => { + const [deliveryMethod, setDeliveryMethod] = useState('selfPickup'); + const [paymentMethod, setPaymentMethod] = useState('cash'); + + const handleDeliveryMethodChange = (e) => { + setDeliveryMethod(e.target.value); + }; + + const handlePaymentMethodChange = (e) => { + setPaymentMethod(e.target.value); + }; + + const [validated, setValidated] = useState(false); + + const handleSubmit = (event) => { + const form = event.currentTarget; + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + } + + setValidated(true); + }; + + return ( + + + + + +

Оформление заказа

+ +
+ + Ваше имя + + Имя заполнено + Имя не заполнено + + + + Номер телефона + + Номер телефона заполнен + Номер телефона не заполнен + + + + Вариант получения + + + + + {deliveryMethod === 'delivery' && ( +
+ + Ваш адрес доставки + + Адрес заполнен + Адрес не заполнен + + + + Выберите время доставки: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ )} + + + Вариант оплаты + + + + + {paymentMethod === 'creditCard' && ( +
+ + + + Имя держателя карты + + Имя заполнено + Имя не заполнено + + + + + Номер карты + + Номер карты заполнен + Введите правильный номер карты + + + + + + + + Срок действия + + Срок действия заполнен + Введите правильный срок действия + + + + + CVV + + CVV заполнен + Введите правильный CVV + + + +
+ )} + +
+ +
+
+ + + + + + ); +}; + +export default MakingAnOrder; diff --git a/lab4/src/pages/PageEdit.jsx b/lab4/src/pages/PageEdit.jsx new file mode 100644 index 0000000..8b7b019 --- /dev/null +++ b/lab4/src/pages/PageEdit.jsx @@ -0,0 +1,170 @@ +import { useState } from 'react'; +import { Container, Col, Row, Form, Button } from 'react-bootstrap'; + +const PageEdit = () => { + const [validated, setValidated] = useState(false); + + const handleSubmit = (event) => { + const form = event.currentTarget; + if (form.checkValidity() === false) { + event.preventDefault(); + event.stopPropagation(); + } + + setValidated(true); + }; + + const [selectedItem, setSelectedItem] = useState(''); + const [price, setPrice] = useState(0.00); + const [stock, setStock] = useState(0); + const [count, setCount] = useState(0); + const [imagePreview, setImagePreview] = useState('https://via.placeholder.com/200'); + + const handleItemChange = (e) => { + setSelectedItem(e.target.value); + }; + + const handlePriceChange = (e) => { + setPrice(parseFloat(e.target.value)); + }; + + const handleStockChange = (e) => { + setStock(parseInt(e.target.value, 10)); + }; + + const handleCountChange = (e) => { + setCount(parseInt(e.target.value, 10)); + }; + + const handleImageChange = (e) => { + const file = e.target.files[0]; + + if (file) { + const reader = new FileReader(); + + reader.onloadend = () => { + const img = new Image(); + img.src = reader.result; + + img.onload = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + const maxWidth = 200; + const maxHeight = 200; + let width = img.width; + let height = img.height; + + if (width > height) { + if (width > maxWidth) { + height *= maxWidth / width; + width = maxWidth; + } + } else { + if (height > maxHeight) { + width *= maxHeight / height; + height = maxHeight; + } + } + + canvas.width = width; + canvas.height = height; + + ctx.drawImage(img, 0, 0, width, height); + + setImagePreview(canvas.toDataURL('image/png')); + }; + }; + + reader.readAsDataURL(file); + } + }; + + return ( + +

Добавление товара

+ + + placeholder + + +
+ + Товары + + + Пожалуйста, выберите товар. + + + Цена + + Пожалуйста, введите цену. + + + Акция + + Пожалуйста, введите акцию. + + + Количество + + Пожалуйста, введите количество. + + + Изображение + + Пожалуйста, выберите изображение. + + + + + + + +
+ + ); +}; + +export default PageEdit; diff --git a/lab4/src/pages/PasswordRecovery.jsx b/lab4/src/pages/PasswordRecovery.jsx index d89393b..a109569 100644 --- a/lab4/src/pages/PasswordRecovery.jsx +++ b/lab4/src/pages/PasswordRecovery.jsx @@ -26,10 +26,10 @@ const PasswordRecovery = () => {
+ Ваш адрес электронной почты Email заполнен Email не заполнен - Ваш адрес электронной почты
diff --git a/lab4/src/pages/PersonalAccount.jsx b/lab4/src/pages/PersonalAccount.jsx index deb38a8..3d6edb3 100644 --- a/lab4/src/pages/PersonalAccount.jsx +++ b/lab4/src/pages/PersonalAccount.jsx @@ -24,38 +24,38 @@ const PersonalAccount = () => { + Ваше имя Имя заполнено Имя не заполнено - Ваше имя + Ваша фамилия Фамилия заполнена Фамилия не заполнена - Ваша фамилия + Ваш адрес электронной почты Email заполнен Email не заполнен - Ваш адрес электронной почты + Дата рождения Дата рождения заполнена Дата рождения не заполнена - Дата рождения + Номер телефона Номер телефона заполнен Номер телефона не заполнен - Номер телефона
@@ -65,7 +65,7 @@ const PersonalAccount = () => {
diff --git a/Отчёты/Отчёт 4.docx b/Отчёты/Отчёт 4.docx new file mode 100644 index 0000000..88ee5d6 Binary files /dev/null and b/Отчёты/Отчёт 4.docx differ