sipp11
/
grunt-front
1
0
Fork 0
Code Issues Pull Requests Releases Activity
Browse Source

wip

dev
sipp11 6 years ago
parent
30288f60e3
commit
97ff4c0320
8 changed files with 202 additions and 83 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 134
      src/components/FareAttributesDetail.js
  2. 6
      src/components/FareAttributesForm.js
  3. 78
      src/components/FareList.js
  4. 48
      src/components/FareRulesDetail.js
  5. 6
      src/components/FareRulesForm.js
  6. 6
      src/container/Main.js
  7. 4
      src/reducers/farerule.js
  8. 3
      src/store.js

134
src/components/FareAttributesDetail.js
Unescape View File

@ -0,0 +1,134 @@
import React, { Component } from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import { Redirect, Link } from 'react-router-dom'
import {
PaymentMethodChoices, TransferChoices
} from '../constants/choices'
import { getItemFromList } from '../utils'
import { getFareAttr, getFareRule } from '../actions/fare'
import store from '../store'
import { FareRulesOne } from './FareRulesDetail'
const StyledFareAttributesDetail = styled.div`
padding: 1rem;
background: #fafafa;
`
const FakeRow = styled.nav`
padding-top: 5px;
padding-bottom: 5px;
background: white;
margin-bottom: 1rem;
`
export const FareAttributesOne = (props) => {
const { item, edit } = props
const payTxt = getItemFromList(item.payment_method, PaymentMethodChoices, '')
const transferTxt = getItemFromList(item.transfer, TransferChoices, '')
return (
<FakeRow className="level panel" key={item.fare_id}>
<div className="level-item has-text-centered">
<div>
<p className="heading">Fare ID</p>
<Link to={`/fare/attributes/${item.id}${edit ? '/edit' : ''}`}>{item.fare_id}</Link>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Price</p>
<p key={item.id}>{item.price} <small>{item.currency_type}</small>
<br />
{payTxt && payTxt.label}
</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Transfer / sec</p>
<p>{transferTxt && transferTxt.label} / {item.transfer_duration}</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Agency</p>
<Link to={`/agency/${item.agency.agency_id}`} >{item.agency.name}</Link>
</div>
</div>
</FakeRow>
)
}
class FareAttributesDetail extends Component {
state = {
fetching: true
}
constructor() {
super()
this.renderItem = this.renderItem.bind(this)
}
componentWillMount() {
const { props } = this
const { attribID } = props.match.params
const { results } = props.fareattr
const ones = results.filter(ele => ele.id === +attribID)
store.dispatch(getFareRule(`fareattr=${attribID}`))
if (ones.length > 0) {
this.setState({fetching: false})
} else {
store.dispatch(getFareAttr())
this.setState({fetching: true})
}
}
componentWillReceiveProps(nextProps) {
if (this.props.fareattr.fetching && !nextProps.fareattr.fetching) {
this.setState({fetching: false})
}
}
renderItem(one) {
return (
<StyledFareAttributesDetail>
<FareAttributesOne item={one} edit={true} />
</StyledFareAttributesDetail>
)
}
render () {
const { fetching, results } = this.props.fareattr
const { farerule } = this.props
// redirect to view page if no data
const { attribID } = this.props.match.params
const ones = results.filter(ele => ele.id === +attribID)
if (this.state.fetching || fetching)
return <div>Waiting...</div>
if (ones.length < 1)
return <Redirect to='/fare' />
return (
<div>
{this.renderItem(ones[0])}
{farerule.results.map(ele => <FareRulesOne item={ele} />)}
</div>
)
}
}
const mapStateToProps = state => ({
fareattr: state.fareattr,
farerule: state.farerule,
})
const connectFareAttributesDetail = connect(
mapStateToProps,
)(FareAttributesDetail)
export default connectFareAttributesDetail

6
src/components/FareAttributesForm.js
Unescape View File

@ -190,16 +190,16 @@ class FareAttributesForm extends Component {
const one = this.state
const { fetching } = this.props.fareattr
// redirect to view page if no data
const { serviceId } = this.props.match.params
const { attribID } = this.props.match.params
// this is a create form
if (serviceId === undefined) {
if (attribID === undefined) {
if (one.justSubmit === true && !fetching) {
return <Redirect to={`/fare`} />
}
return this.renderForm()
}
if (one.id === null && serviceId.length > 0)
if (one.id === null && attribID.length > 0)
return <Redirect to={`/fare`} />
// redirect to fare list if submitted

78
src/components/FareList.js
Unescape View File

@ -4,11 +4,9 @@ import { connect } from 'react-redux'
import { Link } from 'react-router-dom'
import { getFareAttr, getFareRule } from '../actions/fare'
import { getItemFromList } from '../utils'
import {
PaymentMethodChoices, TransferChoices
} from '../constants/choices'
import store from '../store'
import { FareAttributesOne } from './FareAttributesDetail'
import { FareRulesOne } from './FareRulesDetail'
const StyledBox = styled.div`
@ -16,13 +14,6 @@ padding: 1rem;
background: #fafafa;
`
const FakeRow = styled.nav`
padding-top: 5px;
padding-bottom: 5px;
background: white;
margin-bottom: 1rem;
`
class FareList extends Component {
componentWillMount() {
@ -51,38 +42,7 @@ class FareList extends Component {
</p>
</nav>
{fareattr.results && Object.keys(fareattr.results).map(i => (
<FakeRow className="level panel" key={fareattr.results[i].fare_id}>
<div className="level-item has-text-centered">
<div>
<p className="heading">Fare ID</p>
<Link to={`${match.url}/attributes/${fareattr.results[i].id}`}>{fareattr.results[i].fare_id}</Link>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Price</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 className="level-item has-text-centered">
<div>
<p className="heading">Transfer / sec</p>
<p>
{getItemFromList(fareattr.results[i].transfer, TransferChoices, '') && getItemFromList(fareattr.results[i].transfer, TransferChoices, '').label}
/ {fareattr.results[i].transfer_duration}</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Agency</p>
<Link to={`/agency/${fareattr.results[i].agency.agency_id}`} >{fareattr.results[i].agency.name}</Link>
</div>
</div>
</FakeRow>
<FareAttributesOne item={fareattr.results[i]} />
))}
</div>
@ -95,37 +55,7 @@ class FareList extends Component {
</p>
</nav>
{farerule.results && Object.keys(farerule.results).map(i => (
<FakeRow className="level panel" key={farerule.results[i].fare_id}>
<div className="level-item has-text-centered">
<div>
<p className="heading">Fare ID</p>
<Link to={`${match.url}/rules/${farerule.results[i].id}`}>{farerule.results[i].fare.fare_id}</Link>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Origin ID</p>
<p className="title">{farerule.results[i].origin_id}</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Destination ID (or contains)</p>
<p className="title">
{farerule.results[i].destination_id}
{farerule.results[i].contains_id}
</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Route ID</p>
<p>
{farerule.results[i].route && (farerule.results[i].route.route_id || '-')}
</p>
</div>
</div>
</FakeRow>
<FareRulesOne item={farerule.results[i]} />
))}
</div>

48
src/components/FareRulesDetail.js
Unescape View File

@ -0,0 +1,48 @@
import React from 'react'
import styled from 'styled-components'
import { Link } from 'react-router-dom'
const FakeRow = styled.nav`
padding-top: 5px;
padding-bottom: 5px;
background: white;
margin-bottom: 1rem;
`
export const FareRulesOne = (props) => {
const { item } = props
return (
<FakeRow className="level panel" key={item.fare_id}>
<div className="level-item has-text-centered">
<div>
<p className="heading">Fare ID</p>
<Link to={`/fare/rules/${item.id}`}>{item.fare.fare_id}</Link>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Origin ID</p>
<p className="title">{item.origin_id}</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Destination ID (or contains)</p>
<p className="title">
{item.destination_id}
{item.contains_id}
</p>
</div>
</div>
<div className="level-item has-text-centered">
<div>
<p className="heading">Route ID</p>
<p>
{item.route && (item.route.route_id || '-')}
</p>
</div>
</div>
</FakeRow>
)
}

6
src/components/FareRulesForm.js
Unescape View File

@ -222,16 +222,16 @@ class FareRulesForm extends Component {
const one = this.state
const { fetching } = this.props.farerule
// redirect to view page if no data
const { serviceId } = this.props.match.params
const { attribID } = this.props.match.params
// this is a create form
if (serviceId === undefined) {
if (attribID === undefined) {
if (one.justSubmit === true && !fetching) {
return <Redirect to={`/fare`} />
}
return this.renderForm()
}
if (one.id === null && serviceId.length > 0)
if (one.id === null && attribID.length > 0)
return <Redirect to={`/fare`} />
// redirect to fare list if submitted

6
src/container/Main.js
Unescape View File

@ -17,6 +17,7 @@ import TripForm from '../components/TripForm'
import FareList from '../components/FareList'
import FareRulesForm from '../components/FareRulesForm'
import FareAttributesForm from '../components/FareAttributesForm'
import FareAttributesDetail from '../components/FareAttributesDetail'
import { LOGIN_PATH } from '../constants/path'
import store from '../store'
@ -54,10 +55,11 @@ class Main extends Component {
<Route exact path={`${match.url}agency`} component={AgencyList} />
<Route exact path={`${match.url}fare`} component={FareList} />
<Route exact path={`${match.url}fare/attributes/new`} component={FareAttributesForm} />
<Route exact path={`${match.url}fare/attributes/:attribID/edit`} component={FareAttributesForm} />
<Route exact path={`${match.url}fare/attributes/:attribID`} component={FareAttributesDetail} />
<Route exact path={`${match.url}fare/rules/new`} component={FareRulesForm} />
<Route exact path={`${match.url}fare/rules/:ruleID`} component={FareRulesForm} />
<Route exact path={`${match.url}fare/attributes/new`} component={FareAttributesForm} />
<Route exact path={`${match.url}fare/attributes/:attribID`} component={FareAttributesForm} />
<Route exact path={`${match.url}calendar/new`} component={CalendarForm} />
<Route exact path={`${match.url}calendar/:serviceId`} component={CalendarForm} />

4
src/reducers/farerule.js
Unescape View File

@ -14,10 +14,14 @@ const fareRuleInitState = {
const fareRule = (state = fareRuleInitState, action) => {
switch(action.type) {
case FARERULE_REQUEST:
let resetResult = state.query !== action.meta.query ? [] : state.results
let resetCount = state.query !== action.meta.query ? 0 : state.count
return {
...state,
fetching: true,
query: action.meta !== undefined ? action.meta.query : state.query,
results: resetResult,
count: resetCount,
}
case FARERULE_SUCCESS:
const { count, next, prev, results } = action.payload

3
src/store.js
Unescape View File

@ -12,7 +12,8 @@ import gruntApp from './reducers'
const persistConfig = {
key: 'root',
storage,
blacklist: ['agency', 'calendar']
whitelist: ['auth', 'geo']
// blacklist: ['agency', 'calendar']
}
// create the saga middleware

Write Preview
Loading…
Cancel
Save