From bbb951d3e430773cf05a60996d2057424b1a69d6 Mon Sep 17 00:00:00 2001 From: tekoiv Date: Tue, 17 Oct 2023 17:01:14 +0300 Subject: [PATCH] fix: some changes requested --- app/component/CapacityModal.js | 215 +++++++++++++++++---------------- app/component/DepartureRow.js | 7 +- app/component/LegInfo.js | 18 ++- app/component/SummaryRow.js | 4 +- app/component/itinerary.scss | 2 +- app/component/summary-row.scss | 2 +- app/translations.js | 38 ++++-- app/util/occupancyUtil.js | 29 ++++- 8 files changed, 188 insertions(+), 127 deletions(-) diff --git a/app/component/CapacityModal.js b/app/component/CapacityModal.js index a16ef2018d..eadb943139 100644 --- a/app/component/CapacityModal.js +++ b/app/component/CapacityModal.js @@ -6,126 +6,135 @@ import Icon from './Icon'; const CapacityModal = () => { return (
-

- -

-

- -

- - - -
-
- -
- +
+

- -

-

- -

-
-
- +

+ -

- +

+ +
+ -
-

- -

-
-
- +
+
+
+ +
+ + + +
+

+ +

+
+
+
+
+ +
+ + +
- +

- -

-

- -

-
-
- + +
+
+
+ +
+ + + +
+

+ +

+
+
+
+
+ +
+ + +
- +

- -

-

- -

-
-
- +

+ +
+
+
+ +
+ + +
- +

- -

-

- -

+

+
); }; diff --git a/app/component/DepartureRow.js b/app/component/DepartureRow.js index 9f2da74606..a79dbb932d 100644 --- a/app/component/DepartureRow.js +++ b/app/component/DepartureRow.js @@ -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)]; @@ -228,7 +228,8 @@ const DepartureRow = ( trip.occupancy?.occupancyStatus && trip.occupancy?.occupancyStatus !== 'NO_DATA_AVAILABLE' && timeDiffInMinutes <= 10 && ( - + // Use inline styles here for simplicity, some overrides make it impossible via the SASS-file + onCapacityClick()} @@ -236,7 +237,7 @@ const DepartureRow = ( diff --git a/app/component/LegInfo.js b/app/component/LegInfo.js index 2e13d23e6e..75c0a36941 100644 --- a/app/component/LegInfo.js +++ b/app/component/LegInfo.js @@ -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 = ( { @@ -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 (
diff --git a/app/component/SummaryRow.js b/app/component/SummaryRow.js index abbe564184..3fec6dff1f 100644 --- a/app/component/SummaryRow.js +++ b/app/component/SummaryRow.js @@ -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, @@ -81,7 +81,7 @@ export const RouteLeg = ( const getOccupancyStatus = () => { if (hasOneTransitLeg) { - return getCapacity(config, leg); + return getCapacityForLeg(config, leg); } return undefined; }; diff --git a/app/component/itinerary.scss b/app/component/itinerary.scss index 13437148a0..25c96f51ee 100644 --- a/app/component/itinerary.scss +++ b/app/component/itinerary.scss @@ -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%; diff --git a/app/component/summary-row.scss b/app/component/summary-row.scss index 9ee4cf4d28..a0f1961e2f 100644 --- a/app/component/summary-row.scss +++ b/app/component/summary-row.scss @@ -254,7 +254,7 @@ .occupancy-icon-container { color: white; margin-left: auto; - padding-right: 3px; + padding-right: 8px; } .vcenter-children { .empty { diff --git a/app/translations.js b/app/translations.js index 03233c49d6..0e81bb7971 100644 --- a/app/translations.js +++ b/app/translations.js @@ -949,14 +949,14 @@ const translations = { 'capacity-modal.crushed-standing-room-only-body': 'Only a little standing room available', 'capacity-modal.crushed-standing-room-only-heading': 'Very crowded', - 'capacity-modal.few-seats-available-body': 'Plenty of seats available', - 'capacity-modal.few-seats-available-heading': 'Not crowded', + 'capacity-modal.few-seats-available-body': 'Some seats available', + 'capacity-modal.few-seats-available-heading': 'Not too crowded', 'capacity-modal.full-capacity-body': 'No seats or standing room available', 'capacity-modal.full-capacity-heading': 'Full', 'capacity-modal.heading': 'Is there room in the vehicle?', 'capacity-modal.legend': 'Legend for the symbols', - 'capacity-modal.many-seats-available-body': 'Some seats available', - 'capacity-modal.many-seats-available-heading': 'Not too crowded', + 'capacity-modal.many-seats-available-body': 'Plenty of seats available', + 'capacity-modal.many-seats-available-heading': 'Not crowded', 'capacity-modal.standing-room-only-body': 'Only a few seats and little standing room available', 'capacity-modal.standing-room-only-heading': 'Nearly full', @@ -1008,6 +1008,7 @@ const translations = { 'create-account': 'Create {contactName} account', 'create-embedded-search': 'Create a route search element', 'create-stop-monitor': 'Create a stop display', + 'crushed-standing-room-only': 'Crushed standing room only', 'cycle-distance-duration': 'Cycle {duration} ({distance})', 'cyclewalk-distance-duration': 'Walk your bike {duration} ({distance})', // eslint-disable-next-line sort-keys @@ -1068,6 +1069,7 @@ const translations = { ferry: 'Ferry', 'ferry-with-route-number': 'Ferry {routeNumber} {headSign}', 'fetch-new-route': 'Fetch a new route', + 'few-seats-available': 'Few seats available', finnish: 'Finnish', 'free-of-charge': 'Free', 'from-ferry': 'ferry', @@ -1076,6 +1078,7 @@ const translations = { 'from-stop': 'from stop', 'from-subway': 'subway', frontpage: 'Frontpage', + full: 'Full capacity', funicular: 'Funicular', 'generic-cancelation': '{mode} {route} {headsign} at {time} is cancelled.', 'generic-error': 'There was an error', @@ -1215,6 +1218,7 @@ const translations = { 'main-menu-label-close': 'Close the main menu', 'main-menu-label-open': 'Open the main menu', 'main-mode': "I'm traveling by", + 'many-seats-available': 'Many seats available', map: 'Map', 'map-layer-citybike': 'Citybike stations', 'map-layer-park-and-ride': 'Park & ride sites', @@ -1510,6 +1514,7 @@ const translations = { 'splash-use-positioning': 'Use location services', 'splash-welcome': 'How do you wish to start?', 'splash-you-can-also': 'or', + 'standing-room-only': 'Standing room only', station: 'Station', stop: 'Stop', 'stop-departure-time-future': 'Departure time is in {minutes} minutes', @@ -2166,6 +2171,7 @@ const translations = { 'create-account': 'Luo {contactName} tunnus', 'create-embedded-search': 'Luo reittihakuelementti', 'create-stop-monitor': 'Luo pysäkkinäyttö', + 'crushed-standing-room-only': 'Kova tungos', 'cycle-distance-duration': 'Pyöräile {duration} ({distance})', 'cyclewalk-distance-duration': 'Taluta pyörää {duration} ({distance})', // eslint-disable-next-line sort-keys @@ -2228,6 +2234,7 @@ const translations = { ferry: 'Lautta', 'ferry-with-route-number': 'Lautta {routeNumber} {headSign}', 'fetch-new-route': 'Hae uusi reitti', + 'few-seats-available': 'Joitakin istumapaikkoja vapaana', finnish: 'Suomi', 'free-of-charge': 'Maksuton', 'from-ferry': 'lautasta', @@ -2236,6 +2243,7 @@ const translations = { 'from-stop': 'pysäkiltä', 'from-subway': 'metrosta', frontpage: 'Etusivu', + full: 'Täynnä', funicular: 'Funikulaari', 'generic-cancelation': '{mode} {route} {headsign} kello {time} on peruttu.', 'generic-error': 'Tapahtui virhe', @@ -2368,6 +2376,7 @@ const translations = { 'main-menu-label-close': 'Sulje päävalikko', 'main-menu-label-open': 'Avaa päävalikko', 'main-mode': 'Kulkumuoto', + 'many-seats-available': 'Paljon istumapaikkoja vapaana', map: 'Kartta', 'map-layer-citybike': 'Kaupunkipyöräasemat', 'map-layer-park-and-ride': 'Liityntäpysäköintipaikat', @@ -2661,6 +2670,7 @@ const translations = { 'splash-use-positioning': 'Käytä paikannusta', 'splash-welcome': 'Miten haluat aloittaa?', 'splash-you-can-also': 'tai', + 'standing-room-only': 'Lähes täynnä', station: 'Asema', stop: 'Pysäkki', 'stop-departure-time-future': 'Lähtöaika {minutes} min päästä', @@ -4031,20 +4041,19 @@ const translations = { 'canceled-itineraries-amount-hide': 'Dölja inställda reseförslag ({itineraryAmount})', 'canceled-legs': 'Inställda avgångar på linjen', - 'capacity-modal.crushed-standing-room-only-body': - 'Endast några stårplatser', - 'capacity-modal.crushed-standing-room-only-heading': 'Stor trängsel', - 'capacity-modal.few-seats-available-body': 'Många sittplatser', - 'capacity-modal.few-seats-available-heading': 'Ingen trängel', + 'capacity-modal.crushed-standing-room-only-body': 'Endast några ståplatser', + 'capacity-modal.crushed-standing-room-only-heading': 'Nästan fullt', + 'capacity-modal.few-seats-available-body': 'Några sittplatser', + 'capacity-modal.few-seats-available-heading': 'Ingen stor trängsel', 'capacity-modal.full-capacity-body': 'Inga lediga platser', 'capacity-modal.full-capacity-heading': 'Fullt', 'capacity-modal.heading': 'Finns det plats ombord?', 'capacity-modal.legend': 'Teckenförklaringar', - 'capacity-modal.many-seats-available-body': 'Några sittplatser', - 'capacity-modal.many-seats-available-heading': 'Ingen stor trängsel', + 'capacity-modal.many-seats-available-body': 'Många sittplatser', + 'capacity-modal.many-seats-available-heading': 'Ingen trängsel', 'capacity-modal.standing-room-only-body': 'Endast några få sitt- och ståplatser', - 'capacity-modal.standing-room-only-heading': 'Nästan fullt', + 'capacity-modal.standing-room-only-heading': 'Stor trängsel', 'capacity-modal.subheading': 'Information om kapaciteten i realtid finns att rå om vissa fordon', car: 'Bil', @@ -4094,6 +4103,7 @@ const translations = { 'create-account': 'Skapa {contactName} konto', 'create-embedded-search': 'Skapa ett ruttsökningselement', 'create-stop-monitor': 'Skapa hållplatsskärm', + 'crushed-standing-room-only': 'Nästan fullt', 'cycle-distance-duration': 'Cykla {duration} ({distance})', 'cyclewalk-distance-duration': 'Led cykeln {duration} ({distance})', // eslint-disable-next-line sort-keys @@ -4155,6 +4165,7 @@ const translations = { ferry: 'Färja', 'ferry-with-route-number': 'Färja {routeNumber} {headSign}', 'fetch-new-route': 'Sök en ny rutt', + 'few-seats-available': 'Några sittplatser', finnish: 'Finska', 'free-of-charge': 'Kostnadsfri', 'from-ferry': 'färjan', @@ -4163,6 +4174,7 @@ const translations = { 'from-stop': 'från hållplats', 'from-subway': 'metron', frontpage: 'Framsidan', + full: 'Fullt', funicular: 'Bergbanan', 'generic-cancelation': '{mode} {route} {headsign} kl. {time} ställs in.', 'generic-error': 'Det hände ett fel', @@ -4300,6 +4312,7 @@ const translations = { 'main-menu-label-close': 'Stäng huvudmenyn', 'main-menu-label-open': 'Öppna huvudmenyn', 'main-mode': 'Jag använder', + 'many-seats-available': 'Många sittplatser', map: 'Karta', 'map-layer-citybike': 'Stadscykelstation', 'map-layer-park-and-ride': 'Infartsparkering', @@ -4598,6 +4611,7 @@ const translations = { 'Tjänsten fungerar bäst om du delar din plats.', 'splash-use-positioning': 'Använd min plats', 'splash-you-can-also': 'alternativt', + 'standing-room-only': 'Stor trängsel', station: 'Station', stop: 'Hållplats', 'stop-departure-time-future': 'Avgångstid är i {minutes} minuter', diff --git a/app/util/occupancyUtil.js b/app/util/occupancyUtil.js index a58739e7d2..35b5f768bc 100644 --- a/app/util/occupancyUtil.js +++ b/app/util/occupancyUtil.js @@ -1,5 +1,10 @@ import moment from 'moment'; +/** + * Maps status to corresponding string. + * + * @param {*} status status from OTP. + */ export function mapStatus(status) { switch (status) { case 'EMPTY': @@ -21,6 +26,11 @@ export function mapStatus(status) { } } +/** + * Checks that departure is within 10 minutes from now. + * + * @param {*} departureTime departure time in Unix. + */ export function isDepartureWithinTenMinutes(departureTime) { return ( moment(departureTime).diff(moment(), 'minutes') <= 10 && @@ -28,13 +38,28 @@ export function isDepartureWithinTenMinutes(departureTime) { ); } -export function getCapacity(config, leg) { +/** + * Returns mapped capacity string. + * + * @param {*} occupancyStatus status from OTP. + */ +export function getCapacity(occupancyStatus) { + return mapStatus(occupancyStatus); +} + +/** + * Returns capacity string for leg. + * + * @param {*} config configuration object. + * @param {*} leg leg object. + */ +export function getCapacityForLeg(config, leg) { if ( config.useRealtimeTravellerCapacities && leg.trip?.occupancy?.occupancyStatus !== 'NO_DATA_AVAILABLE' && isDepartureWithinTenMinutes(leg.startTime) ) { - return mapStatus(leg.trip.occupancy.occupancyStatus); + return getCapacity(leg.trip.occupancy.occupancyStatus); } return undefined; }