1 | import {Button, Col, Container, Image, Modal, Row} from "react-bootstrap";
|
---|
2 | import {FaCalendarAlt} from "react-icons/fa";
|
---|
3 | import {MdBalcony, MdLocationOn} from "react-icons/md";
|
---|
4 | import {LuFan} from "react-icons/lu";
|
---|
5 | import {TbToolsKitchen2} from "react-icons/tb";
|
---|
6 | import React from "react";
|
---|
7 | import useCreate from "../Hooks/useCreate";
|
---|
8 |
|
---|
9 | const HotelReservationModal = (props) => {
|
---|
10 |
|
---|
11 | const {createEntity} = useCreate();
|
---|
12 |
|
---|
13 | const dateFormatter = (str) => {
|
---|
14 | const inputDate = new Date(str);
|
---|
15 |
|
---|
16 | const options = {
|
---|
17 | year: 'numeric',
|
---|
18 | month: '2-digit',
|
---|
19 | day: '2-digit',
|
---|
20 | hour12: false,
|
---|
21 | };
|
---|
22 |
|
---|
23 | console.log(props)
|
---|
24 |
|
---|
25 | return inputDate.toLocaleString('de-DE', options);
|
---|
26 |
|
---|
27 | }
|
---|
28 |
|
---|
29 | return (
|
---|
30 | <>
|
---|
31 | <Modal size={"xl"} show={props.show} onHide={props.handleClose}>
|
---|
32 | <Modal.Header closeButton>
|
---|
33 | <Modal.Title>Детали за резервација</Modal.Title>
|
---|
34 | </Modal.Header>
|
---|
35 | <Modal.Body>
|
---|
36 | <Container className="py-3 px-1 my-4" style={{maxWidth: "90%"}}>
|
---|
37 | <Row className={'mb-3'}>
|
---|
38 | <Col className={'px-4'}>
|
---|
39 | <h3>{props.data.hotelName}</h3>
|
---|
40 | </Col>
|
---|
41 | <Col>
|
---|
42 |
|
---|
43 | </Col>
|
---|
44 | </Row>
|
---|
45 | <Row className={'mb-3'}>
|
---|
46 | <Col className={'d-flex flex-column justify-content-between'}>
|
---|
47 | <Row>
|
---|
48 | <Col md={'auto'}
|
---|
49 | className={'d-flex flex-column justify-content-center align-items-center ms-3'}>
|
---|
50 | <FaCalendarAlt size={'2em'}/>
|
---|
51 | </Col>
|
---|
52 | <Col md={'auto'} style={{borderRight: '1px solid black'}}>
|
---|
53 | <Row className={'w-75'}>
|
---|
54 | <h6>Пријавување</h6>
|
---|
55 | </Row>
|
---|
56 | <Row>
|
---|
57 | <h5>{dateFormatter(props.data.dateFrom)}</h5>
|
---|
58 | </Row>
|
---|
59 |
|
---|
60 | </Col>
|
---|
61 | <Col>
|
---|
62 | <Row>
|
---|
63 | <h6>Одјавување</h6>
|
---|
64 | </Row>
|
---|
65 | <Row>
|
---|
66 | <h5>{dateFormatter(props.data.dateTo)}</h5>
|
---|
67 | </Row>
|
---|
68 | </Col>
|
---|
69 | <Col md={7}>
|
---|
70 |
|
---|
71 | </Col>
|
---|
72 | </Row>
|
---|
73 | <Row>
|
---|
74 | <Col md={'auto'}
|
---|
75 | className={'d-flex flex-column justify-content-center align-items-center ms-3'}>
|
---|
76 | <MdLocationOn size={'2em'}/>
|
---|
77 | </Col>
|
---|
78 | <Col md={'auto'}>
|
---|
79 | <Row className={'w-75'}>
|
---|
80 | <h6>Адреса</h6>
|
---|
81 | </Row>
|
---|
82 | <Row>
|
---|
83 | <h5>ул. Македонска бр. 10</h5>
|
---|
84 | </Row>
|
---|
85 | </Col>
|
---|
86 | <Col>
|
---|
87 | </Col>
|
---|
88 |
|
---|
89 | </Row>
|
---|
90 | </Col>
|
---|
91 | <Col className={'d-flex flex-column align-items-center'}>
|
---|
92 | <Image
|
---|
93 | src="https://www.imgacademy.com/sites/default/files/legacyhotel.jpg"
|
---|
94 | style={{
|
---|
95 | height: "10em",
|
---|
96 | borderRadius: "1em",
|
---|
97 | boxShadow: "0 4px 20px lightblue",
|
---|
98 | maxWidth: "100%",
|
---|
99 | }}
|
---|
100 | ></Image>
|
---|
101 | </Col>
|
---|
102 |
|
---|
103 | </Row>
|
---|
104 | </Container>
|
---|
105 | <Container>
|
---|
106 | <Row className={'mb-3'}>
|
---|
107 | <h4>Детали за собата</h4>
|
---|
108 | </Row>
|
---|
109 | <Row>
|
---|
110 | <Col className="d-flex justify-content-center">
|
---|
111 | <Image
|
---|
112 | src="https://img.freepik.com/free-photo/luxury-classic-modern-bedroom-suite-hotel_105762-1787.jpg?w=200"
|
---|
113 | style={{
|
---|
114 | height: "10em",
|
---|
115 | borderRadius: "1em",
|
---|
116 | boxShadow: "0 4px 20px lightblue",
|
---|
117 | maxWidth: "100%",
|
---|
118 | }}
|
---|
119 | ></Image>
|
---|
120 | </Col>
|
---|
121 | <Col className="d-flex flex-column justify-content-center" style={{textAlign: "left"}}>
|
---|
122 | <Row><h4>{props.data.hotelRoom.hotelRoomName}</h4></Row>
|
---|
123 | <Row>
|
---|
124 | {props.data.hotelRoom.airConditioning && <Col className="col-auto">
|
---|
125 | <Container className="py-1 px-1">
|
---|
126 | <Row className="d-flex flex-row">
|
---|
127 | <Col className="m-0 w-25 py-1">
|
---|
128 | <LuFan
|
---|
129 | className="my-0 "
|
---|
130 | color="#159895"
|
---|
131 | size={40}
|
---|
132 | ></LuFan>
|
---|
133 | </Col>
|
---|
134 | <Col className="w-75 d-flex p-0">
|
---|
135 | <h6 style={{fontSize: "14px"}} className="m-auto">
|
---|
136 | Климатизирано
|
---|
137 | </h6>
|
---|
138 | </Col>
|
---|
139 | </Row>
|
---|
140 | </Container>
|
---|
141 | </Col>}
|
---|
142 | {props.data.hotelRoom.kitchenAvailable && <Col className="col-auto">
|
---|
143 | <Container
|
---|
144 | className="py-1 px-1">
|
---|
145 | <Row className="d-flex flex-row">
|
---|
146 | <Col className="m-0 w-25 py-1">
|
---|
147 | <TbToolsKitchen2 className="my-0 " color="#159895"
|
---|
148 | size={40}></TbToolsKitchen2>
|
---|
149 | </Col>
|
---|
150 | <Col className="w-75 d-flex p-0">
|
---|
151 | <h6 style={{fontSize: "14px"}} className="m-auto">Кујна</h6>
|
---|
152 | </Col>
|
---|
153 | </Row>
|
---|
154 | </Container>
|
---|
155 | </Col>}
|
---|
156 | {props.data.hotelRoom.balcony && <Col className="col-auto">
|
---|
157 | <Container
|
---|
158 | className="py-1 px-1">
|
---|
159 | <Row className="d-flex flex-row">
|
---|
160 | <Col className="m-0 w-25 py-1">
|
---|
161 | <MdBalcony className="my-0 " color="#159895" size={40}></MdBalcony>
|
---|
162 | </Col>
|
---|
163 | <Col className="w-75 d-flex p-0">
|
---|
164 | <h6 style={{fontSize: "14px"}} className="m-auto">Тераса</h6>
|
---|
165 | </Col>
|
---|
166 | </Row>
|
---|
167 | </Container>
|
---|
168 | </Col>}
|
---|
169 | </Row>
|
---|
170 | </Col>
|
---|
171 | </Row>
|
---|
172 | </Container>
|
---|
173 | <Container className={'border mt-3 w-75 py-3 rounded-3'}>
|
---|
174 | <Row className={'mb-3'}>
|
---|
175 | <Col>
|
---|
176 | <h5>4 Ноќевања</h5>
|
---|
177 | </Col>
|
---|
178 | <Col>
|
---|
179 | <h5 className={'text-end'}>32$</h5>
|
---|
180 | </Col>
|
---|
181 | </Row>
|
---|
182 | <Row>
|
---|
183 | <Col>
|
---|
184 | <h5>Вкупно</h5>
|
---|
185 | </Col>
|
---|
186 | <Col>
|
---|
187 | <h4 className={'text-end'}>128$</h4>
|
---|
188 | </Col>
|
---|
189 | </Row>
|
---|
190 | </Container>
|
---|
191 | </Modal.Body>
|
---|
192 | <Modal.Footer>
|
---|
193 | <Button variant="secondary" onClick={props.handleClose}>
|
---|
194 | Затвори
|
---|
195 | </Button>
|
---|
196 | <Button variant="danger" onClick={() => {
|
---|
197 | createEntity(`/hotel/${props.data.reservationId}/cancel`, props.setChanged)
|
---|
198 | props.handleClose()
|
---|
199 | }
|
---|
200 | }>
|
---|
201 | Откажи резервација
|
---|
202 | </Button>
|
---|
203 | </Modal.Footer>
|
---|
204 | </Modal>
|
---|
205 |
|
---|
206 | </>
|
---|
207 | )
|
---|
208 | }
|
---|
209 |
|
---|
210 | export default HotelReservationModal; |
---|