Skip to content

Commit

Permalink
fix: some changes requested
Browse files Browse the repository at this point in the history
  • Loading branch information
@tekoiv
tekoiv committed Oct 17, 2023
1 parent bb7116b commit bbb951d
Show file tree
Hide file tree
Showing 8 changed files with 188 additions and 127 deletions.
215 changes: 112 additions & 103 deletions app/component/CapacityModal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,126 +6,135 @@ import Icon from './Icon';
const CapacityModal = () => {
return (
<div className="capacity-information-modal">
<h2 className="capacity-heading">
<FormattedMessage
id="capacity-modal.heading"
defaultMessage="Is there room in the vehicle?"
/>
</h2>
<p className="capacity-text">
<FormattedMessage
id="capacity-modal.subheading"
defaultMessage="Real-time capacity information is available for some vehicles"
/>
</p>
<span className="explanations-heading">
<FormattedMessage id="capacity-modal.legend" defaultMessage="Legend" />
</span>
<div className="capacity-info-row">
<div className="icon">
<Icon
img="icon-icon_MANY_SEATS_AVAILABLE"
color="red"
width="1.5"
height="1.5"
/>
</div>
<span className="info-heading">
<section>
<h2 className="capacity-heading">
<FormattedMessage
id="capacity-modal.many-seats-available-heading"
defaultMessage="Not crowded"
id="capacity-modal.heading"
defaultMessage="Is there room in the vehicle?"
/>
</span>
</div>
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.many-seats-available-body"
defaultMessage="Plenty of seats available"
/>
</p>
<div className="capacity-info-row">
<div className="icon">
<Icon
img="icon-icon_FEW_SEATS_AVAILABLE"
color="red"
width="1.5"
height="1.5"
</h2>
<p className="capacity-text">
<FormattedMessage
id="capacity-modal.subheading"
defaultMessage="Real-time capacity information is available for some vehicles"
/>
</div>
<span className="info-heading">
</p>
</section>
<section>
<span className="explanations-heading">
<FormattedMessage
id="capacity-modal.few-seats-available-heading"
defaultMessage="Not too crowded"
id="capacity-modal.legend"
defaultMessage="Legend"
/>
</span>
</div>
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.few-seats-available-body"
defaultMessage="Some seats available"
/>
</p>
<div className="capacity-info-row">
<div className="icon">
<Icon
img="icon-icon_STANDING_ROOM_ONLY"
color="red"
width="1.5"
height="1.5"
</section>
<section>
<div className="capacity-info-row">
<div className="icon">
<Icon
img="icon-icon_MANY_SEATS_AVAILABLE"
width="1.5"
height="1.5"
/>
</div>
<span className="info-heading">
<FormattedMessage
id="capacity-modal.many-seats-available-heading"
defaultMessage="Not crowded"
/>
</span>
</div>
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.many-seats-available-body"
defaultMessage="Plenty of seats available"
/>
</p>
</section>
<section>
<div className="capacity-info-row">
<div className="icon">
<Icon
img="icon-icon_FEW_SEATS_AVAILABLE"
width="1.5"
height="1.5"
/>
</div>
<span className="info-heading">
<FormattedMessage
id="capacity-modal.few-seats-available-heading"
defaultMessage="Not too crowded"
/>
</span>
</div>
<span className="info-heading">
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.standing-room-only-heading"
defaultMessage="Nearly full"
id="capacity-modal.few-seats-available-body"
defaultMessage="Some seats available"
/>
</span>
</div>
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.standing-room-only-body"
defaultMessage="Only a few seats and a little standing room available"
/>
</p>
<div className="capacity-info-row">
<div className="icon">
<Icon
img="icon-icon_CRUSHED_STANDING_ROOM_ONLY"
color="red"
width="1.5"
height="1.5"
</p>
</section>
<section>
<div className="capacity-info-row">
<div className="icon">
<Icon img="icon-icon_STANDING_ROOM_ONLY" width="1.5" height="1.5" />
</div>
<span className="info-heading">
<FormattedMessage
id="capacity-modal.standing-room-only-heading"
defaultMessage="Nearly full"
/>
</span>
</div>
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.standing-room-only-body"
defaultMessage="Only a few seats and a little standing room available"
/>
</p>
</section>
<section>
<div className="capacity-info-row">
<div className="icon">
<Icon
img="icon-icon_CRUSHED_STANDING_ROOM_ONLY"
width="1.5"
height="1.5"
/>
</div>
<span className="info-heading">
<FormattedMessage
id="capacity-modal.crushed-standing-room-only-heading"
defaultMessage="Very crowded"
/>
</span>
</div>
<span className="info-heading">
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.crushed-standing-room-only-heading"
defaultMessage="Very crowded"
id="capacity-modal.crushed-standing-room-only-body"
defaultMessage="Only a little standing room available"
/>
</span>
</div>
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.crushed-standing-room-only-body"
defaultMessage="Only a little standing room available"
/>
</p>
<div className="capacity-info-row">
<div className="icon">
<Icon img="icon-icon_FULL" color="red" width="1.5" height="1.5" />
</p>
</section>
<section>
<div className="capacity-info-row">
<div className="icon">
<Icon img="icon-icon_FULL" width="1.5" height="1.5" />
</div>
<span className="info-heading">
<FormattedMessage
id="capacity-modal.full-capacity-heading"
defaultMessage="Full"
/>
</span>
</div>
<span className="info-heading">
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.full-capacity-heading"
defaultMessage="Full"
id="capacity-modal.full-capacity-body"
defaultMessage="No seats or standing room available"
/>
</span>
</div>
<p className="capacity-info-explanation">
<FormattedMessage
id="capacity-modal.full-capacity-body"
defaultMessage="No seats or standing room available"
/>
</p>
</p>
</section>
</div>
);
};
Expand Down
7 changes: 4 additions & 3 deletions app/component/DepartureRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import Icon from './Icon';
import { addAnalyticsEvent } from '../util/analyticsUtils';
import { PREFIX_ROUTES, PREFIX_STOPS } from '../util/path';
import { getRouteMode } from '../util/modeUtils';
import { mapStatus } from '../util/occupancyUtil';
import { getCapacity } from '../util/occupancyUtil';

const getMostSevereAlert = route => {
const alerts = [...getAlertsForObject(route)];
Expand Down Expand Up @@ -228,15 +228,16 @@ const DepartureRow = (
trip.occupancy?.occupancyStatus &&
trip.occupancy?.occupancyStatus !== 'NO_DATA_AVAILABLE' &&
timeDiffInMinutes <= 10 && (
<td className="capacity-cell">
// Use inline styles here for simplicity, some overrides make it impossible via the SASS-file
<td className="capacity-cell" style={{ marginRight: '8px' }}>
<span
className="capacity-icon-container"
onClick={() => onCapacityClick()}
>
<Icon
width="1.5"
height="1.5"
img={`icon-icon_${mapStatus(trip.occupancy.occupancyStatus)}`}
img={`icon-icon_${getCapacity(trip.occupancy.occupancyStatus)}`}
color="#007AC9"
/>
</span>
Expand Down
18 changes: 15 additions & 3 deletions app/component/LegInfo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { intlShape } from 'react-intl';
import { getRouteMode } from '../util/modeUtils';
import RouteNumber from './RouteNumber';
import { PREFIX_ROUTES, PREFIX_STOPS } from '../util/path';
import { getCapacity } from '../util/occupancyUtil';
import { getCapacityForLeg } from '../util/occupancyUtil';

const LegInfo = (
{
Expand All @@ -24,6 +24,11 @@ const LegInfo = (
const shouldLinkToTrip =
!constantOperationRoutes || !constantOperationRoutes[leg.route.gtfsId];
const mode = getRouteMode({ mode: leg.mode, type: leg.route.type });
const capacity = getCapacityForLeg(config, leg);
let capacityTranslation;
if (capacity) {
capacityTranslation = capacity.toLowerCase().replaceAll('_', '-');
}

return (
<div
Expand All @@ -45,7 +50,14 @@ const LegInfo = (
aria-label={`${intl.formatMessage({
id: mode.toLowerCase(),
defaultMessage: 'Vehicle',
})} ${leg.route && leg.route.shortName}`}
})} ${leg.route && leg.route.shortName} ${
capacityTranslation
? intl.formatMessage({
id: capacityTranslation,
defaultMessage: 'Capacity status',
})
: ''
}`}
>
<span aria-hidden="true">
<RouteNumber
Expand All @@ -56,7 +68,7 @@ const LegInfo = (
realtime={false}
withBar
fadeLong
occupancyStatus={getCapacity(config, leg)}
occupancyStatus={getCapacityForLeg(config, leg)}
/>
</span>
</Link>
Expand Down
4 changes: 2 additions & 2 deletions app/component/SummaryRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ import {
getCitybikeCapacity,
} from '../util/citybikes';
import { getRouteMode } from '../util/modeUtils';
import { getCapacity } from '../util/occupancyUtil';
import { getCapacityForLeg } from '../util/occupancyUtil';

const Leg = ({
mode,
Expand Down Expand Up @@ -81,7 +81,7 @@ export const RouteLeg = (

const getOccupancyStatus = () => {
if (hasOneTransitLeg) {
return getCapacity(config, leg);
return getCapacityForLeg(config, leg);
}
return undefined;
};
Expand Down
2 changes: 1 addition & 1 deletion app/component/itinerary.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1349,7 +1349,7 @@ $itinerary-tab-switch-height: 48px;
.occupancy-icon-container {
color: white;
margin-left: auto;
padding-right: 3px;
padding-right: 8px;
}
.vcenter-children {
width: 100%;
Expand Down
2 changes: 1 addition & 1 deletion app/component/summary-row.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -254,7 +254,7 @@
.occupancy-icon-container {
color: white;
margin-left: auto;
padding-right: 3px;
padding-right: 8px;
}
.vcenter-children {
.empty {
Expand Down
Loading

0 comments on commit bbb951d

Please sign in to comment.