Skip to content

Commit 0a06fdf

Browse files
partisaanipartisaani
authored
Merge pull request #5626 from HSLdevcom/AB#74
AB#74 near you view refactoring for v3
2 parents 18d390e + 7090e6f commit 0a06fdf

File tree

192 files changed

+3222
-3666
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

192 files changed

+3222
-3666
lines changed

‎app/component/AlertBanner.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ const AlertBanner = ({ alerts, linkAddress }, { config }) => {
1717
alert.alertSeverityLevel !== 'INFO'
1818
? 'icon_caution_white_exclamation'
1919
: 'icon_info';
20-
const iconColor = alert.alertSeverityLevel !== 'INFO' ? '#DC0451' : '#888';
20+
const iconColor =
21+
alert.alertSeverityLevel !== 'INFO' ? config.colors.caution : '#888';
2122
return (
2223
<Link
2324
className={`alert-banner-link ${alert.alertSeverityLevel.toLowerCase()}`}

‎app/component/DepartureRow.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@ import { routePagePath, PREFIX_STOPS } from '../util/path';
1717
import { configShape, departureShape } from '../util/shapes';
1818
import { epochToTime } from '../util/timeUtils';
1919
import Icon from './Icon';
20-
import PlatformNumber from './PlatformNumber';
2120
import IconBackground from './icon/IconBackground';
21+
import PlatformNumber from './PlatformNumber';
2222

2323
const getMostSevereAlert = route => {
2424
const alerts = [...getAlertsForObject(route)];
@@ -51,7 +51,7 @@ export default function DepartureRow(
5151
let backgroundClass;
5252
let sr;
5353
if (
54-
route?.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
54+
route.alerts?.filter(alert => isAlertValid(alert, props.currentTime))
5555
?.length > 0
5656
) {
5757
const alert = getMostSevereAlert(route);
@@ -65,17 +65,17 @@ export default function DepartureRow(
6565
if (alert.alertSeverityLevel === 'INFO') {
6666
icon = 'icon_info';
6767
iconColor = '#888';
68-
background = <IconBackground backgroundShape="circle" />;
68+
background = <IconBackground shape="circle" />;
6969
backgroundClass = 'circle';
7070
} else {
7171
icon = 'icon_caution-white-excl-stroke';
72-
iconColor = '#DC0451';
72+
iconColor = config.colors.caution;
7373
}
7474
}
7575
const headsign =
7676
departure.headsign ||
7777
trip.tripHeadsign ||
78-
getHeadsignFromRouteLongName(trip.route);
78+
getHeadsignFromRouteLongName(route);
7979
let shownTime;
8080
if (timeDiffInMinutes <= 0) {
8181
shownTime = intl.formatMessage({
@@ -93,7 +93,7 @@ export default function DepartureRow(
9393
{ minutes: timeDiffInMinutes },
9494
);
9595
}
96-
const { shortName } = trip.route;
96+
const { shortName } = route;
9797
const lowerCaseShortName = shortName?.toLowerCase();
9898
const nameOrIcon =
9999
shortName?.length > 6 || !shortName?.length ? (
@@ -166,7 +166,7 @@ export default function DepartureRow(
166166
className={cx('route-number-container', {
167167
long: shortName && shortName.length <= 6 && shortName.length >= 5,
168168
})}
169-
style={{ backgroundColor: `#${trip.route.color}` }}
169+
style={{ backgroundColor: `#${route.color}` }}
170170
>
171171
<div aria-hidden="true" className="route-number">
172172
{nameOrIcon}
@@ -188,7 +188,7 @@ export default function DepartureRow(
188188
</td>
189189
<td className={cx('route-headsign', departure.bottomRow ? 'bottom' : '')}>
190190
<div className="headsign">
191-
{headsign} {departure.bottomRow && departure.bottomRow}
191+
{headsign} {departure.bottomRow}
192192
</div>
193193
</td>
194194
<td className="time-cell">

‎app/component/FavouritesContainer.js‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import {
2020
} from '../action/FavouriteActions';
2121
import FavouriteStore from '../store/FavouriteStore';
2222
import { addAnalyticsEvent } from '../util/analyticsUtils';
23-
import { LightenDarkenColor } from '../util/colorUtils';
2423

2524
const AutoSuggestWithSearchContext = withSearchContext(AutoSuggest);
2625

@@ -54,8 +53,6 @@ class FavouritesContainer extends React.Component {
5453
favouriteModalAction: PropTypes.string,
5554
requireLoggedIn: PropTypes.bool,
5655
isLoggedIn: PropTypes.bool,
57-
color: PropTypes.string,
58-
hoverColor: PropTypes.string,
5956
};
6057

6158
static defaultProps = {
@@ -65,8 +62,6 @@ class FavouritesContainer extends React.Component {
6562
requireLoggedIn: false,
6663
isLoggedIn: false,
6764
favouriteModalAction: undefined,
68-
color: undefined,
69-
hoverColor: undefined,
7065
lang: undefined,
7166
};
7267

@@ -250,8 +245,7 @@ class FavouritesContainer extends React.Component {
250245
loginModalOpen: false,
251246
});
252247
}}
253-
color={this.props.color}
254-
hoverColor={this.props.hoverColor}
248+
colors={this.context.config.colors}
255249
/>
256250
);
257251
};
@@ -358,7 +352,7 @@ class FavouritesContainer extends React.Component {
358352
}
359353
lang={this.props.lang}
360354
isLoading={isLoading}
361-
color={this.props.color}
355+
colors={config.colors}
362356
fontWeights={fontWeights}
363357
/>
364358
<FavouriteModal
@@ -371,6 +365,7 @@ class FavouritesContainer extends React.Component {
371365
lang={this.props.lang}
372366
isMobile={this.props.isMobile}
373367
fontWeights={fontWeights}
368+
colors={config.colors}
374369
autosuggestComponent={
375370
<AutoSuggestWithSearchContext
376371
appElement="#app"
@@ -386,16 +381,13 @@ class FavouritesContainer extends React.Component {
386381
getAutoSuggestIcons={config.getAutoSuggestIcons}
387382
lang={this.props.lang}
388383
isMobile={this.props.isMobile}
389-
color={this.props.color}
390-
hoverColor={this.props.hoverColor}
391384
fontWeights={fontWeights}
392385
required
386+
colors={config.colors}
393387
modeSet={config.iconModeSet}
394388
favouriteContext
395389
/>
396390
}
397-
color={this.props.color}
398-
hoverColor={this.props.hoverColor}
399391
/>
400392
<FavouriteEditModal
401393
appElement="#app"
@@ -409,8 +401,7 @@ class FavouritesContainer extends React.Component {
409401
lang={this.props.lang}
410402
isMobile={this.props.isMobile}
411403
isLoading={isLoading}
412-
color={this.props.color}
413-
hoverColor={this.props.hoverColor}
404+
colors={config.colors}
414405
fontWeights={fontWeights}
415406
/>
416407
{this.renderLoginModal()}
@@ -434,10 +425,6 @@ const connectedComponent = connectToStores(
434425
isLoggedIn:
435426
context.config.allowLogin &&
436427
context.getStore('UserStore').getUser().sub !== undefined,
437-
color: context.config.colors.primary,
438-
hoverColor:
439-
context.config.colors.hover ||
440-
LightenDarkenColor(context.config.colors.primary, -20),
441428
}),
442429
);
443430

‎app/component/IconWithIcon.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,7 @@ const IconWithIcon = (
4949
<Icon
5050
img={subIcon}
5151
omitViewBox={omitViewBox}
52-
background={
53-
subIconShape && <IconBackground backgroundShape={subIconShape} />
54-
}
52+
background={subIconShape && <IconBackground shape={subIconShape} />}
5553
/>
5654
</span>
5755
)}

‎app/component/IndexPage.js‎

Lines changed: 42 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,6 @@ import { addAnalyticsEvent } from '../util/analyticsUtils';
3434
import withBreakpoint from '../util/withBreakpoint';
3535
import Geomover from './Geomover';
3636
import scrollTop from '../util/scroll';
37-
import { LightenDarkenColor } from '../util/colorUtils';
3837
import { getRefPoint } from '../util/apiUtils';
3938
import { filterObject } from '../util/filterUtils';
4039
import {
@@ -229,49 +228,52 @@ class IndexPage extends React.Component {
229228
const { intl, config } = this.context;
230229
const { colors, fontWeights } = config;
231230
const { lang } = this.props;
232-
const transportModes = getTransportModes(config);
233231
const nearYouModes = getNearYouModes(config);
234-
235-
// Styles are defined by which button type is configured (narrow/wide)
236-
const narrowButtons = config.narrowNearYouButtons;
237-
const modeTitles = filterObject(
238-
transportModes,
239-
'availableForSelection',
240-
true,
241-
);
242232
// If nearYouModes is configured, display those. Otherwise, display all configured transport modes
243-
const modes =
244-
nearYouModes?.length > 0 ? nearYouModes : Object.keys(modeTitles);
233+
const modeArray =
234+
nearYouModes.length > 0
235+
? nearYouModes
236+
: Object.keys(
237+
filterObject(
238+
getTransportModes(config),
239+
'availableForSelection',
240+
true,
241+
),
242+
);
245243

246244
const alertsContext = {
247245
currentTime: this.props.currentTime,
248246
getModesWithAlerts,
249247
feedIds: config.feedIds,
250248
};
251249

250+
const directionProps = config.narrowNearYouButtons
251+
? {}
252+
: { horizontal: false };
253+
252254
return config.showNearYouButtons ? (
253255
<CtrlPanel.NearStopsAndRoutes
254-
modeArray={modes}
256+
appElement="#app"
257+
modeArray={modeArray}
258+
modeSet={config.iconModeSet}
255259
urlPrefix={`/${PREFIX_NEARYOU}`}
256260
language={lang}
257-
showTitle
261+
title={config.nearYouTitle}
258262
alertsContext={alertsContext}
259263
origin={this.props.origin}
260264
omitLanguageUrl
261265
onClick={this.clickStopNearIcon}
262-
buttonStyle={narrowButtons ? undefined : config.nearYouButton}
263-
title={narrowButtons ? undefined : config.nearYouTitle}
264-
modes={narrowButtons ? undefined : modeTitles}
265-
modeSet={config.nearbyModeSet || config.iconModeSet}
266-
modeIconColors={colors.iconColors}
266+
colors={colors}
267267
fontWeights={fontWeights}
268+
{...directionProps}
269+
isMobile={this.props.breakpoint !== 'large'}
268270
/>
269271
) : (
270272
<div className="stops-near-you-text">
271273
<h2>
272274
{intl.formatMessage({
273-
id: 'stop-near-you-title',
274-
defaultMessage: 'Stops and lines near you',
275+
id: 'near-you-search',
276+
defaultMessage: 'Search stops and routes',
275277
})}
276278
</h2>
277279
</div>
@@ -282,18 +284,18 @@ class IndexPage extends React.Component {
282284
render() {
283285
const { intl, config } = this.context;
284286
const { trafficNowLink, colors, fontWeights } = config;
285-
const color = colors.primary;
286-
const hoverColor = colors.hover || LightenDarkenColor(colors.primary, -20);
287-
const accessiblePrimaryColor = colors.accessiblePrimary || colors.primary;
288287
const { breakpoint, lang } = this.props;
289288
const origin = this.pendingOrigin || this.props.origin;
290289
const destination = this.pendingDestination || this.props.destination;
290+
const locationSources = ['History', 'Datasource'];
291291
const sources = ['Favourite', 'History', 'Datasource'];
292292
const stopAndRouteSearchTargets = ['Stations', 'Stops', 'Routes'];
293293
const targets = getLocationSearchTargets(config, breakpoint !== 'large');
294294

295295
targets.push('FutureRoutes');
296-
296+
if (this.context.getStore('FavouriteStore').getLocationCount()) {
297+
locationSources.push('Favourite');
298+
}
297299
if (!config.targetsFromOTP) {
298300
if (useCitybikes(config.vehicleRental?.networks, config)) {
299301
stopAndRouteSearchTargets.push('VehicleRentalStations');
@@ -312,11 +314,8 @@ class IndexPage extends React.Component {
312314
origin,
313315
destination,
314316
lang,
315-
sources,
317+
locationSources,
316318
targets,
317-
color,
318-
hoverColor,
319-
accessiblePrimaryColor,
320319
refPoint,
321320
searchPanelText: intl.formatMessage({
322321
id: 'where',
@@ -329,7 +328,7 @@ class IndexPage extends React.Component {
329328
onGeolocationStart: this.onSelectLocation,
330329
fromMap: this.props.fromMap,
331330
fontWeights,
332-
modeIconColors: colors.iconColors,
331+
colors,
333332
modeSet: config.iconModeSet,
334333
};
335334

@@ -343,13 +342,10 @@ class IndexPage extends React.Component {
343342
getAutoSuggestIcons: config.getAutoSuggestIcons,
344343
value: '',
345344
lang,
346-
color,
347-
hoverColor,
348-
accessiblePrimaryColor,
349345
sources,
350346
targets: stopAndRouteSearchTargets,
351347
fontWeights,
352-
modeIconColors: colors.iconColors,
348+
colors,
353349
modeSet: config.iconModeSet,
354350
geocodingSize: 25,
355351
};
@@ -375,13 +371,7 @@ class IndexPage extends React.Component {
375371
<h1 className="sr-only">
376372
<FormattedMessage id="index.title" default="Journey Planner" />
377373
</h1>
378-
<CtrlPanel
379-
instance="hsl"
380-
language={lang}
381-
origin={origin}
382-
position="left"
383-
fontWeights={fontWeights}
384-
>
374+
<CtrlPanel position="left" fontWeights={fontWeights}>
385375
<span className="sr-only">
386376
<FormattedMessage
387377
id="search-fields.sr-instructions"
@@ -390,7 +380,11 @@ class IndexPage extends React.Component {
390380
</span>
391381
<LocationSearch {...locationSearchProps} />
392382
<div className="datetimepicker-container">
393-
<DatetimepickerContainer realtime color={color} lang={lang} />
383+
<DatetimepickerContainer
384+
realtime
385+
color={colors.primary}
386+
lang={lang}
387+
/>
394388
</div>
395389
{!config.hideFavourites && (
396390
<>
@@ -433,19 +427,18 @@ class IndexPage extends React.Component {
433427
backgroundColor: '#ffffff',
434428
}}
435429
>
436-
<CtrlPanel
437-
instance="hsl"
438-
language={lang}
439-
position="bottom"
440-
fontWeights={fontWeights}
441-
>
430+
<CtrlPanel position="bottom" fontWeights={fontWeights}>
442431
<LocationSearch
443432
disableAutoFocus
444433
isMobile
445434
{...locationSearchProps}
446435
/>
447436
<div className="datetimepicker-container">
448-
<DatetimepickerContainer realtime color={color} lang={lang} />
437+
<DatetimepickerContainer
438+
realtime
439+
color={colors.primary}
440+
lang={lang}
441+
/>
449442
</div>
450443
<FavouritesContainer
451444
onClickFavourite={this.clickFavourite}

0 commit comments

Comments
 (0)