[e6c2521] | 1 | import React from "react";
|
---|
| 2 | import LoginForm from "../Components/Login/LoginForm";
|
---|
| 3 | import {Container, Row, Col, Form, Image, Button, Modal} from "react-bootstrap";
|
---|
| 4 | import Navigation from "../Components/Layout/Navbar/Navigation";
|
---|
| 5 | import Carousel from "react-bootstrap/Carousel";
|
---|
| 6 | import {useState} from "react";
|
---|
| 7 | import DescriptionContainer from "../Components/HotelDetails/DescriptionContainer";
|
---|
| 8 | import ReviewsCarousel from "../Components/HotelDetails/ReviewsCarousel";
|
---|
| 9 | import RoomsTable from "../Components/HotelDetails/RoomsTable";
|
---|
| 10 | import ContactBar from "../Components/HotelDetails/ContactBar";
|
---|
| 11 | import RouteContainer from "../Components/TransportDetails/RouteContainer";
|
---|
| 12 | import {useLocation, useParams} from "react-router-dom";
|
---|
| 13 | import SearchCriteriasTransport from "../Components/SearchCriterias/SearchCriteriasTransport";
|
---|
| 14 | import SearchCriteriasBar from "../Components/SearchCriterias/SearchCriteriasBar";
|
---|
| 15 | import useCreate from "../Components/Hooks/useCreate";
|
---|
| 16 |
|
---|
| 17 | const TransportDetailsPage = (props) => {
|
---|
| 18 | document.body.style.backgroundColor = "white";
|
---|
| 19 | const {createEntity} = useCreate()
|
---|
| 20 |
|
---|
| 21 | const [index, setIndex] = useState(0);
|
---|
| 22 | const [getData, setData] = useState(0);
|
---|
| 23 |
|
---|
| 24 | const location = useLocation();
|
---|
| 25 | const {data, params} = location.state;
|
---|
| 26 | const [show, setShow] = useState(false);
|
---|
| 27 | const handleClose = () => setShow(false);
|
---|
| 28 | const handleShow = () => setShow(true);
|
---|
| 29 | const route = data.transportRoutes.filter(x => x.from === params.from && x.to === params.to)[0];
|
---|
| 30 | const dateFormatter = (str) => {
|
---|
| 31 | const inputDate = new Date(str);
|
---|
| 32 |
|
---|
| 33 | const options = {
|
---|
| 34 | year: 'numeric',
|
---|
| 35 | month: '2-digit',
|
---|
| 36 | day: '2-digit',
|
---|
| 37 | hour12: false,
|
---|
| 38 | hour: '2-digit',
|
---|
| 39 | minute: '2-digit'
|
---|
| 40 | };
|
---|
| 41 |
|
---|
| 42 | return inputDate.toLocaleString('de-DE', options);
|
---|
| 43 |
|
---|
| 44 | }
|
---|
| 45 |
|
---|
| 46 | const handleSelect = (selectedIndex) => {
|
---|
| 47 | setIndex(selectedIndex);
|
---|
| 48 | };
|
---|
| 49 |
|
---|
| 50 | return (
|
---|
| 51 | <>
|
---|
| 52 | <Navigation/>
|
---|
| 53 | <Container className="my-3">
|
---|
| 54 | <Row>
|
---|
| 55 | <span><h2 style={{color: "#159895", textAlign: 'left'}}>Вашето пребарување</h2></span>
|
---|
| 56 | </Row>
|
---|
| 57 | <SearchCriteriasBar type={'transport'} showButton={false} criterias={params}></SearchCriteriasBar>
|
---|
| 58 | <Row className="d-flex justify-content-between">
|
---|
| 59 | <Col style={{textAlign: "left"}}>
|
---|
| 60 | <span>
|
---|
| 61 | <h3 style={{color: "#159895"}}><b>Резултантна рута</b></h3>
|
---|
| 62 | <h2 style={{color: "#159895"}}>{data.from} - {data.to}</h2>
|
---|
| 63 | <h5 style={{color: "#159895"}}>({data.routes.join(", ")})</h5>
|
---|
| 64 | </span>
|
---|
| 65 | </Col>
|
---|
| 66 | <Col>
|
---|
| 67 | <Container>
|
---|
| 68 | <Row className="mb-4">
|
---|
| 69 | <Col style={{textAlign: "right"}}>
|
---|
| 70 | <span
|
---|
| 71 | style={{
|
---|
| 72 | backgroundColor: "#159895",
|
---|
| 73 | padding: "0.75em",
|
---|
| 74 | fontWeight: "bold",
|
---|
| 75 | fontSize: "1.25rem",
|
---|
| 76 | borderRadius: "0.75em",
|
---|
| 77 | color: "white",
|
---|
| 78 | }}
|
---|
| 79 | >
|
---|
| 80 | 9.1
|
---|
| 81 | </span>
|
---|
| 82 | </Col>
|
---|
| 83 | </Row>
|
---|
| 84 | </Container>
|
---|
| 85 | </Col>
|
---|
| 86 | </Row>
|
---|
| 87 | <Row>
|
---|
| 88 | <RouteContainer data={data}></RouteContainer>
|
---|
| 89 | </Row>
|
---|
| 90 | <hr></hr>
|
---|
| 91 | <Row>
|
---|
| 92 | <Col>
|
---|
| 93 | <h3>Одбрана рута</h3>
|
---|
| 94 | </Col>
|
---|
| 95 | <Col>
|
---|
| 96 | <h3>{params.from + ' - ' + params.to}</h3>
|
---|
| 97 | </Col>
|
---|
| 98 | </Row>
|
---|
| 99 | <hr></hr>
|
---|
| 100 | <Row>
|
---|
| 101 | <Col>
|
---|
| 102 | <h3>Очекувано време на поаѓање</h3>
|
---|
| 103 | </Col>
|
---|
| 104 | <Col>
|
---|
| 105 | <h3>{dateFormatter(route.departure)}</h3>
|
---|
| 106 | </Col>
|
---|
| 107 | </Row>
|
---|
| 108 | <hr></hr>
|
---|
| 109 | <Row>
|
---|
| 110 | <Col>
|
---|
| 111 | <h3>Цена</h3>
|
---|
| 112 | </Col>
|
---|
| 113 | <Col>
|
---|
| 114 | <h3>{data.price}$</h3>
|
---|
| 115 | </Col>
|
---|
| 116 | </Row>
|
---|
| 117 | <hr></hr>
|
---|
| 118 | <Row>
|
---|
| 119 | <Col className="d-flex flex-column justify-content-center">
|
---|
| 120 | <h3>Возач</h3>
|
---|
| 121 | </Col>
|
---|
| 122 | <Col className="d-flex flex-column justify-content-center">
|
---|
| 123 | <Container className="d-flex flex-row justify-content-center mb-3" style={{paddingLeft: "28%"}}>
|
---|
| 124 | <Col className="d-flex flex-column justify-content-center" style={{maxWidth: "30%"}}>
|
---|
| 125 | <Image
|
---|
| 126 | src="https://t3.ftcdn.net/jpg/05/16/27/58/360_F_516275801_f3Fsp17x6HQK0xQgDQEELoTuERO4SsWV.jpg"
|
---|
| 127 | style={{
|
---|
| 128 | height: "4em",
|
---|
| 129 | borderRadius: "50%",
|
---|
| 130 | maxWidth: "100%",
|
---|
| 131 | }}
|
---|
| 132 | className="m-auto"
|
---|
| 133 | ></Image>
|
---|
| 134 | </Col>
|
---|
| 135 | <Col className="d-flex flex-column justify-content-center">
|
---|
| 136 | <Container className="pt-2" style={{textAlign: "left"}}>
|
---|
| 137 | <h4>{data.transport.owner.name} {data.transport.owner.surname.substring(0, 1)}.</h4>
|
---|
| 138 | </Container>
|
---|
| 139 | </Col>
|
---|
| 140 | </Container>
|
---|
| 141 | </Col>
|
---|
| 142 | </Row>
|
---|
| 143 | <hr></hr>
|
---|
| 144 | <Row>
|
---|
| 145 | <Col>
|
---|
| 146 | <h3>Возило</h3>
|
---|
| 147 | </Col>
|
---|
| 148 | <Col>
|
---|
| 149 | <h3>{data.transport.carBrand + " " + data.transport.carType}</h3>
|
---|
| 150 | </Col>
|
---|
| 151 | </Row>
|
---|
| 152 | <hr></hr>
|
---|
| 153 | <Row>
|
---|
| 154 | <Col className="d-flex flex-column justify-content-center">
|
---|
| 155 | <h3>Број на патници</h3>
|
---|
| 156 | </Col>
|
---|
| 157 | <Col md="auto" className="d-flex flex-column justify-content-center">
|
---|
| 158 | <Form.Select onChange={(e) => {
|
---|
| 159 | setData(e.target.value)
|
---|
| 160 | }} aria-label="Default select example">
|
---|
| 161 | <option></option>
|
---|
| 162 | {[...Array(route.freeSpace).keys()].map(x => {
|
---|
| 163 | return (
|
---|
| 164 | <option value={x+1} >{x + 1}</option>
|
---|
| 165 | )
|
---|
| 166 | })}
|
---|
| 167 | </Form.Select>
|
---|
| 168 | </Col>
|
---|
| 169 | <Col>
|
---|
| 170 | <Button className="m-2" size="lg" style={{backgroundColor: "#159895"}} onClick={handleShow}>Резервирај</Button>
|
---|
| 171 | </Col>
|
---|
| 172 | </Row>
|
---|
| 173 | <Row><ContactBar></ContactBar></Row>
|
---|
| 174 | </Container>
|
---|
| 175 |
|
---|
| 176 | <Modal show={show} size={'lg'} onHide={handleClose}>
|
---|
| 177 | <Modal.Header closeButton>
|
---|
| 178 | <Modal.Title>Потврда на резервација</Modal.Title>
|
---|
| 179 | </Modal.Header>
|
---|
| 180 | <Modal.Body>
|
---|
| 181 | <h4>Резервација на рута</h4>
|
---|
| 182 | <h3>{route.from + ' ' + route.to}</h3>
|
---|
| 183 | <h4>Време на поаѓање:<b>{' ' + dateFormatter(route.departure)}</b></h4>
|
---|
| 184 | <h4>Време на престигнување:<b>{' ' + dateFormatter(route.arrival)}</b></h4>
|
---|
| 185 | <h4>Број на патници:<b>{' ' + getData}</b></h4>
|
---|
| 186 | </Modal.Body>
|
---|
| 187 | <Modal.Footer>
|
---|
| 188 | <Button variant="secondary" onClick={handleClose}>
|
---|
| 189 | Close
|
---|
| 190 | </Button>
|
---|
| 191 | <Button variant="primary" onClick={() => {
|
---|
| 192 | createEntity('transport/reserve', {
|
---|
| 193 | transportRouteId: route.routeId,
|
---|
| 194 | userId: 1,
|
---|
| 195 | numSeats: getData
|
---|
| 196 | })
|
---|
| 197 | handleClose();
|
---|
| 198 | }}>
|
---|
| 199 | Резервирај
|
---|
| 200 | </Button>
|
---|
| 201 | </Modal.Footer>
|
---|
| 202 | </Modal>
|
---|
| 203 | </>
|
---|
| 204 | );
|
---|
| 205 | };
|
---|
| 206 |
|
---|
| 207 | export default TransportDetailsPage;
|
---|