IvanAlekseev1/Pibd-21_Alekseev_I.S._Internet_Programming
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

lab5

Browse Source
This commit is contained in:
VanyaAlekseev 2024-01-10 22:03:58 +04:00
parent 01bbbcc235
commit d7a8db79d4
64 changed files with 7362 additions and 423 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
.vscode/launch.json vendored Normal file
View File

@ -0,0 +1,15 @@
{
// Используйте IntelliSense, чтобы узнать о возможных атрибутах.
// Наведите указатель мыши, чтобы просмотреть описания существующих атрибутов.
// Для получения дополнительной информации посетите: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Запустить Chrome на localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceFolder}"
}
]
}

8
IP/.eslintrc.cjs
View File

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

129
IP/data.json
View File

File diff suppressed because one or more lines are too long

2762
IP/node_modules/.package-lock.json generated vendored
View File

File diff suppressed because it is too large Load Diff

88
IP/node_modules/.vite/deps/_metadata.json generated vendored
View File

@ -1,71 +1,89 @@
{
"hash": "6f510a6f",
"browserHash": "73774a0d",
"hash": "aedcd79f",
"browserHash": "c983438f",
"optimized": {
"react": {
"src": "../../react/index.js",
"file": "react.js",
"fileHash": "78205ebd",
"fileHash": "2a3c6d21",
"needsInterop": true
},
"react/jsx-dev-runtime": {
"src": "../../react/jsx-dev-runtime.js",
"file": "react_jsx-dev-runtime.js",
"fileHash": "76a8c74c",
"fileHash": "671aca39",
"needsInterop": true
},
"react/jsx-runtime": {
"src": "../../react/jsx-runtime.js",
"file": "react_jsx-runtime.js",
"fileHash": "c0c44e83",
"fileHash": "74776e99",
"needsInterop": true
},
"prop-types": {
"src": "../../prop-types/index.js",
"file": "prop-types.js",
"fileHash": "e8e2e55c",
"needsInterop": true
},
"react-bootstrap": {
"src": "../../react-bootstrap/esm/index.js",
"file": "react-bootstrap.js",
"fileHash": "fb921d5f",
"needsInterop": false
},
"react-bootstrap-icons": {
"src": "../../react-bootstrap-icons/dist/index.js",
"file": "react-bootstrap-icons.js",
"fileHash": "b3cd386d",
"needsInterop": false
},
"react-dom/client": {
"src": "../../react-dom/client.js",
"file": "react-dom_client.js",
"fileHash": "101947c2",
"fileHash": "797e25c3",
"needsInterop": true
},
"react-router-dom": {
"src": "../../react-router-dom/dist/index.js",
"file": "react-router-dom.js",
"fileHash": "39215a24",
"fileHash": "d7f5780c",
"needsInterop": false
},
"prop-types": {
"src": "../../prop-types/index.js",
"file": "prop-types.js",
"fileHash": "ec4a0d2d",
"needsInterop": true
},
"react-bootstrap": {
"src": "../../react-bootstrap/esm/index.js",
"file": "react-bootstrap.js",
"fileHash": "6af79657",
"needsInterop": false
},
"react-hot-toast": {
"src": "../../react-hot-toast/dist/index.mjs",
"file": "react-hot-toast.js",
"fileHash": "a559165f",
"needsInterop": false
},
"react-bootstrap-icons": {
"src": "../../react-bootstrap-icons/dist/index.js",
"file": "react-bootstrap-icons.js",
"fileHash": "06fc89df",
"needsInterop": false
},
"axios": {
"src": "../../axios/index.js",
"file": "axios.js",
"fileHash": "12ab79c8",
"needsInterop": false
},
"react-dom": {
"src": "../../react-dom/index.js",
"file": "react-dom.js",
"fileHash": "fffca44b",
"needsInterop": true
}
},
"chunks": {
"chunk-5SWDWV4L": {
"file": "chunk-5SWDWV4L.js"
"chunk-UFCMWVQY": {
"file": "chunk-UFCMWVQY.js"
},
"chunk-OCHDJWGW": {
"file": "chunk-OCHDJWGW.js"
"chunk-2VGUONL3": {
"file": "chunk-2VGUONL3.js"
},
"chunk-A2ELGX47": {
"file": "chunk-A2ELGX47.js"
"chunk-ZT4DMYUS": {
"file": "chunk-ZT4DMYUS.js"
},
"chunk-ZVMIEU5R": {
"file": "chunk-ZVMIEU5R.js"
"chunk-RDZYK52F": {
"file": "chunk-RDZYK52F.js"
},
"chunk-UXIASGQL": {
"file": "chunk-UXIASGQL.js"
"chunk-5WWUZCGV": {
"file": "chunk-5WWUZCGV.js"
}
}
}

2765
IP/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

3
IP/package.json
View File

@ -16,6 +16,9 @@
"react-router-dom": "^6.18.0",
"react-hot-toast": "^2.4.1",
"axios": "^1.6.1",
"npm": "^10.2.5",
"install": "^0.13.0",
"lorem-ipsum": "^2.0.8",
"bootstrap": "^5.3.2",
"react-bootstrap": "^2.9.1",
"react-bootstrap-icons": "^1.10.3",

14
IP/src/App.jsx
View File

@ -1,19 +1,25 @@
import PropTypes from 'prop-types';
import { Container } from 'react-bootstrap';
import { Toaster } from 'react-hot-toast';
import { Outlet } from 'react-router-dom';
import './App.css';
import { CartProvider } from './components/cart/CartContext.jsx';
import Footer from './components/footer/Footer.jsx';
import Navigation from './components/navigation/Navigation.jsx';
import { UserProvider } from './components/users/UserContext.jsx';
const App = ({ routes }) => {
return (
<>
<UserProvider>
<CartProvider>
<Navigation routes={routes}></Navigation>
<Container className='p-2' as="main" fluid>
<Container className='p-2' as='main' fluid>
<Outlet />
</Container>
<Footer />
</>
<Toaster position='top-center' reverseOrder={true} />
</CartProvider>
</UserProvider>
);
};

BIN
IP/src/assets/200.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
IP/src/assets/assets/200.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

40
IP/src/components/api/ApiClient.js Normal file
View 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);

41
IP/src/components/api/ApiService.js Normal file
View File

@ -0,0 +1,41 @@
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}`);
}
async getByHandle(handle) {
return ApiClient.get(`${this.url}?handle=${handle}`);
}
async getByEmail(email) {
return ApiClient.get(`${this.url}?email=${email}`);
}
async getAllForUser(userId) {
return ApiClient.get(`${this.url}?userId=${userId}`);
}
}
export default ApiService;

1
IP/src/components/banner/Banner.jsx
View File

@ -1,3 +1,4 @@
/* eslint-disable linebreak-style */
/* eslint-disable eol-last */
import './Banner.css';
import useBannerHook from './BannerHook';

8
IP/src/components/cart/Cart.css Normal file
View File

@ -0,0 +1,8 @@
.cart-image {
width: 3.1rem;
padding: .25rem;
}
.cart-item {
height: auto;
}

157
IP/src/components/cart/Cart.jsx Normal file
View File

@ -0,0 +1,157 @@
import { Card, Button, ButtonGroup } from 'react-bootstrap';
import { Link, useNavigate } from 'react-router-dom';
import { DashLg, PlusLg, XLg } from 'react-bootstrap-icons';
import { useEffect, useState } from 'react';
import { Form } from 'react-bootstrap';
import './Cart.css';
import useCart from './CartHook.js';
const Cart = () => {
const navigate = useNavigate();
const [validated, setValidated] = useState(false);
const [name, setName] = useState('');
const [surname, setSurname] = useState('');
const [email, setEmail] = useState('');
const [phoneNumber, setPhoneNumber] = useState('');
useEffect(() => {
const storedUserData = localStorage.getItem('user');
console.log(`Action: ${storedUserData}`);
const storedUser = storedUserData ? JSON.parse(storedUserData) : {};
if (storedUser) {
setName(storedUser.handle || '');
setSurname(storedUser.surname || '');
setEmail(storedUser.email || '');
setPhoneNumber(storedUser.phoneNumber || '');
}
}, []);
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
const storedUserData = localStorage.getItem('user');
const storedUser = storedUserData ? JSON.parse(storedUserData) : {};
const newUserData = {
...storedUser,
handle: name,
surname: surname,
email: email,
phoneNumber: phoneNumber,
};
console.log(`Action: ${name}, Material Name: ${surname}, ${email}, ${phoneNumber}`);
localStorage.setItem('user', JSON.stringify(newUserData));
}
setValidated(true);
};
console.log(`handle: ${handleSubmit}`);
const handleLogout = () => {
localStorage.removeItem('user');
window.location.reload();
navigate('/Page1.jsx');
};
console.log(`user: ${handleLogout}`);
const {
cart,
getCartSum,
addToCart,
removeFromCart,
clearCart,
} = useCart();
return (
<main className="container-fluid justify-content-center px-lg-3">
<div className='row'>
<div className='col-lg-8'>
<div className='mb-2 mt-2 d-flex align-items-center col-lg-3'>
<strong className='flex-fill' style={{color: 'Black'}}>Корзина</strong>
<div className='btn-custom custom-rounded-btn'>
<Button onClick={() => clearCart()}>
<XLg /> Очистить
</Button>
</div>
</div>
{
cart.map((cartItem) =>
<Card key={cartItem.id} className='mb-2 '>
<Card.Body className='p-2 d-flex flex-column flex-sm-row align-items-center'>
<div className='cart-item flex-fill'>
<Link to={`/detailpage/${cartItem.ItName}`} style={{ color: 'black', outline: 'none' }}>
<img className='cart-image' src={cartItem.image} alt="Cart Image" />
{cartItem.ItName}
&nbsp;&nbsp;||&nbsp;&nbsp;
{cartItem.type.name}
</Link>
</div>
<div className='cart-item mt-2 mt-sm-0 d-flex flex-column align-items-center align-items-sm-end'>
<div>
{cartItem.price}
{' * '}
{cartItem.count}
{' = '}
{parseFloat(cartItem.price * cartItem.count).toFixed(2)}
</div>
<ButtonGroup className='mt-2 mt-sm-1' aria-label="Cart counter">
<Button style={{backgroundColor: '#5233ff', color: 'aqua'}} onClick={() => addToCart(cartItem)}>
<PlusLg />
</Button>
<Button style={{backgroundColor: '#ff5500'}} onClick={() => removeFromCart(cartItem)}>
<DashLg />
</Button>
</ButtonGroup>
</div>
</Card.Body>
</Card>)
}
<div className='mb-2 d-flex justify-content-end' style={{color: 'white'}}>
<strong>Итого: {getCartSum()} &#8381;</strong>
</div>
</div>
<div className='text-button-overlay col-lg-4'>
<Form noValidate validated={validated} onSubmit={handleSubmit}>
<h2 className="text-uppercase text-center mt-3" style={{ color: 'white'}}>Личный кабинет</h2>
<Form.Group className="mb-1">
<Form.Label>Ваше имя</Form.Label>
<Form.Control type="text" value={name} onChange={(e) => setName(e.target.value)} readOnly />
</Form.Group>
<Form.Group className="mb-1">
<Form.Label>Ваша фамилия</Form.Label>
<Form.Control type="text" value={surname} onChange={(e) => setSurname(e.target.value)} />
</Form.Group>
<Form.Group className="mb-1">
<Form.Label>Ваш адрес электронной почты</Form.Label>
<Form.Control type="email" value={email} onChange={(e) => setEmail(e.target.value)}/>
</Form.Group>
<Form.Group className="mb-1">
<Form.Label>Номер телефона</Form.Label>
<Form.Control type="tel"value={phoneNumber} onChange={(e) => setPhoneNumber(e.target.value)} />
</Form.Group>
<div className="d-flex justify-content-center mt-2 button-overlayAdd custom-rounded-btn">
<Button variant="warning" type="submit" id="saveButton">
Сохранить
</Button>
</div>
<div className="d-flex justify-content-center mt-2">
<Link className="btn btn-outline-danger" style={{ color: 'black'}} type="button" onClick={handleLogout} to="/">
Выйти
</Link>
</div>
</Form>
</div>
</div>
</main>
);
};
export default Cart;

30
IP/src/components/cart/CartContext.jsx Normal file
View File

@ -0,0 +1,30 @@
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]);
const cartContextValue = { cart, dispatch };
return (
<CartContext.Provider value={cartContextValue}>
{children}
</CartContext.Provider>
);
};
CartProvider.propTypes = {
children: PropTypes.node,
};
export default CartContext;

26
IP/src/components/cart/CartHook.js Normal file
View 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, cartItem) => {
return sum + (cartItem.price * cartItem.count);
}, 0)
?? 0,
).toFixed(2);
};
return {
cart,
getCartSum: () => cartSum(),
addToCart: (item) => dispatch(cartAdd(item)),
removeFromCart: (item) => dispatch(cartRemove(item)),
clearCart: () => dispatch(cartClear()),
};
};
export default useCart;

72
IP/src/components/cart/CartReducer.js Normal file
View File

@ -0,0 +1,72 @@
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: {
localStorage.removeItem("cart"); // Удаление данных из LocalStorage
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,
});

23
IP/src/components/input/Input.jsx Normal file
View 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
IP/src/components/input/Select.jsx Normal file
View 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
IP/src/components/lines/form/LinesForm.jsx Normal file
View 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
IP/src/components/lines/form/LinesItemForm.css Normal file
View File

@ -0,0 +1,3 @@
#image-preview {
width: 200px;
}

39
IP/src/components/lines/form/LinesItemForm.jsx Normal file
View File

@ -0,0 +1,39 @@
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 useMaterials from '../../types/hooks/MaterialsHook';
import './LinesItemForm.css';
const LinesItemForm = ({ item, handleChange }) => {
const { types } = useTypes();
const { materials } = useMaterials();
return (
<>
<div className='text-center'>
<img id='image-preview' className='rounded' alt='placeholder'
src={item.image || imgPlaceholder} />
</div>
<Input name='name' label='Название' value={item.name} onChange={handleChange} required />
<Select values={types} name='typeId' label='Товары' value={item.typeId} onChange={handleChange}
required />
<Input name='price' label='Цена' value={item.price} onChange={handleChange}
type='number' min='10000000.0' step='1000000' required />
<Input name='count' label='Количество' value={item.count} onChange={handleChange}
type='number' min='1' step='1' required />
<Select values={materials} name='materialId' label='Материалы' value={item.materialId} onChange={handleChange}
required />
<Input name='image' label='Изображение' onChange={handleChange}
type='file' accept='image/*' />
</>
);
};
LinesItemForm.propTypes = {
item: PropTypes.object,
handleChange: PropTypes.func,
};
export default LinesItemForm;

34
IP/src/components/lines/hooks/LinesDeleteModalHook.js Normal file
View 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
IP/src/components/lines/hooks/LinesFilterHook.js Normal file
View 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
IP/src/components/lines/hooks/LinesFormModalHook.js Normal file
View 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
IP/src/components/lines/hooks/LinesHook.js Normal file
View 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=material&_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;

85
IP/src/components/lines/hooks/LinesItemFormHook.js Normal file
View 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';
const useLinesItemForm = (id, linesChangeHandle) => {
const { item, setItem } = useLinesItem(id);
const [validated, setValidated] = useState(false);
const resetValidity = () => {
setValidated(false);
};
const getLineObject = (formData) => {
const ItName = formData.name;
const typeId = parseInt(formData.typeId, 10);
const price = parseFloat(formData.price).toFixed(2);
const count = formData.count;
const materialId = parseInt(formData.materialId, 10);
const sum = parseFloat(price * count).toFixed(2);
const image = formData.image.startsWith('data:image') ? formData.image : '';
return {
ItName: ItName.toString(),
typeId: typeId.toString(),
price: price.toString(),
count: count.toString(),
materialId: materialId.toString(),
sum: sum.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;

36
IP/src/components/lines/hooks/LinesItemHook.js Normal file
View File

@ -0,0 +1,36 @@
import { useEffect, useState } from 'react';
import LinesApiService from '../service/LinesApiService';
const useLinesItem = (id) => {
const emptyItem = {
id: '',
ItName: '',
typeId: '',
price: '0',
count: '0',
materialId: '',
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;

34
IP/src/components/lines/serverCatalog/Catalog.css Normal file
View File

@ -0,0 +1,34 @@
.product {
border: 1px solid #ccc; /* Серые границы */
padding: 15px;
margin: 10px;
background-color: #fff; /* Фон карточки */
border-radius: 5px; /* Закругленные углы */
}
.product-info {
text-align: center;
}
.product-info h2 {
color: #333; /* Цвет Названия */
font-weight: bold; /* Жирное Название */
margin-bottom: 10px;
}
.product-info p {
color: #666; /* Цвет Типа и Цены */
margin-bottom: 5px;
font-weight: bold; /* Жирный Тип и Цена */
}
.product-img img {
max-width: 100%;
height: auto;
border-bottom: 1px solid #ccc; /* Серая граница снизу изображения */
}
.button-overlayAdd {
margin-top: 10px;
text-align: center;
}

60
IP/src/components/lines/serverCatalog/Catalog.jsx Normal file
View File

@ -0,0 +1,60 @@
import Select from '../../input/Select.jsx';
import { Link } from 'react-router-dom';
import useTypeFilter from '../hooks/LinesFilterHook';
import useLines from '../hooks/LinesHook';
import useMaterials from '../../types/hooks/MaterialsHook';
import useCart from '../../cart/CartHook';
import { Button } from 'react-bootstrap';
import './Catalog.css';
const Catalog = () => {
const { materials } = useMaterials();
const { types, currentFilter, handleFilterChange } = useTypeFilter();
const { lines } = useLines(currentFilter, materials);
const { addToCart } = useCart();
return (
<>
<main className="container-fluid ml-2 mr-2">
<div className="col-lg-4 mt-0 text-white">
<Select
className={'mt-2'}
values={types}
label="Фильтр по товарам"
value={currentFilter}
onChange={handleFilterChange}
/>
</div>
<div className="container">
<div className="row">
{lines.map((product, index) => (
<div className="col-md-2 product mb-3" key={index}>
<div className="product-img">
<img src={product.image} alt={product.ItName} className="img-fluid product-image"></img>
</div>
<div className="product-info">
<h2>
<Link to={`/detailpage/${product.ItName}`} style={{ color: '#fafafa', outline: 'none' }}>
{product.ItName}
</Link>
</h2>
<p>Название: {product.ItName}</p>
<p>Тип: {product.type.name}</p>
<p>Цена: {product.price}</p>
<div className="button-overlayAdd">
<Button variant="primary" className="btn btn-custom custom-rounded-btn" onClick={() => addToCart(product)}>
Купить
</Button>
</div>
</div>
</div>
))}
</div>
</div>
</main>
</>
);
};
export default Catalog;

5
IP/src/components/lines/service/LinesApiService.js Normal file
View File

@ -0,0 +1,5 @@
import ApiService from '../../api/ApiService';
const LinesApiService = new ApiService('lines');
export default LinesApiService;

0
IP/src/components/lines/table/Lines.css Normal file
View File

89
IP/src/components/lines/table/Lines.jsx Normal file
View File

@ -0,0 +1,89 @@
import { Button } 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 useMaterials from '../../types/hooks/MaterialsHook';
import './Lines.css';
const Lines = () => {
const { materials } = useMaterials();
const { types, currentFilter, handleFilterChange } = useTypeFilter();
const { lines, handleLinesChange } = useLines(currentFilter, materials);
const {
isDeleteModalShow,
showDeleteModal,
handleDeleteConfirm,
handleDeleteCancel,
} = useLinesDeleteModal(handleLinesChange);
const {
isFormModalShow,
isFormValidated,
showFormModal,
currentItem,
handleItemChange,
handleFormSubmit,
handleFormClose,
} = useLinesFormModal(handleLinesChange);
return (
<>
<main className="container-fluid ml-2 mr-2">
<div className="row">
<div className="col-lg-9">
<LinesTable>
{lines.map((line, index) => (
<LinesTableRow
key={line.id}
index={index}
line={line}
onDelete={() => showDeleteModal(line.id)}
onEdit={() => showFormModal(line.id)}
/>
))}
</LinesTable>
</div>
<div className="col-lg-3">
<Select
className="mt-2"
values={types}
label="Фильтр по товарам"
value={currentFilter}
onChange={handleFilterChange}
/>
<Button variant="primary" className="buttonAdd custom-rounded-btn btn-custom" onClick={() => showFormModal()}>
Добавить товар
</Button>
</div>
</div>
<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>
</main>
</>
);
};
export default Lines;

37
IP/src/components/lines/table/LinesTable.jsx Normal file
View File

@ -0,0 +1,37 @@
import PropTypes from 'prop-types';
import { Table } from 'react-bootstrap';
import React from 'react';
import './Lines.css';
const LinesTable = ({ children }) => {
return (
<div className='table-container'>
<Table className='mt-2'>
<thead>
<tr>
<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>
<th scope='col'></th>
<th scope='col'></th>
</tr>
</thead>
<tbody>
{React.Children.map(children, (child, index) => {
return React.cloneElement(child, { key: index });
})}
</tbody>
</Table>
</div>
);
};
LinesTable.propTypes = {
children: PropTypes.node,
};
export default LinesTable;

36
IP/src/components/lines/table/LinesTableRow.jsx Normal file
View File

@ -0,0 +1,36 @@
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>{line.ItName}</td>
<td>{line.type.name}</td>
<td>{parseFloat(line.price).toFixed(2)}</td>
<td>{line.count}</td>
<td>{line.material.name}</td>
<td>{parseFloat(line.sum).toFixed(2)}</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,
onEditInPage: PropTypes.func,
};
export default LinesTableRow;

3
IP/src/components/modal/Modal.css Normal file
View File

@ -0,0 +1,3 @@
.modal-title {
font-size: 1.2rem;
}

42
IP/src/components/modal/ModalConfirm.jsx Normal file
View 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
IP/src/components/modal/ModalForm.jsx Normal file
View 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
IP/src/components/modal/ModalHook.js Normal file
View 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;

22
IP/src/components/navigation/Navigation.jsx
View File

@ -1,10 +1,14 @@
/* eslint-disable linebreak-style */
import PropTypes from 'prop-types';
import { Container, Nav, Navbar } from 'react-bootstrap';
import { House } from 'react-bootstrap-icons';
import { Link, useLocation } from 'react-router-dom';
import useUser from '../users/userHook';
import './Navigation.css';
const Navigation = ({ routes }) => {
const {isAdmin, userName} = useUser();
console.log(`Action: ${isAdmin}, Material Name: ${userName}`);
const location = useLocation();
const indexPageLink = routes.filter((route) => route.index === false).shift();
const pages = routes.filter((route) => Object.prototype.hasOwnProperty.call(route, 'title'));
@ -27,6 +31,24 @@ const Navigation = ({ routes }) => {
</Nav.Link>)
}
</Nav>
<Nav>
{userName ? (
<>
<Nav.Link className="custom-btn" as={Link} to="/Page7">
{userName}
</Nav.Link>
{isAdmin && (
<Nav.Link className="custom-btn" as={Link} to="/Admin">
Панель
</Nav.Link>
)}
</>
) : (
<Nav.Link className="custom-btn" as={Link} to="/Page3">
Профиль
</Nav.Link>
)}
</Nav>
</Navbar.Collapse>
</Container>
</Navbar >

21
IP/src/components/types/hooks/MaterialsHook.js Normal file
View File

@ -0,0 +1,21 @@
import { useEffect, useState } from 'react';
import MaterialsApiService from '../service/MaterialsApiService';
const useMaterials = () => {
const [materials, setMaterials] = useState([]);
const getMaterials = async () => {
const data = await MaterialsApiService.getAll();
setMaterials(data ?? []);
};
useEffect(() => {
getMaterials();
}, []);
return {
materials,
};
};
export default useMaterials;

21
IP/src/components/types/hooks/TypesHook.js Normal file
View 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
IP/src/components/types/service/MaterialsApiService.js Normal file
View File

@ -0,0 +1,5 @@
import ApiService from '../../api/ApiService';
const MaterialsApiService = new ApiService('materials');
export default MaterialsApiService;

5
IP/src/components/types/service/TypesApiService.js Normal file
View File

@ -0,0 +1,5 @@
import ApiService from '../../api/ApiService';
const TypesApiService = new ApiService('types');
export default TypesApiService;

23
IP/src/components/users/UserContext.jsx Normal file
View File

@ -0,0 +1,23 @@
import { createContext, useReducer, useEffect } from 'react';
import { loadUser, saveUser, userReducer } from './userReducer';
import PropTypes from 'prop-types';
export const UserContext = createContext(null);
export const UserProvider = ({ children }) => {
const [user, dispatch] = useReducer(userReducer, null, loadUser);
useEffect(() => {
saveUser(user || null);
}, [user]);
console.log(`Action: ${user}`);
return <UserContext.Provider value = {{ user, dispatch }}>
{children}
</UserContext.Provider>;
};
UserProvider.propTypes = {
children: PropTypes.node,
};
export default UserContext;

20
IP/src/components/users/loginHook.js Normal file
View File

@ -0,0 +1,20 @@
import UsersApiService from "./service/UsersApiService";
import useUser from "./userHook";
const useSubmit = () => {
const { userLogin } = useUser();
const onSubmit = async (data) => {
const res1 = await UsersApiService.getByHandle(data.handle);
if (res1.length === 0) {
return 1;
}
if (res1[0].password !== data.password) {
return 2;
}
userLogin(res1[0]);
return 3;
};
return { onSubmit };
};
export default useSubmit;

34
IP/src/components/users/regHook.js Normal file
View File

@ -0,0 +1,34 @@
import UsersApiService from "./service/UsersApiService";
import useUser from "./userHook";
const useSubmit = () => {
const { userLogin } = useUser();
const getNewUser = (formData) => {
console.log("formdsta"+ formData);
const emailt = formData.email;
const handlet = formData.handle;
const passwordt = formData.password;
return {
email: emailt,
handle: handlet,
password: passwordt,
};
};
const onSubmit = async (data) => {
const res1 = await UsersApiService.getByHandle(data.handle);
if (res1.length !== 0) {
return 1;
}
const res2 = await UsersApiService.getByEmail(data.email);
if (res2.length !== 0) {
return 2;
}
const newUser = getNewUser(data);
const curUser = await UsersApiService.create(newUser);
userLogin(curUser);
return 3;
};
return { onSubmit };
};
export default useSubmit;

5
IP/src/components/users/service/UsersApiService.js Normal file
View File

@ -0,0 +1,5 @@
import ApiService from "../../api/ApiService";
const UsersApiService = new ApiService('users');
export default UsersApiService;

17
IP/src/components/users/userHook.js Normal file
View File

@ -0,0 +1,17 @@
import { useContext } from 'react';
import { userLogin, userLogout } from './userReducer.js';
import UserContext from './UserContext.jsx';
const useUser = () => {
const {user, dispatch} = useContext(UserContext);
return {
isAdmin : user?.handle || null === 'admin',
userName : user?.handle || null,
userLogout: () => dispatch(userLogout()),
userLogin: (user) => dispatch(userLogin(user)),
};
};
export default useUser;

39
IP/src/components/users/userReducer.js Normal file
View File

@ -0,0 +1,39 @@
const USER_KEY = 'user';
const USER_LOGIN = 'user/login';
const USER_LOGOUT = 'user/logout';
export const saveUser = (user) => {
localStorage.setItem(USER_KEY, JSON.stringify(user));
};
export const loadUser = (initialValue = []) => {
const userData = localStorage.getItem(USER_KEY);
if (userData) {
return JSON.parse(userData);
}
return initialValue;
};
export const userReducer = (state, action) => {
console.log(action);
switch (action.type) {
case USER_LOGOUT: {
return null;
}
case USER_LOGIN: {
return action.user;
}
default: {
throw new Error(`Unknown action: ${action.type}`);
}
}
};
export const userLogout = () => ({
type: USER_LOGOUT,
});
console.log(`userlogout: ${userLogout}`);
export const userLogin = (user) => ({
type: USER_LOGIN,
user,
});

15
IP/src/components/utils/Base64.js Normal file
View 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;

13
IP/src/main.jsx
View File

@ -8,11 +8,12 @@ import ErrorPage from './pages/ErrorPage.jsx';
import Page1 from './pages/Page1.jsx';
import Page2 from './pages/Page2.jsx';
import Page3 from './pages/Page3.jsx';
import Page4 from './pages/Page4.jsx';
import Admin from './pages/Admin.jsx';
import Page5 from './pages/Page5.jsx';
import Page6 from './pages/Page6.jsx';
import Page7 from './pages/Page7.jsx';
import PageEdit from './pages/PageEdit.jsx';
import DetailPage from './pages/DetailPage.jsx';
const routes = [
{
@ -34,12 +35,14 @@ const routes = [
{
path: '/page3',
element: <Page3 />,
title: 'Вход',
},
{
path: '/page4',
element: <Page4 />,
title: 'Администратору',
path: '/Admin',
element: <Admin />,
},
{
path: '/detailpage/:name',
element: <DetailPage />,
},
{
path: '/page6',

9
IP/src/pages/Admin.jsx Normal file
View File

@ -0,0 +1,9 @@
import Lines from '../components/lines/table/Lines.jsx';
const Admin = () => {
return (
<Lines />
);
};
export default Admin;

43
IP/src/pages/DetailPage.jsx Normal file
View File

@ -0,0 +1,43 @@
import { useParams } from 'react-router-dom';
import { useState, useEffect } from 'react';
import LinesApiService from '../components/lines/service/LinesApiService';
import '../pagescss/DetailPage.css';
const DetailPage = () => {
const { name } = useParams();
const [imageUrl, setImageUrl] = useState('');
const [price, setPrice] = useState('');
useEffect(() => {
const loadDataFromServer = async (name) => {
try {
const data = await LinesApiService.getAll(`?ItName=${name}`);
setPrice(data[0].price);
setImageUrl(data[0].image);
} catch (error) {
console.log('еррор емае');
console.error(error);
}
};
loadDataFromServer(name);
}, [name]);
return (
<div className="container-fluid">
<div id="image-container">
<img src={imageUrl} alt={name}></img>
<div className="text-overlay">{name}</div>
</div>
<div className="info">
<div className="info-text">
<h1>Цена</h1>
<p>{price}</p>
</div>
</div>
</div>
);
};
export default DetailPage;

17
IP/src/pages/DetailPageRoute.jsx Normal file
View File

@ -0,0 +1,17 @@
import { Route, Switch, useParams } from 'eact-router-dom';
import DetailPage from './pages/DetailPage.jsx';
const DetailPageRoute = () => {
const { name } = useParams();
return <DetailPage name={name} />;
};
const App = () => {
return (
<Switch>
<Route path="/detailpage/:name" component={DetailPageRoute} />
</Switch>
);
};
export default App;

46
IP/src/pages/Page1.jsx
View File

@ -1,7 +1,5 @@
import prod1 from '../assets/prod1.jpg';
import prod2 from '../assets/prod2.jpg';
import prod3 from '../assets/prod3.jpg';
import Banner from '../components/banner/Banner.jsx';
import Catalog from '../components/lines/serverCatalog/Catalog.jsx';
const Page1 = () => {
return (
@ -17,47 +15,7 @@ const Page1 = () => {
<a href="/page2" className="btn btn-info text-white custom-rounded-btn btn-lg btn-custom">Узнать подробнее</a>
<div className="container mt-5">
<div className="row">
<div className="col-md-4">
<div className="card mb-4 h-10">
<img src={prod1} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Дом «Лебедь»</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 220 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 10 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-4">
<div className="card mb-4 h-10">
<img src={prod2} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Дом Вашей мечты</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 230 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 20 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-4">
<div className="card mb-4 h-10">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<Catalog />
</div>
</div>
</div>

178
IP/src/pages/Page2.jsx
View File

@ -1,182 +1,8 @@
import prod1 from '../assets/prod1.jpg';
import prod2 from '../assets/prod2.jpg';
import prod3 from '../assets/prod3.jpg';
import Catalog from '../components/lines/serverCatalog/Catalog.jsx';
const Page2 = () => {
return (
<>
<div className="container mt-5">
<div className="row mb-4">
<div className="col-md-2 mb-4">
<div className="card h-5">
<img src={prod1} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Дом «Лебедь»</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 220 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 10 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card h-5">
<img src={prod2} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Дом Вашей мечты</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 230 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 20 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card h-5">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2 ">
<div className="card h-5">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card h-5">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card h-5">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
</div>
</div>
<div className="container mt-5">
<div className="row mb-4">
<div className="col-md-2">
<div className="card mb-4 h-5">
<img src={prod1} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Дом «Лебедь»</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 220 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 10 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card mb-4 h-5">
<img src={prod2} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Дом Вашей мечты</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 230 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 20 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card mb-4 h-5">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card mb-4 h-5">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card mb-4 h-5">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-2">
<div className="card mb-4 h-5">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
</div>
</div>
</>
<Catalog />
);
};
export default Page2;

65
IP/src/pages/Page3.jsx
View File

@ -1,20 +1,42 @@
import { useState } from 'react';
import { Form, Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { Link, useNavigate } from 'react-router-dom';
import useUser from '../components/users/userHook';
import useSubmit from '../components/users/loginHook';
import back1 from '../assets/back1.jpg';
const Page3 = () => {
const [validated, setValidated] = useState(false);
const PersonalAccountLogin = () => {
const [validated, setValidated] = useState(false);
const { userLogin } = useUser();
const { onSubmit } = useSubmit();
const navigate = useNavigate();
const handleSubmit = (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
const handleSubmit = async (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
} else {
event.preventDefault();
setValidated(true);
const formData = {
handle: form.elements.formHandle.value,
password: form.elements.formPassword.value,
};
const result = await onSubmit(formData);
if (result === 1) {
alert('Пользователь с таким хэндлом не существует');
} else if (result === 2) {
alert('Введен неверный пароль');
} else if (result === 3) {
userLogin(formData);
navigate('/Page7');
}
setValidated(true);
};
}
};
return (
<>
@ -22,27 +44,26 @@ const Page3 = () => {
<div className="d-flex align-items-center justify-content-center" style={{ height: '100%' }}>
<img className="background-image" src={back1} alt="Background Image" />
<div className="row justify-content-center"></div>
<Form className="col-md-7 m-0" action="./page3" method="get" noValidate validated={validated} onSubmit={handleSubmit}>
<h3 className="text-center mb-3">Вход</h3>
<Form className="col-md-7 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
<h3 className="text-center mb-4">Вход</h3>
<Form.Group className="mb-4">
<Form.Label htmlFor="phone"></Form.Label>
<Form.Control id="phone" name="phone" type="tel" placeholder="Введите номер телефона" required />
<Form.Control type="text" id="formHandle" placeholder="Имя" required />
<Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-4">
<Form.Label htmlFor="password"></Form.Label>
<Form.Control id="password" name="password" type="password" placeholder="Введите пароль" required />
<Form.Control type="password" id="formPassword" placeholder="Пароль" required />
<Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
</Form.Group>
<div className="text-center">
<Link to='/page7'>
<Button className="btn-custom custom-rounded w-40" type="submit">
<Button to='/page7' className="btn-custom custom-rounded w-40" type="submit">
Отправить
</Button>
</Link>
</div>
<div className="text-center mt-5">
<p>
Еще не зарегистрированы? <Link to="/page6">Авторизуйтесь</Link>
Пример личного кабинета <Link to="/page7">ЛК</Link>
</p>
</div>
</Form>
@ -52,4 +73,4 @@ const Page3 = () => {
);
};
export default Page3;
export default PersonalAccountLogin;

29
IP/src/pages/Page4.jsx
View File

@ -1,29 +0,0 @@
/* eslint-disable import/no-extraneous-dependencies */
import { Button, ButtonGroup, Table } from 'react-bootstrap';
const Page4 = () => {
return (
<>
<ButtonGroup>
<Button id="items-add" variant="info">Добавить товар (диалог)</Button>
</ButtonGroup>
<Table className="mt-2" striped>
<thead>
<tr>
<th scope="col">№</th>
<th scope="col" className="w-25">Товар</th>
<th scope="col" className="w-25">Цена</th>
<th scope="col" className="w-25">Количество</th>
<th scope="col" className="w-25">Сумма</th>
<th scope="col" className="w-25">Материалы</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
<tbody></tbody>
</Table>
</>
);
};
export default Page4;

91
IP/src/pages/Page6.jsx
View File

@ -1,21 +1,50 @@
/* eslint-disable linebreak-style */
/* eslint-disable eol-last */
import { useState } from 'react';
import { Button, Form } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import back3 from '../assets/back3.jpg';
import UsersApiService from '../components/users/service/UsersApiService';
import useSubmit from '../components/users/regHook';
import useUser from '../components/users/userHook';
const Page6 = () => {
const [validated, setValidated] = useState(false);
const { userLogin } = useUser();
const { onSubmit } = useSubmit();
const navigate = useNavigate();
const handleSubmit = (event) => {
const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSubmit = async (event) => {
const form = event.currentTarget;
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
} else {
event.preventDefault();
setValidated(true);
setValidated(true);
const formData = {
handle: name,
email: email,
password: password,
};
const result = await onSubmit(formData);
if (result === 1) {
alert('Пользователь с таким хэндлом уже существует');
} else if (result === 2) {
alert('Пользователь с таким email уже существует');
} else if (result === 3) {
await UsersApiService.create(formData);
userLogin(formData);
navigate('/Page7');
}
}
};
return (
<>
<img className="background-image-2" src={back3} alt="Background Image" />
@ -24,24 +53,44 @@ const Page6 = () => {
<div className="row justify-content-center"></div>
<Form className="col-md-7 m-0" action="./page6" method="post" noValidate validated={validated} onSubmit={handleSubmit}>
<h3 className="text-center mb-5">Регистрация</h3>
<Form.Group className="mb-2">
<Form.Label htmlFor="firstName"></Form.Label>
<Form.Control id="firstName" name="firstName" type="text" placeholder="Введите ваше имя" required />
</Form.Group>
<Form.Group className="mb-2">
<Form.Label htmlFor="lastName"></Form.Label>
<Form.Control id="lastName" name="lastName" type="text" placeholder="Введите вашу фамилию" required />
</Form.Group>
<Form.Group className="mb-2">
<Form.Label htmlFor="phone"></Form.Label>
<Form.Control id="phone" name="phone" type="tel" placeholder="Введите номер телефона" required />
</Form.Group>
<Form.Group className="mb-3">
<Form.Label htmlFor="password"></Form.Label>
<Form.Control id="password" name="password" type="password" placeholder="Введите пароль" required />
</Form.Group>
<Form.Control
type="text"
placeholder="Имя"
id="formHandle"
value={name}
onChange={(e) => setName(e.target.value)}
required
/>
<Form.Control.Feedback>Имя заполнено</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Имя не заполнено</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3">
<Form.Control
type="email"
placeholder="Email"
id="formEmail"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<Form.Control.Feedback>Email заполнен</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Email не заполнен</Form.Control.Feedback>
</Form.Group>
<Form.Group className="mb-3" placeholder="Имя" >
<Form.Control
type="password"
placeholder="Пароль"
id="formPassword"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
<Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
</Form.Group>
<div className="text-center">
<Button className="btn btn-custom custom-rounded" type="submit">
<Button to='/Page7' className="btn btn-custom custom-rounded" type="submit">
Зарегистрироваться
</Button>
</div>

76
IP/src/pages/Page7.jsx
View File

@ -1,75 +1,11 @@
/* eslint-disable linebreak-style */
/* eslint-disable eol-last */
import prod1 from '../assets/prod1.jpg';
import prod2 from '../assets/prod2.jpg';
import prod3 from '../assets/prod3.jpg';
import Cart from '../components/cart/Cart.jsx';
const Page7 = () => {
const MyTickets = () => {
return (
<>
<div className="container-fluid p-2" style={{ margin: 'auto' }}>
<div className="container mt-5">
<div className="row">
<div className="col-md-10 cart-container">
<h2>Корзина</h2>
<div>
<div className="container mt-5">
<div className="row">
<div className="col-md-3">
<div className="card mb-4 h-10">
<img src={prod1} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Дом «Лебедь»</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 220 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 10 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-3">
<div className="card mb-4 h-10">
<img src={prod2} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Дом Вашей мечты</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 230 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 20 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
<div className="col-md-3">
<div className="card mb-4 h-10">
<img src={prod3} className="card-img-top custom-image" alt="Product Image" />
<div className="card-body">
<h5 className="card-title text-truncate">Элитная вилла</h5>
<ul className="list-group list-group-flush">
<li className="list-group-item"><strong>Площадь дома:</strong> 250 м2</li>
<li className="list-group-item"><strong>Цена:</strong> 30 500 000 руб</li>
</ul>
<a href="#" className="btn btn-custom mt-3">Купить</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div className="col-md-2">
<div className="user-info-frame">
<h2>Алексеев Иван</h2>
<p>Телефон: +7 123 456 7890</p>
</div>
</div>
</div>
</div>
</div>
</>
<>
<Cart />
</>
);
};
export default Page7;
export default MyTickets;

61
IP/src/pagescss/DetailPage.css Normal file
View File

@ -0,0 +1,61 @@
#image-container {
position:relative;
width: 100%;
height: 70vh;
}
#image-container img {
width: 100%;
height: 100%;
object-fit:cover;
}
#image-container .text-overlay {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
font-size: 90px;
}
#container1 {
position:relative;
padding: 2%;
display: grid;
/* Три колонки */
grid-template-columns: 68% 30%;
/* Два ряда */
grid-template-rows: auto auto;
/* Автоматическое размещение в ряд */
grid-auto-flow: row dense;
/* Отступы между ячейками */
gap: 2%;
color:#fafafa;
}
.row1 {
/* Занимает один ряд и
растягивается на две колонки */
grid-column: span 2;
}
.info {
background-color: #2F2727;
padding: 2%;
border: 5px solid #1b1818;
border-radius: 5px;
text-align: center;
word-wrap: break-word;
margin-bottom: 2%;
}
.info-text {
font-size: 20;
flex-basis: 50%;
color: white;
}
.button-overlayAdd button:hover {
background-color: #5233ff;
color:aqua;
}

2
IP/vite.config.js
View File

@ -1,4 +1,4 @@
/* eslint-disable import/no-extraneous-dependencies */
/* eslint-disable linebreak-style */
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';