Egor_Petrushin/Web-programming_Petrushin_E.A._PIbd-22
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

5_11

Browse Source
This commit is contained in:
GokaPek 2024-01-12 12:20:49 +04:00
parent c25c2a63f1
commit 29a98ec380
5 changed files with 134 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
Lab5/Bookfill/data.json
View File

File diff suppressed because one or more lines are too long

31
Lab5/Bookfill/src/components/lines/form/BookInfoForm.jsx Normal file
View File

@ -0,0 +1,31 @@
import PropTypes from 'prop-types';
import { Button, Form } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';
import InfoForm from './InfoForm.jsx';
const BookInfoForm = ({ item }) => {
const navigate = useNavigate();
const onBack = () => {
navigate(-1);
};
return (
<>
<Form className='m-0 p-2'>
<InfoForm item={item} />
<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()}>
Back
</Button>
</Form.Group>
</Form>
</>
);
};
BookInfoForm.propTypes = {
item: PropTypes.object,
};
export default BookInfoForm;

52
Lab5/Bookfill/src/components/lines/form/InfoForm.jsx Normal file
View File

@ -0,0 +1,52 @@
import PropTypes from 'prop-types';
import { FilePost } from 'react-bootstrap-icons';
import './LinesItemForm.css';
const InfoForm = ({ item }) => {
// Функция для конвертации base64 строки в Blob
const base64ToBlob = (base64) => {
// Кодируем строку base64 обратно в массив байтов
const byteCharacters = atob(base64.split(',')[1]);
const byteNumbers = Array.from(byteCharacters).map((char) => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
// Создаем Blob из типизированного массива байтов
return new Blob([byteArray], { type: 'application/pdf' });
};
const openFile = (base64) => {
const base64Prefix = 'data:application/pdf;base64,';
const content = base64.includes(base64Prefix) ? base64 : `${base64Prefix}${base64}`;
// Создаем Blob из base64 строки
const blob = base64ToBlob(content);
// Создаем URL для Blob
const fileURL = URL.createObjectURL(blob);
// Открываем URL в новой вкладке
window.open(fileURL);
// <a onClick={() => openFile(line.datafile)}></a>
};
return (
<>
<div className='text-center mt-5'>
<img id='image-preview' className='rounded' alt='placeholder'
src={item.image} />
<div style={{ height: 300, overflow: 'auto' }}>
<p>Name: {item.book_name}</p>
<p>Author: {item.author_name}</p>
<p>Price: {item.price}</p>
<a onClick={() => openFile(item.datafile)}><FilePost /></a>
</div>
</div>
</>
);
};
InfoForm.propTypes = {
item: PropTypes.object,
};
export default InfoForm;

57
Lab5/Bookfill/src/components/lines/form/LinesItemForm.jsx
View File

@ -1,45 +1,31 @@
import PropTypes from 'prop-types';
import { FilePost } from 'react-bootstrap-icons';
import './LinesItemForm.css';
import imgPlaceholder from '../../../assets/200.png';
import Input from '../../input/Input.jsx';
import Select from '../../input/Select.jsx';
import useTypes from '../../types/hooks/TypesHook';
const LinesItemForm = ({ item }) => {
// Функция для конвертации base64 строки в Blob
const base64ToBlob = (base64) => {
// Кодируем строку base64 обратно в массив байтов
const byteCharacters = atob(base64.split(',')[1]);
const byteNumbers = Array.from(byteCharacters).map((char) => char.charCodeAt(0));
const byteArray = new Uint8Array(byteNumbers);
// Создаем Blob из типизированного массива байтов
return new Blob([byteArray], { type: 'application/pdf' });
};
const openFile = (base64) => {
const base64Prefix = 'data:application/pdf;base64,';
const content = base64.includes(base64Prefix) ? base64 : `${base64Prefix}${base64}`;
// Создаем Blob из base64 строки
const blob = base64ToBlob(content);
// Создаем URL для Blob
const fileURL = URL.createObjectURL(blob);
// Открываем URL в новой вкладке
window.open(fileURL);
// <a onClick={() => openFile(line.datafile)}></a>
};
const LinesItemForm = ({ item, handleChange }) => {
const { types } = useTypes();
return (
<>
<div className='text-center mt-5'>
<div className='text-center'>
<img id='image-preview' className='rounded' alt='placeholder'
src={item.image} />
src={item.image || imgPlaceholder} />
</div >
<div style={{ height: 300, overflow: 'auto' }}>
<p>Name: {item.book_name}</p>
<p>Author: {item.author_name}</p>
<p>Price: {item.price}</p>
<a onClick={() => openFile(item.datafile)}><FilePost /></a>
</div>
<Input name='book_name' label='Name' value={item.book_name} onChange={handleChange}
type='text' required />
<Select values={types} name='typeId' label='Type' value={item.typeId} onChange={handleChange}
required />
<Input name='author_name' label='Author' value={item.author_name} onChange={handleChange}
type='text' required />
<Input name='price' label='Price' value={item.price} onChange={handleChange}
type='number' min='50.0' step='1.0' required />
<Input name='image' label='Image' onChange={handleChange}
type='file' accept='image/*' />
<Input name='datafile' label='file' onChange={handleChange}
type='file' accept='application/pdf/*' />
</div>
</>
);
@ -47,6 +33,7 @@ const LinesItemForm = ({ item }) => {
LinesItemForm.propTypes = {
item: PropTypes.object,
handleChange: PropTypes.func,
};
export default LinesItemForm;

4
Lab5/Bookfill/src/pages/PageEdit.jsx
View File

@ -1,13 +1,13 @@
import { useParams } from 'react-router-dom';
import LinesForm from '../components/lines/form/LinesForm.jsx';
import useLinesItem from '../components/lines/hooks/LinesItemHook';
import BookInfoForm from '../components/lines/form/BookInfoForm.jsx';
const PageEdit = () => {
const { id } = useParams();
const { item } = useLinesItem(id);
return (
<LinesForm item={item} />
<BookInfoForm item={item} />
);
};