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

5_4

Browse Source
This commit is contained in:
GokaPek 2023-12-25 01:33:44 +04:00
parent dc3836d522
commit 6391a3e109
5 changed files with 78 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
Lab5/Bookfill/data.json
View File

File diff suppressed because one or more lines are too long

27
Lab5/Bookfill/src/components/cart/Cart.jsx
View File

@ -11,6 +11,31 @@ const Cart = () => {
clearCart,
} = useCart();
// Функция для конвертации 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);
};
return (
<div className='d-flex flex-column align-items-center'>
<div className='mb-2 col-12 col-md-8 col-lg-6 d-flex align-items-center'>
@ -24,8 +49,10 @@ const Cart = () => {
<Card key={cartItem.id} className='mb-2 col-12 col-md-8 col-lg-6'>
<Card.Body className='p-2 d-flex flex-column flex-sm-row align-items-center'>
<div className='cart-item flex-fill'>
<a onClick={() => openFile(cartItem.datafile)}>
<img className='cart-image' src={cartItem.image || imgPlaceholder} alt="Cart Image" />
{cartItem.book_name}
</a>
</div>
<div className='cart-item mt-2 mt-sm-0 d-flex flex-column align-items-center align-items-sm-end'>
<ButtonGroup className='mt-2 mt-sm-1' aria-label="Cart counter">

10
Lab5/Bookfill/src/pages/Page1.jsx
View File

@ -1,23 +1,15 @@
import './pages.css';
import BookCarousel from '../components/lines/table/BookCarousel.jsx';
import useCart from '../components/cart/CartHook';
import Select from '../components/input/Select.jsx';
import useTypeFilter from '../components/lines/hooks/LinesFilterHook';
import useLines from '../components/lines/hooks/LinesHook';
const Page1 = () => {
const { types, currentFilter, handleFilterChange } = useTypeFilter();
const { currentFilter } = useTypeFilter();
const { lines } = useLines(currentFilter);
const { addToCart } = useCart();
return (
<>
<Select
className='mt-2'
values={types}
label='Filter by type'
value={currentFilter}
onChange={handleFilterChange}
/>
<BookCarousel
lines={lines}
onAddCart={(line, event) => {

42
Lab5/Bookfill/src/pages/Page3.jsx
View File

@ -1,31 +1,27 @@
import './pages.css';
import { Carousel } from 'react-bootstrap';
import BookCarousel from '../components/lines/table/BookCarousel.jsx';
import useCart from '../components/cart/CartHook';
import useLines from '../components/lines/hooks/LinesHook';
const Page3 = () => {
// ID для типа "Audio"
const audioTypeId = 2;
// Теперь мы передаём audioTypeId напрямую в хук useLines
const { lines } = useLines(audioTypeId);
const { addToCart } = useCart();
return (
<Carousel className="container-fluid p-0 mt-5">
<Carousel.Item className="p-5">
<img
className="img d-block w-100 pt-3 mx-auto"
src="src/assets/books/capital.jpg"
alt="First slide"
<>
{/* Компонент Select удалён, поскольку фильтр зафиксирован на "Audio" */}
<BookCarousel
lines={lines}
onAddCart={(line, event) => {
event.preventDefault();
addToCart(line);
}}
/>
</Carousel.Item>
<Carousel.Item className="p-5">
<img
className="img d-block w-100 pt-3 mx-auto"
src="src/assets/books/capital.jpg"
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item className="p-5">
<img
className="img d-block w-100 pt-3 mx-auto"
src="src/assets/books/capital.jpg"
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
</>
);
};

41
Lab5/Bookfill/src/pages/Page4.jsx
View File

@ -1,31 +1,26 @@
import './pages.css';
import { Carousel } from 'react-bootstrap';
import BookCarousel from '../components/lines/table/BookCarousel.jsx';
import useCart from '../components/cart/CartHook';
import useLines from '../components/lines/hooks/LinesHook';
const Page4 = () => {
const audioTypeId = 3;
// Теперь мы передаём audioTypeId напрямую в хук useLines
const { lines } = useLines(audioTypeId);
const { addToCart } = useCart();
return (
<Carousel className="container-fluid p-0 mt-5">
<Carousel.Item className="p-5">
<img
className="img d-block w-100 pt-3 mx-auto"
src="src/assets/books/blev.jpg"
alt="First slide"
<>
{/* Компонент Select удалён, поскольку фильтр зафиксирован на "Audio" */}
<BookCarousel
lines={lines}
onAddCart={(line, event) => {
event.preventDefault();
addToCart(line);
}}
/>
</Carousel.Item>
<Carousel.Item className="p-5">
<img
className="img d-block w-100 pt-3 mx-auto"
src="src/assets/books/blev.jpg"
alt="Second slide"
/>
</Carousel.Item>
<Carousel.Item className="p-5">
<img
className="img d-block w-100 pt-3 mx-auto"
src="src/assets/books/blev.jpg"
alt="Third slide"
/>
</Carousel.Item>
</Carousel>
</>
);
};