[e6c2521] | 1 | import React from "react";
|
---|
| 2 | import {useState} from "react";
|
---|
| 3 | import {Col, Container, Row, Image, Modal, Button, Form} from "react-bootstrap";
|
---|
| 4 | import LoginForm from "../Login/LoginForm";
|
---|
| 5 | import ChangePasswordForm from "../Forms/ChangePasswordForm";
|
---|
| 6 | import {FaCalendarAlt} from "react-icons/fa";
|
---|
| 7 | import {MdBalcony, MdLocationOn} from "react-icons/md";
|
---|
| 8 | import AddAvailability from "../Resources/AddAvailability";
|
---|
| 9 | import {LuFan} from "react-icons/lu";
|
---|
| 10 | import {TbToolsKitchen2} from "react-icons/tb";
|
---|
| 11 | import useGet from "../Hooks/useGet";
|
---|
| 12 | import data from "bootstrap/js/src/dom/data";
|
---|
| 13 | import {AiOutlinePlusCircle} from "react-icons/ai";
|
---|
| 14 | import {MdOutlineRateReview} from "react-icons/md";
|
---|
| 15 | import useFormData from "../Hooks/useFormData";
|
---|
| 16 | import useCreate from "../Hooks/useCreate";
|
---|
| 17 | import HotelReservationModal from "./HotelReservationModal";
|
---|
| 18 | import ReviewModal from "./ReviewModal";
|
---|
| 19 |
|
---|
| 20 |
|
---|
| 21 | const HotelReservationListing = (props) => {
|
---|
| 22 |
|
---|
| 23 | const type = props.type == "hotel" ? "сместувањето" : props.type == "restaurant" ? "ресторанот" : "превозот";
|
---|
| 24 | // const name = props.type == "hotel" ? props.data.hotelName : props.type == "restaurant" ? props.data.restaurantName : props.data.transportName
|
---|
| 25 | // const id = props.type == "hotel" ? props.data.hotelId : props.type == "restaurant" ? props.data.restaurantID : props.data.transportID
|
---|
| 26 |
|
---|
| 27 | console.log(props.data)
|
---|
| 28 | const dateFormatter = (str) => {
|
---|
| 29 | const inputDate = new Date(str);
|
---|
| 30 |
|
---|
| 31 | const options = props.type === 'hotel' ? {
|
---|
| 32 | year: 'numeric',
|
---|
| 33 | month: '2-digit',
|
---|
| 34 | day: '2-digit',
|
---|
| 35 | hour12: false,
|
---|
| 36 | } : {
|
---|
| 37 | year: 'numeric',
|
---|
| 38 | month: '2-digit',
|
---|
| 39 | day: '2-digit',
|
---|
| 40 | hour: '2-digit',
|
---|
| 41 | minute: '2-digit',
|
---|
| 42 | hour12: false,
|
---|
| 43 | };
|
---|
| 44 |
|
---|
| 45 | return inputDate.toLocaleString('de-DE', options);
|
---|
| 46 |
|
---|
| 47 | }
|
---|
| 48 |
|
---|
| 49 | console.log(props)
|
---|
| 50 |
|
---|
| 51 | const [showReview, setShowReview] = useState(false);
|
---|
| 52 |
|
---|
| 53 | const handleCloseReview = () => setShowReview(false);
|
---|
| 54 | const handleShowReview = () => setShowReview(true);
|
---|
| 55 |
|
---|
| 56 | const [show, setShow] = useState(false);
|
---|
| 57 |
|
---|
| 58 | const handleClose = () => setShow(false);
|
---|
| 59 | const handleShow = () => setShow(true);
|
---|
| 60 |
|
---|
| 61 | return (<>
|
---|
| 62 | <Container onClick={(e) => {
|
---|
| 63 | if (e.target.id !== 'icon') {
|
---|
| 64 | handleShow();
|
---|
| 65 | }
|
---|
| 66 | }} className="py-3 px-1 my-4"
|
---|
| 67 | style={{
|
---|
| 68 | border: "4px solid #159895",
|
---|
| 69 | borderRadius: "1em",
|
---|
| 70 | boxShadow: "0 3px 5px #159895",
|
---|
| 71 | maxWidth: "90%",
|
---|
| 72 | }}>
|
---|
| 73 | <Row>
|
---|
| 74 | <Col className="d-flex justify-content-center">
|
---|
| 75 | {props.type !== 'transport' && <Image
|
---|
| 76 | src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
|
---|
| 77 | style={{
|
---|
| 78 | height: "8em",
|
---|
| 79 | borderRadius: "1em",
|
---|
| 80 | boxShadow: "0 4px 20px lightblue",
|
---|
| 81 | maxWidth: "100%",
|
---|
| 82 | }}
|
---|
| 83 | ></Image>}
|
---|
| 84 | {props.type === 'transport' && <Image
|
---|
| 85 | src="https://samsung.teveotecno.com.ar/wp-content/uploads/2022/07/how-to-create-and-draw-custom-routes-with-google-maps_62d4ad146140d.jpeg"
|
---|
| 86 | style={{
|
---|
| 87 | height: "8em",
|
---|
| 88 | borderRadius: "1em",
|
---|
| 89 | boxShadow: "0 4px 20px lightblue",
|
---|
| 90 | maxWidth: "80%",
|
---|
| 91 | }}
|
---|
| 92 | ></Image>}
|
---|
| 93 | </Col>
|
---|
| 94 | <Col className={'d-flex flex-column justify-content-center'}>
|
---|
| 95 | {props.type === "hotel" && (<>
|
---|
| 96 | <h2 style={{textAlign: "left"}}>{props.data.hotelName}</h2>
|
---|
| 97 | <h5 style={{textAlign: "left"}}>{props.data.hotelLocation}</h5>
|
---|
| 98 | <h5 style={{textAlign: "left"}}>{dateFormatter(props.data.dateFrom) + ' - ' + dateFormatter(props.data.dateTo)}</h5>
|
---|
| 99 | </>)}
|
---|
| 100 | {props.type === "restaurant" && (<>
|
---|
| 101 | <h2 style={{textAlign: "left"}}>{props.data.restaurantName}</h2>
|
---|
| 102 | <h5 style={{textAlign: "left"}}>{props.data.restaurantLocation}</h5>
|
---|
| 103 | <h5 style={{textAlign: "left"}}>{dateFormatter(props.data.dateFrom) + ' - ' + dateFormatter(props.data.dateTo)}</h5>
|
---|
| 104 | </>)}
|
---|
| 105 | {props.type === "transport" && (<>
|
---|
| 106 | <h5 style={{textAlign: "left"}}>{props.data.carBrand + ' ' + props.data.carType}</h5>
|
---|
| 107 | <h5 style={{textAlign: "left"}}>{props.data.transportRoute.from + ' - ' + props.data.transportRoute.to}</h5>
|
---|
| 108 | <h5 style={{textAlign: "left"}}>{dateFormatter(props.data.transportRoute.departure) + ' - ' + dateFormatter(props.data.transportRoute.arrival)}</h5>
|
---|
| 109 | <h5 style={{textAlign: "left"}}>{props.data.owner.name + ' ' + props.data.owner.surname}</h5>
|
---|
| 110 | </>)}
|
---|
| 111 | </Col>
|
---|
| 112 | {props.type === 'transport' &&
|
---|
| 113 | <Col className="d-flex flex-column justify-content-center align-content-center">
|
---|
| 114 | <h3>Вкупна цена: <br></br>{props.data.transportRoute.price}$</h3>
|
---|
| 115 | </Col>}
|
---|
| 116 | {(props.past) && <Col className="d-flex flex-column justify-content-center align-content-center">
|
---|
| 117 | {!props.data.reviewed && <Container id={'ocn'} onClick={(e) => {
|
---|
| 118 | console.log(e.target)
|
---|
| 119 | if (e.target.id === 'icon') {
|
---|
| 120 | handleShowReview();
|
---|
| 121 | }
|
---|
| 122 | }}>
|
---|
| 123 | <h5 id={'icon'}>Додади<br/>оценка</h5>
|
---|
| 124 | <div className="d-flex justify-content-center align-content-center">
|
---|
| 125 | <MdOutlineRateReview size={50} color="#159895"/></div>
|
---|
| 126 |
|
---|
| 127 | </Container>}
|
---|
| 128 | {props.data.reviewed && <Container>
|
---|
| 129 | <h5>Веќе имате <br/>оставено оценка<br/>за оваа резервација</h5>
|
---|
| 130 | </Container>}
|
---|
| 131 | </Col>}
|
---|
| 132 | </Row>
|
---|
| 133 | </Container>
|
---|
| 134 | {props.type === 'hotel' && <HotelReservationModal show={show} handleClose={handleClose} data={props.data}/>}
|
---|
| 135 | <ReviewModal type={props.type} showReview={showReview} handleCloseReview={handleCloseReview} data={props.data}/>
|
---|
| 136 | </>)
|
---|
| 137 | }
|
---|
| 138 |
|
---|
| 139 | export default HotelReservationListing; |
---|