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