3 лаб Финал

Lab3/index.html

@@ -48,8 +48,6 @@
     <div class="btn-group text-center" role="group">
         <button id="items-add" class="btn btn-info">
             Добавить новость</button>
-        <button class="btn btn-primary w-auto" type="button" onclick ="location.href='admin.html';">
-            Панель админа</button>
     </div>
 </div>
 </main>
@@ -72,10 +70,6 @@
                             alt="placeholder">
                     </div>
                     <input id="items-line-id" type="number" hidden>
-                    <div class="mb-2">
-                        <label for="date" class="form-label">Дата</label>
-                        <input id="date" class="form-control" name="date" type = "date" required>
-                    </div>
                     <div class="mb-2">
                         <label class="form-label" for="name">Название</label>
                         <input id="name" name="name" class="form-control" type = "text"

Lab3/js/banner.js

@@ -1,46 +0,0 @@
-// модуль для смены изображения в баннере по таймеру
-
-import "../css/banner.css";
-
-// указывается блок, в котором будет баннер
-// блок должен содержать изображения
-function myBanner(root) {
-    console.info("Loaded");
-
-    // получение всех изображений внутри баннера
-    const banners = document.querySelectorAll(`${root} img`);
-
-    // всем изображениям устанавливается класс banner-hide
-    // если были другие классы, то они будут удалены
-    for (let i = 0; i < banners.length; i += 1) {
-        banners[i].setAttribute("class", "banner-hide");
-    }
-
-    let old = banners.length - 1;
-    let current = 0;
-
-    // функция меняет изображения в цикле
-    // изображение с классом banner-show будет показано
-    // изображение с классом banner-hide будет скрыто
-    // функция запускает таймер, который через 5 секунд
-    // запускает функцию, снова создается таймер и т. д.
-    function loop() {
-        banners[current].setAttribute("class", "banner-show");
-        banners[old].setAttribute("class", "banner-hide");
-
-        console.info("Banner changed");
-
-        old = current;
-        current += 1;
-
-        if (current === banners.length) {
-            current = 0;
-        }
-
-        setTimeout(loop, 5000);
-    }
-
-    loop();
-}
-
-export default myBanner;

Lab3/js/lines-modal.js

@@ -18,7 +18,6 @@ const modalTitle = document.getElementById("items-update-title");
 // используется одно окно для всех операций
 function resetValues() {
     cntrls.lineId.value = "";
-    cntrls.itemDate.value = "";
     cntrls.itemName.value = "";
     cntrls.itemDescription.value = "";
     cntrls.itemImage.value = "";
@@ -35,7 +34,6 @@ export function showUpdateModal(item) {
 
     if (item) {
         cntrls.lineId.value = item.id;
-        cntrls.itemDate.value = item.itemsId;
         cntrls.itemName.value = item.name;
         cntrls.itemDescription.value = item.description;
         // заполнение превью

Lab3/js/lines-rest-api.js

@@ -3,10 +3,18 @@
 // адрес сервера
 const serverUrl = "http://localhost:8081";
 
+export function getRealDate() {
+    const date = new Date();
+    const year = date.getFullYear();
+    const month = `0${date.getMonth() + 1}`.slice(-2);
+    const day = `0${date.getDate()}`.slice(-2);
+
+    return `${year}-${month}-${day}`;
+}
 // функция возвращает объект нужной структуры для отправки на сервер
-function createLineObject(itemDate, itemName, itemDescription, itemImage) {
+function createLineObject(itemName, itemDescription, itemImage) {
     return {
-        date: itemDate,
+        date: getRealDate(),
         name: itemName,
         description: itemDescription,
         image: itemImage,
@@ -24,8 +32,8 @@ export async function getAllLines() {
 
 // обращение к серверу для создания записи (post)
 // объект отправляется в теле запроса (body)
-export async function createLine(itemDate, itemName, description, image) {
+export async function createLine(itemName, description, image) {
-    const itemObject = createLineObject(itemDate, itemName, description, image);
+    const itemObject = createLineObject(itemName, description, image);
 
     const options = {
         method: "POST",
@@ -46,8 +54,8 @@ export async function createLine(itemDate, itemName, description, image) {
 // обращение к серверу для обновления записи по id (put)
 // объект отправляется в теле запроса (body)
 // id передается в качестве части пути URL get-запроса
-export async function updateLine(id, itemDate, itemName, description, image) {
+export async function updateLine(id, itemName, description, image) {
-    const itemObject = createLineObject(itemDate, itemName, description, image);
+    const itemObject = createLineObject(itemName, description, image);
 
     const options = {
         method: "PUT",

Lab3/js/lines.js

@@ -56,10 +56,10 @@ async function drawLinesTable() {
     });
 }
 
-async function addLine(item, itemName, description, image) {
+async function addLine(itemName, description, image) {
     console.info("Try to add item");
     // вызов метода REST API для добавления записи
-    const data = await createLine(item, itemName, description, image);
+    const data = await createLine(itemName, description, image);
     console.info("Added");
     console.info(data);
     // загрузка и заполнение table
@@ -67,10 +67,10 @@ async function addLine(item, itemName, description, image) {
     UpdateNews();
 }
 
-async function editLine(id, item, itemName, description, image) {
+async function editLine(id, itemName, description, image) {
     console.info("Try to update item");
     // вызов метода REST API для обновления записи
-    const data = await updateLine(id, item, itemName, description, image);
+    const data = await updateLine(id, itemName, description, image);
     console.info("Updated");
     console.info(data);
     // загрузка и заполнение table
@@ -193,7 +193,6 @@ export function linesForm() {
         // иначе обновление записи
         if (!currentId) {
             await addLine(
-                cntrls.itemDate.value,
                 cntrls.itemName.value,
                 cntrls.itemDescription.value,
                 imageBase64,
@@ -201,7 +200,6 @@ export function linesForm() {
         } else {
             await editLine(
                 currentId,
-                cntrls.itemDate.value,
                 cntrls.itemName.value,
                 cntrls.itemDescription.value,
                 imageBase64,

Lab4/.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'airbnb-base',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': 'off',
+    'no-console': 'off',
+    'arrow-body-style': 'off',
+    'implicit-arrow-linebreak': 'off',
+  },
+}

Lab4/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Lab4/README.md

@@ -0,0 +1,29 @@
+#### Окружение:
+- nodejs 18;
+- VSCode;
+- ESLint плагин для VSCode;
+- для отладки необходимы бразузеры Chrome или Edge.
+
+#### Создание пустого проекта:
+
+```commandline
+npm create vite@latest ./ -- --template react 
+```
+
+#### Установка зависимостей:
+
+```commandline
+npm install
+```
+
+#### Запуск проекта:
+
+```commandline
+npm run dev
+```
+
+#### Сборка проекта:
+
+```commandline
+npm run build
+```

Lab4/index.html

@@ -0,0 +1,15 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>My shop</title>
+</head>
+
+<body>
+  <div id="root" class="h-100 d-flex flex-column"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

Lab4/jsconfig.json

@@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}

Lab4/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "lec4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "bootstrap": "^5.3.2",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.7",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "vite": "^4.4.5"
+  }
+}

Lab4/public/favicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cart2" viewBox="0 0 16 16">
+  <path d="M0 2.5A.5.5 0 0 1 .5 2H2a.5.5 0 0 1 .485.379L2.89 4H14.5a.5.5 0 0 1 .485.621l-1.5 6A.5.5 0 0 1 13 11H4a.5.5 0 0 1-.485-.379L1.61 3H.5a.5.5 0 0 1-.5-.5zM3.14 5l1.25 5h8.22l1.25-5H3.14zM5 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm9-1a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm-2 1a2 2 0 1 1 4 0 2 2 0 0 1-4 0z"/>
+</svg>

Lab4/src/App.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import Footer from './components/footer/Footer.jsx';
+import Navigation from './components/navigation/Navigation.jsx';
+
+const App = ({ routes }) => {
+  return (
+    <>
+      <Navigation routes={routes}></Navigation>
+      <Container className='p-2' as="main" fluid>
+        <Outlet />
+      </Container>
+      <Footer />
+    </>
+  );
+};
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;

Lab4/src/components/banner/Banner.css

@@ -0,0 +1,25 @@
+#banner {
+    margin: 2px;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+#banner img {
+    border: 1px solid #3c3c3f;
+    border-radius: 5px;
+}
+
+#banner img.banner-show {
+    width: 100%;
+    opacity: 1;
+    transition: opacity 1s, visibility 0s;
+}
+
+#banner img.banner-hide {
+    height: 0;
+    width: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 1s, visibility 0s 1s;
+}

Lab4/src/components/banner/Banner.jsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from 'react';
+import banner1 from '../../assets/banner1.png';
+import banner2 from '../../assets/banner2.png';
+import banner3 from '../../assets/banner3.png';
+import './Banner.css';
+
+const Banner = () => {
+    const [currentBanner, setCurrentBanner] = useState(0);
+    const banners = [banner1, banner2, banner3];
+
+    const getBannerClass = (index) => {
+        return currentBanner === index ? 'banner-show' : 'banner-hide';
+    };
+
+    useEffect(() => {
+        const bannerInterval = setInterval(
+            () => {
+                console.info('Banner changed');
+                let current = currentBanner + 1;
+                if (current === banners.length) {
+                    current = 0;
+                }
+                setCurrentBanner(current);
+            },
+            5000,
+        );
+        return () => clearInterval(bannerInterval);
+    });
+
+    return (
+        <div id="banner" >
+            {
+                banners.map((banner, index) =>
+                    <img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
+            }
+        </div >
+    );
+};
+
+export default Banner;

Lab4/src/components/footer/Footer.css

@@ -0,0 +1,5 @@
+.my-footer {
+    background-color: #454545;
+    height: 32px;
+    color: #fff;
+}

Lab4/src/components/footer/Footer.jsx

@@ -0,0 +1,13 @@
+import './Footer.css';
+
+const Footer = () => {
+    // const year = new Date().getFullYear();
+
+    return (
+        <footer className="my-footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
+            Адреса: ул. Северный Венец, 32; ул. Андрея Блаженного, 3
+        </footer>
+    );
+};
+
+export default Footer;

Lab4/src/components/navigation/Navigation.css

@@ -0,0 +1,12 @@
+.my-navbar {
+    background-color: #3c3c3c !important;
+}
+
+.my-navbar .link a:hover {
+    text-decoration: underline !important;
+}
+
+.my-navbar .logo {
+    width: 26px;
+    height: 26px;
+}

Lab4/src/components/navigation/Navigation.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { Container, Nav, Navbar } from 'react-bootstrap';
+import { Cart2 } from 'react-bootstrap-icons';
+import { Link, useLocation } from 'react-router-dom';
+import './Navigation.css';
+
+const Navigation = ({ routes }) => {
+    const location = useLocation();
+    const indexPageLink = routes.filter((route) => route.index === false).shift();
+    const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
+
+    return (
+        <header>
+            <Navbar expand='md' bg='dark' data-bs-theme='dark' className='my-navbar'>
+                <Container fluid>
+                    <Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
+                        <Cart2 className='d-inline-block align-top me-1 logo' />
+                        UlSTU
+                    </Navbar.Brand>
+                    <Navbar.Toggle aria-controls='main-navbar' />
+                    <Navbar.Collapse id='main-navbar'>
+                        <Nav className='me-auto link' activeKey={location.pathname}>
+                            {
+                                pages.map((page) =>
+                                    <Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
+                                        {page.title}
+                                    </Nav.Link>)
+                            }
+                        </Nav>
+                    </Navbar.Collapse>
+                </Container>
+            </Navbar >
+        </header>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;

Lab4/src/index.css

@@ -0,0 +1,118 @@
+h1 {
+    font-size: 1.5em;
+}
+
+h2 {
+    font-size: 1.25em;
+}
+
+h3 {
+    font-size: 1.1em;
+}
+
+.btn-mw {
+    width: 100%;
+}
+
+@media (min-width: 768px) {
+    .btn-mw {
+        width: 30%;
+    }
+}
+
+@media (min-width: 1200px) {
+    .btn-mw {
+        width: 20%;
+    }
+}
+.body{
+    display: flex;
+    flex-direction: column;
+    min-height: 100hv;
+}
+.stsp{
+    font-size: 30px;
+    color: #333333;
+    text-align: center;
+    margin-top: 70;
+}
+
+.mainSt{
+    color: #060647;
+    font-size: 50px;
+}
+
+.rectPage2{
+    color: #FFFFFF;
+    width: 1470px;
+    height: 900px;
+    border : 2px solid #000000;
+    background-color: #FFFFFF;
+    opacity: 0.8;
+}
+.rectPage4{
+    margin-left: auto;
+    margin-right: auto;
+    color: #FFFFFF;
+    width: 550px;
+    height: 300px;
+    border: 2px solid #000000;
+    background-color: #7c7474;
+    opacity: 0.8;
+}
+.rectPage5{
+    margin-left: auto;
+    margin-right: auto;
+    margin-top : auto;
+    margin-bottom : auto;
+    width: 600px;
+    height: 500px;
+    border: 2px solid #000000;
+    background-color: #FFFFFF;
+    opacity: 0.7;
+}
+.rectNews{
+    width:310px;
+    height:200px;
+    border : 2px solid #2582A3;
+    border-radius: 8%;
+    margin-left: 180;
+    margin-top: 9px;
+    margin-bottom:25px;
+}
+.stylePage2{
+    float : center;
+    margin-right: 7;
+    color: #063638;
+    font-size: 18px
+}
+.styleParagraph{
+    border-top: 2px solid #000000;
+}
+.styleBlack{
+    color : #000000;
+}
+.stylePage2LargeSymbol{
+    float : left;
+    margin-right: 7;
+    color: #118D94;
+    font-size: 50px;
+    line-height: 52px
+}
+.rectNewsTextBox{
+    width : 310px;
+    min-height : 50px;
+    border: 2px solid #000000;
+    background-color: #FFFFFF;
+    opacity: 0.7;
+    border-radius: 10% / 40%;
+    margin-top : 5px;
+}
+.rectNewsText{
+    color: #000000;
+    font-size: 15px;
+}
+.rectNew{
+    border-radius: 15px;
+    border: 2px #2582A3 solid;
+}

Lab4/src/main.jsx

@@ -0,0 +1,55 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './index.css';
+import ErrorPage from './pages/ErrorPage.jsx';
+import Page1 from './pages/Page1.jsx';
+import Page2 from './pages/Page2.jsx';
+import Page3 from './pages/Page3.jsx';
+import Page4 from './pages/Page4.jsx';
+import PageEdit from './pages/PageEdit.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <Page1 />,
+    title: 'Главная страница',
+  },
+  {
+    path: '/page2',
+    element: <Page2 />,
+    title: 'Вторая страница',
+  },
+  {
+    path: '/page3',
+    element: <Page3 />,
+    title: 'Третья страница',
+  },
+  {
+    path: '/page4',
+    element: <Page4 />,
+    title: 'Четвертая страница',
+  },
+  {
+    path: '/page-edit',
+    element: <PageEdit />,
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={routes} />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+);

Lab4/src/pages/ErrorPage.jsx

@@ -0,0 +1,19 @@
+import { Alert, Button, Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const ErrorPage = () => {
+    const navigate = useNavigate();
+
+    return (
+        <Container fluid className="p-2 row justify-content-center">
+            <Container className='col-md-6'>
+                <Alert variant="danger">
+                    Страница не найдена
+                </Alert>
+                <Button className="w-25 mt-2" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
+            </Container>
+        </Container>
+    );
+};
+
+export default ErrorPage;

Lab4/src/pages/Page1.jsx

@@ -0,0 +1,65 @@
+// import { Link } from 'react-router-dom';
+// import Banner from '../components/banner/Banner.jsx';
+
+const Page1 = () => {
+    return (
+        <>
+            <main className="container col text-center">
+        <span className="mainSt">
+          <b>Новости</b>
+        </span>
+        <div className="text-center">
+          <button className="btn btn-primary w-auto" type="button" onClick={() => window.location.href = 'admin.html'}>
+            Добавить новость
+          </button>
+        </div>
+        <div className="row">
+          <div className="col mt-4">
+            <div className="rectNews d-flex flex-column">
+              <img className = "rectNew" src="./images/New1.png" alt="New1" width="100%" />
+              <div className="rectNewsTextBox">
+                <span className="rectNewsText">
+                  <b>УлГТУ вошёл в топ-250 лучших вузов</b>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="col mt-4">
+            <div className="rectNews d-flex flex-column position-relative">
+              <img className = "rectNew" src="./images/New2.png" alt="New2" width="100%" />
+              <div className="rectNewsTextBox">
+                <span className="rectNewsText">
+                  <b>“Мосты в будущее” будут видны из УлГТУ</b>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="row">
+          <div className="col mt-5">
+            <div className="rectNews d-flex flex-column position-relative">
+              <img className = "rectNew" src="./images/New3.png" alt="New3" width="100%" />
+              <div className="rectNewsTextBox">
+                <span className="rectNewsText">
+                  <b>Поправки в системе работы приёмной комиссии</b>
+                </span>
+              </div>
+            </div>
+          </div>
+          <div className="col mt-5">
+            <div className="rectNews d-flex flex-column position-relative">
+              <img className = "rectNew" src="./images/New4.png" alt="New4" width="100%" />
+              <div className="rectNewsTextBox">
+                <span className="rectNewsText">
+                  <b>Студенты возвращаются к учёбе после зимней сессии позже, чем раньше</b>
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </main>
+        </>
+    );
+};
+
+export default Page1;

Lab4/src/pages/Page2.jsx

@@ -0,0 +1,43 @@
+import { Table } from 'react-bootstrap';
+import ulstuLogo from '../assets/logo.png';
+
+const Page2 = () => {
+    return (
+        <>
+            <p className="text-center">
+                Вторая страница содержит пример рисунка (рис. 1) и таблицы (таб. 1).
+            </p>
+            <div className="text-center">
+                <img src={ulstuLogo} alt="logo" width="128" />
+                <br />
+                Рис. 1. Пример рисунка.
+            </div>
+            <div className="mt-3 row justify-content-center">
+                <Table className="w-50" bordered>
+                    <caption>Таблица 1. Пример таблицы.</caption>
+                    <thead>
+                        <tr>
+                            <th className="w-25">Номер</th>
+                            <th>ФИО</th>
+                            <th className="w-25">Телефон</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td>1</td>
+                            <td>Иванов</td>
+                            <td>89999999999</td>
+                        </tr>
+                        <tr>
+                            <td>2</td>
+                            <td>Петров</td>
+                            <td>89999999991</td>
+                        </tr>
+                    </tbody>
+                </Table>
+            </div>
+        </>
+    );
+};
+
+export default Page2;

Lab4/src/pages/Page3.jsx

@@ -0,0 +1,78 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+
+const Page3 = () => {
+    const [validated, setValidated] = useState(false);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        setValidated(true);
+    };
+
+    return (
+        <div className="row justify-content-center">
+            <Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2" controlId="lastname">
+                    <Form.Label>Фамилия</Form.Label>
+                    <Form.Control type="text" name="lastname" required />
+                    <Form.Control.Feedback>Фамилия заполнена</Form.Control.Feedback>
+                    <Form.Control.Feedback type="invalid">Фамилия не заполнена</Form.Control.Feedback>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="firstname">
+                    <Form.Label>Имя</Form.Label>
+                    <Form.Control type="text" name="firstname" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="email">
+                    <Form.Label>E-mail</Form.Label>
+                    <Form.Control type="email" name="email" placeholder="name@example.ru" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="password">
+                    <Form.Label>Пароль</Form.Label>
+                    <Form.Control type="password" name="password" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="date">
+                    <Form.Label>Дата</Form.Label>
+                    <Form.Control type="date" name="date" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="disabled">
+                    <Form.Label>Выключенный компонент</Form.Label>
+                    <Form.Control type="text" name="disabled" value="Некоторое значение" disabled />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="readonly">
+                    <Form.Label>Компонент только для чтения</Form.Label>
+                    <Form.Control type="text" name="readonly" value="Некоторое значение" readOnly />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="color">
+                    <Form.Label>Выбор цвета</Form.Label>
+                    <Form.Control type="color" name="color" defaultValue='#ff0055' />
+                </Form.Group>
+                <Form.Group className="mb-2 d-md-flex flex-md-row">
+                    <Form.Check className="me-md-3" type='checkbox' name='checkbox1' label='Флажок 1' />
+                    <Form.Check className="me-md-3" type='checkbox' name='checkbox2' label='Флажок 2' />
+                </Form.Group>
+                <Form.Group className="mb-2 d-md-flex flex-md-row">
+                    <Form.Check className="me-md-3" type='radio' name='radio1' label='Переключатель 1' />
+                    <Form.Check className="me-md-3" type='switch' name='radio2' label='Переключатель 2' />
+                </Form.Group>
+                <Form.Group className="mb-2">
+                    <Form.Select name='selected' required>
+                        <option value="" selected>Выберите значение</option>
+                        <option value="1">Один</option>
+                        <option value="2">Два</option>
+                        <option value="3">Три</option>
+                    </Form.Select>
+                </Form.Group>
+                <div className="text-center">
+                    <Button className="w-50" variant="primary" type="submit">Отправить</Button>
+                </div>
+            </Form>
+        </div>
+    );
+};
+
+export default Page3;

Lab4/src/pages/Page4.jsx

@@ -0,0 +1,28 @@
+import { Button, ButtonGroup, Table } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const Page4 = () => {
+    return (
+        <>
+            <ButtonGroup>
+                <Button id="items-add" variant="info">Добавить товар (диалог)</Button>
+                <Button as={Link} to="/page-edit" variant="success">Добавить товар (страница)</Button>
+            </ButtonGroup>
+            <Table className="mt-2" striped>
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" className="w-25">Товар</th>
+                    <th scope="col" className="w-25">Цена</th>
+                    <th scope="col" className="w-25">Количество</th>
+                    <th scope="col" className="w-25">Сумма</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default Page4;

Lab4/src/pages/PageEdit.jsx

@@ -0,0 +1,53 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const PageEdit = () => {
+    const [validated, setValidated] = useState(false);
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+
+        setValidated(true);
+    };
+
+    return (
+        <>
+            <div className="text-center">
+                <img id="image-preview" src="https://via.placeholder.com/200" className="rounded rounded-circle"
+                    alt="placeholder" />
+            </div>
+            <Form id="items-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2" controlId="item">
+                    <Form.Label htmlFor="item" className="form-label">Товары</Form.Label>
+                    <Form.Select name='selected' required>
+                    </Form.Select>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="price">
+                    <Form.Label>Цена</Form.Label>
+                    <Form.Control type="number" name="price"
+                        value="0.00" min="1000.00" step="0.50" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="count">
+                    <Form.Label>Количество</Form.Label>
+                    <Form.Control type="number" name="count"
+                        value="0" min="1" step="1" required />
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="file">
+                    <Form.Label>Изображение</Form.Label>
+                    <Form.Control type="file" name="image" accept="image/*" />
+                </Form.Group>
+                <Form.Group className="d-flex flex-md-row flex-column justify-content-center">
+                    <Button className="btn-mw me-md-3 mb-md-0 mb-2" as={Link} to="/page4" variant="secondary">Назад</Button>
+                    <Button className="btn-mw me-md-3" type="submit" variant="primary">Сохранить</Button>
+                </Form.Group>
+            </Form>
+        </>
+    );
+};
+
+export default PageEdit;

Lab4/vite.config.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+});

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "repos",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}