Skip to content

Commit 566cd98

Browse files
chrstnbwnklchrstnbwnkl
committed
show summaries, add individual toggling
1 parent 3aeacac commit 566cd98

File tree

7 files changed

+198
-88
lines changed

7 files changed

+198
-88
lines changed

‎src/Controls/Directions/Maneuvers.jsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { connect } from 'react-redux'
4-
import * as R from 'ramda'
54
import { Header, Icon, Divider, Popup } from 'semantic-ui-react'
65

76
import { highlightManeuver, zoomToManeuver } from 'actions/directionsActions'
@@ -17,15 +16,17 @@ const getLength = (length) => {
1716
class Maneuvers extends React.Component {
1817
static propTypes = {
1918
dispatch: PropTypes.func.isRequired,
20-
results: PropTypes.object,
19+
legs: PropTypes.object.isRequired,
20+
idx: PropTypes.number.isRequired,
2121
header: PropTypes.string,
22-
provider: PropTypes.string,
2322
profile: PropTypes.string,
2423
}
2524

2625
highlightMnv = (sIdx, eIdx) => {
27-
const { dispatch } = this.props
28-
dispatch(highlightManeuver({ startIndex: sIdx, endIndex: eIdx }))
26+
const { dispatch, idx } = this.props
27+
dispatch(
28+
highlightManeuver({ startIndex: sIdx, endIndex: eIdx, alternate: idx })
29+
)
2930
}
3031

3132
zoomToMnv = (sIdx) => {
@@ -34,9 +35,7 @@ class Maneuvers extends React.Component {
3435
}
3536

3637
render() {
37-
const { provider, results } = this.props
38-
39-
const legs = R.path([provider, 'data', 'trip', 'legs'], results)
38+
const { legs } = this.props
4039

4140
const startIndices = {
4241
0: 0,

‎src/Controls/Directions/OutputControl.jsx

Lines changed: 137 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,20 @@ class OutputControl extends React.Component {
2424
constructor(props) {
2525
super(props)
2626

27+
const { results } = this.props
28+
const { data } = results[VALHALLA_OSM_URL]
29+
30+
let alternates = []
31+
32+
if (data.alternates) {
33+
alternates = data.alternates.map((_, i) => i)
34+
}
35+
2736
this.state = {
28-
showResults: false,
37+
showResults: {
38+
'-1': false,
39+
...alternates.reduce((acc, v) => ({ ...acc, [v]: false }), {}),
40+
},
2941
}
3042
this.showManeuvers = this.showManeuvers.bind(this)
3143
}
@@ -37,14 +49,16 @@ class OutputControl extends React.Component {
3749
if (nextProps.activeTab === 0 && this.props.activeTab === 1) {
3850
nextProps.dispatch(makeRequest())
3951
}
40-
// if (nextProps.activeTab === 1) {
41-
// return false
42-
// }
4352
return true
4453
}
4554

46-
showManeuvers() {
47-
this.setState({ showResults: !this.state.showResults })
55+
showManeuvers(idx) {
56+
this.setState({
57+
showResults: {
58+
...this.state.showResults,
59+
[idx]: !this.state.showResults[idx],
60+
},
61+
})
4862
}
4963

5064
dateNow() {
@@ -83,53 +97,129 @@ class OutputControl extends React.Component {
8397
}
8498

8599
render() {
86-
const { successful } = this.props
100+
const { results, successful } = this.props
87101

88-
return (
89-
<Segment
90-
style={{
91-
margin: '0 1rem 10px',
92-
display: successful ? 'block' : 'none',
93-
}}
94-
>
95-
<div className={'flex-column'}>
96-
<Summary provider={VALHALLA_OSM_URL} />
97-
<div className={'flex justify-between'}>
98-
<Button
99-
size="mini"
100-
toggle
101-
active={this.state.showResults}
102-
onClick={this.showManeuvers}
103-
>
104-
{this.state.showResults ? 'Hide Maneuvers' : 'Show Maneuvers'}
105-
</Button>
106-
<div className={'flex'}>
107-
<div
108-
className={'flex pointer'}
109-
style={{ alignSelf: 'center' }}
110-
onClick={this.exportToJson}
111-
>
112-
<Icon circular name={'download'} />
113-
<div className={'pa1 b f6'}>{'JSON'}</div>
102+
const data = results[VALHALLA_OSM_URL].data
103+
104+
let alternates = []
105+
if (data.alternates) {
106+
alternates = data.alternates.map((alternate, i) => {
107+
const legs = alternate.trip.legs
108+
return (
109+
<Segment
110+
key={`alternate_${i}`}
111+
style={{
112+
margin: '0 1rem 10px',
113+
display: successful ? 'block' : 'none',
114+
}}
115+
>
116+
<div className={'flex-column'}>
117+
<Summary
118+
header={`Alternate ${i + 1}`}
119+
idx={i}
120+
summary={alternate.trip.summary}
121+
/>
122+
<div className={'flex justify-between'}>
123+
<Button
124+
size="mini"
125+
toggle
126+
active={this.state.showResults[i]}
127+
onClick={() => this.showManeuvers(i)}
128+
>
129+
{this.state.showResults[i]
130+
? 'Hide Maneuvers'
131+
: 'Show Maneuvers'}
132+
</Button>
133+
<div className={'flex'}>
134+
<div
135+
className={'flex pointer'}
136+
style={{ alignSelf: 'center' }}
137+
onClick={this.exportToJson}
138+
>
139+
<Icon circular name={'download'} />
140+
<div className={'pa1 b f6'}>{'JSON'}</div>
141+
</div>
142+
<div
143+
className={'ml2 flex pointer'}
144+
style={{ alignSelf: 'center' }}
145+
onClick={this.exportToGeoJson}
146+
>
147+
<Icon circular name={'download'} />
148+
<div className={'pa1 b f6'}>{'GeoJSON'}</div>
149+
</div>
150+
</div>
114151
</div>
115-
<div
116-
className={'ml2 flex pointer'}
117-
style={{ alignSelf: 'center' }}
118-
onClick={this.exportToGeoJson}
152+
153+
{this.state.showResults[i] ? (
154+
<div className={'flex-column'}>
155+
<Maneuvers legs={legs} idx={i} />
156+
</div>
157+
) : null}
158+
</div>
159+
</Segment>
160+
)
161+
})
162+
}
163+
if (!data.trip) {
164+
return ''
165+
}
166+
return (
167+
<>
168+
<Segment
169+
style={{
170+
margin: '0 1rem 10px',
171+
display: successful ? 'block' : 'none',
172+
}}
173+
>
174+
<div className={'flex-column'}>
175+
<Summary
176+
header={'Directions'}
177+
summary={data.trip.summary}
178+
idx={-1}
179+
/>
180+
<div className={'flex justify-between'}>
181+
<Button
182+
size="mini"
183+
toggle
184+
active={this.state.showResults[-1]}
185+
onClick={() => this.showManeuvers(-1)}
119186
>
120-
<Icon circular name={'download'} />
121-
<div className={'pa1 b f6'}>{'GeoJSON'}</div>
187+
{this.state.showResults[-1]
188+
? 'Hide Maneuvers'
189+
: 'Show Maneuvers'}
190+
</Button>
191+
<div className={'flex'}>
192+
<div
193+
className={'flex pointer'}
194+
style={{ alignSelf: 'center' }}
195+
onClick={this.exportToJson}
196+
>
197+
<Icon circular name={'download'} />
198+
<div className={'pa1 b f6'}>{'JSON'}</div>
199+
</div>
200+
<div
201+
className={'ml2 flex pointer'}
202+
style={{ alignSelf: 'center' }}
203+
onClick={this.exportToGeoJson}
204+
>
205+
<Icon circular name={'download'} />
206+
<div className={'pa1 b f6'}>{'GeoJSON'}</div>
207+
</div>
122208
</div>
123209
</div>
124-
</div>
125210

126-
{this.state.showResults ? (
127-
<div className={'flex-column'}>
128-
<Maneuvers provider={VALHALLA_OSM_URL} />
129-
</div>
130-
) : null}
131-
</div>
132-
</Segment>
211+
{this.state.showResults[-1] ? (
212+
<div className={'flex-column'}>
213+
<Maneuvers
214+
legs={data.trip ? data.trip.legs : undefined}
215+
idx={-1}
216+
/>
217+
</div>
218+
) : null}
219+
</div>
220+
</Segment>
221+
{alternates.length ? alternates : ''}
222+
</>
133223
)
134224
}
135225
}

‎src/Controls/Directions/Summary.jsx

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,37 @@
11
import React from 'react'
22
import PropTypes from 'prop-types'
33
import { connect } from 'react-redux'
4-
import * as R from 'ramda'
54

65
import { Icon, Checkbox, Popup } from 'semantic-ui-react'
76
import { showProvider } from '../../actions/directionsActions'
87

98
import formatDuration from 'utils/date_time'
9+
import { VALHALLA_OSM_URL } from 'utils/valhalla'
1010
class Summary extends React.Component {
1111
static propTypes = {
1212
dispatch: PropTypes.func.isRequired,
1313
results: PropTypes.object,
1414
inclineDeclineTotal: PropTypes.object,
15-
header: PropTypes.string,
15+
summary: PropTypes.object.isRequired,
16+
header: PropTypes.string.isRequired,
17+
idx: PropTypes.number.isRequired,
1618
provider: PropTypes.string,
1719
}
1820

1921
handleChange = (event, data) => {
20-
const { dispatch } = this.props
21-
dispatch(showProvider(data.provider, data.checked))
22+
const { dispatch, idx } = this.props
23+
dispatch(showProvider(data.provider, data.checked, idx))
2224
}
2325

2426
render() {
25-
const { provider, results, inclineDeclineTotal } = this.props
26-
27-
const summary = R.path([provider, 'data', 'trip', 'summary'], results)
27+
const { results, summary, inclineDeclineTotal, header, idx } = this.props
2828

2929
return (
3030
<React.Fragment>
3131
{summary ? (
3232
<React.Fragment>
3333
<div className="flex mb1">
34-
<span className="b">Directions</span>
34+
<span className="b">{header}</span>
3535
{summary.has_highway && (
3636
<div style={{ marginLeft: '1em' }}>
3737
<Popup
@@ -119,9 +119,9 @@ class Summary extends React.Component {
119119
<Checkbox
120120
slider
121121
label={'Map'}
122-
checked={results[provider].show}
123-
provider={provider}
124-
onChange={this.handleChange}
122+
checked={results[VALHALLA_OSM_URL].show[idx]}
123+
provider={VALHALLA_OSM_URL}
124+
onChange={(event, data) => this.handleChange(event, data)}
125125
/>
126126
</div>
127127
</div>

‎src/Controls/index.jsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -257,17 +257,8 @@ class MainControl extends React.Component {
257257
<ServiceTabs />
258258
</div>
259259
</Segment>
260-
{/* because apparently on small screens it's not showing both, so we switch the order on tab switch */}
261-
{(activeTab === 0 && (
262-
<>
263-
<DirectionOutputControl />
264-
<IsochronesOutputControl />
265-
</>
266-
)) || (
267-
<>
268-
<IsochronesOutputControl />
269-
<DirectionOutputControl />
270-
</>
260+
{(activeTab === 0 && <DirectionOutputControl />) || (
261+
<IsochronesOutputControl />
271262
)}
272263
</div>
273264
<div

‎src/Map/Map.jsx

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -522,9 +522,16 @@ class Map extends React.Component {
522522
handleHighlightSegment = () => {
523523
const { highlightSegment, results } = this.props.directions
524524

525-
const coords = results[VALHALLA_OSM_URL].data.decodedGeometry
525+
const { startIndex, endIndex, alternate } = highlightSegment
526+
527+
let coords
528+
if (alternate == -1) {
529+
coords = results[VALHALLA_OSM_URL].data.decodedGeometry
530+
} else {
531+
coords =
532+
results[VALHALLA_OSM_URL].data.alternates[alternate].decodedGeometry
533+
}
526534

527-
const { startIndex, endIndex } = highlightSegment
528535
if (startIndex > -1 && endIndex > -1) {
529536
L.polyline(coords.slice(startIndex, endIndex + 1), {
530537
color: 'yellow',
@@ -633,14 +640,14 @@ class Map extends React.Component {
633640
const { results } = this.props.directions
634641
routeLineStringLayer.clearLayers()
635642

636-
if (
637-
Object.keys(results[VALHALLA_OSM_URL].data).length > 0 &&
638-
results[VALHALLA_OSM_URL].show
639-
) {
643+
if (Object.keys(results[VALHALLA_OSM_URL].data).length > 0) {
640644
const response = results[VALHALLA_OSM_URL].data
641645
// show alternates if they exist on the respsonse
642646
if (response.alternates) {
643647
for (let i = 0; i < response.alternates.length; i++) {
648+
if (!results[VALHALLA_OSM_URL].show[i]) {
649+
continue
650+
}
644651
const alternate = response.alternates[i]
645652
const coords = alternate.decodedGeometry
646653
const summary = alternate.trip.summary
@@ -663,6 +670,9 @@ class Map extends React.Component {
663670
})
664671
}
665672
}
673+
if (!results[VALHALLA_OSM_URL].show[-1]) {
674+
return
675+
}
666676
const coords = response.decodedGeometry
667677
const summary = response.trip.summary
668678
L.polyline(coords, {

‎src/actions/directionsActions.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -400,10 +400,11 @@ export const setWaypoints = (waypoints) => ({
400400
payload: waypoints,
401401
})
402402

403-
export const showProvider = (provider, show) => ({
403+
export const showProvider = (provider, show, idx) => ({
404404
type: TOGGLE_PROVIDER_ISO,
405405
payload: {
406406
provider,
407407
show,
408+
idx,
408409
},
409410
})

0 commit comments

Comments
 (0)