4_1

4
2023-12-07 13:04:19 +04:00 · 2023-11-29 16:39:51 +04:00
43 changed files with 201071 additions and 5 deletions
--- a/Lab3/PrBookfill/css/style.css
+++ b/Lab3/PrBookfill/css/style.css
@ -12,6 +12,9 @@ header{
    background: #c03000;
    height: 70px;
    border-radius: 4% / 60%;
+    font-family: "ITCErasStd-Bold";
+    font-size: 25px;
+    align-items: center;
 }
 .logo {
    height: 45px;
@ -120,8 +123,3 @@ header{
    background-color: white;
    overflow-y: scroll;
 }
-@media(max-width: 400px){
-    .logo{
-        height: 30px;
-    }
-}
--- a/Lab4/PIbd-22_Petrushin_E.A._Web_4.rtf
+++ b/Lab4/PIbd-22_Petrushin_E.A._Web_4.rtf
--- a/Lab4/PrBookfill/.eslintrc.cjs
+++ b/Lab4/PrBookfill/.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',
+  },
+}
--- a/Lab4/PrBookfill/.gitignore
+++ b/Lab4/PrBookfill/.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?
--- a/Lab4/PrBookfill/.vscode/launch.json
+++ b/Lab4/PrBookfill/.vscode/launch.json
@ -0,0 +1,22 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Chrome",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}"
+        },
+        {
+            "type": "chrome",
+            "request": "launch",
+            "name": "Launch Edge",
+            "url": "http://localhost:5173",
+            "webRoot": "${workspaceFolder}"
+        }
+    ]
+}
--- a/Lab4/PrBookfill/README.md
+++ b/Lab4/PrBookfill/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
+```
--- a/Lab4/PrBookfill/index.html
+++ b/Lab4/PrBookfill/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>
--- a/Lab4/PrBookfill/jsconfig.json
+++ b/Lab4/PrBookfill/jsconfig.json
@ -0,0 +1,14 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}
--- a/Lab4/PrBookfill/package-lock.json
+++ b/Lab4/PrBookfill/package-lock.json
--- a/Lab4/PrBookfill/package.json
+++ b/Lab4/PrBookfill/package.json
@ -0,0 +1,33 @@
+{
+  "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": {
+    "bootstrap": "^5.3.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.12.0",
+    "react-router-dom": "^6.18.0"
+  },
+  "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"
+  }
+}
--- a/Lab4/PrBookfill/public/favicon.svg
+++ b/Lab4/PrBookfill/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>
--- a/Lab4/PrBookfill/src/App.css
+++ b/Lab4/PrBookfill/src/App.css
--- a/Lab4/PrBookfill/src/App.jsx
+++ b/Lab4/PrBookfill/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;
--- a/Lab4/PrBookfill/src/assets/banner1.png
+++ b/Lab4/PrBookfill/src/assets/banner1.png
--- a/Lab4/PrBookfill/src/assets/banner2.png
+++ b/Lab4/PrBookfill/src/assets/banner2.png
--- a/Lab4/PrBookfill/src/assets/banner3.png
+++ b/Lab4/PrBookfill/src/assets/banner3.png
--- a/Lab4/PrBookfill/src/assets/big-logo.png
+++ b/Lab4/PrBookfill/src/assets/big-logo.png
--- a/Lab4/PrBookfill/src/assets/books/blev.jpg
+++ b/Lab4/PrBookfill/src/assets/books/blev.jpg
--- a/Lab4/PrBookfill/src/assets/books/capital.jpg
+++ b/Lab4/PrBookfill/src/assets/books/capital.jpg
--- a/Lab4/PrBookfill/src/assets/books/filosofy.jpg
+++ b/Lab4/PrBookfill/src/assets/books/filosofy.jpg
--- a/Lab4/PrBookfill/src/assets/books/hideger.jpg
+++ b/Lab4/PrBookfill/src/assets/books/hideger.jpg
--- a/Lab4/PrBookfill/src/assets/books/metro.jpg
+++ b/Lab4/PrBookfill/src/assets/books/metro.jpg
--- a/Lab4/PrBookfill/src/assets/books/platon.jpg
+++ b/Lab4/PrBookfill/src/assets/books/platon.jpg
--- a/Lab4/PrBookfill/src/assets/logo.png
+++ b/Lab4/PrBookfill/src/assets/logo.png
--- a/Lab4/PrBookfill/src/components/banner/Banner.css
+++ b/Lab4/PrBookfill/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;
+}
--- a/Lab4/PrBookfill/src/components/banner/Banner.jsx
+++ b/Lab4/PrBookfill/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;
--- a/Lab4/PrBookfill/src/components/footer/Footer.css
+++ b/Lab4/PrBookfill/src/components/footer/Footer.css
@ -0,0 +1,5 @@
+.my-footer {
+    background-color: #9c9c9c;
+    height: 32px;
+    color: #fff;
+}
--- a/Lab4/PrBookfill/src/components/footer/Footer.jsx
+++ b/Lab4/PrBookfill/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">
+            Автор, {year}
+        </footer>
+    );
+};
+
+export default Footer;
--- a/Lab4/PrBookfill/src/components/navigation/Navigation.css
+++ b/Lab4/PrBookfill/src/components/navigation/Navigation.css
@ -0,0 +1,41 @@
+.my-navbar {
+    width: 100%;
+    background-color: #c03000 !important;
+    height: 70px;
+    border-radius: 4% / 60%;
+}
+
+.my-navbar .link a:hover {
+    text-decoration: underline !important;
+    text-decoration: none;
+    color: white;
+}
+
+.my-navbar .logo {
+    width: auto;
+}
+
+.navbar-collapse.show{
+    background-color: #c03000;
+}
+
+.user-photo {
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    background-color: white;
+}
+
+.logo {
+    height: 45px;
+    width: auto;
+}
+.navbar-nav {
+    font-family: "ITCErasStd-Bold";
+    font-size: 25px;
+    align-items: center;
+}
+.nav-link {
+    text-decoration: none;
+    color: white;
+}
--- a/Lab4/PrBookfill/src/components/navigation/Navigation.jsx
+++ b/Lab4/PrBookfill/src/components/navigation/Navigation.jsx
@ -0,0 +1,43 @@
+import {
+ Navbar, Container, Nav, Form, FormControl, Button,
+} from 'react-bootstrap';
+import './Navigation.css';
+import { Link } from 'react-router-dom';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { FaSearch } from 'react-icons/fa';
+
+const Header = () => {
+  return (
+    <Navbar expand='lg' bg='dark' variant='dark' className='my-navbar'>
+      <Container fluid>
+        <Navbar.Brand as={Link} to='/'>
+          <img className='logo pb-2' src='src/assets/big-logo.png' alt='Логотип' />
+        </Navbar.Brand>
+        <Navbar.Toggle aria-controls='navbarSupportedContent' />
+        <Navbar.Collapse id='navbarSupportedContent'>
+          <Nav className='me-auto'>
+            <Form className='d-flex mr-4 mt-4'>
+              <FormControl
+                type='search'
+                placeholder='Search'
+                className='m-1'
+                aria-label='Search'
+              />
+              <Button variant='outline-success' type='submit'>
+                <FaSearch />
+              </Button>
+            </Form>
+            <Nav.Link as={Link} to='/favour.html'>Favourite</Nav.Link>
+            <Nav.Link as={Link} to='/audio.html'>Audio</Nav.Link>
+            <Nav.Link as={Link} to='/comics.html'>Comics</Nav.Link>
+            <Nav.Link as={Link} to='/login.html'>
+              <img id='profile' className='user-photo mt-1 ml-4 mr-3' />
+            </Nav.Link>
+          </Nav>
+        </Navbar.Collapse>
+      </Container>
+    </Navbar>
+  );
+};
+
+export default Header;
--- a/Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.ttf
+++ b/Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.ttf
--- a/Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.woff
+++ b/Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.woff
--- a/Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.woff2
+++ b/Lab4/PrBookfill/src/fonts/ITCErasStd-Bold.woff2
--- a/Lab4/PrBookfill/src/fonts/style.css
+++ b/Lab4/PrBookfill/src/fonts/style.css
@ -0,0 +1,9 @@
+@font-face {
+    font-family: 'ITC Eras';
+    src: local('ITC Eras Bold'), local('ITC-Eras-Bold'),
+        url('ITCErasStd-Bold.woff2') format('woff2'),
+        url('ITCErasStd-Bold.woff') format('woff'),
+        url('ITCErasStd-Bold.ttf') format('truetype');
+    font-weight: 700;
+    font-style: normal;
+  }
--- a/Lab4/PrBookfill/src/index.css
+++ b/Lab4/PrBookfill/src/index.css
@ -0,0 +1,36 @@
+@import url("/src/fonts/style.css");
+@font-face {
+    font-family: "ITCErasStd-Bold";
+    src: url('/src/fonts/ITCErasStd-Bold.woff2') format('woff2'),
+         url('/src/fonts/ITCErasStd-Bold.woff') format('woff');
+    font-style: normal;
+    font-weight: 400;
+}
+
+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%;
+    }
+}
--- a/Lab4/PrBookfill/src/main.jsx
+++ b/Lab4/PrBookfill/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>,
+);
--- a/Lab4/PrBookfill/src/pages/ErrorPage.jsx
+++ b/Lab4/PrBookfill/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;
--- a/Lab4/PrBookfill/src/pages/Page1.jsx
+++ b/Lab4/PrBookfill/src/pages/Page1.jsx
@ -0,0 +1,36 @@
+import { Link } from 'react-router-dom';
+import Banner from '../components/banner/Banner.jsx';
+
+const Page1 = () => {
+    return (
+        <>
+            <Banner />
+            <>
+                <h1>Пример web-страницы.</h1>
+                <h2>1. Структурные элементы</h2>
+                <p><b>Полужирное начертание <i>курсив</i></b></p>
+                <p>Абзац 2 <Link to="/page2">Ссылка</Link></p>
+                <h3>1.1. Списки</h3>
+                <p>
+                    Список маркированный:
+                </p>
+                <ul>
+                    <li><a href="/page2" target="_blank">
+                        Элемент списка 1</a></li>
+                    <li>Элемент списка 2</li>
+                    <li>...</li>
+                </ul>
+                <p>
+                    Список нумерованный:
+                </p>
+                <ol>
+                    <li>Элемент списка 1</li>
+                    <li>Элемент списка 2</li>
+                    <li>...</li>
+                </ol>
+            </>
+        </>
+    );
+};
+
+export default Page1;
--- a/Lab4/PrBookfill/src/pages/Page2.jsx
+++ b/Lab4/PrBookfill/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;
--- a/Lab4/PrBookfill/src/pages/Page3.jsx
+++ b/Lab4/PrBookfill/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;
--- a/Lab4/PrBookfill/src/pages/Page4.jsx
+++ b/Lab4/PrBookfill/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;
--- a/Lab4/PrBookfill/src/pages/PageEdit.jsx
+++ b/Lab4/PrBookfill/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;
--- a/Lab4/PrBookfill/vite.config.js
+++ b/Lab4/PrBookfill/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,
+  },
+});
Author	SHA1	Message	Date
GokaPek	03bda473ce	4_1	2023-12-07 13:04:19 +04:00
GokaPek	4bfeea2d10	4	2023-11-29 16:39:51 +04:00