5_4

Lab5/Bookfill/src/components/cart/Cart.jsx

@@ -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">

Lab5/Bookfill/src/pages/Page1.jsx

@@ -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) => {

Lab5/Bookfill/src/pages/Page3.jsx

@@ -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">
+            {/* Компонент Select удалён, поскольку фильтр зафиксирован на "Audio" */}
-                <img
+            <BookCarousel
-                    className="img d-block w-100 pt-3 mx-auto"
+                lines={lines}
-                    src="src/assets/books/capital.jpg"
+                onAddCart={(line, event) => {
-                    alt="First slide"
+                    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>
     );
 };
 

Lab5/Bookfill/src/pages/Page4.jsx

@@ -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">
+            {/* Компонент Select удалён, поскольку фильтр зафиксирован на "Audio" */}
-                <img
+            <BookCarousel
-                    className="img d-block w-100 pt-3 mx-auto"
+                lines={lines}
-                    src="src/assets/books/blev.jpg"
+                onAddCart={(line, event) => {
-                    alt="First slide"
+                    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>
     );
 };