Changeset 07f4e8b for frontend/src/Components/RestaurantDetails

Timestamp:

01/24/24 17:42:28 (5 months ago)

Author:

darsov2 <62809499+darsov2@…>

Branches:

master

Children:

0f5aa27

Parents:

5528b99

Message:

prefinal fixes

Location:

frontend/src/Components/RestaurantDetails

Files:

• Carousel.js (modified) (1 diff)
• Menu.js (modified) (2 diffs)
• MenuItem.js (modified) (2 diffs)
• TablesTable.js (modified) (1 diff)

frontend/src/Components/RestaurantDetails/Carousel.js

@@ -12 +12 @@
             <Row className='d-flex justify-content-center align-items-center'><h2>Мени</h2></Row>
             <hr className='m-2'></hr>
-            <Menu menu={props.menu}></Menu>
+            <Menu images={props.images} menu={props.menu}></Menu>
         </>
     );

frontend/src/Components/RestaurantDetails/Menu.js

@@ -23 +23 @@
 
 
+
+
     return (<>
         <Carousel activeIndex={ind} onSelect={handleSelect} indicators={false}>
@@ -34 +36 @@
                                         return (
                                             <Col>
-                                                <MenuItem data={menuItem}/>
+                                                <MenuItem images={    props.images.filter(x => {
+                                                    console.log(x)
+                                                    return x.menu.menuId === menuItem.menuId
+                                                })} data={menuItem}/>
                                             </Col>
                                         )

frontend/src/Components/RestaurantDetails/MenuItem.js

@@ -1 +1 @@
 import React from "react";
 import {Col, Row, Image, Container} from "react-bootstrap";
+import Carousel from "react-bootstrap/Carousel";
 
 const MenuItem = (props) => {
 
     const data = props.data;
+    console.log("dva orla")
+    console.log(props)
     return (<>
 
@@ -17 +20 @@
                 <Row>
                     <Col className="d-flex justify-content-center mb-3">
-                        <Image
-                            src="https://www.tasteofhome.com/wp-content/uploads/2019/01/medium-rare-steak-shutterstock_706040446.jpg"
-                            style={{
-                                height: "7em",
-                                borderRadius: "1em",
-                                boxShadow: "0 4px 20px lightblue",
-                                maxWidth: "100%",
-                            }}
-                        ></Image>
+                        <Carousel>
+                            {props.images.map((image) => {
+                                let link = image.url;
+                                if (image.url.includes('Desktop')) {
+                                    link = 'http://localhost:8080/download?fileName=' + encodeURIComponent(image.url);
+                                }
+                                return (
+                                    <Carousel.Item>
+                                        <img
+                                            className="d-block w-100 h-400 rounded-5"
+                                            src={link}
+                                            alt="First slide"
+                                            style={{
+                                                height: "7em",
+                                                borderRadius: "1em",
+                                                boxShadow: "0 4px 20px lightblue",
+                                                maxWidth: "100%",
+                                            }}
+                                        />
+                                    </Carousel.Item>
+                                )
+                            })}
+                            {props.images.length == 0 && <Carousel.Item>
+                                <Image
+                                    src="https://www.tasteofhome.com/wp-content/uploads/2019/01/medium-rare-steak-shutterstock_706040446.jpg"
+                                    style={{
+                                        height: "7em",
+                                        borderRadius: "1em",
+                                        boxShadow: "0 4px 20px lightblue",
+                                        maxWidth: "100%",
+                                    }}
+                                ></Image>
+                            </Carousel.Item>}
+                        </Carousel>
                     </Col>
                 </Row>

frontend/src/Components/RestaurantDetails/TablesTable.js

@@ -22 +22 @@
                 </thead>
                 <tbody>
-                {Array.from(new Set(props.data.map(x => x.restaurantTable))).map((table) => {
+                {Array.from(
+                    new Set(props.data.map((x) => JSON.stringify(x.restaurantTable)))
+                ).map((roomString) => JSON.parse(roomString)).map((table) => {
                     return (
                         <>