стадия депрессии

lab4/src/components/card/BasketCard.css

@@ -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 */
-  }

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: <Basket/>,
+  },
+  {
+    path: '/MakingAnOrder',
+    element: <MakingAnOrder/>,
+  },
+  {
+    path: '/PageEdit',
+    element: <PageEdit/>,
   }
 ];
 

lab4/src/pages/Administrator.jsx

@@ -7,7 +7,7 @@ const Administrator = () => {
         <Col>
           <h1 className="text-warning text-center font-weight-bold">Панель администратора</h1>
           <div className="btn-group" role="group">
-            <Button variant="warning" href="/page-edit.html">
+            <Button variant="warning" href="/PageEdit">
               Добавить товар
             </Button>
           </div>

lab4/src/pages/Basket.jsx

@@ -24,7 +24,7 @@ const Basket = () => {
                 Сумма ₽
                 </div>
             </div>
-            <a className="btn btn-warning" style={{ marginLeft: '25px', marginBottom: '10px' }} href="makingAnOrder.html">К оплате</a>
+            <a className="btn btn-warning" style={{ marginLeft: '25px', marginBottom: '10px' }} href="makingAnOrder">К оплате</a>
         </Container>
     );
 };

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 (
+    <Container className="h-100">
+      <Row className="d-flex justify-content-center align-items-center h-100">
+        <Col xs={12} md={9} lg={7} xl={6}>
+          <Card style={{ borderRadius: '15px', borderColor: 'gold' }}>
+            <Card.Body className="p-5">
+              <h2 className="text-uppercase text-center mb-5">Оформление заказа</h2>
+
+              <Form noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-4" controlId="name">
+                    <Form.Label htmlFor="name">Ваше имя</Form.Label>
+                    <Form.Control type="text" required />
+                    <Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
+                    <Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
+                </Form.Group>
+
+                <Form.Group className="mb-2">
+                    <Form.Label htmlFor="form3Example5cg">Номер телефона</Form.Label>
+                    <Form.Control type="tel" id="form3Example5cg" required />
+                    <Form.Control.Feedback>Номер телефона заполнен</Form.Control.Feedback>
+                    <Form.Control.Feedback type="invalid">Номер телефона не заполнен</Form.Control.Feedback>
+                </Form.Group>
+
+                <Form.Group className="mb-4">
+                  <Form.Label>Вариант получения</Form.Label>
+                  <Form.Check
+                    type="radio"
+                    label="Самовывоз"
+                    id="selfPickup"
+                    name="deliveryMethod"
+                    value="selfPickup"
+                    checked={deliveryMethod === 'selfPickup'}
+                    onChange={handleDeliveryMethodChange}
+                  />
+                  <Form.Check
+                    type="radio"
+                    label="Доставка"
+                    id="delivery"
+                    name="deliveryMethod"
+                    value="delivery"
+                    checked={deliveryMethod === 'delivery'}
+                    onChange={handleDeliveryMethodChange}
+                  />
+                </Form.Group>
+
+                {deliveryMethod === 'delivery' && (
+                  <div>
+                    <Form.Group className="mb-4" controlId="adress">
+                      <Form.Label>Ваш адрес доставки</Form.Label>
+                      <Form.Control type="text" required/>
+                      <Form.Control.Feedback>Адрес заполнен</Form.Control.Feedback>
+                      <Form.Control.Feedback type="invalid">Адрес не заполнен</Form.Control.Feedback>
+                    </Form.Group>
+
+                    <Form.Group className="mb-4">
+                      <Form.Label>Выберите время доставки:</Form.Label>
+                      <Form.Select>
+                      <option value="10:00-10:30">10:00-10:30</option>
+                      <option value="10:30-11:00">10:30-11:00</option>
+                      <option value="11:00-11:30">11:00-11:30</option>
+                      <option value="11:30-12:00">11:30-12:00</option>
+                      <option value="12:00-12:30">12:00-12:30</option>
+                      <option value="12:30-13:00">12:30-13:00</option>
+                      <option value="13:00-13:30">13:00-13:30</option>
+                      <option value="13:30-14:00">13:30-14:00</option>
+                      <option value="14:00-14:30">14:00-14:30</option>
+                      <option value="14:30-15:00">14:30-15:00</option>
+                      <option value="15:00-15:30">15:00-15:30</option>
+                      <option value="15:30-16:00">15:30-16:00</option>
+                      <option value="16:00-16:30">16:00-16:30</option>
+                      <option value="16:30-17:00">16:30-17:00</option>
+                      <option value="17:00-17:30">17:00-17:30</option>
+                      <option value="17:30-18:00">17:30-18:00</option>
+                      <option value="18:00-18:30">18:00-18:30</option>
+                      <option value="18:30-19:00">18:30-19:00</option>
+                      <option value="19:00-19:30">19:00-19:30</option>
+                      <option value="19:30-20:00">19:30-20:00</option>
+                      <option value="20:00-20:30">20:00-20:30</option>
+                      <option value="20:30-21:00">20:30-21:00</option>
+                      <option value="21:00-21:30">21:00-21:30</option>
+                      <option value="21:30-22:00">21:30-22:00</option>
+                      <option value="22:00-22:30">22:00-22:30</option>
+                      <option value="22:30-23:00">22:30-23:00</option>  
+                      </Form.Select>
+                    </Form.Group>
+                  </div>
+                )}
+
+                <Form.Group className="mb-4">
+                  <Form.Label>Вариант оплаты</Form.Label>
+                  <Form.Check
+                    type="radio"
+                    label="Наличные"
+                    id="cash"
+                    name="paymentMethod"
+                    value="cash"
+                    checked={paymentMethod === 'cash'}
+                    onChange={handlePaymentMethodChange}
+                  />
+                  <Form.Check
+                    type="radio"
+                    label="Оплата картой"
+                    id="creditCard"
+                    name="paymentMethod"
+                    value="creditCard"
+                    checked={paymentMethod === 'creditCard'}
+                    onChange={handlePaymentMethodChange}
+                  />
+                </Form.Group>
+
+                {paymentMethod === 'creditCard' && (
+                  <div>
+                    <Row className="mb-4">
+                      <Col>
+                        <Form.Group className="mb-2" controlId="formNameOnCard">
+                          <Form.Label>Имя держателя карты</Form.Label>
+                          <Form.Control type="text" required />
+                          <Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
+                          <Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
+                        </Form.Group>
+                      </Col>
+                      <Col>
+                        <Form.Group className="mb-2" controlId="formCardNumber">
+                          <Form.Label>Номер карты</Form.Label>
+                          <Form.Control type="text" pattern="[0-9]{16}" required />
+                          <Form.Control.Feedback>Номер карты заполнен</Form.Control.Feedback>
+                          <Form.Control.Feedback type="invalid">Введите правильный номер карты</Form.Control.Feedback>
+                        </Form.Group>
+                      </Col>
+                    </Row>
+
+                    <Row className="mb-4">
+                      <Col>
+                        <Form.Group className="mb-2" controlId="formExpiration">
+                          <Form.Label>Срок действия</Form.Label>
+                          <Form.Control type="text" pattern="\d{2}/\d{2}" required />
+                          <Form.Control.Feedback>Срок действия заполнен</Form.Control.Feedback>
+                          <Form.Control.Feedback type="invalid">Введите правильный срок действия</Form.Control.Feedback>
+                        </Form.Group>
+                      </Col>
+                      <Col>
+                        <Form.Group className="mb-2" controlId="formCVV">
+                          <Form.Label>CVV</Form.Label>
+                          <Form.Control type="text" pattern="\d{3}" required />
+                          <Form.Control.Feedback>CVV заполнен</Form.Control.Feedback>
+                          <Form.Control.Feedback type="invalid">Введите правильный CVV</Form.Control.Feedback>
+                        </Form.Group>
+                      </Col>
+                    </Row>
+                  </div>
+                )}
+
+                <div className="d-flex justify-content-center">
+                  <Button variant="warning" type="submit" id="saveButton">
+                    Оформить
+                  </Button>
+                </div>
+              </Form>
+            </Card.Body>
+          </Card>
+        </Col>
+      </Row>
+    </Container>
+  );
+};
+
+export default MakingAnOrder;

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 (
+    <Container fluid className="p-2">
+      <h1 className="text-warning text-center font-weight-bold">Добавление товара</h1>
+      <Row className="text-center">
+        <Col>
+          <img id="image-preview" src={imagePreview} className="rounded rounded-circle" alt="placeholder" />
+        </Col>
+      </Row>
+      <Form
+        id="items-form"
+        className="needs-validation"
+        noValidate
+        validated={validated}
+        onSubmit={handleSubmit}
+      >
+        <Form.Group controlId="item" className="mb-2">
+          <Form.Label>Товары</Form.Label>
+          <Form.Control
+            as="select"
+            name="selected"
+            onChange={handleItemChange}
+            value={selectedItem}
+            required
+          >
+          </Form.Control>
+          <Form.Control.Feedback type="invalid">Пожалуйста, выберите товар.</Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group controlId="price" className="mb-2">
+          <Form.Label>Цена</Form.Label>
+          <Form.Control
+            type="number"
+            name="price"
+            value={price}
+            min="1000.00"
+            step="0.50"
+            onChange={handlePriceChange}
+            required
+          />
+          <Form.Control.Feedback type="invalid">Пожалуйста, введите цену.</Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group controlId="stock" className="mb-2">
+          <Form.Label>Акция</Form.Label>
+          <Form.Control
+            type="number"
+            name="price"
+            value={stock}
+            min="0"
+            step="1"
+            onChange={handleStockChange}
+            required
+          />
+          <Form.Control.Feedback type="invalid">Пожалуйста, введите акцию.</Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group controlId="count" className="mb-2">
+          <Form.Label>Количество</Form.Label>
+          <Form.Control
+            type="number"
+            name="count"
+            value={count}
+            min="1"
+            step="1"
+            onChange={handleCountChange}
+            required
+          />
+          <Form.Control.Feedback type="invalid">Пожалуйста, введите количество.</Form.Control.Feedback>
+        </Form.Group>
+        <Form.Group controlId="image" className="mb-2">
+          <Form.Label>Изображение</Form.Label>
+          <Form.Control
+            type="file"
+            name="image"
+            accept="image/*"
+            onChange={handleImageChange}
+          />
+          <Form.Control.Feedback type="invalid">Пожалуйста, выберите изображение.</Form.Control.Feedback>
+        </Form.Group>
+        <Row className="mb-2">
+          <Col>
+            <Button href="Administrator" className="btn btn-secondary">Назад</Button>
+            <Button type="submit" className="btn btn-primary">Сохранить</Button>
+          </Col>
+        </Row>
+      </Form>
+    </Container>
+  );
+};
+
+export default PageEdit;

lab4/src/pages/PasswordRecovery.jsx

@@ -26,10 +26,10 @@ const PasswordRecovery = () => {
                             </h4>
                             <Form noValidate validated={validated} onSubmit={handleSubmit}>
                                 <Form.Group className="mb-4">
+                                    <Form.Label htmlFor="form3Example3cg">Ваш адрес электронной почты</Form.Label>
                                     <Form.Control type="email" id="form3Example3cg" required />
                                     <Form.Control.Feedback>Email заполнен</Form.Control.Feedback>
                                     <Form.Control.Feedback type="invalid">Email не заполнен</Form.Control.Feedback>
-                                    <Form.Label htmlFor="form3Example3cg">Ваш адрес электронной почты</Form.Label>
                                 </Form.Group>
 
                                 <div className="d-flex justify-content-center">

lab4/src/pages/PersonalAccount.jsx

@@ -24,38 +24,38 @@ const PersonalAccount = () => {
 
                             <Form noValidate validated={validated} onSubmit={handleSubmit}>
                                 <Form.Group className="mb-4" controlId="name">
+                                    <Form.Label htmlFor="name">Ваше имя</Form.Label>
                                     <Form.Control type="text" required />
                                     <Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
                                     <Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
-                                    <Form.Label htmlFor="name">Ваше имя</Form.Label>
                                 </Form.Group>
 
                                 <Form.Group className="mb-4" controlId="surname">
+                                    <Form.Label htmlFor="surname">Ваша фамилия</Form.Label>
                                     <Form.Control type="text" required/>
                                     <Form.Control.Feedback>Фамилия заполнена</Form.Control.Feedback>
                                     <Form.Control.Feedback type="invalid">Фамилия не заполнена</Form.Control.Feedback>
-                                    <Form.Label htmlFor="surname">Ваша фамилия</Form.Label>
                                 </Form.Group>
 
                                 <Form.Group className="mb-4">
+                                    <Form.Label htmlFor="form3Example3cg">Ваш адрес электронной почты</Form.Label>
                                     <Form.Control type="email" id="form3Example3cg" required />
                                     <Form.Control.Feedback>Email заполнен</Form.Control.Feedback>
                                     <Form.Control.Feedback type="invalid">Email не заполнен</Form.Control.Feedback>
-                                    <Form.Label htmlFor="form3Example3cg">Ваш адрес электронной почты</Form.Label>
                                 </Form.Group>
 
                                 <Form.Group className="mb-4">
+                                    <Form.Label htmlFor="form3Example4cg">Дата рождения</Form.Label>
                                     <Form.Control type="date" id="form3Example4cg" required />
                                     <Form.Control.Feedback>Дата рождения заполнена</Form.Control.Feedback>
                                     <Form.Control.Feedback type="invalid">Дата рождения не заполнена</Form.Control.Feedback>
-                                    <Form.Label htmlFor="form3Example4cg">Дата рождения</Form.Label>
                                 </Form.Group>
 
                                 <Form.Group className="mb-2">
+                                    <Form.Label htmlFor="form3Example5cg">Номер телефона</Form.Label>
                                     <Form.Control type="tel" id="form3Example5cg" required />
                                     <Form.Control.Feedback>Номер телефона заполнен</Form.Control.Feedback>
                                     <Form.Control.Feedback type="invalid">Номер телефона не заполнен</Form.Control.Feedback>
-                                    <Form.Label htmlFor="form3Example5cg">Номер телефона</Form.Label>
                                 </Form.Group>
 
                                 <div className="d-flex justify-content-center">
@@ -65,7 +65,7 @@ const PersonalAccount = () => {
                                 </div>
 
                                 <div className="d-flex justify-content-center mt-2">
-                                    <a className="btn btn-outline-danger" type="button" href="Index">
+                                    <a className="btn btn-outline-danger" type="button" href="/">
                                         Выйти
                                     </a>
                                 </div>