diff options
5 files changed, 71 insertions, 66 deletions
diff --git a/app/javascript/helpers/stop_area_header_manager.js b/app/javascript/helpers/stop_area_header_manager.js new file mode 100644 index 000000000..54d957be9 --- /dev/null +++ b/app/javascript/helpers/stop_area_header_manager.js @@ -0,0 +1,42 @@ +import React, { Component } from 'react' + +export default class StopAreaHeaderManager { + constructor(ids_list, stopPointsList, features) { + this.ids_list = ids_list + this.stopPointsList = stopPointsList + this.features = features + } + + hasFeature(key) { + return this.features[key] + } + + stopPointHeader(object_id) { + let index = this.ids_list.indexOf(object_id) + let sp = this.stopPointsList[index] + let showHeadline = this.showHeader(object_id) + return ( + <div + className={(showHeadline) ? 'headlined' : ''} + data-headline={showHeadline} + title={sp.city_name + ' (' + sp.zip_code +')'} + > + <span><span>{sp.name}</span></span> + </div> + ) + } + + showHeader(object_id) { + let showHeadline = false + let headline = "" + let attribute_to_check = this.hasFeature('long_distance_routes') ? "country_code" : "city_name" + let index = this.ids_list.indexOf(object_id) + let sp = this.stopPointsList[index] + let previousBreakpoint = this.stopPointsList[index - 1] + if(index == 0 || (sp[attribute_to_check] != previousBreakpoint[attribute_to_check])){ + showHeadline = true + headline = this.hasFeature('long_distance_routes') ? sp.country_name : sp.city_name + } + return showHeadline ? headline : "" + } +} diff --git a/app/javascript/journey_patterns/components/JourneyPattern.js b/app/javascript/journey_patterns/components/JourneyPattern.js index 47fb6882d..2ae9f5552 100644 --- a/app/javascript/journey_patterns/components/JourneyPattern.js +++ b/app/javascript/journey_patterns/components/JourneyPattern.js @@ -32,8 +32,8 @@ export default class JourneyPattern extends Component{ return this.props.status.features[key] } - cityNameChecker(sp) { - return this.props.journeyPatterns.showHeader(sp.object_id) + cityNameChecker(sp, i) { + return this.props.journeyPatterns.showHeader(sp.object_id + "-" + i) } spNode(sp, headlined){ @@ -149,7 +149,7 @@ export default class JourneyPattern extends Component{ if(stopPoint.checked){ this.previousSpId = stopPoint.id } - let headlined = this.cityNameChecker(stopPoint) + let headlined = this.cityNameChecker(stopPoint, i) return ( <div key={i} className={(stopPoint.checked ? 'activated' : 'deactivated') + (this.props.editMode ? ' edit-mode' : '')}> <div className={'td' + (headlined ? ' with-headline' : '')}> diff --git a/app/javascript/journey_patterns/components/JourneyPatterns.js b/app/javascript/journey_patterns/components/JourneyPatterns.js index c261b408a..31727fefc 100644 --- a/app/javascript/journey_patterns/components/JourneyPatterns.js +++ b/app/javascript/journey_patterns/components/JourneyPatterns.js @@ -2,12 +2,16 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import _ from 'lodash' import JourneyPattern from './JourneyPattern' - +import StopAreaHeaderManager from '../../helpers/stop_area_header_manager' export default class JourneyPatterns extends Component { constructor(props){ super(props) - this.stopPointsIds = _.map(this.props.stopPointsList, (sp)=>{return sp.stop_area_object_id}) + this.headerManager = new StopAreaHeaderManager( + _.map(this.props.stopPointsList, (sp, i)=>{return sp.stop_area_object_id + "-" + i}), + this.props.stopPointsList, + this.props.status.features + ) } componentDidMount() { @@ -58,30 +62,7 @@ export default class JourneyPatterns extends Component { } showHeader(object_id) { - let showHeadline = false - let headline = "" - let attribute_to_check = this.hasFeature('long_distance_routes') ? "country_code" : "city_name" - let index = this.stopPointsIds.indexOf(object_id) - let sp = this.props.stopPointsList[index] - let previousBreakpoint = this.props.stopPointsList[index - 1] - if(index == 0 || (sp[attribute_to_check] != previousBreakpoint[attribute_to_check])){ - showHeadline = true - headline = this.hasFeature('long_distance_routes') ? sp.country_name : sp.city_name - } - return showHeadline ? headline : "" - } - - stopPointHeader(sp) { - let showHeadline = this.showHeader(sp.stop_area_object_id) - return ( - <div - className={(showHeadline) ? 'headlined' : ''} - data-headline={showHeadline} - title={sp.city_name + ' (' + sp.zip_code +')'} - > - <span><span>{sp.name}</span></span> - </div> - ) + return this.headerManager.showHeader(object_id) } hasFeature(key) { @@ -133,7 +114,7 @@ export default class JourneyPatterns extends Component { {this.props.stopPointsList.map((sp, i) =>{ return ( <div key={i} className={'td' + (this.hasFeature('costs_in_journey_patterns') ? ' with-costs' : '')}> - {this.stopPointHeader(sp)} + {this.headerManager.stopPointHeader(sp.stop_area_object_id + "-" + i)} </div> ) })} diff --git a/app/javascript/vehicle_journeys/components/VehicleJourneys.js b/app/javascript/vehicle_journeys/components/VehicleJourneys.js index 3f5a51093..b188962c2 100644 --- a/app/javascript/vehicle_journeys/components/VehicleJourneys.js +++ b/app/javascript/vehicle_journeys/components/VehicleJourneys.js @@ -2,13 +2,18 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import _ from 'lodash' import VehicleJourney from './VehicleJourney' - +import StopAreaHeaderManager from '../../helpers/stop_area_header_manager' export default class VehicleJourneys extends Component { constructor(props){ super(props) - this.stopPointsIds = _.map(this.props.stopPointsList, (sp)=>{return sp.object_id}) + this.headerManager = new StopAreaHeaderManager( + _.map(this.props.stopPointsList, (sp)=>{return sp.object_id}), + this.props.stopPointsList, + this.props.filters.features + ) } + componentDidMount() { this.props.onLoadFirstPage(this.props.filters) } @@ -17,6 +22,10 @@ export default class VehicleJourneys extends Component { return this.props.filters.features[key] } + showHeader(object_id) { + return this.headerManager.showHeader(object_id) + } + componentDidUpdate(prevProps, prevState) { if(this.props.status.isFetching == false){ $('.table-2entries').each(function() { @@ -60,33 +69,6 @@ export default class VehicleJourneys extends Component { } } - showHeader(object_id) { - let showHeadline = false - let headline = "" - let attribute_to_check = this.hasFeature('long_distance_routes') ? "country_code" : "city_name" - let index = this.stopPointsIds.indexOf(object_id) - let sp = this.props.stopPointsList[index] - let previousBreakpoint = this.props.stopPointsList[index - 1] - if(index == 0 || (sp[attribute_to_check] != previousBreakpoint[attribute_to_check])){ - showHeadline = true - headline = this.hasFeature('long_distance_routes') ? sp.country_name : sp.city_name - } - return showHeadline ? headline : "" - } - - stopPointHeader(sp) { - let showHeadline = this.showHeader(sp.object_id) - return ( - <div - className={(showHeadline) ? 'headlined' : ''} - data-headline={showHeadline} - title={sp.city_name + ' (' + sp.zip_code +')'} - > - <span><span>{sp.name}</span></span> - </div> - ) - } - render() { this.previousBreakpoint = undefined @@ -135,7 +117,7 @@ export default class VehicleJourneys extends Component { {this.props.stopPointsList.map((sp, i) =>{ return ( <div key={i} className='td'> - {this.stopPointHeader(sp)} + {this.headerManager.stopPointHeader(sp.object_id)} </div> ) })} diff --git a/spec/javascript/journey_patterns/components/__snapshots__/JourneyPatterns_spec.js.snap b/spec/javascript/journey_patterns/components/__snapshots__/JourneyPatterns_spec.js.snap index 90b8cb656..a332e7d80 100644 --- a/spec/javascript/journey_patterns/components/__snapshots__/JourneyPatterns_spec.js.snap +++ b/spec/javascript/journey_patterns/components/__snapshots__/JourneyPatterns_spec.js.snap @@ -47,8 +47,8 @@ exports[`stopPointHeader should display the city name 1`] = ` className="td" > <div - className="headlined" - data-headline="City Name" + className="" + data-headline="" title="City Name (12345)" > <span> @@ -63,7 +63,7 @@ exports[`stopPointHeader should display the city name 1`] = ` > <div className="headlined" - data-headline="City Name" + data-headline="New York" title="New York (232323)" > <span> @@ -131,8 +131,8 @@ exports[`stopPointHeader with the "long_distance_routes" feature should display className="td" > <div - className="headlined" - data-headline="france" + className="" + data-headline="" title="City Name (12345)" > <span> @@ -147,7 +147,7 @@ exports[`stopPointHeader with the "long_distance_routes" feature should display > <div className="headlined" - data-headline="france" + data-headline="USA" title="New York (232323)" > <span> |