[e6c2521] | 1 | import React from "react";
|
---|
| 2 | import {Container, Row, Col} from "react-bootstrap";
|
---|
| 3 | import {RxDot} from "react-icons/rx"
|
---|
| 4 | import Line from "./Line";
|
---|
| 5 |
|
---|
| 6 | const Waypoint = (props) => {
|
---|
| 7 | console.log(props.left)
|
---|
| 8 | const style = props.left === "true" ? {textAlign: "left"} : {}
|
---|
| 9 | console.log(style)
|
---|
| 10 |
|
---|
| 11 | const getTimeAsString = (dateString) => {
|
---|
| 12 | if(dateString === '')
|
---|
| 13 | return ''
|
---|
| 14 | const date = new Date(dateString)
|
---|
| 15 | return `${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
|
---|
| 16 | }
|
---|
| 17 |
|
---|
| 18 | return (
|
---|
| 19 | <>
|
---|
| 20 | <Row className="d-flex flex-row gap-0">
|
---|
| 21 | {props.left === "true" &&
|
---|
| 22 | <Col className="d-flex flex-column justify-content-center col-md-4" style={{paddingLeft: "2.6rem"}}>
|
---|
| 23 | <h5 style={{color: props.routes === "true" ? "white" : ""}}
|
---|
| 24 | className="m-auto">{getTimeAsString(props.time)}</h5>
|
---|
| 25 | </Col>}
|
---|
| 26 | <Col md="auto">
|
---|
| 27 | <RxDot size={"4rem"} color="#159895"></RxDot>
|
---|
| 28 | </Col>
|
---|
| 29 | <Col className="d-flex flex-column justify-content-center">
|
---|
| 30 | <h3 className="my-auto" style={{
|
---|
| 31 | ...style,
|
---|
| 32 | fontSize: props.routes === "true" ? "1.3rem" : "",
|
---|
| 33 | color: props.routes === "true" ? "#708090 " : ""
|
---|
| 34 | }}>{props.city}</h3>
|
---|
| 35 | </Col>
|
---|
| 36 | {props.left !== "true" && <Col className="d-flex flex-column justify-content-center">
|
---|
| 37 | <h5>{getTimeAsString(props.time)}</h5>
|
---|
| 38 | </Col>}
|
---|
| 39 | </Row>
|
---|
| 40 | <Row className="d-flex flex-row gap-0">
|
---|
| 41 | {props.left === "true" &&
|
---|
| 42 | <Col className="d-flex flex-column justify-content-center col-md-4" style={{paddingLeft: "2.6rem"}}>
|
---|
| 43 |
|
---|
| 44 | </Col>}
|
---|
| 45 | <Col md="auto">
|
---|
| 46 | <Line left={props.left}> </Line>
|
---|
| 47 | </Col>
|
---|
| 48 | <Col className="d-flex flex-column justify-content-center">
|
---|
| 49 | </Col>
|
---|
| 50 | {props.left !== "true" && <Col className="d-flex flex-column justify-content-center">
|
---|
| 51 |
|
---|
| 52 | </Col>}
|
---|
| 53 | </Row>
|
---|
| 54 | {/*<Row>*/}
|
---|
| 55 | {/*<Line left={props.left}> </Line>*/}
|
---|
| 56 | {/*</Row>*/}
|
---|
| 57 | </>
|
---|
| 58 | );
|
---|
| 59 | };
|
---|
| 60 |
|
---|
| 61 | export default Waypoint;
|
---|