|
|
@ -3,7 +3,11 @@ import styled from 'styled-components' |
|
|
|
import { connect } from 'react-redux' |
|
|
|
import { connect } from 'react-redux' |
|
|
|
import { Link } from 'react-router-dom' |
|
|
|
import { Link } from 'react-router-dom' |
|
|
|
|
|
|
|
|
|
|
|
import { getCalendar } from '../actions/calendar' |
|
|
|
import { getFareAttr, getFareRule } from '../actions/fare' |
|
|
|
|
|
|
|
import { getItemFromList } from '../utils' |
|
|
|
|
|
|
|
import { |
|
|
|
|
|
|
|
PaymentMethodChoices, TransferChoices |
|
|
|
|
|
|
|
} from '../constants/choices' |
|
|
|
import store from '../store' |
|
|
|
import store from '../store' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -12,11 +16,6 @@ padding: 1rem; |
|
|
|
background: #fafafa; |
|
|
|
background: #fafafa; |
|
|
|
` |
|
|
|
` |
|
|
|
|
|
|
|
|
|
|
|
const GapBox = styled.span` |
|
|
|
|
|
|
|
margin-right: 5px; |
|
|
|
|
|
|
|
color: ${props => props.checked ? 'green' : 'gray'};; |
|
|
|
|
|
|
|
` |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const FakeRow = styled.nav` |
|
|
|
const FakeRow = styled.nav` |
|
|
|
padding-top: 5px; |
|
|
|
padding-top: 5px; |
|
|
|
padding-bottom: 5px; |
|
|
|
padding-bottom: 5px; |
|
|
@ -24,20 +23,15 @@ background: white; |
|
|
|
margin-bottom: 1rem; |
|
|
|
margin-bottom: 1rem; |
|
|
|
` |
|
|
|
` |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const CheckboxIcon = (props) => ( |
|
|
|
|
|
|
|
<GapBox checked={props.checked}> |
|
|
|
|
|
|
|
{props.checked === true && <span><i className="fas fa-check-square"></i></span>} |
|
|
|
|
|
|
|
{props.checked !== true && <span><i className="fas fa-square"></i></span>} |
|
|
|
|
|
|
|
</GapBox> |
|
|
|
|
|
|
|
) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class FareList extends Component { |
|
|
|
class FareList extends Component { |
|
|
|
|
|
|
|
|
|
|
|
componentWillMount() { |
|
|
|
componentWillMount() { |
|
|
|
const { count } = this.props.fareattr |
|
|
|
const { fareattr, farerule } = this.props |
|
|
|
if (count === 0) |
|
|
|
if (fareattr.count === 0) |
|
|
|
store.dispatch(getCalendar()) |
|
|
|
store.dispatch(getFareAttr()) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
if (farerule.count === 0) |
|
|
|
|
|
|
|
store.dispatch(getFareRule()) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
render() { |
|
|
|
render() { |
|
|
@ -47,105 +41,94 @@ class FareList extends Component { |
|
|
|
<StyledBox> |
|
|
|
<StyledBox> |
|
|
|
<h1 className="title">Fare</h1> |
|
|
|
<h1 className="title">Fare</h1> |
|
|
|
<div className="columns"> |
|
|
|
<div className="columns"> |
|
|
|
|
|
|
|
|
|
|
|
<div className="column is-6"> |
|
|
|
<div className="column is-6"> |
|
|
|
<nav className="level is-mobile"> |
|
|
|
<nav className="level is-mobile"> |
|
|
|
<p className="level-item has-text-centered"> |
|
|
|
<p className="level-item has-text-centered"> |
|
|
|
<Link className="link is-info" to={`${match.url}/rules/new`}> |
|
|
|
<Link className="link is-info" to={`${match.url}/attributes/new`}> |
|
|
|
<i className="fas fa-plus" /> New fare rule |
|
|
|
<i className="fas fa-plus" /> New fare attributes |
|
|
|
</Link> |
|
|
|
</Link> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
</nav> |
|
|
|
{fareattr.results && Object.keys(farerule.results).map(i => ( |
|
|
|
{fareattr.results && Object.keys(fareattr.results).map(i => ( |
|
|
|
<FakeRow className="level panel" key={fareattr.results[i].fare_id}> |
|
|
|
<FakeRow className="level panel" key={fareattr.results[i].fare_id}> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<p className="heading">Fare ID</p> |
|
|
|
<p className="heading">Fare ID</p> |
|
|
|
<p className="title"><Link to={`${match.url}/${fareattr.results[i].fare_id}`}>{fareattr.results[i].fare_id}</Link></p> |
|
|
|
<p className="title"><Link to={`${match.url}/attributes/${fareattr.results[i].id}`}>{fareattr.results[i].fare_id}</Link></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<p className="heading">Origin ID</p> |
|
|
|
<p className="heading">Price</p> |
|
|
|
<p className="title">{fareattr.results[i].origin_id}</p> |
|
|
|
<p key={fareattr.results[i].id}>{fareattr.results[i].price} |
|
|
|
|
|
|
|
<small>{fareattr.results[i].currency_type}</small> |
|
|
|
|
|
|
|
<br /> |
|
|
|
|
|
|
|
{getItemFromList(fareattr.results[i].payment_method, PaymentMethodChoices, '') && getItemFromList(fareattr.results[i].payment_method, PaymentMethodChoices, '').label} |
|
|
|
|
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<p className="heading">Destination ID (or contains)</p> |
|
|
|
<p className="heading">Transfer / sec</p> |
|
|
|
<p className="title"> |
|
|
|
<p> |
|
|
|
{fareattr.results[i].destination_id} |
|
|
|
{getItemFromList(fareattr.results[i].transfer, TransferChoices, '') && getItemFromList(fareattr.results[i].transfer, TransferChoices, '').label} |
|
|
|
{fareattr.results[i].contains_id} |
|
|
|
/ {fareattr.results[i].transfer_duration}</p> |
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<p className="heading">Route ID</p> |
|
|
|
<p className="heading">Agency</p> |
|
|
|
<p className="title"> |
|
|
|
<p className="title">{fareattr.results[i].agency.name}</p> |
|
|
|
{fareattr.results[i].route_id} |
|
|
|
|
|
|
|
</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</FakeRow> |
|
|
|
</FakeRow> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div className="column is-6"> |
|
|
|
<div className="column is-6"> |
|
|
|
<nav className="level is-mobile"> |
|
|
|
<nav className="level is-mobile"> |
|
|
|
<p className="level-item has-text-centered"> |
|
|
|
<p className="level-item has-text-centered"> |
|
|
|
<Link className="link is-info" to={`${match.url}/attributes/new`}> |
|
|
|
<Link className="link is-info" to={`${match.url}/rules/new`}> |
|
|
|
<i className="fas fa-plus" /> New fare attributes |
|
|
|
<i className="fas fa-plus" /> New fare rule |
|
|
|
</Link> |
|
|
|
</Link> |
|
|
|
</p> |
|
|
|
</p> |
|
|
|
</nav> |
|
|
|
</nav> |
|
|
|
{fareattr.results && Object.keys(fareattr.results).map(i => ( |
|
|
|
{farerule.results && Object.keys(farerule.results).map(i => ( |
|
|
|
<FakeRow className="level panel" key={fareattr.results[i].fare_id}> |
|
|
|
<FakeRow className="level panel" key={farerule.results[i].fare_id}> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<p className="heading">Fare ID</p> |
|
|
|
<p className="heading">Fare ID</p> |
|
|
|
<p className="title"><Link to={`${match.url}/${fareattr.results[i].fare_id}`}>{fareattr.results[i].fare_id}</Link></p> |
|
|
|
<p className="title"><Link to={`${match.url}/rules/${farerule.results[i].id}`}>{farerule.results[i].fare.fare_id}</Link></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<p className="heading">Price</p> |
|
|
|
<p className="heading">Origin ID</p> |
|
|
|
<p className="title">{fareattr.results[i].price}</p> |
|
|
|
<p className="title">{farerule.results[i].origin_id}</p> |
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<p className="heading">Currency</p> |
|
|
|
|
|
|
|
<p className="title">{fareattr.results[i].currency_type}</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<p className="heading">Payment Method</p> |
|
|
|
|
|
|
|
<p className="title">{fareattr.results[i].payment_method}</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
|
|
|
|
<div> |
|
|
|
|
|
|
|
<p className="heading">Transfer</p> |
|
|
|
|
|
|
|
<p className="title">{fareattr.results[i].transfer}</p> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<p className="heading">Duration</p> |
|
|
|
<p className="heading">Destination ID (or contains)</p> |
|
|
|
<p className="title">{fareattr.results[i].transfer_duration}</p> |
|
|
|
<p className="title"> |
|
|
|
|
|
|
|
{farerule.results[i].destination_id} |
|
|
|
|
|
|
|
{farerule.results[i].contains_id} |
|
|
|
|
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div className="level-item has-text-centered"> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<p className="heading">Agency</p> |
|
|
|
<p className="heading">Route ID</p> |
|
|
|
<p className="title">{fareattr.results[i].agency_id}</p> |
|
|
|
<p className="title"> |
|
|
|
|
|
|
|
{farerule.results[i].route_id} |
|
|
|
|
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</FakeRow> |
|
|
|
</FakeRow> |
|
|
|
))} |
|
|
|
))} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</StyledBox> |
|
|
|
</StyledBox> |
|
|
|
) |
|
|
|
) |
|
|
|