[e6c2521] | 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";
|
---|
[07f4e8b] | 7 | import useCreate from "../Hooks/useCreate";
|
---|
[e6c2521] | 8 |
|
---|
| 9 | const HotelReservationModal = (props) => {
|
---|
| 10 |
|
---|
[07f4e8b] | 11 | const {createEntity} = useCreate();
|
---|
| 12 |
|
---|
[e6c2521] | 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 |
|
---|
[07f4e8b] | 23 | console.log(props)
|
---|
| 24 |
|
---|
[e6c2521] | 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>
|
---|
[07f4e8b] | 196 | <Button variant="danger" onClick={() => {
|
---|
| 197 | createEntity(`/hotel/${props.data.reservationId}/cancel`, props.setChanged)
|
---|
| 198 | props.handleClose()
|
---|
| 199 | }
|
---|
| 200 | }>
|
---|
| 201 | Откажи резервација
|
---|
| 202 | </Button>
|
---|
[e6c2521] | 203 | </Modal.Footer>
|
---|
| 204 | </Modal>
|
---|
| 205 |
|
---|
| 206 | </>
|
---|
| 207 | )
|
---|
| 208 | }
|
---|
| 209 |
|
---|
| 210 | export default HotelReservationModal; |
---|