Lab5
This commit is contained in:
parent
82435eb44c
commit
0342b1c52b
9
Lab4/.idea/Lab4.iml
Normal file
9
Lab4/.idea/Lab4.iml
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<module type="JAVA_MODULE" version="4">
|
||||||
|
<component name="NewModuleRootManager" inherit-compiler-output="true">
|
||||||
|
<exclude-output />
|
||||||
|
<content url="file://$MODULE_DIR$" />
|
||||||
|
<orderEntry type="inheritedJdk" />
|
||||||
|
<orderEntry type="sourceFolder" forTests="false" />
|
||||||
|
</component>
|
||||||
|
</module>
|
||||||
6
Lab4/.idea/misc.xml
Normal file
6
Lab4/.idea/misc.xml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectRootManager">
|
||||||
|
<output url="file://$PROJECT_DIR$/out" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
8
Lab4/.idea/modules.xml
Normal file
8
Lab4/.idea/modules.xml
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ProjectModuleManager">
|
||||||
|
<modules>
|
||||||
|
<module fileurl="file://$PROJECT_DIR$/.idea/Lab4.iml" filepath="$PROJECT_DIR$/.idea/Lab4.iml" />
|
||||||
|
</modules>
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
Lab4/.idea/vcs.xml
Normal file
6
Lab4/.idea/vcs.xml
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="$PROJECT_DIR$/.." vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
47
Lab4/.idea/workspace.xml
Normal file
47
Lab4/.idea/workspace.xml
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="ChangeListManager">
|
||||||
|
<list default="true" id="9301f391-9a91-404b-b7fd-ad4901208d23" name="Changes" comment="" />
|
||||||
|
<option name="SHOW_DIALOG" value="false" />
|
||||||
|
<option name="HIGHLIGHT_CONFLICTS" value="true" />
|
||||||
|
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
|
||||||
|
<option name="LAST_RESOLUTION" value="IGNORE" />
|
||||||
|
</component>
|
||||||
|
<component name="Git.Settings">
|
||||||
|
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$/.." />
|
||||||
|
</component>
|
||||||
|
<component name="ProjectColorInfo"><![CDATA[{
|
||||||
|
"associatedIndex": 3
|
||||||
|
}]]></component>
|
||||||
|
<component name="ProjectId" id="2YtoV34KcD3vZhAHxL1qQc5S7yt" />
|
||||||
|
<component name="ProjectViewState">
|
||||||
|
<option name="hideEmptyMiddlePackages" value="true" />
|
||||||
|
<option name="showLibraryContents" value="true" />
|
||||||
|
</component>
|
||||||
|
<component name="PropertiesComponent"><![CDATA[{
|
||||||
|
"keyToString": {
|
||||||
|
"RunOnceActivity.OpenProjectViewOnStart": "true",
|
||||||
|
"RunOnceActivity.ShowReadmeOnStart": "true",
|
||||||
|
"WebServerToolWindowFactoryState": "false",
|
||||||
|
"git-widget-placeholder": "main",
|
||||||
|
"last_opened_file_path": "C:/Users/123/Desktop/Internt_Programmirovanie_PIbd23_Yashin/Lab4",
|
||||||
|
"nodejs_package_manager_path": "npm",
|
||||||
|
"vue.rearranger.settings.migration": "true"
|
||||||
|
}
|
||||||
|
}]]></component>
|
||||||
|
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
|
||||||
|
<component name="TaskManager">
|
||||||
|
<task active="true" id="Default" summary="Default task">
|
||||||
|
<changelist id="9301f391-9a91-404b-b7fd-ad4901208d23" name="Changes" comment="" />
|
||||||
|
<created>1701354257151</created>
|
||||||
|
<option name="number" value="Default" />
|
||||||
|
<option name="presentableId" value="Default" />
|
||||||
|
<updated>1701354257151</updated>
|
||||||
|
<workItem from="1701354258219" duration="195000" />
|
||||||
|
</task>
|
||||||
|
<servers />
|
||||||
|
</component>
|
||||||
|
<component name="TypeScriptGeneratedFilesManager">
|
||||||
|
<option name="version" value="3" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
6
Lab4/package-lock.json
generated
Normal file
6
Lab4/package-lock.json
generated
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "Lab4",
|
||||||
|
"lockfileVersion": 3,
|
||||||
|
"requires": true,
|
||||||
|
"packages": {}
|
||||||
|
}
|
||||||
24
Lab5/.gitignore
vendored
Normal file
24
Lab5/.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?
|
||||||
9
Lab5/counter.js
Normal file
9
Lab5/counter.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
export function setupCounter(element) {
|
||||||
|
let counter = 0
|
||||||
|
const setCounter = (count) => {
|
||||||
|
counter = count
|
||||||
|
element.innerHTML = `count is ${counter}`
|
||||||
|
}
|
||||||
|
element.addEventListener('click', () => setCounter(counter + 1))
|
||||||
|
setCounter(0)
|
||||||
|
}
|
||||||
133
Lab5/data.json
Normal file
133
Lab5/data.json
Normal file
File diff suppressed because one or more lines are too long
3
Lab5/imgs.txt
Normal file
3
Lab5/imgs.txt
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
img/image 4.jpg
|
||||||
|
img/image 5.jpg
|
||||||
|
img/image 3.jpg
|
||||||
14
Lab5/index.html
Normal file
14
Lab5/index.html
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ru">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Extremal Driving</title>
|
||||||
|
<link rel="stylesheet" href="src/myStyle.css">
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body class="bg-image overflow-visible pageBackground">
|
||||||
|
<div id="root" class="h-100 d-flex flex-column"></div>
|
||||||
|
<script type="module" src="./src/main.jsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1
Lab5/javascript.svg
Normal file
1
Lab5/javascript.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#F7DF1E" d="M0 0h256v256H0V0Z"></path><path d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.89-3.092 12.89-15.12v-81.798h24.057v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.58c-17.357-7.387-28.87-16.667-28.87-36.257c0-18.044 13.747-31.792 35.228-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.732 12.03c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.14 14.778 14.608l6.014 2.577c20.45 8.765 31.963 17.7 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574"></path></svg>
|
||||||
|
After Width: | Height: | Size: 995 B |
24
Lab5/main.js
Normal file
24
Lab5/main.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import './style.css'
|
||||||
|
import javascriptLogo from './javascript.svg'
|
||||||
|
import viteLogo from '/vite.svg'
|
||||||
|
import { setupCounter } from './counter.js'
|
||||||
|
|
||||||
|
document.querySelector('#app').innerHTML = `
|
||||||
|
<div>
|
||||||
|
<a href="https://vitejs.dev" target="_blank">
|
||||||
|
<img src="${viteLogo}" class="logo" alt="Vite logo" />
|
||||||
|
</a>
|
||||||
|
<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
|
||||||
|
<img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
|
||||||
|
</a>
|
||||||
|
<h1>Hello Vite!</h1>
|
||||||
|
<div class="card">
|
||||||
|
<button id="counter" type="button"></button>
|
||||||
|
</div>
|
||||||
|
<p class="read-the-docs">
|
||||||
|
Click on the Vite logo to learn more
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
`
|
||||||
|
|
||||||
|
setupCounter(document.querySelector('#counter'))
|
||||||
6157
Lab5/package-lock.json
generated
Normal file
6157
Lab5/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
40
Lab5/package.json
Normal file
40
Lab5/package.json
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
{
|
||||||
|
"name": "web-site-vite",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"vite": "vite",
|
||||||
|
"serve": "http-server -p 3000 ./dist/",
|
||||||
|
"build": "vite build",
|
||||||
|
"rest": "json-server --watch data.json -p 8081",
|
||||||
|
"dev": "npm-run-all --parallel rest vite",
|
||||||
|
"prod": "npm-run-all build --parallel serve rest"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bootstrap": "5.2.1",
|
||||||
|
"@fortawesome/fontawesome-free": "6.4.2",
|
||||||
|
"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",
|
||||||
|
"react-bootstrap": "^2.9.1",
|
||||||
|
"react-bootstrap-icons": "^1.10.3",
|
||||||
|
"prop-types": "^15.8.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"vite": "4.4.9",
|
||||||
|
"eslint": "8.50.0",
|
||||||
|
"eslint-config-airbnb-base": "15.0.0",
|
||||||
|
"eslint-plugin-import": "2.28.1",
|
||||||
|
"http-server": "14.1.1",
|
||||||
|
"json-server": "0.17.4",
|
||||||
|
"npm-run-all": "4.1.5",
|
||||||
|
"@types/react": "^18.2.15",
|
||||||
|
"@types/react-dom": "^18.2.7",
|
||||||
|
"@vitejs/plugin-react": "^4.0.3",
|
||||||
|
"eslint-plugin-react": "^7.32.2",
|
||||||
|
"eslint-plugin-react-hooks": "^4.6.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.3"
|
||||||
|
}
|
||||||
|
}
|
||||||
1
Lab5/public/vite.svg
Normal file
1
Lab5/public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
25
Lab5/src/App.jsx
Normal file
25
Lab5/src/App.jsx
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container } from 'react-bootstrap';
|
||||||
|
import { Outlet } from 'react-router-dom';
|
||||||
|
import {Toaster} from 'react-hot-toast';
|
||||||
|
import Footer from './components/footer/footer.jsx';
|
||||||
|
import Navigation from './components/navigation/nav-bar.jsx';
|
||||||
|
|
||||||
|
const App = ({ routes }) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Navigation routes={routes}></Navigation>
|
||||||
|
<Container className='p-2' as="main" fluid>
|
||||||
|
<Outlet />
|
||||||
|
</Container>
|
||||||
|
<Footer />
|
||||||
|
<Toaster />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
App.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default App;
|
||||||
BIN
Lab5/src/assets/AccountIcon.png
Normal file
BIN
Lab5/src/assets/AccountIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
Lab5/src/assets/CourseImage1.jpg
Normal file
BIN
Lab5/src/assets/CourseImage1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 58 KiB |
BIN
Lab5/src/assets/CourseImage2.jpg
Normal file
BIN
Lab5/src/assets/CourseImage2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 116 KiB |
BIN
Lab5/src/assets/CourseImage3.jpg
Normal file
BIN
Lab5/src/assets/CourseImage3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
Lab5/src/assets/MainBackGround.jpg
Normal file
BIN
Lab5/src/assets/MainBackGround.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 MiB |
BIN
Lab5/src/assets/image 3.jpg
Normal file
BIN
Lab5/src/assets/image 3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
Lab5/src/assets/image 4.jpg
Normal file
BIN
Lab5/src/assets/image 4.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
BIN
Lab5/src/assets/image 5.jpg
Normal file
BIN
Lab5/src/assets/image 5.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 78 KiB |
BIN
Lab5/src/assets/lable.png
Normal file
BIN
Lab5/src/assets/lable.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.6 KiB |
BIN
Lab5/src/assets/map.png
Normal file
BIN
Lab5/src/assets/map.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 201 KiB |
BIN
Lab5/src/assets/pen-to-square.png
Normal file
BIN
Lab5/src/assets/pen-to-square.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
BIN
Lab5/src/assets/placeHolder.png
Normal file
BIN
Lab5/src/assets/placeHolder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
Lab5/src/assets/togglerIcon.png
Normal file
BIN
Lab5/src/assets/togglerIcon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 863 B |
BIN
Lab5/src/assets/trash.png
Normal file
BIN
Lab5/src/assets/trash.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 577 B |
39
Lab5/src/components/Courses/CourseCard.jsx
Normal file
39
Lab5/src/components/Courses/CourseCard.jsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import {Button} from "react-bootstrap";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import placeHolder from "../../assets/placeHolder.png";
|
||||||
|
|
||||||
|
const CourseCard = ({line, onClick}) => {
|
||||||
|
var sale = 'text-danger mt-2';
|
||||||
|
if(line.benefit == 0) {
|
||||||
|
sale = 'opacity-0 mt-2';
|
||||||
|
}
|
||||||
|
const handleButtonClick = (event, action) => {
|
||||||
|
event.preventDefault();
|
||||||
|
action();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="col-xxl-4 col-lg-6 col-12 mx-auto mb-3 p-1 px-xl-3 rounded-8 formStyle wfitcon minW-260 height-420">
|
||||||
|
<div className="my-3 fs-5 fw-bold">
|
||||||
|
<h4 className='fw-bold'>{line.type.name}</h4>
|
||||||
|
<img src={line.image || placeHolder} className="my-3 rounded-8" alt="image" height="150" /><br/>
|
||||||
|
Занятия: {line.count} <br/>
|
||||||
|
{parseInt(line.sum).toFixed(0)} рублей <br/>
|
||||||
|
<h5 id='diffrens' className={sale}>Скидка {parseInt(line.benefit).toFixed(0)} рублей!</h5>
|
||||||
|
</div>
|
||||||
|
<Button className="rounded-pill btn-lg text-light mt-2 fs-6 purple" onClick={(event) => handleButtonClick(event, onClick)}>
|
||||||
|
Записаться
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
CourseCard.propTypes = {
|
||||||
|
sum: PropTypes.string,
|
||||||
|
count: PropTypes.string,
|
||||||
|
benefit: PropTypes.string,
|
||||||
|
image: PropTypes.string,
|
||||||
|
onClick: PropTypes.func
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CourseCard;
|
||||||
22
Lab5/src/components/Courses/CourseForm.jsx
Normal file
22
Lab5/src/components/Courses/CourseForm.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import {Container} from "react-bootstrap";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import ModalForm from "../modal/ModalForm.jsx";
|
||||||
|
import ReviewsItemForm from "../reviews/Reviews/ReviewsItemForm.jsx";
|
||||||
|
import ModalLogIn from "../modal/ModalLogIn.jsx";
|
||||||
|
|
||||||
|
const CourseForm = ({ children }) => {
|
||||||
|
return(
|
||||||
|
<>
|
||||||
|
<Container className='width-90 mx-auto my-5'>
|
||||||
|
<div className='row row-cols-xl-3 row-cols-md-2 row-cols-1 pd-3 text-center text-secondary-emphasis'>
|
||||||
|
{ children }
|
||||||
|
</div>
|
||||||
|
</Container>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
CourseForm.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default CourseForm;
|
||||||
43
Lab5/src/components/Courses/Courses.jsx
Normal file
43
Lab5/src/components/Courses/Courses.jsx
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import useTypeFilter from "../lines/hooks/LinesFilterHook.js";
|
||||||
|
import useLines from "../lines/hooks/LinesHook.js";
|
||||||
|
import useCoursesFormModal from "./hooks/CoursesFormModalHook.js";
|
||||||
|
import SelectWithOutPrice from "../input/SelectWithOutPrice.jsx";
|
||||||
|
import CourseForm from "./CourseForm.jsx";
|
||||||
|
import CourseCard from "./CourseCard.jsx";
|
||||||
|
import ModalForm from "../modal/ModalForm.jsx";
|
||||||
|
import {useState} from "react";
|
||||||
|
import Input from "../input/Input.jsx";
|
||||||
|
import useInputValue from "./hooks/InputValueHook.js";
|
||||||
|
import ModalLogIn from "../modal/ModalLogIn.jsx";
|
||||||
|
import useModal from "../modal/ModalHook.js";
|
||||||
|
|
||||||
|
const Courses = () => {
|
||||||
|
const { types, currentFilter, handleFilterChange } = useTypeFilter();
|
||||||
|
const {lines, handelLinesChange} = useLines(currentFilter);
|
||||||
|
const input = useInputValue('');
|
||||||
|
const { isModalShow, showModal, hideModal } = useModal();
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='formStyle width-90 rounded-8 p-2 mx-auto '>
|
||||||
|
<SelectWithOutPrice className='mt-2' values={types} label='Фильтр по категориям'
|
||||||
|
value={currentFilter} onChange={handleFilterChange} />
|
||||||
|
<CourseForm>
|
||||||
|
{
|
||||||
|
lines.map((line, index) =>
|
||||||
|
<CourseCard key={line.id} line={line} onClick={() => showModal()}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</CourseForm>
|
||||||
|
<ModalForm show={isModalShow}
|
||||||
|
onClick={input.onClick} onClose={hideModal}
|
||||||
|
title='Запись'>
|
||||||
|
<ModalLogIn input={input}/>
|
||||||
|
</ModalForm>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Courses;
|
||||||
45
Lab5/src/components/Courses/hooks/CoursesFormModalHook.js
Normal file
45
Lab5/src/components/Courses/hooks/CoursesFormModalHook.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import useModal from '../../modal/ModalHook';
|
||||||
|
import useCoursesItemForm from "./CoursesItemFormHook.js";
|
||||||
|
|
||||||
|
const useCoursesFormModal = (reviewsChangeHandle) => {
|
||||||
|
const { isModalShow, showModal, hideModal } = useModal();
|
||||||
|
const [currentId, setCurrentId] = useState(0);
|
||||||
|
|
||||||
|
const {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
resetValidity,
|
||||||
|
} = useCoursesItemForm(currentId, reviewsChangeHandle);
|
||||||
|
|
||||||
|
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 useCoursesFormModal;
|
||||||
62
Lab5/src/components/Courses/hooks/CoursesItemFormHook.js
Normal file
62
Lab5/src/components/Courses/hooks/CoursesItemFormHook.js
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import getBase64FromFile from '../../utils/Base64';
|
||||||
|
import LinesApiService from "../../lines/service/LinesApiService.js";
|
||||||
|
import useReviewsItem from "./CoursesItemHook.js";
|
||||||
|
|
||||||
|
const useReviewsItemForm = (id, linesChangeHandle) => {
|
||||||
|
const { item, setItem } = useReviewsItem(id);
|
||||||
|
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const resetValidity = () => {
|
||||||
|
setValidated(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getReviewObject = (formData) => {
|
||||||
|
const name = formData.name;
|
||||||
|
const text = formData.text;
|
||||||
|
return {
|
||||||
|
name: name.toString(),
|
||||||
|
text: text.toString()
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
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 = getReviewObject(item);
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
if (id === undefined) {
|
||||||
|
await LinesApiService.create(body);
|
||||||
|
} else {
|
||||||
|
await LinesApiService.update(id, body);
|
||||||
|
}
|
||||||
|
if (linesChangeHandle) linesChangeHandle();
|
||||||
|
toast.success('Отзыв успешно сохранен', { id: 'Reviews' });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
setValidated(true);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
resetValidity,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useReviewsItemForm;
|
||||||
34
Lab5/src/components/Courses/hooks/CoursesItemHook.js
Normal file
34
Lab5/src/components/Courses/hooks/CoursesItemHook.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import LinesApiService from '../../lines/service/LinesApiService';
|
||||||
|
|
||||||
|
const useLinesItem = (id) => {
|
||||||
|
const emptyItem = {
|
||||||
|
id: '',
|
||||||
|
typeId: '',
|
||||||
|
price: '0',
|
||||||
|
count: '0',
|
||||||
|
image: '',
|
||||||
|
};
|
||||||
|
const [item, setItem] = useState({ ...emptyItem });
|
||||||
|
|
||||||
|
const getItem = async (itemId = undefined) => {
|
||||||
|
if (itemId && itemId > 0) {
|
||||||
|
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;
|
||||||
15
Lab5/src/components/Courses/hooks/InputComponent.jsx
Normal file
15
Lab5/src/components/Courses/hooks/InputComponent.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import useInputValue from './InputValueHook.js';
|
||||||
|
|
||||||
|
const InputComponent = () => {
|
||||||
|
const input = useInputValue('');
|
||||||
|
|
||||||
|
return (
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={input.value}
|
||||||
|
onChange={input.onChange}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default InputComponent
|
||||||
35
Lab5/src/components/Courses/hooks/InputValueHook.js
Normal file
35
Lab5/src/components/Courses/hooks/InputValueHook.js
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import { useState, useEffect } from 'react';
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
|
const useInputValue = (initialValue) => {
|
||||||
|
const emptyReqvest = {
|
||||||
|
name: '',
|
||||||
|
tel: '',
|
||||||
|
};
|
||||||
|
const [reqvest, setReqvest] = useState({ ...emptyReqvest });
|
||||||
|
const handleChange = (event) => {
|
||||||
|
const inputName = event.target.name;
|
||||||
|
const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
|
||||||
|
setReqvest({
|
||||||
|
...reqvest,
|
||||||
|
[inputName]: inputValue,
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClick = () => {
|
||||||
|
if(reqvest)
|
||||||
|
localStorage.setItem('inputValue', `Имя: ${reqvest.name} || Номер телефона: ${reqvest.tel}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
reqvest,
|
||||||
|
onChange: handleChange,
|
||||||
|
onClick: onClick,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
useInputValue.propType = {
|
||||||
|
name: PropTypes.string,
|
||||||
|
tel: PropTypes.string
|
||||||
|
}
|
||||||
|
|
||||||
|
export default useInputValue;
|
||||||
40
Lab5/src/components/api/ApiClient.js
Normal file
40
Lab5/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: '5000',
|
||||||
|
headers: {
|
||||||
|
Accept: 'application/json',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);
|
||||||
29
Lab5/src/components/api/ApiService.js
Normal file
29
Lab5/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;
|
||||||
5
Lab5/src/components/footer/footer.css
Normal file
5
Lab5/src/components/footer/footer.css
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
.footer-style{
|
||||||
|
background-color: rgba(249,134,23,0.8) !important;
|
||||||
|
border-top: 7px solid #7c2d00 !important;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
22
Lab5/src/components/footer/footer.jsx
Normal file
22
Lab5/src/components/footer/footer.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import './footer.css'
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="position-absolute top-100 footer-style">
|
||||||
|
<div className="container">
|
||||||
|
<div className="row">
|
||||||
|
<div className="col-sm text-center text-sm-start text-light fw-bold fs-5">
|
||||||
|
Техническая поддержка <br/>
|
||||||
|
8-800-555-3535 <br/>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
<div className="col-sm text-center text-sm-end text-light fw-bold fs-5">
|
||||||
|
Работаем без выходных с 8:00 до 21:30
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
24
Lab5/src/components/input/Input.jsx
Normal file
24
Lab5/src/components/input/Input.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Form } from 'react-bootstrap';
|
||||||
|
import {useEffect} from "react";
|
||||||
|
|
||||||
|
const Input = ({
|
||||||
|
name, label, value, onChange, className, ...rest
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
|
||||||
|
<Form.Label>{label}</Form.Label>
|
||||||
|
<Form.Control className='light-grey rounded-8' 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;
|
||||||
31
Lab5/src/components/input/Select.jsx
Normal file
31
Lab5/src/components/input/Select.jsx
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Form } from 'react-bootstrap';
|
||||||
|
import {useNavigate} from "react-router-dom";
|
||||||
|
|
||||||
|
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 className='light-grey rounded-8' name={name || ''} value={value || ''} onChange={onChange} {...rest}>
|
||||||
|
<option value=''>Выберите значение</option>
|
||||||
|
{
|
||||||
|
values.map((type) => <option key={type.id} value={type.id}>{type.name + " " + type.basePrice + " рублей"}</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;
|
||||||
30
Lab5/src/components/input/SelectWithOutPrice.jsx
Normal file
30
Lab5/src/components/input/SelectWithOutPrice.jsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Form } from 'react-bootstrap';
|
||||||
|
|
||||||
|
const SelectWithOutPrice = ({
|
||||||
|
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 className='light-grey rounded-8' 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>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
SelectWithOutPrice.propTypes = {
|
||||||
|
values: PropTypes.array,
|
||||||
|
name: PropTypes.string,
|
||||||
|
label: PropTypes.string,
|
||||||
|
value: PropTypes.string,
|
||||||
|
onChange: PropTypes.func,
|
||||||
|
className: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SelectWithOutPrice;
|
||||||
48
Lab5/src/components/lines/form/LinesForm.jsx
Normal file
48
Lab5/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 formStyle formSizeStyle rounded-8 mx-auto' 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 dark-grey rounded-pill text-light' onClick={() => onBack()}>
|
||||||
|
Назад
|
||||||
|
</Button>
|
||||||
|
<Button className='col-5 col-lg-2 m-0 ms-2 purple rounded-pill text-light' type='submit'>
|
||||||
|
Сохранить
|
||||||
|
</Button>
|
||||||
|
</Form.Group>
|
||||||
|
</Form>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesForm.propTypes = {
|
||||||
|
id: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesForm;
|
||||||
3
Lab5/src/components/lines/form/LinesItemForm.css
Normal file
3
Lab5/src/components/lines/form/LinesItemForm.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
#image-preview {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
35
Lab5/src/components/lines/form/LinesItemForm.jsx
Normal file
35
Lab5/src/components/lines/form/LinesItemForm.jsx
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import imgPlaceholder from '../../../assets/placeHolder.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 (
|
||||||
|
<>
|
||||||
|
<div className='text-center'>
|
||||||
|
<img className='rounded-8' alt='placeholder'
|
||||||
|
src={item.image || imgPlaceholder} height={200} />
|
||||||
|
</div>
|
||||||
|
<Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
|
||||||
|
required />
|
||||||
|
<Input name='price' label='Цена' value={item.price} onChange={handleChange}
|
||||||
|
type='number' min='1000.0' step='0.50' required />
|
||||||
|
<Input name='count' label='Количество' value={item.count} onChange={handleChange}
|
||||||
|
type='number' min='1' step='1' required />
|
||||||
|
<Input name='image' label='Изображение' onChange={handleChange}
|
||||||
|
type='file' accept='image/*' />
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesItemForm.propTypes = {
|
||||||
|
item: PropTypes.object,
|
||||||
|
handleChange: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesItemForm;
|
||||||
13
Lab5/src/components/lines/form/LogIn.jsx
Normal file
13
Lab5/src/components/lines/form/LogIn.jsx
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import Input from '../../input/Input.jsx';
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
|
const LogIn = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Input label="Имя" name='name' className='light-grey' type='string' required/>
|
||||||
|
<Input label='Пароль' name='password' className='light-grey' type='string' required/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default LogIn;
|
||||||
15
Lab5/src/components/lines/form/NewReview.jsx
Normal file
15
Lab5/src/components/lines/form/NewReview.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import PropTypes from "prop-types";
|
||||||
|
import {Textarea} from "react-bootstrap-icons";
|
||||||
|
|
||||||
|
const NewReview = ({handleChange}) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Textarea label='Текст Отзыва' name='review' className='light-grey' type='text' onChange={handleChange} required/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
NewReview.propTypes ={
|
||||||
|
handleChange: PropTypes.func,
|
||||||
|
}
|
||||||
|
export default NewReview;
|
||||||
15
Lab5/src/components/lines/form/Register.jsx
Normal file
15
Lab5/src/components/lines/form/Register.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import Input from '../../input/Input.jsx';
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
|
||||||
|
const Register = () => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Input label="Имя" name='name' className='light-grey' type='string' required/>
|
||||||
|
<Input label="Адрес электронной почты" name='mail' className='light-grey' type='string' required/>
|
||||||
|
<Input label='Пароль' name='password' className='light-grey' type='string' required/>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default Register;
|
||||||
34
Lab5/src/components/lines/hooks/LinesDeleteModalHook.js
Normal file
34
Lab5/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
Lab5/src/components/lines/hooks/LinesFilterHook.js
Normal file
28
Lab5/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;
|
||||||
28
Lab5/src/components/lines/hooks/LinesHook.js
Normal file
28
Lab5/src/components/lines/hooks/LinesHook.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
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();
|
||||||
|
}, [linesRefresh, typeFilter]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
lines,
|
||||||
|
handleLinesChange,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useLines;
|
||||||
85
Lab5/src/components/lines/hooks/LinesItemFormHook.js
Normal file
85
Lab5/src/components/lines/hooks/LinesItemFormHook.js
Normal file
@ -0,0 +1,85 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import getBase64FromFile from '../../utils/Base64';
|
||||||
|
import LinesApiService from '../service/LinesApiService';
|
||||||
|
import useLinesItem from './LinesItemHook';
|
||||||
|
import useTypes from "../../types/hooks/TypesHook.js";
|
||||||
|
|
||||||
|
const useLinesItemForm = (id, linesChangeHandle) => {
|
||||||
|
const { item, setItem } = useLinesItem(id);
|
||||||
|
const {types} = useTypes();
|
||||||
|
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const resetValidity = () => {
|
||||||
|
setValidated(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getLineObject = (formData) => {
|
||||||
|
const typeId = parseInt(formData.typeId, 10);
|
||||||
|
const price = parseFloat(formData.price);
|
||||||
|
const count = parseInt(formData.count, 10);
|
||||||
|
const sum = parseFloat(price * count);
|
||||||
|
const benefit = parseFloat((types.at(formData.typeId-1).basePrice-price)*count);
|
||||||
|
const image = formData.image.startsWith('data:image') ? formData.image : '';
|
||||||
|
return {
|
||||||
|
typeId: typeId.toString(),
|
||||||
|
price: price.toString(),
|
||||||
|
count: count.toString(),
|
||||||
|
sum: sum.toString(),
|
||||||
|
benefit: benefit.toString(),
|
||||||
|
image,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
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;
|
||||||
34
Lab5/src/components/lines/hooks/LinesItemHook.js
Normal file
34
Lab5/src/components/lines/hooks/LinesItemHook.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import LinesApiService from '../service/LinesApiService';
|
||||||
|
|
||||||
|
const useLinesItem = (id) => {
|
||||||
|
const emptyItem = {
|
||||||
|
id: '',
|
||||||
|
typeId: '',
|
||||||
|
price: '0',
|
||||||
|
count: '0',
|
||||||
|
image: '',
|
||||||
|
};
|
||||||
|
const [item, setItem] = useState({ ...emptyItem });
|
||||||
|
|
||||||
|
const getItem = async (itemId = undefined) => {
|
||||||
|
if (itemId && itemId > 0) {
|
||||||
|
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;
|
||||||
5
Lab5/src/components/lines/service/LinesApiService.js
Normal file
5
Lab5/src/components/lines/service/LinesApiService.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import ApiService from '../../api/ApiService';
|
||||||
|
|
||||||
|
const LinesApiService = new ApiService('lines');
|
||||||
|
|
||||||
|
export default LinesApiService;
|
||||||
54
Lab5/src/components/lines/table/Lines.jsx
Normal file
54
Lab5/src/components/lines/table/Lines.jsx
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
import { Button, ButtonGroup } from 'react-bootstrap';
|
||||||
|
import { Link, useNavigate } from 'react-router-dom';
|
||||||
|
import ModalConfirm from '../../modal/ModalConfirm.jsx';
|
||||||
|
import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
|
||||||
|
import useTypeFilter from '../hooks/LinesFilterHook';
|
||||||
|
import useLines from '../hooks/LinesHook';
|
||||||
|
import LinesTable from './LinesTable.jsx';
|
||||||
|
import LinesTableRow from './LinesTableRow.jsx';
|
||||||
|
import React from "react";
|
||||||
|
import SelectWithOutPrice from "../../input/SelectWithOutPrice.jsx";
|
||||||
|
|
||||||
|
const Lines = () => {
|
||||||
|
const { types, currentFilter, handleFilterChange } = useTypeFilter();
|
||||||
|
|
||||||
|
const { lines, handleLinesChange } = useLines(currentFilter);
|
||||||
|
|
||||||
|
const {
|
||||||
|
isDeleteModalShow,
|
||||||
|
showDeleteModal,
|
||||||
|
handleDeleteConfirm,
|
||||||
|
handleDeleteCancel,
|
||||||
|
} = useLinesDeleteModal(handleLinesChange);
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
const showEditPage = (id) => {
|
||||||
|
navigate(`/page-edit/${id}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='formStyle formSizeStyle rounded-8 mx-auto p-2 hfitcon'>
|
||||||
|
<ButtonGroup>
|
||||||
|
<Button as={Link} to={'/page-edit'} variant="dark" className="btn purple text-light rounded-pill">Добавить курс</Button>
|
||||||
|
</ButtonGroup>
|
||||||
|
<SelectWithOutPrice className='mt-2' values={types} label='Фильтр по категориям'
|
||||||
|
value={currentFilter} onChange={handleFilterChange} />
|
||||||
|
<LinesTable>
|
||||||
|
{
|
||||||
|
lines.map((line, index) =>
|
||||||
|
<LinesTableRow className='no-color' key={line.id}
|
||||||
|
index={index} line={line}
|
||||||
|
onDelete={() => showDeleteModal(line.id)}
|
||||||
|
onEditInPage={() => showEditPage(line.id)}
|
||||||
|
/>)
|
||||||
|
}
|
||||||
|
</LinesTable>
|
||||||
|
<ModalConfirm show={isDeleteModalShow}
|
||||||
|
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
|
||||||
|
title='Удаление' message='Удалить элемент?' />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Lines;
|
||||||
33
Lab5/src/components/lines/table/LinesTable.jsx
Normal file
33
Lab5/src/components/lines/table/LinesTable.jsx
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Table } from 'react-bootstrap';
|
||||||
|
import React from "react";
|
||||||
|
|
||||||
|
const LinesTable = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<div className='overflow-x-auto hfitcon maxh-400 p-0'>
|
||||||
|
<Table className="table" responsive>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th scope="col" className="fw-bold text-center no-color">№</th>
|
||||||
|
<th scope="col" className="w-25 fw-bold text-center no-color">Курс</th>
|
||||||
|
<th scope="col" className="w-25 fw-bold text-center no-color">Цена</th>
|
||||||
|
<th scope="col" className="fw-bold minW-160 text-center no-color">Кол-во занятий</th>
|
||||||
|
<th scope="col" className="w-25 fw-bold text-center no-color">Сумма</th>
|
||||||
|
<th scope="col" className="w-25 fw-bold text-center no-color">Выгода</th>
|
||||||
|
<th scope="col" className="no-color"></th>
|
||||||
|
<th scope="col" className="no-color"></th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody className="fw-bold overflow-y-scroll">
|
||||||
|
{children}
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesTable.propTypes = {
|
||||||
|
children: PropTypes.node,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesTable;
|
||||||
34
Lab5/src/components/lines/table/LinesTableRow.jsx
Normal file
34
Lab5/src/components/lines/table/LinesTableRow.jsx
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import EditIcon from '../../../assets/pen-to-square.png';
|
||||||
|
import Trash from '../../../assets/trash.png';
|
||||||
|
|
||||||
|
const LinesTableRow = ({
|
||||||
|
index, line, onDelete, onEditInPage,
|
||||||
|
}) => {
|
||||||
|
const handleAnchorClick = (event, action) => {
|
||||||
|
event.preventDefault();
|
||||||
|
action();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<tr className='no-color'>
|
||||||
|
<th className='no-color text-center' scope="row">{index + 1}</th>
|
||||||
|
<td className='no-color text-center'>{line.type.name}</td>
|
||||||
|
<td className='no-color text-center'>{parseFloat(line.price).toFixed(2)}</td>
|
||||||
|
<td className='no-color text-center'>{line.count}</td>
|
||||||
|
<td className='no-color text-center'>{parseFloat(line.sum).toFixed(2)}</td>
|
||||||
|
<td className='no-color text-center'>{parseFloat(line.benefit).toFixed(2)}</td>
|
||||||
|
<td className='no-color text-center'><a href="#" onClick={(event) => handleAnchorClick(event, onEditInPage)}><img src={EditIcon} height={20}/></a></td>
|
||||||
|
<td className='no-color text-center'><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><img src={Trash}/></a></td>
|
||||||
|
</tr>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
LinesTableRow.propTypes = {
|
||||||
|
index: PropTypes.number,
|
||||||
|
line: PropTypes.object,
|
||||||
|
onDelete: PropTypes.func,
|
||||||
|
onEditInPage: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LinesTableRow;
|
||||||
8
Lab5/src/components/modal/Modal.css
Normal file
8
Lab5/src/components/modal/Modal.css
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
.modal-dialog-style{
|
||||||
|
height: fit-content !important;
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
.modalStyle{
|
||||||
|
background-color: #9b9b9b !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
47
Lab5/src/components/modal/ModalConfirm.jsx
Normal file
47
Lab5/src/components/modal/ModalConfirm.jsx
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Button, Modal } from 'react-bootstrap';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
|
import './Modal.css';
|
||||||
|
import Input from "../input/Input.jsx";
|
||||||
|
|
||||||
|
const ModalConfirm = ({
|
||||||
|
show, title, message, onConfirm, onClose
|
||||||
|
}) => {
|
||||||
|
|
||||||
|
return createPortal(
|
||||||
|
<Modal show={show} onHide={() => onClose()}>
|
||||||
|
<div className='modalStyle rounded-3'>
|
||||||
|
<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 className='col-5 m-0 me-2 dark-grey rounded-pill'
|
||||||
|
onClick={() => onClose()}>
|
||||||
|
Нет
|
||||||
|
</Button>
|
||||||
|
<Button className='col-5 m-0 ms-2 purple rounded-pill'
|
||||||
|
onClick={() => onConfirm()}>
|
||||||
|
Да
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</div>
|
||||||
|
</Modal>,
|
||||||
|
document.body,
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ModalConfirm.propTypes = {
|
||||||
|
show: PropTypes.bool,
|
||||||
|
title: PropTypes.string,
|
||||||
|
message: PropTypes.string,
|
||||||
|
onConfirm: PropTypes.func,
|
||||||
|
onClose: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ModalConfirm;
|
||||||
49
Lab5/src/components/modal/ModalForm.jsx
Normal file
49
Lab5/src/components/modal/ModalForm.jsx
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
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, onClick, children,
|
||||||
|
}) => {
|
||||||
|
const Click = () => {
|
||||||
|
onClick();
|
||||||
|
onClose();
|
||||||
|
}
|
||||||
|
return createPortal(
|
||||||
|
<Modal show={show} backdrop='static' onHide={() => onClose()}>
|
||||||
|
<div className='modalStyle rounded-3'>
|
||||||
|
<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}>
|
||||||
|
<Modal.Body>
|
||||||
|
{children}
|
||||||
|
</Modal.Body>
|
||||||
|
|
||||||
|
<Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
|
||||||
|
<Button className='col-5 m-0 me-2 dark-grey rounded-pill text-light'
|
||||||
|
onClick={() => onClose()}>
|
||||||
|
Отмена
|
||||||
|
</Button>
|
||||||
|
<Button className='col-5 m-0 ms-2 purple rounded-pill text-light' onClick={Click}>
|
||||||
|
Ввод
|
||||||
|
</Button>
|
||||||
|
</Modal.Footer>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</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
Lab5/src/components/modal/ModalHook.js
Normal file
21
Lab5/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;
|
||||||
15
Lab5/src/components/modal/ModalLogIn.jsx
Normal file
15
Lab5/src/components/modal/ModalLogIn.jsx
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import './Modal.css';
|
||||||
|
|
||||||
|
const ModalLogIn = ({input}) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<h6 className='text-dark'>Введите ваши контактные данные. Наш оператор свяжется с вами для уточнения деталей</h6>
|
||||||
|
<h6 className='text-dark'>Имя</h6>
|
||||||
|
<input name="name" className='width-100 rounded-pill light-grey p-2 mb-3' type='text' onChange={input.onChange}/>
|
||||||
|
<h6 className='text-dark'>Номер телефона</h6>
|
||||||
|
<input name="tel" className='width-100 rounded-pill light-grey p-2' type='tel' onChange={input.onChange}/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ModalLogIn;
|
||||||
4
Lab5/src/components/navigation/nav-bar.css
Normal file
4
Lab5/src/components/navigation/nav-bar.css
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
.navbar-style{
|
||||||
|
background-color: rgba(249,134,23,0.8) !important;
|
||||||
|
border-bottom: 7px solid #7c2d00 !important;
|
||||||
|
}
|
||||||
42
Lab5/src/components/navigation/nav-bar.jsx
Normal file
42
Lab5/src/components/navigation/nav-bar.jsx
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { Container, Nav, Navbar } from 'react-bootstrap';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import './nav-bar.css';
|
||||||
|
import label from '../../assets/lable.png';
|
||||||
|
|
||||||
|
const Navigation = ({ routes }) => {
|
||||||
|
const location = useLocation();
|
||||||
|
const indexPageLink = routes.filter((route) => route.index === false).shift();
|
||||||
|
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
|
||||||
|
|
||||||
|
return (
|
||||||
|
<header>
|
||||||
|
<Navbar expand='lg' bg='light' data-bs-theme='light' className='navbar-style'>
|
||||||
|
<Container fluid>
|
||||||
|
<Navbar.Brand as={Link} to={indexPageLink?.path ?? '/'}>
|
||||||
|
<button className="btn btn-outline-dark">
|
||||||
|
<img src={label} alt="Logo" height="60" className="align-text-top"></img>
|
||||||
|
</button>
|
||||||
|
</Navbar.Brand>
|
||||||
|
<Navbar.Toggle aria-controls='main-navbar' />
|
||||||
|
<Navbar.Collapse id='main-navbar'>
|
||||||
|
<Nav className='me-auto link' activeKey={location.pathname}>
|
||||||
|
{
|
||||||
|
pages.map((page) =>
|
||||||
|
<Nav.Link as={Link} className="fw-bold fs-3 mx-3" key={page.path} eventKey={page.path} to={page.path ?? '/'}>
|
||||||
|
{page.title}
|
||||||
|
</Nav.Link>)
|
||||||
|
}
|
||||||
|
</Nav>
|
||||||
|
</Navbar.Collapse>
|
||||||
|
</Container>
|
||||||
|
</Navbar >
|
||||||
|
</header>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
Navigation.propTypes = {
|
||||||
|
routes: PropTypes.array,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navigation;
|
||||||
BIN
Lab5/src/components/reviews.zip
Normal file
BIN
Lab5/src/components/reviews.zip
Normal file
Binary file not shown.
20
Lab5/src/components/reviews/Reviews/ReviewCard.jsx
Normal file
20
Lab5/src/components/reviews/Reviews/ReviewCard.jsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import Trash from '../../../assets/trash.png';
|
||||||
|
|
||||||
|
const ReviewCard = ({item, onDelete}) => {
|
||||||
|
const handleAnchorClick = (event, action) => {
|
||||||
|
event.preventDefault();
|
||||||
|
action();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="text-start p-2 rounded-8 my-2 light-grey hfitcon wfitcon">
|
||||||
|
<div className='row'>
|
||||||
|
<h5 className="fw-normal text-start text-dark col">{item.name}</h5>
|
||||||
|
<a href="#" className='col text-end me-2' onClick={(event) => handleAnchorClick(event, onDelete)}><img src={Trash}/></a>
|
||||||
|
</div>
|
||||||
|
<h6>{item.text}</h6>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ReviewCard;
|
||||||
59
Lab5/src/components/reviews/Reviews/Reviews.jsx
Normal file
59
Lab5/src/components/reviews/Reviews/Reviews.jsx
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
import { Button } from 'react-bootstrap';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import ModalConfirm from '../../modal/ModalConfirm.jsx';
|
||||||
|
import ModalForm from '../../modal/ModalForm.jsx';
|
||||||
|
import useReviews from "../hooks/RevievsHook.js";
|
||||||
|
import useReviewsFormModal from "../hooks/ReviewsFormModalHook.js";
|
||||||
|
import ReviewsItemForm from "./ReviewsItemForm.jsx";
|
||||||
|
import ReviewCard from "./ReviewCard.jsx";
|
||||||
|
import useReviewsDeleteModal from "../hooks/ReviewsDeleteModalHook.js";
|
||||||
|
|
||||||
|
const Reviews = () => {
|
||||||
|
const { reviews, handleReviewsChange } = useReviews();
|
||||||
|
|
||||||
|
const {
|
||||||
|
isDeleteModalShow,
|
||||||
|
showDeleteModal,
|
||||||
|
handleDeleteConfirm,
|
||||||
|
handleDeleteCancel,
|
||||||
|
} = useReviewsDeleteModal(handleReviewsChange);
|
||||||
|
|
||||||
|
const {
|
||||||
|
isFormModalShow,
|
||||||
|
isFormValidated,
|
||||||
|
showFormModal,
|
||||||
|
currentItem,
|
||||||
|
handleItemChange,
|
||||||
|
handleFormSubmit,
|
||||||
|
handleFormClose,
|
||||||
|
} = useReviewsFormModal(handleReviewsChange);
|
||||||
|
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='formStyle formSizeStyle rounded-8 p-2 mx-auto'>
|
||||||
|
<Button variant='info' className='rounded-pill ms-3 mb-3 purple text-light' onClick={() => showFormModal()}>
|
||||||
|
Написать отзыв
|
||||||
|
</Button>
|
||||||
|
<div className='container overflow-y-auto height-500'>
|
||||||
|
{
|
||||||
|
reviews.map((item) =>
|
||||||
|
<ReviewCard key={item.id} item={item}
|
||||||
|
onDelete={() => showDeleteModal(item.id)}/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</div>
|
||||||
|
<ModalConfirm show={isDeleteModalShow}
|
||||||
|
onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
|
||||||
|
title='Удаление' message='Удалить отзыв?' />
|
||||||
|
<ModalForm show={isFormModalShow} validated={isFormValidated}
|
||||||
|
onSubmit={handleFormSubmit} onClose={handleFormClose}
|
||||||
|
title='Новый отзыв'>
|
||||||
|
<ReviewsItemForm item={currentItem} handleChange={handleItemChange} />
|
||||||
|
</ModalForm>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Reviews;
|
||||||
22
Lab5/src/components/reviews/Reviews/ReviewsItemForm.jsx
Normal file
22
Lab5/src/components/reviews/Reviews/ReviewsItemForm.jsx
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import Input from "../../input/Input.jsx";
|
||||||
|
import PropTypes from "prop-types";
|
||||||
|
import LinesItemForm from "../../lines/form/LinesItemForm.jsx";
|
||||||
|
|
||||||
|
|
||||||
|
const ReviewsItemForm = ({item, handleChange}) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Input name='name' label='Имя' value={item.name} onChange={handleChange}
|
||||||
|
type='text' required />
|
||||||
|
<Input name='text' label='Текст отзыва' value={item.text} onChange={handleChange}
|
||||||
|
type='text' required/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
ReviewsItemForm.propTypes = {
|
||||||
|
item: PropTypes.object,
|
||||||
|
handleChange: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ReviewsItemForm;
|
||||||
24
Lab5/src/components/reviews/hooks/RevievsHook.js
Normal file
24
Lab5/src/components/reviews/hooks/RevievsHook.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import ReviewApiService from "../service/ReviewApiService.js";
|
||||||
|
|
||||||
|
const useReviews = () => {
|
||||||
|
const [reviewsRefresh, setReviewsRefresh] = useState(false);
|
||||||
|
const [reviews, setReviews] = useState([]);
|
||||||
|
const handleReviewsChange = () => setReviewsRefresh(!reviewsRefresh);
|
||||||
|
|
||||||
|
const getReviews = async () => {
|
||||||
|
const data = await ReviewApiService.getAll();
|
||||||
|
setReviews(data ?? []);
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getReviews();
|
||||||
|
}, [reviewsRefresh]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
reviews,
|
||||||
|
handleReviewsChange,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useReviews;
|
||||||
34
Lab5/src/components/reviews/hooks/ReviewsDeleteModalHook.js
Normal file
34
Lab5/src/components/reviews/hooks/ReviewsDeleteModalHook.js
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import useModal from '../../modal/ModalHook';
|
||||||
|
import ReviewsApiService from "../service/ReviewApiService.js";
|
||||||
|
|
||||||
|
const useReviewsDeleteModal = (linesChangeHandle, admin) => {
|
||||||
|
const { isModalShow, showModal, hideModal } = useModal();
|
||||||
|
const [currentId, setCurrentId] = useState(0);
|
||||||
|
|
||||||
|
const showModalDialog = (id) => {
|
||||||
|
showModal();
|
||||||
|
setCurrentId(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClose = () => {
|
||||||
|
hideModal();
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDelete = async () => {
|
||||||
|
await ReviewsApiService.delete(currentId);
|
||||||
|
linesChangeHandle();
|
||||||
|
toast.success('Элемент успешно удален', { id: 'LinesTable' });
|
||||||
|
onClose();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isDeleteModalShow: isModalShow,
|
||||||
|
showDeleteModal: showModalDialog,
|
||||||
|
handleDeleteConfirm: onDelete,
|
||||||
|
handleDeleteCancel: onClose,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useReviewsDeleteModal;
|
||||||
45
Lab5/src/components/reviews/hooks/ReviewsFormModalHook.js
Normal file
45
Lab5/src/components/reviews/hooks/ReviewsFormModalHook.js
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import useModal from '../../modal/ModalHook';
|
||||||
|
import useReviewsItemForm from "./ReviewsItemFormHook.js";
|
||||||
|
|
||||||
|
const useReviewsFormModal = (reviewsChangeHandle) => {
|
||||||
|
const { isModalShow, showModal, hideModal } = useModal();
|
||||||
|
const [currentId, setCurrentId] = useState(0);
|
||||||
|
|
||||||
|
const {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
resetValidity,
|
||||||
|
} = useReviewsItemForm(currentId, reviewsChangeHandle);
|
||||||
|
|
||||||
|
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 useReviewsFormModal;
|
||||||
62
Lab5/src/components/reviews/hooks/ReviewsItemFormHook.js
Normal file
62
Lab5/src/components/reviews/hooks/ReviewsItemFormHook.js
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
import { useState } from 'react';
|
||||||
|
import toast from 'react-hot-toast';
|
||||||
|
import getBase64FromFile from '../../utils/Base64';
|
||||||
|
import ReviewApiService from "../service/ReviewApiService.js";
|
||||||
|
import useReviewsItem from "./ReviewsItemHook.js";
|
||||||
|
|
||||||
|
const useReviewsItemForm = (id, linesChangeHandle) => {
|
||||||
|
const { item, setItem } = useReviewsItem(id);
|
||||||
|
|
||||||
|
const [validated, setValidated] = useState(false);
|
||||||
|
|
||||||
|
const resetValidity = () => {
|
||||||
|
setValidated(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getReviewObject = (formData) => {
|
||||||
|
const name = formData.name;
|
||||||
|
const text = formData.text;
|
||||||
|
return {
|
||||||
|
name: name.toString(),
|
||||||
|
text: text.toString()
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleChange = (event) => {
|
||||||
|
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 = getReviewObject(item);
|
||||||
|
if (form.checkValidity()) {
|
||||||
|
if (id === undefined) {
|
||||||
|
await ReviewApiService.create(body);
|
||||||
|
} else {
|
||||||
|
await ReviewApiService.update(id, body);
|
||||||
|
}
|
||||||
|
if (linesChangeHandle) linesChangeHandle();
|
||||||
|
toast.success('Отзыв успешно сохранен', { id: 'Reviews' });
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
setValidated(true);
|
||||||
|
return false;
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
validated,
|
||||||
|
handleSubmit,
|
||||||
|
handleChange,
|
||||||
|
resetValidity,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useReviewsItemForm;
|
||||||
31
Lab5/src/components/reviews/hooks/ReviewsItemHook.js
Normal file
31
Lab5/src/components/reviews/hooks/ReviewsItemHook.js
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { useEffect, useState } from 'react';
|
||||||
|
import ReviewApiService from "../service/ReviewApiService.js";
|
||||||
|
|
||||||
|
const useReviewsItem = (id) => {
|
||||||
|
const emptyItem = {
|
||||||
|
id: '',
|
||||||
|
name: '',
|
||||||
|
text: ''
|
||||||
|
};
|
||||||
|
const [item, setItem] = useState({ ...emptyItem });
|
||||||
|
|
||||||
|
const getItem = async (itemId = undefined) => {
|
||||||
|
if (itemId && itemId > 0) {
|
||||||
|
const data = await ReviewApiService.get(itemId);
|
||||||
|
setItem(data);
|
||||||
|
} else {
|
||||||
|
setItem({ ...emptyItem });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getItem(id);
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
setItem,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export default useReviewsItem;
|
||||||
5
Lab5/src/components/reviews/service/ReviewApiService.js
Normal file
5
Lab5/src/components/reviews/service/ReviewApiService.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import ApiService from '../../api/ApiService';
|
||||||
|
|
||||||
|
const ReviewsApiService = new ApiService('reviews');
|
||||||
|
|
||||||
|
export default ReviewsApiService;
|
||||||
21
Lab5/src/components/types/hooks/TypesHook.js
Normal file
21
Lab5/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;
|
||||||
5
Lab5/src/components/types/service/TypesApiService.js
Normal file
5
Lab5/src/components/types/service/TypesApiService.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import ApiService from '../../api/ApiService';
|
||||||
|
|
||||||
|
const TypesApiService = new ApiService('types');
|
||||||
|
|
||||||
|
export default TypesApiService;
|
||||||
15
Lab5/src/components/utils/Base64.js
Normal file
15
Lab5/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;
|
||||||
61
Lab5/src/main.jsx
Normal file
61
Lab5/src/main.jsx
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import '../node_modules/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 './myStyle.css'
|
||||||
|
import ErrorPage from './pages/ErrorPage.jsx';
|
||||||
|
import MainPage from './pages/MainPage.jsx';
|
||||||
|
import Courses from './pages/Courses.jsx';
|
||||||
|
import Contacts from './pages/Contacts.jsx';
|
||||||
|
import Reviews from './pages/Reviews.jsx';
|
||||||
|
import Admin from './pages/Admin.jsx';
|
||||||
|
import PageEdit from './pages/page-edit.jsx';
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
index: true,
|
||||||
|
path: '/',
|
||||||
|
element: <MainPage />,
|
||||||
|
title: 'Главная',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Courses',
|
||||||
|
element: <Courses />,
|
||||||
|
title: 'Курсы',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Contacts',
|
||||||
|
element: <Contacts />,
|
||||||
|
title: 'Контакты',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Reviews',
|
||||||
|
element: <Reviews />,
|
||||||
|
title: 'Отзывы',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/Admin',
|
||||||
|
element: <Admin />,
|
||||||
|
title: 'Админ',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/page-edit/:id?',
|
||||||
|
element: <PageEdit />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const router = createBrowserRouter([
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
element: <App routes={routes} />,
|
||||||
|
children: routes,
|
||||||
|
errorElement: <ErrorPage />,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
|
||||||
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
93
Lab5/src/myStyle.css
Normal file
93
Lab5/src/myStyle.css
Normal file
@ -0,0 +1,93 @@
|
|||||||
|
.pageBackground{
|
||||||
|
background-image: url('./assets/MainBackGround.jpg') !important;
|
||||||
|
background-attachment: fixed !important;
|
||||||
|
height: fit-content !important; min-height: 87vh !important;
|
||||||
|
}
|
||||||
|
.mainPageInf{
|
||||||
|
width: 70% !important;
|
||||||
|
min-width: 320px !important;
|
||||||
|
height: fit-content !important;
|
||||||
|
background-color: rgba(66,66,66,0.8) !important;
|
||||||
|
padding:2% !important;
|
||||||
|
border-radius: 20px !important;
|
||||||
|
}
|
||||||
|
.rounded-8{
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.modal-dialog-style{
|
||||||
|
height: fit-content !important;
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
.modalStyle{
|
||||||
|
background-color: #9b9b9b !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.PictureButton{
|
||||||
|
height: 200px !important;
|
||||||
|
width: 300px !important;
|
||||||
|
}
|
||||||
|
.purple{
|
||||||
|
background-color: #8c00e2 !important;
|
||||||
|
}
|
||||||
|
.dark-grey{
|
||||||
|
background-color: #424242 !important;
|
||||||
|
}
|
||||||
|
.light-grey{
|
||||||
|
background-color: #d9d9d9 !important;
|
||||||
|
}
|
||||||
|
.no-color{
|
||||||
|
background-color: rgba(155,155,155,0) !important;
|
||||||
|
text-emphasis-color: rgba(155,155,155,0) !important;
|
||||||
|
}
|
||||||
|
.formStyle{
|
||||||
|
background-color: rgba(155,155,155,0.8) !important;
|
||||||
|
border: 7px solid #424242 !important
|
||||||
|
}
|
||||||
|
.formSizeStyle{
|
||||||
|
width: 70% !important;
|
||||||
|
min-width: 320px!important;
|
||||||
|
}
|
||||||
|
.accauntPanel{
|
||||||
|
height: 100px !important;
|
||||||
|
width: 290px !important;
|
||||||
|
}
|
||||||
|
.wfitcon{
|
||||||
|
width: fit-content !important;
|
||||||
|
}
|
||||||
|
.hfitcon{
|
||||||
|
height: fit-content !important;
|
||||||
|
}
|
||||||
|
.minH-500{
|
||||||
|
min-height: 500px !important;
|
||||||
|
}
|
||||||
|
.height-420{
|
||||||
|
height: 420px;
|
||||||
|
}
|
||||||
|
.minW-160{
|
||||||
|
min-width: 160px !important;
|
||||||
|
}
|
||||||
|
.minW-260{
|
||||||
|
min-width: 260px !important;
|
||||||
|
}
|
||||||
|
.maxh-400{
|
||||||
|
max-height: 400px !important;
|
||||||
|
}
|
||||||
|
.width-100{
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
.width-90{
|
||||||
|
width: 90% !important;
|
||||||
|
}
|
||||||
|
.height-200{
|
||||||
|
height: 200px !important;
|
||||||
|
}
|
||||||
|
.height-300{
|
||||||
|
height: 300px !important;
|
||||||
|
}
|
||||||
|
.height-450{
|
||||||
|
height: 450px !important;
|
||||||
|
}
|
||||||
|
.height-500{
|
||||||
|
height: 500px !important;
|
||||||
|
}
|
||||||
|
.bg-image{position:relative;overflow:hidden;background-repeat:no-repeat;background-size:cover;background-position:50%}
|
||||||
9
Lab5/src/pages/Admin.jsx
Normal file
9
Lab5/src/pages/Admin.jsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import Lines from "../components/lines/table/Lines.jsx";
|
||||||
|
|
||||||
|
const Admin = () => {
|
||||||
|
return(
|
||||||
|
<Lines className='p-2 formStyle formSizeStyle rounded-8 my-4' />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Admin;
|
||||||
26
Lab5/src/pages/Contacts.jsx
Normal file
26
Lab5/src/pages/Contacts.jsx
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import Map from '../assets/map.png';
|
||||||
|
|
||||||
|
const Contacts = () => {
|
||||||
|
return(
|
||||||
|
<div className="container mx-auto my-5 p-2 pb-5 rounded-8 fw-bold formStyle formSizeStyle hfitcon">
|
||||||
|
<div className="text-dark mx-auto fw-bold fs-3 mb-3 wfitcon">
|
||||||
|
Контактная информация
|
||||||
|
</div>
|
||||||
|
<div className="row row-cols-1 row-cols-xl-2">
|
||||||
|
<div className="col-12 col-lg-6 mx-auto text-center">
|
||||||
|
<img src={Map} alt='map' className='width-100'/>
|
||||||
|
</div>
|
||||||
|
<div className="col col-12 col-lg-6 text-dark fs-4 fw-bold text-center text-lg-start mx-auto mt-4 mt-lg-0 wfitcon">
|
||||||
|
Группа в ВКонтакте <br/>
|
||||||
|
<a className="text-reset" href="https://vk.com/mackmaffin">@NaStolb73</a> <br/>
|
||||||
|
Телефон для связи <br/>
|
||||||
|
8-800-555-35-35 <br/>
|
||||||
|
Адрес электронной почты<br/>
|
||||||
|
valitzhoska73@gmail.com
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Contacts;
|
||||||
18
Lab5/src/pages/Courses.jsx
Normal file
18
Lab5/src/pages/Courses.jsx
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
import useLines from "../components/lines/hooks/LinesHook.js";
|
||||||
|
import useTypeFilter from "../components/lines/hooks/LinesFilterHook.js";
|
||||||
|
import CourseForm from "../components/Courses/CourseForm.jsx";
|
||||||
|
import CourseCard from "../components/Courses/CourseCard.jsx";
|
||||||
|
import SelectWithOutPrice from "../components/input/SelectWithOutPrice.jsx";
|
||||||
|
import ModalForm from "../components/modal/ModalForm.jsx";
|
||||||
|
import useCoursesFormModal from '../components/Courses/hooks/CoursesFormModalHook';
|
||||||
|
import ModalLogIn from "../components/modal/ModalLogIn.jsx";
|
||||||
|
import CoursesBody from '../components/Courses/Courses.jsx';
|
||||||
|
|
||||||
|
const Courses = () => {
|
||||||
|
return (
|
||||||
|
<CoursesBody/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Courses;
|
||||||
|
|
||||||
19
Lab5/src/pages/ErrorPage.jsx
Normal file
19
Lab5/src/pages/ErrorPage.jsx
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import { Alert, Button, Container } from 'react-bootstrap';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|
||||||
|
const ErrorPage = () => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Container fluid className="p-2 row justify-content-center">
|
||||||
|
<Container className='col-md-6'>
|
||||||
|
<Alert variant="danger">
|
||||||
|
Страница не найдена
|
||||||
|
</Alert>
|
||||||
|
<Button className="w-25 mt-2 dark-grey" onClick={() => navigate(-1)}>Назад</Button>
|
||||||
|
</Container>
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ErrorPage;
|
||||||
16
Lab5/src/pages/MainPage.jsx
Normal file
16
Lab5/src/pages/MainPage.jsx
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
|
||||||
|
const MainPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="text-light mx-auto mt-3 fw-bold p-4 mainPageInf">
|
||||||
|
<h2>Рад приветствовать вас на моем сайте!</h2>
|
||||||
|
<h4 className="mt-4">Меня зовут Илья, я иструктор по экстремальному вождению с 15-летним стажем. В течение многих лет я участвовал и
|
||||||
|
побеждал во многих ралли заездах, таких как
|
||||||
|
"Париж-Дакар", "Симбирский тракт" и др.
|
||||||
|
</h4>
|
||||||
|
<h4 className="mt-4">Обучение экстримальному вождению добавит вам уверенности при езде не только по грунтовым дорогам, но и по асфальту,
|
||||||
|
а также в условиях снега, дождя и при других экстримальных ситуациях. Помните, что ваша безопасность на дороге зависит от ваших навыков вождения!</h4>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default MainPage;
|
||||||
9
Lab5/src/pages/Reviews.jsx
Normal file
9
Lab5/src/pages/Reviews.jsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import ReviewsForm from "../components/reviews/Reviews/Reviews.jsx";
|
||||||
|
|
||||||
|
const Reviews = () => {
|
||||||
|
return(
|
||||||
|
<ReviewsForm/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Reviews;
|
||||||
14
Lab5/src/pages/page-edit.jsx
Normal file
14
Lab5/src/pages/page-edit.jsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import placeHolder from '../assets/placeHolder.png';
|
||||||
|
import {Button} from "react-bootstrap";
|
||||||
|
import {Link, useParams} from "react-router-dom";
|
||||||
|
import LinesForm from "../components/lines/form/LinesForm.jsx";
|
||||||
|
|
||||||
|
const pageEdit = () => {
|
||||||
|
const {id} = useParams();
|
||||||
|
|
||||||
|
return(
|
||||||
|
<LinesForm id={id} />
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default pageEdit;
|
||||||
97
Lab5/style.css
Normal file
97
Lab5/style.css
Normal file
@ -0,0 +1,97 @@
|
|||||||
|
:root {
|
||||||
|
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-weight: 500;
|
||||||
|
color: #646cff;
|
||||||
|
text-decoration: inherit;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #535bf2;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 3.2em;
|
||||||
|
line-height: 1.1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
max-width: 1280px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
height: 6em;
|
||||||
|
padding: 1.5em;
|
||||||
|
will-change: filter;
|
||||||
|
transition: filter 300ms;
|
||||||
|
}
|
||||||
|
.logo:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #646cffaa);
|
||||||
|
}
|
||||||
|
.logo.vanilla:hover {
|
||||||
|
filter: drop-shadow(0 0 2em #f7df1eaa);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.read-the-docs {
|
||||||
|
color: #888;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
border-radius: 8px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
padding: 0.6em 1.2em;
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: inherit;
|
||||||
|
background-color: #1a1a1a;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: border-color 0.25s;
|
||||||
|
}
|
||||||
|
button:hover {
|
||||||
|
border-color: #646cff;
|
||||||
|
}
|
||||||
|
button:focus,
|
||||||
|
button:focus-visible {
|
||||||
|
outline: 4px auto -webkit-focus-ring-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
:root {
|
||||||
|
color: #213547;
|
||||||
|
background-color: #ffffff;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
color: #747bff;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
Lab5/vite.config.js
Normal file
13
Lab5/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,
|
||||||
|
},
|
||||||
|
});
|
||||||
BIN
Lab5/Отчет по ип 5.docx
Normal file
BIN
Lab5/Отчет по ип 5.docx
Normal file
Binary file not shown.
Loading…
Reference in New Issue
Block a user