4
This commit is contained in:
parent
b4b14ad1d5
commit
42f149f63c
Binary file not shown.
24
5_Lab/Lab/.eslintrc.cjs
Normal file
24
5_Lab/Lab/.eslintrc.cjs
Normal file
@ -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',
|
||||||
|
},
|
||||||
|
}
|
||||||
24
5_Lab/Lab/.gitignore
vendored
Normal file
24
5_Lab/Lab/.gitignore
vendored
Normal file
@ -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?
|
||||||
47
5_Lab/Lab/README.md
Normal file
47
5_Lab/Lab/README.md
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
### Окружение:
|
||||||
|
- [nodejs 20 LTS latest](https://nodejs.org/en/download/);
|
||||||
|
- [VSCode](https://code.visualstudio.com/download);
|
||||||
|
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) плагин для VSCode;
|
||||||
|
- [CSS Class Intellisense](https://marketplace.visualstudio.com/items?itemName=Tarrow.css-class-intellisense) плагин для автодополнения CSS-классов в HTML;
|
||||||
|
- для отладки необходимы бразузеры Chrome или Edge.
|
||||||
|
|
||||||
|
Настройки плагина CSS Class Intellisense находятся в файле ./vscode/cssconfig.json
|
||||||
|
|
||||||
|
### Команды
|
||||||
|
|
||||||
|
#### Создание пустого проекта:
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm create vite@latest ./ -- --template react
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Установка зависимостей:
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Запуск проекта в режиме разработки (development):
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Запуск проекта в продуктовом режиме (production):
|
||||||
|
|
||||||
|
```commandline
|
||||||
|
npm run prod
|
||||||
|
```
|
||||||
|
|
||||||
|
### Полезные ссылки
|
||||||
|
|
||||||
|
1. Updating Objects in State - https://react.dev/learn/updating-objects-in-state
|
||||||
|
2. Sharing State Between Components - https://react.dev/learn/sharing-state-between-components
|
||||||
|
3. React Hot Toast - https://react-hot-toast.com
|
||||||
|
4. Axios - https://axios-http.com
|
||||||
|
5. Axios & Error handling like a boss - https://dev.to/mperon/axios-error-handling-like-a-boss-333d
|
||||||
|
6. Separation of Concerns in React –How to Use Container and Presentational Components - https://www.freecodecamp.org/news/separation-of-concerns-react-container-and-presentational-components/
|
||||||
|
7. Separation of concerns in React and React Native - https://dev.to/sathishskdev/separation-of-concerns-in-react-and-react-native-45b7
|
||||||
|
8. React Bootstrap - https://react-bootstrap.netlify.app
|
||||||
|
9. React Bootstrap Icons - https://github.com/ismamz/react-bootstrap-icons
|
||||||
|
10. JSON Server - https://www.npmjs.com/package/json-server
|
||||||
72
5_Lab/Lab/data.json
Normal file
72
5_Lab/Lab/data.json
Normal file
File diff suppressed because one or more lines are too long
14
5_Lab/Lab/index.html
Normal file
14
5_Lab/Lab/index.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<html lang="ru">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>BookCamp</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
|
<script type="module" src="/src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
15
5_Lab/Lab/jsconfig.json
Normal file
15
5_Lab/Lab/jsconfig.json
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Node",
|
||||||
|
"target": "ES2020",
|
||||||
|
"jsx": "react",
|
||||||
|
"strictNullChecks": true,
|
||||||
|
"strictFunctionTypes": true,
|
||||||
|
"sourceMap": true
|
||||||
|
},
|
||||||
|
"exclude": [
|
||||||
|
"node_modules",
|
||||||
|
"**/node_modules/*"
|
||||||
|
]
|
||||||
|
}
|
||||||
5
5_Lab/Lab/json-server.json
Normal file
5
5_Lab/Lab/json-server.json
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
{
|
||||||
|
"static": "./node_modules/json-server/public",
|
||||||
|
"port": 8081,
|
||||||
|
"watch": "true"
|
||||||
|
}
|
||||||
5936
5_Lab/Lab/package-lock.json
generated
Normal file
5936
5_Lab/Lab/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
5_Lab/Lab/package.json
Normal file
38
5_Lab/Lab/package.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "lec4",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
||||||
|
"rest": "json-server data.json",
|
||||||
|
"vite": "vite",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"react": "^18.2.0",
|
||||||
|
"react-dom": "^18.2.0",
|
||||||
|
"react-router-dom": "^6.18.0",
|
||||||
|
"react-hot-toast": "^2.4.1",
|
||||||
|
"axios": "^1.6.1",
|
||||||
|
"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.15",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"eslint": "^8.45.0",
|
||||||
|
"eslint-config-airbnb-base": "^15.0.0",
|
||||||
|
"eslint-plugin-import": "^2.29.0",
|
||||||
|
"eslint-plugin-react": "^7.32.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3",
|
||||||
|
"json-server": "^0.17.4",
|
||||||
|
"npm-run-all": "^4.1.5",
|
||||||
|
"vite": "^4.4.5"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
5_Lab/Lab/public/favicon.svg
Normal file
3
5_Lab/Lab/public/favicon.svg
Normal file
@ -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>
|
||||||
|
After Width: | Height: | Size: 463 B |
26
5_Lab/Lab/src/App.jsx
Normal file
26
5_Lab/Lab/src/App.jsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Toaster } from 'react-hot-toast';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import Footer from './components/footer/Footer.jsx';
|
||||||
|
import Navigation from './components/navigation/Navigation.jsx';
|
||||||
|
import { CartProvider } from './components/cart/CartContext.jsx';
|
||||||
|
|
||||||
|
const App = ({ routes }) => {
|
||||||
|
return (
|
||||||
|
<CartProvider>
|
||||||
|
<Navigation routes={routes}></Navigation>
|
||||||
|
<Container className='p-2' as='main' fluid>
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
<Footer />
|
||||||
|
<Toaster position='top-center' reverseOrder={true} />
|
||||||
|
</CartProvider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
5_Lab/Lab/src/assets/200.png
Normal file
BIN
5_Lab/Lab/src/assets/200.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
5_Lab/Lab/src/assets/banner1.png
Normal file
BIN
5_Lab/Lab/src/assets/banner1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 KiB |
BIN
5_Lab/Lab/src/assets/banner2.png
Normal file
BIN
5_Lab/Lab/src/assets/banner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 812 KiB |
BIN
5_Lab/Lab/src/assets/banner3.png
Normal file
BIN
5_Lab/Lab/src/assets/banner3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 767 KiB |
BIN
5_Lab/Lab/src/assets/banners/main-banner.png
Normal file
BIN
5_Lab/Lab/src/assets/banners/main-banner.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 257 KiB |
BIN
5_Lab/Lab/src/assets/banners/main-banner_2.png
Normal file
BIN
5_Lab/Lab/src/assets/banners/main-banner_2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 242 KiB |
BIN
5_Lab/Lab/src/assets/cover.png
Normal file
BIN
5_Lab/Lab/src/assets/cover.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
BIN
5_Lab/Lab/src/assets/covers/addbook.png
Normal file
BIN
5_Lab/Lab/src/assets/covers/addbook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.9 KiB |
BIN
5_Lab/Lab/src/assets/covers/addbook1.png
Normal file
BIN
5_Lab/Lab/src/assets/covers/addbook1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
5_Lab/Lab/src/assets/covers/default.png
Normal file
BIN
5_Lab/Lab/src/assets/covers/default.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
5_Lab/Lab/src/assets/covers/image1book.png
Normal file
BIN
5_Lab/Lab/src/assets/covers/image1book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 428 KiB |
BIN
5_Lab/Lab/src/assets/covers/image2book.png
Normal file
BIN
5_Lab/Lab/src/assets/covers/image2book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 179 KiB |
BIN
5_Lab/Lab/src/assets/covers/image3book.png
Normal file
BIN
5_Lab/Lab/src/assets/covers/image3book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
BIN
5_Lab/Lab/src/assets/icons_main/japan.png
Normal file
BIN
5_Lab/Lab/src/assets/icons_main/japan.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
5_Lab/Lab/src/assets/icons_main/leaf.png
Normal file
BIN
5_Lab/Lab/src/assets/icons_main/leaf.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
5_Lab/Lab/src/assets/icons_main/magic-book.png
Normal file
BIN
5_Lab/Lab/src/assets/icons_main/magic-book.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
3
5_Lab/Lab/src/assets/icons_sigh/envelope.svg
Normal file
3
5_Lab/Lab/src/assets/icons_sigh/envelope.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope" viewBox="0 0 16 16">
|
||||||
|
<path d="M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V4Zm2-1a1 1 0 0 0-1 1v.217l7 4.2 7-4.2V4a1 1 0 0 0-1-1H2Zm13 2.383-4.708 2.825L15 11.105V5.383Zm-.034 6.876-5.64-3.471L8 9.583l-1.326-.795-5.64 3.47A1 1 0 0 0 2 13h12a1 1 0 0 0 .966-.741ZM1 11.105l4.708-2.897L1 5.383v5.722Z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 438 B |
3
5_Lab/Lab/src/assets/icons_sigh/lock-fill.svg
Normal file
3
5_Lab/Lab/src/assets/icons_sigh/lock-fill.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 273 B |
3
5_Lab/Lab/src/assets/icons_sigh/lock.svg
Normal file
3
5_Lab/Lab/src/assets/icons_sigh/lock.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-lock" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2zM5 8h6a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 337 B |
3
5_Lab/Lab/src/assets/icons_sigh/person.svg
Normal file
3
5_Lab/Lab/src/assets/icons_sigh/person.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person" viewBox="0 0 16 16">
|
||||||
|
<path d="M8 8a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm2-3a2 2 0 1 1-4 0 2 2 0 0 1 4 0zm4 8c0 1-1 1-1 1H3s-1 0-1-1 1-4 6-4 6 3 6 4zm-1-.004c-.001-.246-.154-.986-.832-1.664C11.516 10.68 10.289 10 8 10c-2.29 0-3.516.68-4.168 1.332-.678.678-.83 1.418-.832 1.664h10z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 387 B |
4
5_Lab/Lab/src/assets/icons_sigh/trash.svg
Normal file
4
5_Lab/Lab/src/assets/icons_sigh/trash.svg
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
|
||||||
|
<path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"/>
|
||||||
|
<path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 573 B |
BIN
5_Lab/Lab/src/assets/logo.png
Normal file
BIN
5_Lab/Lab/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
5_Lab/Lab/src/assets/logoOfLibrary.png
Normal file
BIN
5_Lab/Lab/src/assets/logoOfLibrary.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
BIN
5_Lab/Lab/src/assets/social_media/logo-facebook.png
Normal file
BIN
5_Lab/Lab/src/assets/social_media/logo-facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 MiB |
BIN
5_Lab/Lab/src/assets/social_media/logo-tg.png
Normal file
BIN
5_Lab/Lab/src/assets/social_media/logo-tg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 21 KiB |
BIN
5_Lab/Lab/src/assets/social_media/logo-viber.png
Normal file
BIN
5_Lab/Lab/src/assets/social_media/logo-viber.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
5_Lab/Lab/src/assets/social_media/logo-whats-up.png
Normal file
BIN
5_Lab/Lab/src/assets/social_media/logo-whats-up.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
36
5_Lab/Lab/src/components/CardOfBook.jsx
Normal file
36
5_Lab/Lab/src/components/CardOfBook.jsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import { Card, Col, Button } from 'react-bootstrap';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import defaultCover from '../assets/covers/default.png';
|
||||||
|
import useCart from './cart/CartHook';
|
||||||
|
|
||||||
|
// eslint-disable-next-line object-curly-newline
|
||||||
|
const CardOfBook = ({ name, autor, image, line }) => {
|
||||||
|
const { addToCart } = useCart();
|
||||||
|
const handleAnchorClick = (event, action) => {
|
||||||
|
event.preventDefault();
|
||||||
|
action();
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<Col md={3} xs={6} className="mb-sm-0 align-self-end mt-2">
|
||||||
|
<Card>
|
||||||
|
<img src={image || defaultCover} className="card-img-top" alt="..." />
|
||||||
|
<Card.Body>
|
||||||
|
<Card.Title className="mt-0 mb-0">{ name === 'Добавить' ? <Link to='/pageAdmin'>Добавить книгу</Link> : name}</Card.Title>
|
||||||
|
<Card.Text>{autor}</Card.Text>
|
||||||
|
<Button onClick={(event) => handleAnchorClick(event, () => addToCart(line))} className="btn btn-catalog btn-primary rounded-0 mt-1 border">Добавить в корзину</Button>
|
||||||
|
</Card.Body>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
CardOfBook.propTypes = {
|
||||||
|
ifOfCard: PropTypes.string,
|
||||||
|
name: PropTypes.string,
|
||||||
|
autor: PropTypes.string,
|
||||||
|
image: PropTypes.string,
|
||||||
|
line: PropTypes.object,
|
||||||
|
};
|
||||||
|
export default CardOfBook;
|
||||||
69
5_Lab/Lab/src/components/FormOfBook.jsx
Normal file
69
5_Lab/Lab/src/components/FormOfBook.jsx
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
import '../css_.css';
|
||||||
|
|
||||||
|
const FormOfBook = () => {
|
||||||
|
return (
|
||||||
|
|
||||||
|
<div className="col-sm-4">
|
||||||
|
<div id="items-update" data-bs-backdrop="static" data-bs-keyboard="false">
|
||||||
|
<div >
|
||||||
|
<form id="items-form" className="needs-validation" noValidate>
|
||||||
|
<h2>Добавить книгу в базу</h2>
|
||||||
|
|
||||||
|
<label className="mt-3">Фото обложки</label>
|
||||||
|
<input type="file" name="image" className="form-control mb-4" accept="image/*"
|
||||||
|
/>
|
||||||
|
<div className="d-none">
|
||||||
|
<h2 className="border-bottom pb-3 mb-4 ">Avatar Preview</h2>
|
||||||
|
<div className="text-center">
|
||||||
|
<img id="image-preview" src=""
|
||||||
|
className="rounded rounded-circle" alt="placeholder" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Название книги</label>
|
||||||
|
<div className="input-group mb-5 border-bottom">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||||||
|
<input id="name-book" type="text" className="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Автор</label>
|
||||||
|
<div className="input-group mb-3 border-bottom mb-5">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||||||
|
<input id="autor" type="text" className="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>ID</label>
|
||||||
|
<div className="input-group border-bottom">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||||||
|
<input id="id" type="text" className="form-control border-0 placeholder-class" aria-label="ID" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
<div id="emailHelp" className="form-text mb-3">Для редактирования данных введите существующий ID</div>
|
||||||
|
|
||||||
|
<label>Количество книг</label>
|
||||||
|
<div className="input-group mb-3 border-bottom mb-5">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||||||
|
<input id="number" type="text" className="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Аннотация к книге</label>
|
||||||
|
<div className="input-group mb-3 border-bottom mb-5">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||||||
|
<input id="annotation" type="text" className="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Храктеристики книги</label>
|
||||||
|
<div className="input-group mb-3 border-bottom mb-5" >
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"></span>
|
||||||
|
<input id="info" type="text" className="form-control border-0 placeholder-class" aria-label="Email" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button className="btn-rectangle" type="submit" id="items-add">Добавить книгу</button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FormOfBook;
|
||||||
23
5_Lab/Lab/src/components/LastIncome.jsx
Normal file
23
5_Lab/Lab/src/components/LastIncome.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
// eslint-disable-next-line object-curly-newline
|
||||||
|
import { Row, Col, Container, Image } from 'react-bootstrap';
|
||||||
|
import '../css_.css';
|
||||||
|
import useLines from './lines/hooks/LinesHook';
|
||||||
|
|
||||||
|
const LastIncome = () => {
|
||||||
|
const { lines } = useLines();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container className="ms-4">
|
||||||
|
<h3 className='mt-3 mb-1'>Последние поступления</h3>
|
||||||
|
<Row className="justify-content-md-start justify-content-center">
|
||||||
|
{
|
||||||
|
lines.slice(lines.length - 2, lines.length).map((cover, index) =>
|
||||||
|
<Col md={2} xs={4} className="mt-3" key={index}>
|
||||||
|
<Image src={cover.cover} className="button-sm" alt="" width="100%" />
|
||||||
|
</Col>)
|
||||||
|
}
|
||||||
|
</Row>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
export default LastIncome;
|
||||||
29
5_Lab/Lab/src/components/SmallBanner.jsx
Normal file
29
5_Lab/Lab/src/components/SmallBanner.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Row, Col } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import '../css_.css';
|
||||||
|
import leaf from '../assets/icons_main/leaf.png';
|
||||||
|
import japan from '../assets/icons_main/japan.png';
|
||||||
|
import magicbook from '../assets/icons_main/magic-book.png';
|
||||||
|
|
||||||
|
const SmallBanner = () => {
|
||||||
|
const banners = [leaf, japan, magicbook];
|
||||||
|
const texts = ['Топ-10 книг для осени', 'Выставка из Японии', 'Новинки в BookCamp'];
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
banners.map((banner, index) =>
|
||||||
|
<div className="banner-main pt-2 pb-2 mt-2" key={index}>
|
||||||
|
<Row>
|
||||||
|
<Col md={7}>
|
||||||
|
<p className="banner-text ms-2">{texts[index]}</p>
|
||||||
|
</Col>
|
||||||
|
<Col xs={5}>
|
||||||
|
<img src={banner} className="d-none d-md-block" alt="" width="50%"/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</div>)
|
||||||
|
}
|
||||||
|
</>);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SmallBanner;
|
||||||
27
5_Lab/Lab/src/components/TableOfBooks.jsx
Normal file
27
5_Lab/Lab/src/components/TableOfBooks.jsx
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import '../css_.css';
|
||||||
|
|
||||||
|
const TableOfBooks = () => {
|
||||||
|
return (
|
||||||
|
<div className="col-sm-8">
|
||||||
|
<h2>В наличии</h2>
|
||||||
|
|
||||||
|
<table className="table table-borderless table-hover align-middle" id="items-table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">ID</th >
|
||||||
|
<th scope="col">Обложка</th >
|
||||||
|
<th scope="col">Название и автор</th>
|
||||||
|
<th scope="col">Количество</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody id="body">
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<hr />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TableOfBooks;
|
||||||
40
5_Lab/Lab/src/components/api/ApiClient.js
Normal file
40
5_Lab/Lab/src/components/api/ApiClient.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
|
||||||
|
export class HttpError extends Error {
|
||||||
|
constructor(message = '') {
|
||||||
|
super(message);
|
||||||
|
this.name = 'HttpError';
|
||||||
|
Object.setPrototypeOf(this, new.target.prototype);
|
||||||
|
toast.error(message, { id: 'HttpError' });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function responseHandler(response) {
|
||||||
|
if (response.status === 200 || response.status === 201) {
|
||||||
|
const data = response?.data;
|
||||||
|
if (!data) {
|
||||||
|
throw new HttpError('API Error. No data!');
|
||||||
|
}
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
throw new HttpError(`API Error! Invalid status code ${response.status}!`);
|
||||||
|
}
|
||||||
|
|
||||||
|
function responseErrorHandler(error) {
|
||||||
|
if (error === null) {
|
||||||
|
throw new Error('Unrecoverable error!! Error is null!');
|
||||||
|
}
|
||||||
|
toast.error(error.message, { id: 'AxiosError' });
|
||||||
|
return Promise.reject(error.message);
|
||||||
|
}
|
||||||
|
|
||||||
|
export const ApiClient = axios.create({
|
||||||
|
baseURL: 'http://localhost:8081/',
|
||||||
|
timeout: '3000',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
|
||||||
29
5_Lab/Lab/src/components/api/ApiService.js
Normal file
29
5_Lab/Lab/src/components/api/ApiService.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { ApiClient } from './ApiClient';
|
||||||
|
|
||||||
|
class ApiService {
|
||||||
|
constructor(url) {
|
||||||
|
this.url = url;
|
||||||
|
}
|
||||||
|
|
||||||
|
async getAll(expand) {
|
||||||
|
return ApiClient.get(`${this.url}${expand || ''}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async get(id, expand) {
|
||||||
|
return ApiClient.get(`${this.url}/${id}${expand || ''}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
async create(body) {
|
||||||
|
return ApiClient.post(this.url, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
async update(id, body) {
|
||||||
|
return ApiClient.put(`${this.url}/${id}`, body);
|
||||||
|
}
|
||||||
|
|
||||||
|
async delete(id) {
|
||||||
|
return ApiClient.delete(`${this.url}/${id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ApiService;
|
||||||
24
5_Lab/Lab/src/components/banner/Banner.css
Normal file
24
5_Lab/Lab/src/components/banner/Banner.css
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
#banner {
|
||||||
|
margin: 2px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner img {
|
||||||
|
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;
|
||||||
|
}
|
||||||
17
5_Lab/Lab/src/components/banner/Banner.jsx
Normal file
17
5_Lab/Lab/src/components/banner/Banner.jsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import './Banner.css';
|
||||||
|
import useBannerHook from './BannerHook';
|
||||||
|
|
||||||
|
const Banner = () => {
|
||||||
|
const { banners, getBannerClass } = useBannerHook();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id='banner'>
|
||||||
|
{
|
||||||
|
banners.map((banner, index) =>
|
||||||
|
<img key={index} className={getBannerClass(index)} src={banner} alt={`banner${index}`} />)
|
||||||
|
}
|
||||||
|
</div >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Banner;
|
||||||
35
5_Lab/Lab/src/components/banner/BannerHook.js
Normal file
35
5_Lab/Lab/src/components/banner/BannerHook.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import banner1 from '../../assets/banners/main-banner_2.png';
|
||||||
|
import banner2 from '../../assets/banners/main-banner.png';
|
||||||
|
|
||||||
|
const useBannerHook = () => {
|
||||||
|
const [currentBanner, setCurrentBanner] = useState(0);
|
||||||
|
const banners = [banner1, banner2];
|
||||||
|
|
||||||
|
const getBannerClass = (index) => {
|
||||||
|
return currentBanner === index ? 'banner-show' : 'banner-hide';
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const bannerInterval = setInterval(
|
||||||
|
() => {
|
||||||
|
let current = currentBanner + 1;
|
||||||
|
console.info(current);
|
||||||
|
if (current === banners.length) {
|
||||||
|
current = 0;
|
||||||
|
}
|
||||||
|
setCurrentBanner(current);
|
||||||
|
},
|
||||||
|
5000,
|
||||||
|
);
|
||||||
|
return () => clearInterval(bannerInterval);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
banners,
|
||||||
|
getBannerClass,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useBannerHook;
|
||||||
8
5_Lab/Lab/src/components/cart/Cart.css
Normal file
8
5_Lab/Lab/src/components/cart/Cart.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.cart-image {
|
||||||
|
width: 3.1rem;
|
||||||
|
padding: .25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cart-item {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
65
5_Lab/Lab/src/components/cart/Cart.jsx
Normal file
65
5_Lab/Lab/src/components/cart/Cart.jsx
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
import { Button, Table } from 'react-bootstrap';
|
||||||
|
import defaultCover from '../../assets/covers/default.png';
|
||||||
|
import './Cart.css';
|
||||||
|
import useCart from './CartHook';
|
||||||
|
|
||||||
|
const Cart = () => {
|
||||||
|
const {
|
||||||
|
cart,
|
||||||
|
getCartSum,
|
||||||
|
addToCart,
|
||||||
|
removeFromCart,
|
||||||
|
clearCart,
|
||||||
|
} = useCart();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='d-flex flex-column'>
|
||||||
|
<div className='mb-2 col-12 col-md-8 col-lg-6 d-flex'>
|
||||||
|
<h5 className='flex-fill ms-2'>Корзина</h5>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<Table responsive='' className="table-borderless" id="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th width="17%">Обложка</th>
|
||||||
|
<th>Название и автор</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{
|
||||||
|
cart.map((cartItem) =>
|
||||||
|
<tr key={cartItem.id}>
|
||||||
|
<th scope="row row-of-pictures"><img src={cartItem.cover || defaultCover} alt="" width="100px" /></th>
|
||||||
|
<td><p className="mb-0 font-basket">{cartItem.name}</p>
|
||||||
|
<p className="mb-0 font-basket">{cartItem.type.name}</p>
|
||||||
|
|
||||||
|
<div className="input-group quantity-goods mt-1">
|
||||||
|
<input type="button" value="-" id="button_minus" className = "minus" onClick={() => removeFromCart(cartItem)} />
|
||||||
|
<div className='border ps-3 pe-3' >{cartItem.count}</div>
|
||||||
|
<input type="button" value="+" id="button_plus" className="plus" onClick={() => addToCart(cartItem)}/>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>)}
|
||||||
|
</tbody>
|
||||||
|
|
||||||
|
</Table>
|
||||||
|
<hr />
|
||||||
|
<div className='me-3 ms-3 d-flex justify-content-end mt-3'>
|
||||||
|
<strong>Итого: {getCartSum()} шт.</strong>
|
||||||
|
</div>
|
||||||
|
<div className='d-flex justify-content-end mt-3'>
|
||||||
|
|
||||||
|
<Button className='btn-rectangle me-3' onClick={() => clearCart()}>
|
||||||
|
Очистить
|
||||||
|
</Button>
|
||||||
|
<Button className='btn-rectangle-white' onClick={() => console.log(localStorage.getItem('localCart'))}>
|
||||||
|
Отправить запрос в библиотеку
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Cart;
|
||||||
29
5_Lab/Lab/src/components/cart/CartContext.jsx
Normal file
29
5_Lab/Lab/src/components/cart/CartContext.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import {
|
||||||
|
createContext,
|
||||||
|
useEffect,
|
||||||
|
useReducer,
|
||||||
|
} from 'react';
|
||||||
|
import { cartReducer, loadCart, saveCart } from './CartReducer';
|
||||||
|
|
||||||
|
const CartContext = createContext(null);
|
||||||
|
|
||||||
|
export const CartProvider = ({ children }) => {
|
||||||
|
const [cart, dispatch] = useReducer(cartReducer, [], loadCart);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
saveCart(cart || []);
|
||||||
|
}, [cart]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<CartContext.Provider value={{ cart, dispatch }}>
|
||||||
|
{children}
|
||||||
|
</CartContext.Provider>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
CartProvider.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CartContext;
|
||||||
26
5_Lab/Lab/src/components/cart/CartHook.js
Normal file
26
5_Lab/Lab/src/components/cart/CartHook.js
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import { useContext } from 'react';
|
||||||
|
import CartContext from './CartContext.jsx';
|
||||||
|
import { cartAdd, cartClear, cartRemove } from './CartReducer';
|
||||||
|
|
||||||
|
const useCart = () => {
|
||||||
|
const { cart, dispatch } = useContext(CartContext);
|
||||||
|
|
||||||
|
const cartSum = () => {
|
||||||
|
return parseFloat(
|
||||||
|
cart?.reduce((sum) => {
|
||||||
|
return sum + (1);
|
||||||
|
}, 0)
|
||||||
|
?? 0,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
cart,
|
||||||
|
getCartSum: () => cartSum(),
|
||||||
|
addToCart: (item) => dispatch(cartAdd(item)),
|
||||||
|
removeFromCart: (item) => dispatch(cartRemove(item)),
|
||||||
|
clearCart: () => dispatch(cartClear()),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useCart;
|
||||||
71
5_Lab/Lab/src/components/cart/CartReducer.js
Normal file
71
5_Lab/Lab/src/components/cart/CartReducer.js
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
const setCartCount = (cart, item, value) => {
|
||||||
|
return cart.map((cartItem) => {
|
||||||
|
if (cartItem.id === item.id) {
|
||||||
|
return { ...cartItem, count: cartItem.count + value };
|
||||||
|
}
|
||||||
|
return cartItem;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const addToCart = (cart, item) => {
|
||||||
|
const existsItem = cart.find((cartItem) => cartItem.id === item.id);
|
||||||
|
if (existsItem !== undefined) {
|
||||||
|
return setCartCount(cart, item, 1);
|
||||||
|
}
|
||||||
|
return [...cart, { ...item, count: 1 }];
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeFromCart = (cart, item) => {
|
||||||
|
const existsItem = cart.find((cartItem) => cartItem.id === item.id);
|
||||||
|
if (existsItem !== undefined && existsItem.count > 1) {
|
||||||
|
return setCartCount(cart, item, -1);
|
||||||
|
}
|
||||||
|
return cart.filter((cartItem) => cartItem.id !== item.id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const CART_KEY = 'localCart';
|
||||||
|
const CART_ADD = 'cart/add';
|
||||||
|
const CART_REMOVE = 'cart/remove';
|
||||||
|
const CART_CLEAR = 'cart/clear';
|
||||||
|
|
||||||
|
export const saveCart = (cart) => {
|
||||||
|
localStorage.setItem(CART_KEY, JSON.stringify(cart));
|
||||||
|
};
|
||||||
|
|
||||||
|
export const loadCart = (initialValue = []) => {
|
||||||
|
const cartData = localStorage.getItem(CART_KEY);
|
||||||
|
if (cartData) {
|
||||||
|
return JSON.parse(cartData);
|
||||||
|
}
|
||||||
|
return initialValue;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const cartReducer = (cart, action) => {
|
||||||
|
const { item } = action;
|
||||||
|
switch (action.type) {
|
||||||
|
case CART_ADD: {
|
||||||
|
return addToCart(cart, item);
|
||||||
|
}
|
||||||
|
case CART_REMOVE: {
|
||||||
|
return removeFromCart(cart, item);
|
||||||
|
}
|
||||||
|
case CART_CLEAR: {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
default: {
|
||||||
|
throw Error(`Unknown action: ${action.type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const cartAdd = (item) => ({
|
||||||
|
type: CART_ADD, item,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const cartRemove = (item) => ({
|
||||||
|
type: CART_REMOVE, item,
|
||||||
|
});
|
||||||
|
|
||||||
|
export const cartClear = () => ({
|
||||||
|
type: CART_CLEAR,
|
||||||
|
});
|
||||||
5
5_Lab/Lab/src/components/footer/Footer.css
Normal file
5
5_Lab/Lab/src/components/footer/Footer.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.footer {
|
||||||
|
background-color: #9c9c9c !important;
|
||||||
|
height: 32px !important;
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
23
5_Lab/Lab/src/components/footer/Footer.jsx
Normal file
23
5_Lab/Lab/src/components/footer/Footer.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import '../../css_.css';
|
||||||
|
import facebook from '../../assets/social_media/logo-facebook.png';
|
||||||
|
import tg from '../../assets/social_media/logo-tg.png';
|
||||||
|
import viber from '../../assets/social_media/logo-viber.png';
|
||||||
|
import wa from '../../assets/social_media/logo-whats-up.png';
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="footer mt-auto d-flex flex-shrink-0 align-items-center">
|
||||||
|
<h3 className="ps-0 me-2">Наши соцсети</h3>
|
||||||
|
<div className="group-sites" role="group">
|
||||||
|
|
||||||
|
<a href="https://vk.com/valannn" ><img src={facebook} className="button-sm m-auto " alt="" width="35" /></a>
|
||||||
|
<a href="https://vk.com/valannn" ><img src={viber} className="button-sm m-auto" alt="" width="35" /></a>
|
||||||
|
<a href="https://vk.com/valannn" ><img src={tg} className="button-sm m-auto" alt="" width="35" /></a>
|
||||||
|
<a href="https://vk.com/valannn" ><img src={wa} className="button-sm m-auto" alt="" width="35" /></a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
23
5_Lab/Lab/src/components/input/Input.jsx
Normal file
23
5_Lab/Lab/src/components/input/Input.jsx
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Form } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const Input = ({
|
||||||
|
name, label, value, onChange, className, ...rest
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||||
|
<Form.Label>{label}</Form.Label>
|
||||||
|
<Form.Control name={name || ''} value={value || ''} onChange={onChange} {...rest} />
|
||||||
|
</Form.Group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Input.propTypes = {
|
||||||
|
name: PropTypes.string,
|
||||||
|
label: PropTypes.string,
|
||||||
|
value: PropTypes.string,
|
||||||
|
onChange: PropTypes.func,
|
||||||
|
className: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Input;
|
||||||
29
5_Lab/Lab/src/components/input/Select.jsx
Normal file
29
5_Lab/Lab/src/components/input/Select.jsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Form } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const Select = ({
|
||||||
|
values, name, label, value, onChange, className, ...rest
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||||
|
<Form.Label className='form-label'>{label}</Form.Label>
|
||||||
|
<Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
|
||||||
|
<option value=''>Фильтр</option>
|
||||||
|
{
|
||||||
|
values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
|
||||||
|
}
|
||||||
|
</Form.Select>
|
||||||
|
</Form.Group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Select.propTypes = {
|
||||||
|
values: PropTypes.array,
|
||||||
|
name: PropTypes.string,
|
||||||
|
label: PropTypes.string,
|
||||||
|
value: PropTypes.string,
|
||||||
|
onChange: PropTypes.func,
|
||||||
|
className: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Select;
|
||||||
48
5_Lab/Lab/src/components/lines/form/LinesForm.jsx
Normal file
48
5_Lab/Lab/src/components/lines/form/LinesForm.jsx
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button, Form } from 'react-bootstrap';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import useLinesItemForm from '../hooks/LinesItemFormHook';
|
||||||
|
import LinesItemForm from './LinesItemForm.jsx';
|
||||||
|
|
||||||
|
const LinesForm = ({ id }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
} = useLinesItemForm(id);
|
||||||
|
|
||||||
|
const onBack = () => {
|
||||||
|
navigate(-1);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (event) => {
|
||||||
|
if (await handleSubmit(event)) {
|
||||||
|
onBack();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
|
||||||
|
<LinesItemForm item={item} handleChange={handleChange} />
|
||||||
|
<Form.Group className='row justify-content-center m-0 mt-3'>
|
||||||
|
<Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
|
||||||
|
Назад
|
||||||
|
</Button>
|
||||||
|
<Button className='col-5 col-lg-2 m-0 ms-2' type='submit' variant='primary'>
|
||||||
|
Сохранить
|
||||||
|
</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesForm.propTypes = {
|
||||||
|
id: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesForm;
|
||||||
3
5_Lab/Lab/src/components/lines/form/LinesItemForm.css
Normal file
3
5_Lab/Lab/src/components/lines/form/LinesItemForm.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
#image-preview {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
38
5_Lab/Lab/src/components/lines/form/LinesItemForm.jsx
Normal file
38
5_Lab/Lab/src/components/lines/form/LinesItemForm.jsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import imgPlaceholder from '../../../assets/200.png';
|
||||||
|
import Input from '../../input/Input.jsx';
|
||||||
|
import Select from '../../input/Select.jsx';
|
||||||
|
import useTypes from '../../types/hooks/TypesHook';
|
||||||
|
import './LinesItemForm.css';
|
||||||
|
|
||||||
|
const LinesItemForm = ({ item, handleChange }) => {
|
||||||
|
const { types } = useTypes();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Input name='image' label='Изображение' onChange={handleChange}
|
||||||
|
type='file' accept='image/*' />
|
||||||
|
<div className='text-center'>
|
||||||
|
<img id='image-preview' className='rounded' alt='placeholder'
|
||||||
|
src={item.image || item.cover || imgPlaceholder } />
|
||||||
|
</div>
|
||||||
|
<Input name='name' label='Название книги' value={item.name} onChange={handleChange}
|
||||||
|
type='text' required />
|
||||||
|
<Select values={types} name='typeId' label='Автор' value={item.typeId} onChange={handleChange}
|
||||||
|
required />
|
||||||
|
<Input name='number' label='Количество' value={item.number} onChange={handleChange}
|
||||||
|
type='number' min='0' step='1' required />
|
||||||
|
<Input name='annotation' label='Аннотация' value={item.annotation} onChange={handleChange}
|
||||||
|
type='text' required />
|
||||||
|
<Input name='info' label='Информация об издании' value={item.info} onChange={handleChange}
|
||||||
|
type='text' required />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesItemForm.propTypes = {
|
||||||
|
item: PropTypes.object,
|
||||||
|
handleChange: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesItemForm;
|
||||||
34
5_Lab/Lab/src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
34
5_Lab/Lab/src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import useModal from '../../modal/ModalHook';
|
||||||
|
import LinesApiService from '../service/LinesApiService';
|
||||||
|
|
||||||
|
const useLinesDeleteModal = (linesChangeHandle) => {
|
||||||
|
const { isModalShow, showModal, hideModal } = useModal();
|
||||||
|
const [currentId, setCurrentId] = useState(0);
|
||||||
|
|
||||||
|
const showModalDialog = (id) => {
|
||||||
|
showModal();
|
||||||
|
setCurrentId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
hideModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDelete = async () => {
|
||||||
|
await LinesApiService.delete(currentId);
|
||||||
|
linesChangeHandle();
|
||||||
|
toast.success('Элемент успешно удален', { id: 'LinesTable' });
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isDeleteModalShow: isModalShow,
|
||||||
|
showDeleteModal: showModalDialog,
|
||||||
|
handleDeleteConfirm: onDelete,
|
||||||
|
handleDeleteCancel: onClose,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLinesDeleteModal;
|
||||||
28
5_Lab/Lab/src/components/lines/hooks/LinesFilterHook.js
Normal file
28
5_Lab/Lab/src/components/lines/hooks/LinesFilterHook.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { useSearchParams } from 'react-router-dom';
|
||||||
|
import useTypes from '../../types/hooks/TypesHook';
|
||||||
|
|
||||||
|
const useTypeFilter = () => {
|
||||||
|
const filterName = 'type';
|
||||||
|
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
|
||||||
|
const { types } = useTypes();
|
||||||
|
|
||||||
|
const handleFilterChange = (event) => {
|
||||||
|
const type = event.target.value;
|
||||||
|
if (type) {
|
||||||
|
searchParams.set(filterName, event.target.value);
|
||||||
|
} else {
|
||||||
|
searchParams.delete(filterName);
|
||||||
|
}
|
||||||
|
setSearchParams(searchParams);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
types,
|
||||||
|
currentFilter: searchParams.get(filterName) || '',
|
||||||
|
handleFilterChange,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useTypeFilter;
|
||||||
45
5_Lab/Lab/src/components/lines/hooks/LinesFormModalHook.js
Normal file
45
5_Lab/Lab/src/components/lines/hooks/LinesFormModalHook.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import useModal from '../../modal/ModalHook';
|
||||||
|
import useLinesItemForm from './LinesItemFormHook';
|
||||||
|
|
||||||
|
const useLinesFormModal = (linesChangeHandle) => {
|
||||||
|
const { isModalShow, showModal, hideModal } = useModal();
|
||||||
|
const [currentId, setCurrentId] = useState(0);
|
||||||
|
|
||||||
|
const {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
resetValidity,
|
||||||
|
} = useLinesItemForm(currentId, linesChangeHandle);
|
||||||
|
|
||||||
|
const showModalDialog = (id) => {
|
||||||
|
setCurrentId(id);
|
||||||
|
resetValidity();
|
||||||
|
showModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
setCurrentId(-1);
|
||||||
|
hideModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSubmit = async (event) => {
|
||||||
|
if (await handleSubmit(event)) {
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isFormModalShow: isModalShow,
|
||||||
|
isFormValidated: validated,
|
||||||
|
showFormModal: showModalDialog,
|
||||||
|
currentItem: item,
|
||||||
|
handleItemChange: handleChange,
|
||||||
|
handleFormSubmit: onSubmit,
|
||||||
|
handleFormClose: onClose,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLinesFormModal;
|
||||||
29
5_Lab/Lab/src/components/lines/hooks/LinesHook.js
Normal file
29
5_Lab/Lab/src/components/lines/hooks/LinesHook.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import LinesApiService from '../service/LinesApiService';
|
||||||
|
|
||||||
|
const useLines = (typeFilter) => {
|
||||||
|
const [linesRefresh, setLinesRefresh] = useState(false);
|
||||||
|
const [lines, setLines] = useState([]);
|
||||||
|
const handleLinesChange = () => setLinesRefresh(!linesRefresh);
|
||||||
|
|
||||||
|
const getLines = async () => {
|
||||||
|
let expand = '?_expand=type';
|
||||||
|
if (typeFilter) {
|
||||||
|
expand = `${expand}&typeId=${typeFilter}`;
|
||||||
|
}
|
||||||
|
const data = await LinesApiService.getAll(expand);
|
||||||
|
setLines(data ?? []);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getLines();
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [linesRefresh, typeFilter]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
lines,
|
||||||
|
handleLinesChange,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLines;
|
||||||
84
5_Lab/Lab/src/components/lines/hooks/LinesItemFormHook.js
Normal file
84
5_Lab/Lab/src/components/lines/hooks/LinesItemFormHook.js
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import getBase64FromFile from '../../utils/Base64';
|
||||||
|
import LinesApiService from '../service/LinesApiService';
|
||||||
|
import useLinesItem from './LinesItemHook';
|
||||||
|
|
||||||
|
const useLinesItemForm = (id, linesChangeHandle) => {
|
||||||
|
const { item, setItem } = useLinesItem(id);
|
||||||
|
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const resetValidity = () => {
|
||||||
|
setValidated(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getLineObject = (formData) => {
|
||||||
|
const typeId = parseInt(formData.typeId, 10);
|
||||||
|
const name = formData.name.toString();
|
||||||
|
const annotation = formData.annotation.toString();
|
||||||
|
const info = formData.info.toString();
|
||||||
|
const number = parseInt(formData.number, 10);
|
||||||
|
const cover = formData.image.startsWith('data:image') ? formData.image : '';
|
||||||
|
|
||||||
|
return {
|
||||||
|
typeId: typeId.toString(),
|
||||||
|
name: name.toString(),
|
||||||
|
annotation: annotation.toString(),
|
||||||
|
info: info.toString(),
|
||||||
|
number: number.toString(),
|
||||||
|
cover: cover.toString(),
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleImageChange = async (event) => {
|
||||||
|
const { files } = event.target;
|
||||||
|
const file = await getBase64FromFile(files.item(0));
|
||||||
|
setItem({
|
||||||
|
...item,
|
||||||
|
image: file,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
if (event.target.type === 'file') {
|
||||||
|
handleImageChange(event);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const inputName = event.target.name;
|
||||||
|
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
|
||||||
|
setItem({
|
||||||
|
...item,
|
||||||
|
[inputName]: inputValue,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSubmit = async (event) => {
|
||||||
|
const form = event.currentTarget;
|
||||||
|
event.preventDefault();
|
||||||
|
event.stopPropagation();
|
||||||
|
const body = getLineObject(item);
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
if (id === undefined) {
|
||||||
|
await LinesApiService.create(body);
|
||||||
|
} else {
|
||||||
|
await LinesApiService.update(id, body);
|
||||||
|
}
|
||||||
|
if (linesChangeHandle) linesChangeHandle();
|
||||||
|
toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
setValidated(true);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
resetValidity,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLinesItemForm;
|
||||||
37
5_Lab/Lab/src/components/lines/hooks/LinesItemHook.js
Normal file
37
5_Lab/Lab/src/components/lines/hooks/LinesItemHook.js
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import LinesApiService from '../service/LinesApiService';
|
||||||
|
|
||||||
|
const useLinesItem = (id) => {
|
||||||
|
const emptyItem = {
|
||||||
|
id: '',
|
||||||
|
typeId: '',
|
||||||
|
name: '',
|
||||||
|
number: '0',
|
||||||
|
annotation: '',
|
||||||
|
info: '',
|
||||||
|
image: '',
|
||||||
|
};
|
||||||
|
const [item, setItem] = useState({ ...emptyItem });
|
||||||
|
|
||||||
|
const getItem = async (itemId = undefined) => {
|
||||||
|
if (itemId && itemId !== -1) {
|
||||||
|
console.log(itemId);
|
||||||
|
const data = await LinesApiService.get(itemId);
|
||||||
|
setItem(data);
|
||||||
|
} else {
|
||||||
|
setItem({ ...emptyItem });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getItem(id);
|
||||||
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
setItem,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLinesItem;
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import ApiService from '../../api/ApiService';
|
||||||
|
|
||||||
|
const LinesApiService = new ApiService('lines');
|
||||||
|
|
||||||
|
export default LinesApiService;
|
||||||
70
5_Lab/Lab/src/components/lines/table/Lines.jsx
Normal file
70
5_Lab/Lab/src/components/lines/table/Lines.jsx
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import { Button, Col, Row } from 'react-bootstrap';
|
||||||
|
import Select from '../../input/Select.jsx';
|
||||||
|
import ModalConfirm from '../../modal/ModalConfirm.jsx';
|
||||||
|
import ModalForm from '../../modal/ModalForm.jsx';
|
||||||
|
import LinesItemForm from '../form/LinesItemForm.jsx';
|
||||||
|
import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
|
||||||
|
import useTypeFilter from '../hooks/LinesFilterHook';
|
||||||
|
import useLinesFormModal from '../hooks/LinesFormModalHook';
|
||||||
|
import useLines from '../hooks/LinesHook';
|
||||||
|
import LinesTable from './LinesTable.jsx';
|
||||||
|
import LinesTableRow from './LinesTableRow.jsx';
|
||||||
|
import '../../../css_.css';
|
||||||
|
|
||||||
|
const Lines = () => {
|
||||||
|
const { types, currentFilter, handleFilterChange } = useTypeFilter();
|
||||||
|
|
||||||
|
const { lines, handleLinesChange } = useLines(currentFilter);
|
||||||
|
|
||||||
|
const {
|
||||||
|
isDeleteModalShow,
|
||||||
|
showDeleteModal,
|
||||||
|
handleDeleteConfirm,
|
||||||
|
handleDeleteCancel,
|
||||||
|
} = useLinesDeleteModal(handleLinesChange);
|
||||||
|
|
||||||
|
const {
|
||||||
|
isFormModalShow,
|
||||||
|
isFormValidated,
|
||||||
|
showFormModal,
|
||||||
|
currentItem,
|
||||||
|
handleItemChange,
|
||||||
|
handleFormSubmit,
|
||||||
|
handleFormClose,
|
||||||
|
} = useLinesFormModal(handleLinesChange);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row>
|
||||||
|
<Col xs={4}>
|
||||||
|
<Button className="btn-rectangle" onClick={() => showFormModal()}>
|
||||||
|
Добавить книгу
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col xs={{ span: 4, offset: 4 }}>
|
||||||
|
<Select values={types} id='select'
|
||||||
|
value={currentFilter} onChange={handleFilterChange} />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<LinesTable>
|
||||||
|
{
|
||||||
|
lines.map((line, index) =>
|
||||||
|
<LinesTableRow key={line.id}
|
||||||
|
index={index} line={line}
|
||||||
|
onDelete={() => showDeleteModal(line.id)}
|
||||||
|
onEdit={() => showFormModal(line.id)}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</LinesTable>
|
||||||
|
<ModalConfirm show={isDeleteModalShow}
|
||||||
|
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
|
||||||
|
title='Удаление' message='Удалить элемент?' />
|
||||||
|
<ModalForm show={isFormModalShow} validated={isFormValidated}
|
||||||
|
onSubmit={handleFormSubmit} onClose={handleFormClose} title='Редактирование'>
|
||||||
|
<LinesItemForm item={currentItem} handleChange={handleItemChange} />
|
||||||
|
</ModalForm>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Lines;
|
||||||
30
5_Lab/Lab/src/components/lines/table/LinesTable.jsx
Normal file
30
5_Lab/Lab/src/components/lines/table/LinesTable.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Table } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const LinesTable = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<Table className='mt-2' borderless responsive>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">ID</th >
|
||||||
|
<th scope="col">Обложка</th >
|
||||||
|
<th scope="col">Название и автор</th>
|
||||||
|
<th scope="col">Количество</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
<th scope='col'></th>
|
||||||
|
<th scope='col'></th>
|
||||||
|
<th scope='col'></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
{children}
|
||||||
|
</tbody >
|
||||||
|
</Table >
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesTable.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesTable;
|
||||||
33
5_Lab/Lab/src/components/lines/table/LinesTableRow.jsx
Normal file
33
5_Lab/Lab/src/components/lines/table/LinesTableRow.jsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { PencilFill, Trash3 } from 'react-bootstrap-icons';
|
||||||
|
|
||||||
|
const LinesTableRow = ({
|
||||||
|
index, line, onDelete, onEdit,
|
||||||
|
}) => {
|
||||||
|
const handleAnchorClick = (event, action) => {
|
||||||
|
event.preventDefault();
|
||||||
|
action();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr>
|
||||||
|
<th scope="row">{index + 1}</th>
|
||||||
|
<td><img src={line.cover} style={{ width: 80 }}/></td>
|
||||||
|
<td>{line.name} || {line.type.name}</td>
|
||||||
|
<td>{line.number}</td>
|
||||||
|
<td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
|
||||||
|
<td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><Trash3 /></a></td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesTableRow.propTypes = {
|
||||||
|
index: PropTypes.number,
|
||||||
|
line: PropTypes.object,
|
||||||
|
onDelete: PropTypes.func,
|
||||||
|
onEdit: PropTypes.func,
|
||||||
|
onAddCart: PropTypes.func,
|
||||||
|
onEditInPage: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesTableRow;
|
||||||
3
5_Lab/Lab/src/components/modal/Modal.css
Normal file
3
5_Lab/Lab/src/components/modal/Modal.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.modal-title {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
42
5_Lab/Lab/src/components/modal/ModalConfirm.jsx
Normal file
42
5_Lab/Lab/src/components/modal/ModalConfirm.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button, Modal } from 'react-bootstrap';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
|
import './Modal.css';
|
||||||
|
|
||||||
|
const ModalConfirm = ({
|
||||||
|
show, title, message, onConfirm, onClose,
|
||||||
|
}) => {
|
||||||
|
return createPortal(
|
||||||
|
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||||
|
<Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
|
||||||
|
<Modal.Title>{title}</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
|
||||||
|
<Modal.Body>
|
||||||
|
{message}
|
||||||
|
</Modal.Body>
|
||||||
|
|
||||||
|
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||||
|
<Button variant='secondary' className='col-5 m-0 me-2'
|
||||||
|
onClick={() => onClose()}>
|
||||||
|
Нет
|
||||||
|
</Button>
|
||||||
|
<Button variant='primary' className='col-5 m-0 ms-2'
|
||||||
|
onClick={() => onConfirm()}>
|
||||||
|
Да
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Modal>,
|
||||||
|
document.body,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ModalConfirm.propTypes = {
|
||||||
|
show: PropTypes.bool,
|
||||||
|
title: PropTypes.string,
|
||||||
|
message: PropTypes.string,
|
||||||
|
onConfirm: PropTypes.func,
|
||||||
|
onClose: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalConfirm;
|
||||||
43
5_Lab/Lab/src/components/modal/ModalForm.jsx
Normal file
43
5_Lab/Lab/src/components/modal/ModalForm.jsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button, Form, Modal } from 'react-bootstrap';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
|
import './Modal.css';
|
||||||
|
|
||||||
|
const ModalForm = ({
|
||||||
|
show, title, validated, onSubmit, onClose, children,
|
||||||
|
}) => {
|
||||||
|
return createPortal(
|
||||||
|
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||||
|
<Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
|
||||||
|
<Modal.Title>{title}</Modal.Title>
|
||||||
|
</Modal.Header>
|
||||||
|
<Form className='m-0' noValidate validated={validated} onSubmit={onSubmit}>
|
||||||
|
<Modal.Body>
|
||||||
|
{children}
|
||||||
|
</Modal.Body>
|
||||||
|
|
||||||
|
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||||
|
<Button variant='secondary' className='col-5 m-0 me-2'
|
||||||
|
onClick={() => onClose()}>
|
||||||
|
Отмена
|
||||||
|
</Button>
|
||||||
|
<Button variant='primary' className='col-5 m-0 ms-2' type='submit'>
|
||||||
|
Сохранить
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Form>
|
||||||
|
</Modal>,
|
||||||
|
document.body,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ModalForm.propTypes = {
|
||||||
|
show: PropTypes.bool,
|
||||||
|
title: PropTypes.string,
|
||||||
|
validated: PropTypes.bool,
|
||||||
|
onSubmit: PropTypes.func,
|
||||||
|
onClose: PropTypes.func,
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalForm;
|
||||||
21
5_Lab/Lab/src/components/modal/ModalHook.js
Normal file
21
5_Lab/Lab/src/components/modal/ModalHook.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const useModal = () => {
|
||||||
|
const [showModal, setShowModal] = useState(false);
|
||||||
|
|
||||||
|
const showModalDialog = () => {
|
||||||
|
setShowModal(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const hideModalDialog = () => {
|
||||||
|
setShowModal(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isModalShow: showModal,
|
||||||
|
showModal: showModalDialog,
|
||||||
|
hideModal: hideModalDialog,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useModal;
|
||||||
12
5_Lab/Lab/src/components/navigation/Navigation.css
Normal file
12
5_Lab/Lab/src/components/navigation/Navigation.css
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
header .navbar {
|
||||||
|
background-color: #3c3c3c !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .navbar .link a:hover {
|
||||||
|
text-decoration: underline !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .navbar .logo {
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
51
5_Lab/Lab/src/components/navigation/Navigation.jsx
Normal file
51
5_Lab/Lab/src/components/navigation/Navigation.jsx
Normal file
@ -0,0 +1,51 @@
|
|||||||
|
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';
|
||||||
|
import logo from '../../assets/logoOfLibrary.png';
|
||||||
|
import useCart from '../cart/CartHook';
|
||||||
|
|
||||||
|
const Navigation = ({ routes }) => {
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||||
|
const { getCartSum } = useCart();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<Navbar expand='md' bg='dark' data-bs-theme='dark'>
|
||||||
|
<Container fluid>
|
||||||
|
<Link className="navbar-brand" to='/'>
|
||||||
|
<img src={logo} alt="" width="80" className="d-inline-block align-text-top" />
|
||||||
|
</Link>
|
||||||
|
<Nav.Link className='text-light' as={Link} key={pages[0].path} eventKey={pages[0].path} to={pages[0].path ?? '/'}>
|
||||||
|
{pages[0].title} </Nav.Link>
|
||||||
|
|
||||||
|
<Navbar.Toggle aria-controls='main-navbar' />
|
||||||
|
<Navbar.Collapse id='main-navbar' className='justify-content-end'>
|
||||||
|
<Nav className='justify-content-end link' activeKey={location.pathname}>
|
||||||
|
{
|
||||||
|
pages.slice(1, -1).map((page) =>
|
||||||
|
<Nav.Link as={Link} key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||||
|
{(page.title === 'Войти' && localStorage.getItem('nameOfUser') !== null) ? localStorage.getItem('nameOfUser') : page.title}
|
||||||
|
</Nav.Link>)
|
||||||
|
}
|
||||||
|
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
|
||||||
|
<Navbar.Brand as={Link} to='/cart'>
|
||||||
|
<Cart2 className='d-inline-block align-top me-1 logo' /> {getCartSum() ?? ''} шт.
|
||||||
|
</Navbar.Brand>
|
||||||
|
</Container>
|
||||||
|
</Navbar >
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
11
5_Lab/Lab/src/components/sigh/sighHook.js
Normal file
11
5_Lab/Lab/src/components/sigh/sighHook.js
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
|
||||||
|
const useSigh = () => {
|
||||||
|
const [name, setName] = useState('');
|
||||||
|
return {
|
||||||
|
nameOfUser: name,
|
||||||
|
setNameOfUser: setName,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useSigh;
|
||||||
21
5_Lab/Lab/src/components/types/hooks/TypesHook.js
Normal file
21
5_Lab/Lab/src/components/types/hooks/TypesHook.js
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import TypesApiService from '../service/TypesApiService';
|
||||||
|
|
||||||
|
const useTypes = () => {
|
||||||
|
const [types, setTypes] = useState([]);
|
||||||
|
|
||||||
|
const getTypes = async () => {
|
||||||
|
const data = await TypesApiService.getAll();
|
||||||
|
setTypes(data ?? []);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getTypes();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return {
|
||||||
|
types,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useTypes;
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
import ApiService from '../../api/ApiService';
|
||||||
|
|
||||||
|
const TypesApiService = new ApiService('types');
|
||||||
|
|
||||||
|
export default TypesApiService;
|
||||||
15
5_Lab/Lab/src/components/utils/Base64.js
Normal file
15
5_Lab/Lab/src/components/utils/Base64.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
const getBase64FromFile = async (file) => {
|
||||||
|
const reader = new FileReader();
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
reader.onloadend = () => {
|
||||||
|
const fileContent = reader.result;
|
||||||
|
resolve(fileContent);
|
||||||
|
};
|
||||||
|
reader.onerror = () => {
|
||||||
|
reject(new Error('Oops, something went wrong with the file reader.'));
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export default getBase64FromFile;
|
||||||
321
5_Lab/Lab/src/css_.css
Normal file
321
5_Lab/Lab/src/css_.css
Normal file
@ -0,0 +1,321 @@
|
|||||||
|
header nav {
|
||||||
|
background-color: #181818;
|
||||||
|
margin-bottom: 1%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
header nav {
|
||||||
|
height: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.panel-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
#body tr:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 766px) {
|
||||||
|
.banner-main {
|
||||||
|
text-align-last: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 368px) {
|
||||||
|
.panel-col {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-main {
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-main {
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #A59672;
|
||||||
|
margin-top: 20px;
|
||||||
|
height: relative;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
header nav a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.about-us-link {
|
||||||
|
align-content: start;
|
||||||
|
margin-left: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-rectangle-white {
|
||||||
|
color: #3d6444;
|
||||||
|
font-family: Montserrat;
|
||||||
|
padding: 1ex;
|
||||||
|
padding-left: 5ex;
|
||||||
|
padding-right: 5ex;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #3d6447;
|
||||||
|
background: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-rectangle {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: Montserrat;
|
||||||
|
padding: 1ex;
|
||||||
|
padding-left: 5ex;
|
||||||
|
padding-right: 5ex;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #3D4F64;
|
||||||
|
background: #3E5646;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
background: #3E5646;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.row-of-inter {
|
||||||
|
margin-left: 10%;
|
||||||
|
margin-top: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row-of-pictures {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.picture-sigh {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
menu {
|
||||||
|
margin: 100px, 100px;
|
||||||
|
padding: 10%, 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-inline-block {
|
||||||
|
border-radius: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.col-of-about {
|
||||||
|
background-color: #3E5646;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
border-spacing: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 310px) {
|
||||||
|
|
||||||
|
.font-basket {
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.text-about-us {
|
||||||
|
text-align: justify;
|
||||||
|
padding: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
card-description-text {
|
||||||
|
text-align: justify;
|
||||||
|
padding: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
border: #ffffff;
|
||||||
|
transition: 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-number {
|
||||||
|
width: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-catalog {
|
||||||
|
background: #3E5646;
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
padding-top: 4px;
|
||||||
|
font-size: small;
|
||||||
|
border: #3E5646;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-catalog:hover,
|
||||||
|
.btn-sign:hover,
|
||||||
|
.btn-card,
|
||||||
|
.btn-rectangle:hover {
|
||||||
|
background: #2b3b30;
|
||||||
|
}
|
||||||
|
.btn-rectangle-white:hover {
|
||||||
|
background: #99c2a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quantity-goods {
|
||||||
|
width: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-catalog.btn.btn-primary:active,
|
||||||
|
.btn-sign.btn.btn-lg.mt-5.shadow.border.text-light:active,
|
||||||
|
.btn-card:active,
|
||||||
|
.btn.btn-rectangle:active {
|
||||||
|
background: #2b3b30;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn.btn-rectangle-white:active {
|
||||||
|
background: #99c2a6;
|
||||||
|
border: #99c2a6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.btn-card {
|
||||||
|
|
||||||
|
|
||||||
|
background: #887A57E0;
|
||||||
|
width: 25%;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
margin-top: 10%;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card-text {
|
||||||
|
margin-top: 0;
|
||||||
|
padding: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-description {
|
||||||
|
background: #3E5646;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-sign {
|
||||||
|
width: 100%;
|
||||||
|
background: #3E5646;
|
||||||
|
border-radius: 25px;
|
||||||
|
padding-left: 8%;
|
||||||
|
padding-right: 8%;
|
||||||
|
border: #3E5646;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
footer {
|
||||||
|
background-color: #181818;
|
||||||
|
height: 80px;
|
||||||
|
color: #ffffff;
|
||||||
|
padding: 2ex;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width : 376px) {
|
||||||
|
footer {
|
||||||
|
height: 80px;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter {
|
||||||
|
|
||||||
|
height: 25px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #C0C0C0;
|
||||||
|
background: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.counter-btn {
|
||||||
|
|
||||||
|
width: 24.567px;
|
||||||
|
height: 25px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
border-radius: 2px 0px 0px 2px;
|
||||||
|
background: #3D4F64;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@media (max-width : 376px) {
|
||||||
|
.placeholder-class {
|
||||||
|
font-size: 4vw;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:768px) {
|
||||||
|
.col-bott {
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.banner-text {
|
||||||
|
font-size: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width:768px) {
|
||||||
|
|
||||||
|
.banner-text.ms-2 {
|
||||||
|
font-size: 13px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.banner-text {
|
||||||
|
color: #FFF;
|
||||||
|
font-family: Inria Serif;
|
||||||
|
font-size: 1.3vw;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
line-height: 149.4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 15px;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text {
|
||||||
|
font-size: small;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
11
5_Lab/Lab/src/index.css
Normal file
11
5_Lab/Lab/src/index.css
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
h1 {
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 1.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
67
5_Lab/Lab/src/main.jsx
Normal file
67
5_Lab/Lab/src/main.jsx
Normal file
@ -0,0 +1,67 @@
|
|||||||
|
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 PageAdmin from './pages/PageAdmin.jsx';
|
||||||
|
import CartPage from './pages/CartPage.jsx';
|
||||||
|
import PageMain from './pages/PageMain.jsx';
|
||||||
|
import PageAboutUs from './pages/PageAboutUs.jsx';
|
||||||
|
import PageSighIn from './pages/PageSighIn.jsx';
|
||||||
|
import PageSighUp from './pages/PageSighUp.jsx';
|
||||||
|
import PageCatalog from './pages/PageCatalog.jsx';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/pageAboutUs',
|
||||||
|
element: <PageAboutUs />,
|
||||||
|
title: 'О нас',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
index: true,
|
||||||
|
path: '/',
|
||||||
|
element: <PageMain />,
|
||||||
|
title: 'Главная страница',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/pageCatalog',
|
||||||
|
element: <PageCatalog />,
|
||||||
|
title: 'Каталог',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/pageSighIn',
|
||||||
|
element: <PageSighIn />,
|
||||||
|
title: 'Войти',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/pageSighUp',
|
||||||
|
element: <PageSighUp />,
|
||||||
|
title: 'Зарегистрироваться',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/pageAdmin',
|
||||||
|
element: <PageAdmin />,
|
||||||
|
title: 'AdminPage',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/cart',
|
||||||
|
element: <CartPage />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
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>,
|
||||||
|
);
|
||||||
9
5_Lab/Lab/src/pages/CartPage.jsx
Normal file
9
5_Lab/Lab/src/pages/CartPage.jsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import Cart from '../components/cart/Cart.jsx';
|
||||||
|
|
||||||
|
const CartPage = () => {
|
||||||
|
return (
|
||||||
|
<Cart />
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CartPage;
|
||||||
20
5_Lab/Lab/src/pages/ErrorPage.jsx
Normal file
20
5_Lab/Lab/src/pages/ErrorPage.jsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { Alert, Button, Container } from 'react-bootstrap';
|
||||||
|
import { useNavigate, useRouteError } from 'react-router-dom';
|
||||||
|
|
||||||
|
const ErrorPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const error = useRouteError();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container fluid className='m-0 p-3 row justify-content-center'>
|
||||||
|
<Alert className='col-12 col-lg-6' variant='danger'>
|
||||||
|
{error?.message ?? 'Страница не найдена'}
|
||||||
|
</Alert>
|
||||||
|
<div className='w-100'></div>
|
||||||
|
<Button className='col-12 col-lg-6' variant='primary'
|
||||||
|
onClick={() => navigate(-1)}>Назад</Button>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ErrorPage;
|
||||||
35
5_Lab/Lab/src/pages/PageAboutUs.jsx
Normal file
35
5_Lab/Lab/src/pages/PageAboutUs.jsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import logo from '../assets/logoOfLibrary.png';
|
||||||
|
|
||||||
|
const PageAboutUs = () => {
|
||||||
|
return (
|
||||||
|
<div className="row justify-content-center">
|
||||||
|
<div className="col-of-about col-md-9 mb-4 rounded">
|
||||||
|
<div className=" row pt-4 pb-4">
|
||||||
|
<div className="col-auto m-1 align-self-center"> <img src={logo} alt="" width="80" className="d-inline-block align-text-top" /></div>
|
||||||
|
<div className="col-md-9 col-7 align-self-center"> <h1 className="text-about-us-article text-white fs-2 text-start ">BookCamp: Библиотека твоего города</h1></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="col-md-9 p-4">
|
||||||
|
<p className="text-about-us mb-4">
|
||||||
|
Добро пожаловать на сайт городской библиотеки! Рады приветствовать вас здесь,
|
||||||
|
в виртуальном пространстве, где вы сможете погрузиться в мир книг и знаний.
|
||||||
|
Наша библиотека - это место, где каждый может найти
|
||||||
|
что-то интересное и полезное для себя. Мы предлагаем широкий выбор литературы, электронных
|
||||||
|
ресурсов, а также различные мероприятия и программы для всех возрастов. Будьте с нами
|
||||||
|
и откройте для себя новые горизонты чтения и образования!В нашей библиотеке вы найдете
|
||||||
|
все, что нужно для удовлетворения своей любознательности и жажды знаний.
|
||||||
|
У нас есть огромный
|
||||||
|
выбор книг по самым разным темам: от классической литературы до современных
|
||||||
|
бестселлеров, от научно-популярных изданий до произведений искусства. Мы
|
||||||
|
также предлагаем электронные ресурсы, которые позволяют вам читать книги
|
||||||
|
онлайн или скачивать их на свои устройства. Таким образом, вы можете
|
||||||
|
наслаждаться чтением в любое удобное для вас время и место.
|
||||||
|
</p>
|
||||||
|
<p className="text-about-us mb-4">Наша библиотека не только предлагает чтение, но и является центром культурной жизни города. Мы организуем различные мероприятия, такие как лекции, дискуссии, книжные клубы и выставки. У нас также есть специальные программы для детей и подростков, которые помогают им развивать свои навыки чтения и письма, а также познавать мир вокруг себя. Мы приглашаем всех желающих присоединиться к нашим мероприятиям и обменяться своими идеями и впечатлениями.Кроме того, мы предлагаем услуги по поддержке исследований и обучению. Наша библиотека является надежным источником информации, где вы можете найти актуальные и достоверные материалы для своих проектов и заданий. Мы также предлагаем помощь в использовании электронных ресурсов и поиске нужной информации.</p>
|
||||||
|
<p className="text-about-us mb-4">Мы стремимся создать комфортную и дружественную атмосферу для всех посетителей нашей библиотеки. Наш персонал всегда готов помочь вам найти нужную книгу или ответить на ваши вопросы. Мы также предлагаем возможность зарегистрироваться в библиотеке онлайн, чтобы получить доступ к нашим электронным ресурсам и оставлять отзывы о прочитанных книгах.Мы верим, что чтение и образование - это ключи к развитию и саморазвитию. Поэтому мы приглашаем вас присоединиться к нашей библиотечной семье и открыть для себя новые горизонты. Здесь вы найдете не только знания, но и вдохновение, удовольствие и возможность расширить свой кругозор. Погрузитесь в мир книг и знаний вместе с нами и дайте своему уму возможность расти и расцветать. Добро пожаловать в городскую библиотеку!</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageAboutUs;
|
||||||
9
5_Lab/Lab/src/pages/PageAdmin.jsx
Normal file
9
5_Lab/Lab/src/pages/PageAdmin.jsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import Lines from '../components/lines/table/Lines.jsx';
|
||||||
|
|
||||||
|
const Page4 = () => {
|
||||||
|
return (
|
||||||
|
<Lines />
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page4;
|
||||||
66
5_Lab/Lab/src/pages/PageBasket.jsx
Normal file
66
5_Lab/Lab/src/pages/PageBasket.jsx
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
import cover1 from '../assets/covers/image1book.png';
|
||||||
|
import cover2 from '../assets/covers/image2book.png';
|
||||||
|
|
||||||
|
import '../css_.css';
|
||||||
|
|
||||||
|
const PageBasket = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h1>Подборка</h1>
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-8">
|
||||||
|
<table className="table table-borderless" id="table">
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col">Товар</th>
|
||||||
|
<th scope="col">Описание</th>
|
||||||
|
<th scope="col"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row row-of-pictures"><img src={cover2} alt="" width="80px" /></th>
|
||||||
|
<td><p className="mb-0 font-basket">Ведьмак. Меч предназначения</p>
|
||||||
|
<p className="mb-0 font-basket">Анджей Сапковский</p>
|
||||||
|
|
||||||
|
<div className="input-group quantity-goods mt-1">
|
||||||
|
<input type="button" value="-" id="button_minus" className = "minus" />
|
||||||
|
<input className="input-number" type="number" step="1" min="1" max="10" value="1" title="Qty" />
|
||||||
|
<input type="button" value="+" id="button_plus" className="plus" />
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="align-bottom">
|
||||||
|
<div className="btn btn-delete"> <img src="/src/icons/icons_sigh/trash.svg" alt="" /></div>
|
||||||
|
</td>
|
||||||
|
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row"><img src={cover1} alt="" width="80px" /></th>
|
||||||
|
<td><p className="mb-0 font-basket">Ведьмак. Последнее желание</p>
|
||||||
|
<p className="mb-0 font-basket">Анджей Сапковский</p>
|
||||||
|
|
||||||
|
<div className="input-group quantity-goods mt-1 ">
|
||||||
|
<input type="button" value="-" id="button_minus" className = "minus" />
|
||||||
|
<input className="input-number" type="number" step="1" min="1" max="10" value="1" title="Qty" />
|
||||||
|
<input type="button" value="+" id="button_plus" className="plus" />
|
||||||
|
</div>
|
||||||
|
</td>
|
||||||
|
<td className="align-bottom">
|
||||||
|
<div className="btn btn-delete"> <img src="" alt="" /></div>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<hr />
|
||||||
|
|
||||||
|
<button className="btn-rectangle " type="submit" id="items-add">Добавить книгу</button>
|
||||||
|
<button className="btn-rectangle-white ms-3" type="submit" id="items-add">Добавить книгу</button>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageBasket;
|
||||||
32
5_Lab/Lab/src/pages/PageCatalog.jsx
Normal file
32
5_Lab/Lab/src/pages/PageCatalog.jsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { Row } from 'react-bootstrap';
|
||||||
|
import CardOfBook from '../components/CardOfBook.jsx';
|
||||||
|
|
||||||
|
import defaultCover from '../assets/covers/addbook1.png';
|
||||||
|
|
||||||
|
import useLines from '../components/lines/hooks/LinesHook';
|
||||||
|
|
||||||
|
const PageCatalog = () => {
|
||||||
|
const { lines } = useLines();
|
||||||
|
|
||||||
|
function allCards() {
|
||||||
|
return lines.map((line) =>
|
||||||
|
<CardOfBook key={line.id}
|
||||||
|
name={line.name} autor={line.type.name} image={line.cover} line={line} />);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h3 className="ms-5 mt-4 mb-4">Каталог</h3>
|
||||||
|
<div id="catalog">
|
||||||
|
<Row className="justify-content-evenly">
|
||||||
|
{allCards()}
|
||||||
|
<Row className="justify-content-evenly mt-4">
|
||||||
|
<CardOfBook name='Добавить' autor='' image={defaultCover} />
|
||||||
|
</Row>
|
||||||
|
</Row>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageCatalog;
|
||||||
24
5_Lab/Lab/src/pages/PageMain.jsx
Normal file
24
5_Lab/Lab/src/pages/PageMain.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { Row, Col } from 'react-bootstrap';
|
||||||
|
|
||||||
|
import Banner from '../components/banner/Banner.jsx';
|
||||||
|
import SmalBanner from '../components/SmallBanner.jsx';
|
||||||
|
import LastIncome from '../components/LastIncome.jsx';
|
||||||
|
import '../css_.css';
|
||||||
|
|
||||||
|
const Page1 = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row className="justify-content-center">
|
||||||
|
<Col md={6} className='first-col'>
|
||||||
|
<Banner />
|
||||||
|
</Col>
|
||||||
|
<Col md={4} className='panel-col'>
|
||||||
|
<SmalBanner />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<LastIncome />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page1;
|
||||||
59
5_Lab/Lab/src/pages/PageSighIn.jsx
Normal file
59
5_Lab/Lab/src/pages/PageSighIn.jsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import logo from '../assets/logoOfLibrary.png';
|
||||||
|
|
||||||
|
import envelope from '../assets/icons_sigh/envelope.svg';
|
||||||
|
import lock from '../assets/icons_sigh/lock.svg';
|
||||||
|
|
||||||
|
import cover from '../assets/cover.png';
|
||||||
|
|
||||||
|
const Page3 = () => {
|
||||||
|
function setNameOfUser(name) {
|
||||||
|
localStorage.setItem('nameOfUser', name);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="row justify-content-end">
|
||||||
|
<div className="col-xl-4 col-10 align-self-center justify-content-center">
|
||||||
|
<div className="row g-0">
|
||||||
|
<div className="col-md-3">
|
||||||
|
<a className="nav-link m-0 justify-content-start" href="/index.html"><img src={logo} alt="" width="80" className="d-inline-block align-text-top" /></a>
|
||||||
|
</div>
|
||||||
|
<div className="row g-0 row-of-inter">
|
||||||
|
<div className="col-10">
|
||||||
|
<div className="conteiner">
|
||||||
|
<h2 className="mb-4">Вход</h2>
|
||||||
|
<h3>Если у вас нет аккаунта,</h3>
|
||||||
|
<h3 className="mb-5">вы можете <a href="/pageSignUp.html">Зарегистрироваться!</a></h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form className="needs-validation">
|
||||||
|
<label>Email</label>
|
||||||
|
<div className="input-group mb-5 border-bottom">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"> <img src={envelope} alt="" /></span>
|
||||||
|
<input id='email' type="text" className="form-control border-0" placeholder="Введите вашу почту" aria-label="Email" required />
|
||||||
|
<div className="valid-feedback">Email заполнен</div>
|
||||||
|
<div className="invalid-feedback">Email не заполнен</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Password</label>
|
||||||
|
<div className="input-group mb-5 border-bottom">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"> <img src={lock} alt="" /></span>
|
||||||
|
<input type="text" className="form-control border-0" placeholder="Введите ваш пароль" aria-label="Password" aria-describedby="basic-addon1" required />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Button className="btn-sign btn btn-lg mt-5 shadow border text-light" type="submit" onClick={() => setNameOfUser(document.getElementById('email').value)}>Вход</Button>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="col-auto d-none d-xl-block">
|
||||||
|
<img className="picture-sigh" src={cover} alt="" width="70%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Page3;
|
||||||
62
5_Lab/Lab/src/pages/PageSighUp.jsx
Normal file
62
5_Lab/Lab/src/pages/PageSighUp.jsx
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import logo from '../assets/logoOfLibrary.png';
|
||||||
|
import envelope from '../assets/icons_sigh/envelope.svg';
|
||||||
|
import lock from '../assets/icons_sigh/lock.svg';
|
||||||
|
import lockfill from '../assets/icons_sigh/lock-fill.svg';
|
||||||
|
import person from '../assets/icons_sigh/person.svg';
|
||||||
|
import cover from '../assets/cover.png';
|
||||||
|
|
||||||
|
const PageSighUp = () => {
|
||||||
|
return (
|
||||||
|
<div className="row justify-content-end">
|
||||||
|
<div className="col-xl-4 col-10 align-self-center justify-content-center">
|
||||||
|
<div className="row g-0">
|
||||||
|
<div className="col-md-3">
|
||||||
|
<a className="nav-link m-0 justify-content-start" href="/index.html"><img src={logo} alt="" width="80" className="d-inline-block align-text-top" /></a>
|
||||||
|
</div>
|
||||||
|
<div className="row g-0 row-of-inter">
|
||||||
|
<div className="col-10">
|
||||||
|
<div className="conteiner">
|
||||||
|
<h2>Регистрация</h2>
|
||||||
|
<h3>Если у вас уже есть аккаунт,</h3>
|
||||||
|
<h3>вы можете <a href="/pageSignIn.html">Войти!</a></h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Email</label>
|
||||||
|
<div className="input-group mb-3 border-bottom">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"><img src={envelope} alt="" /></span>
|
||||||
|
<input type="text" className="form-control border-0 placeholder-class" placeholder="Введите вашу почту" aria-label="Email" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Username</label>
|
||||||
|
<div className="input-group mb-3 border-bottom">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"><img src={person} alt="" /></span>
|
||||||
|
<input type="text" className="form-control border-0 placeholder-class" placeholder="Введите ваше имя" aria-label="Username" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Password</label>
|
||||||
|
<div className="input-group mb-3 border-bottom">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"> <img src={lock} alt="" /></span>
|
||||||
|
<input type="text" className="form-control border-0 placeholder-class" placeholder="Введите ваш пароль" aria-label="Password" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label>Confirm Password</label>
|
||||||
|
<div className="input-group mb-3 border-bottom">
|
||||||
|
<span className="input-group-text border-0 bg-white" id="basic-addon1"><img src={lockfill} alt="" /></span>
|
||||||
|
<input type="text" className="form-control border-0 placeholder-class" placeholder="Повторите ваш пароль" aria-label="ConfPassword" aria-describedby="basic-addon1" />
|
||||||
|
</div>
|
||||||
|
<button className="btn-sign btn btn-lg mt-5 shadow border text-light" type="submit">Вход</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="col-auto d-none d-xl-block">
|
||||||
|
<img className="picture-sigh" src={cover} alt="" width="70%" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default PageSighUp;
|
||||||
13
5_Lab/Lab/vite.config.js
Normal file
13
5_Lab/Lab/vite.config.js
Normal file
@ -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,
|
||||||
|
},
|
||||||
|
});
|
||||||
Binary file not shown.
BIN
5_Lab/Отчет.doc
Normal file
BIN
5_Lab/Отчет.doc
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user