Added staton address on modal (#4)
This commit is contained in:
parent
5a00d8f1f3
commit
96f8d29000
1 changed files with 19 additions and 2 deletions
|
@ -2,6 +2,7 @@ import React from 'react';
|
||||||
import { Modal, Button, ListGroup } from "react-bootstrap";
|
import { Modal, Button, ListGroup } from "react-bootstrap";
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { FaWaze } from "react-icons/fa";
|
import { FaWaze } from "react-icons/fa";
|
||||||
|
import { GiPositionMarker } from "react-icons/gi";
|
||||||
import { gasTypes } from "../config";
|
import { gasTypes } from "../config";
|
||||||
|
|
||||||
import { capitalizeFirstLetter, lowerCaseString } from "../helpers";
|
import { capitalizeFirstLetter, lowerCaseString } from "../helpers";
|
||||||
|
@ -37,7 +38,7 @@ class GasStation extends React.Component {
|
||||||
{station.prices ? station.prices.map(price => {
|
{station.prices ? station.prices.map(price => {
|
||||||
return (
|
return (
|
||||||
<ListGroup.Item key={price._id} className={gasType === price.gasType ? "selected-gasType" : ""}>
|
<ListGroup.Item key={price._id} className={gasType === price.gasType ? "selected-gasType" : ""}>
|
||||||
{`${this.renderGasType(price.gasType)} : ${price.price} € `}
|
{`${this.renderGasType(price.gasType)} : ${price.price.toString().replace('.', ',')} € `}
|
||||||
</ListGroup.Item>
|
</ListGroup.Item>
|
||||||
);
|
);
|
||||||
}) : (null)}
|
}) : (null)}
|
||||||
|
@ -60,6 +61,21 @@ class GasStation extends React.Component {
|
||||||
return `${lowerCaseString(station.address)} - ${capitalizeFirstLetter(station.city)}`;
|
return `${lowerCaseString(station.address)} - ${capitalizeFirstLetter(station.city)}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
renderAddress = () => {
|
||||||
|
const {
|
||||||
|
station,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<p>
|
||||||
|
<GiPositionMarker />
|
||||||
|
{lowerCaseString(station.address)}
|
||||||
|
{' - '}
|
||||||
|
{capitalizeFirstLetter(station.city)}
|
||||||
|
</p>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
render () {
|
render () {
|
||||||
const {
|
const {
|
||||||
showModal,
|
showModal,
|
||||||
|
@ -80,6 +96,7 @@ class GasStation extends React.Component {
|
||||||
</Modal.Title>
|
</Modal.Title>
|
||||||
</Modal.Header>
|
</Modal.Header>
|
||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
|
{this.renderAddress()}
|
||||||
{this.renderPrices()}
|
{this.renderPrices()}
|
||||||
</Modal.Body>
|
</Modal.Body>
|
||||||
<Modal.Footer>
|
<Modal.Footer>
|
||||||
|
|
Loading…
Reference in a new issue