From 2c8fd3977b4d2f1492c37cf7fbc22241f8a305cd Mon Sep 17 00:00:00 2001 From: Joel Lappalainen Date: Fri, 1 Nov 2024 14:57:51 +0200 Subject: [PATCH 001/123] Use v3 background map --- app/configurations/config.default.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/configurations/config.default.js b/app/configurations/config.default.js index ddd30c3c62..f13d6afa9b 100644 --- a/app/configurations/config.default.js +++ b/app/configurations/config.default.js @@ -8,7 +8,7 @@ const GEOCODING_BASE_URL = process.env.GEOCODING_BASE_URL || `${API_URL}/geocoding/v1`; const MAP_URL = process.env.MAP_URL || 'https://digitransit-dev-cdn-origin.azureedge.net'; -const MAP_VERSION = process.env.MAP_VERSION || 'v2'; +const MAP_VERSION = process.env.MAP_VERSION || 'v3'; const POI_MAP_PREFIX = `${MAP_URL}/map/v3/finland`; const OTP_URL = process.env.OTP_URL || `${API_URL}/routing/v2/finland/`; const STOP_TIMETABLES_URL = From f097412cb736100fd6ee7dbf826b03b9e0616dc3 Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Fri, 8 Nov 2024 15:33:58 +0200 Subject: [PATCH 002/123] feat: add walking query which uses new plan connection --- app/component/map/WalkQuery.js | 31 +++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 app/component/map/WalkQuery.js diff --git a/app/component/map/WalkQuery.js b/app/component/map/WalkQuery.js new file mode 100644 index 0000000000..b091e95252 --- /dev/null +++ b/app/component/map/WalkQuery.js @@ -0,0 +1,31 @@ +import { graphql } from 'react-relay'; + +const walkQuery = graphql` + query WalkQuery( + $origin: PlanLabeledLocationInput! + $destination: PlanLabeledLocationInput! + $walkSpeed: Speed + $wheelchair: Boolean + ) { + plan: planConnection( + first: 1 + origin: $origin + destination: $destination + modes: { directOnly: true, direct: [WALK] } + preferences: { + accessibility: { wheelchair: { enabled: $wheelchair } } + street: { walk: { speed: $walkSpeed } } + } + ) { + edges { + node { + legs { + ...ItineraryLine_legs + } + } + } + } + } +`; + +export { walkQuery }; From d385fa61e9dee93fcf45546bdcba70962413c5e3 Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Fri, 8 Nov 2024 15:34:40 +0200 Subject: [PATCH 003/123] feat: use walking query from StopPageMap --- app/component/map/StopPageMap.js | 103 +++++++++++-------------------- 1 file changed, 36 insertions(+), 67 deletions(-) diff --git a/app/component/map/StopPageMap.js b/app/component/map/StopPageMap.js index f725f62445..38174be7cd 100644 --- a/app/component/map/StopPageMap.js +++ b/app/component/map/StopPageMap.js @@ -1,10 +1,9 @@ import PropTypes from 'prop-types'; import React, { useEffect, useContext, useState } from 'react'; import { matchShape, routerShape } from 'found'; -import moment from 'moment'; import { connectToStores } from 'fluxible-addons-react'; import distance from '@digitransit-search-util/digitransit-search-util-distance'; -import { graphql, fetchQuery } from 'react-relay'; +import { fetchQuery } from 'react-relay'; import ReactRelayContext from 'react-relay/lib/ReactRelayContext'; import { configShape, @@ -21,13 +20,13 @@ import SelectedStopPopupContent from '../SelectedStopPopupContent'; import withBreakpoint from '../../util/withBreakpoint'; import VehicleMarkerContainer from './VehicleMarkerContainer'; import BackButton from '../BackButton'; -import { locationToUri } from '../../util/otpStrings'; import ItineraryLine from './ItineraryLine'; import Loading from '../Loading'; import { getMapLayerOptions } from '../../util/mapLayerUtils'; import MapRoutingButton from '../MapRoutingButton'; import CookieSettingsButton from '../CookieSettingsButton'; import { PREFIX_CARPARK, PREFIX_BIKEPARK } from '../../util/path'; +import { walkQuery } from './WalkQuery'; const getModeFromProps = props => { if (props.citybike) { @@ -49,15 +48,7 @@ const getModeFromProps = props => { }; function StopPageMap( - { - stop, - breakpoint, - currentTime, - locationState, - mapLayers, - mapLayerOptions, - stopName, - }, + { stop, breakpoint, locationState, mapLayers, mapLayerOptions, stopName }, { config, match }, ) { if (!stop) { @@ -66,67 +57,48 @@ function StopPageMap( const maxShowRouteDistance = breakpoint === 'large' ? 900 : 470; const { environment } = useContext(ReactRelayContext); - const [plan, setPlan] = useState({ plan: {}, isFetching: false }); + const [itinerary, setItinerary] = useState(null); useEffect(() => { let isMounted = true; - const fetchPlan = async targetStop => { + const fetchItinerary = async targetStop => { if (locationState.hasLocation && locationState.address) { if (distance(locationState, stop) < maxShowRouteDistance) { - const toPlace = { - address: targetStop.name ? targetStop.name : 'stop', - lon: targetStop.lon, - lat: targetStop.lat, - }; const settings = getSettings(config); const variables = { - fromPlace: locationToUri(locationState), - toPlace: locationToUri(toPlace), - date: moment(currentTime * 1000).format('YYYY-MM-DD'), - time: moment(currentTime * 1000).format('HH:mm:ss'), + origin: { + location: { + coordinate: { + latitude: locationState.lat, + longitude: locationState.lon, + }, + }, + }, + destination: { + location: { + coordinate: { + latitude: targetStop.lat, + longitude: targetStop.lon, + }, + }, + }, walkSpeed: settings.walkSpeed, wheelchair: !!settings.accessibilityOption, }; - const query = graphql` - query StopPageMapQuery( - $fromPlace: String! - $toPlace: String! - $date: String! - $time: String! - $walkSpeed: Float - $wheelchair: Boolean - ) { - plan: plan( - fromPlace: $fromPlace - toPlace: $toPlace - date: $date - time: $time - transportModes: [{ mode: WALK }] - walkSpeed: $walkSpeed - wheelchair: $wheelchair - ) { - itineraries { - legs { - mode - ...ItineraryLine_legs - } - } - } - } - `; - fetchQuery(environment, query, variables) + fetchQuery(environment, walkQuery, variables) .toPromise() - .then(({ plan: result }) => { + .then(result => { if (isMounted) { - setPlan({ plan: result, isFetching: false }); + setItinerary( + result.plan.edges.length ? result.plan.edges?.[0].node : null, + ); } }); } } }; if (stop && locationState.hasLocation) { - setPlan({ plan: plan.plan, isFetching: true }); - fetchPlan(stop); + fetchItinerary(stop); } return () => { isMounted = false; @@ -161,18 +133,16 @@ function StopPageMap( ); } - if (plan.plan.itineraries) { + if (itinerary) { leafletObjs.push( - ...plan.plan.itineraries.map((itinerary, i) => ( - - )), + , ); } const id = match.params.stopId || match.params.terminalId || match.params.id; @@ -229,7 +199,6 @@ StopPageMap.propTypes = { }), breakpoint: PropTypes.string.isRequired, locationState: locationShape.isRequired, - currentTime: PropTypes.number.isRequired, mapLayers: mapLayerShape.isRequired, mapLayerOptions: mapLayerOptionsShape.isRequired, parkType: PropTypes.string, From 3090fa029b6d44b65e299295665bb17f74920baa Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Fri, 8 Nov 2024 15:41:11 +0200 Subject: [PATCH 004/123] Remove unused TimeStore --- app/component/map/StopPageMap.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/app/component/map/StopPageMap.js b/app/component/map/StopPageMap.js index 38174be7cd..2e95a72223 100644 --- a/app/component/map/StopPageMap.js +++ b/app/component/map/StopPageMap.js @@ -11,7 +11,6 @@ import { mapLayerOptionsShape, } from '../../util/shapes'; import { getSettings } from '../../util/planParamUtil'; -import TimeStore from '../../store/TimeStore'; import PositionStore from '../../store/PositionStore'; import MapLayerStore, { mapLayerShape } from '../../store/MapLayerStore'; import MapWithTracking from './MapWithTracking'; @@ -215,9 +214,8 @@ const componentWithBreakpoint = withBreakpoint(StopPageMap); const StopPageMapWithStores = connectToStores( componentWithBreakpoint, - [TimeStore, PositionStore, MapLayerStore], + [PositionStore, MapLayerStore], ({ config, getStore }, props) => { - const currentTime = getStore(TimeStore).getCurrentTime(); const locationState = getStore(PositionStore).getLocationState(); const ml = config.showVehiclesOnStopPage ? { notThese: ['vehicles'] } : {}; if (props.citybike) { @@ -235,7 +233,6 @@ const StopPageMapWithStores = connectToStores( }); return { locationState, - currentTime, mapLayers, mapLayerOptions, }; From 7c5662e9589f688412f0fd44ec9d946116f74f0b Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Fri, 8 Nov 2024 16:07:28 +0200 Subject: [PATCH 005/123] feat: use new walkQuery from stops near you map --- app/component/map/StopsNearYouMap.js | 127 +++++++++------------------ 1 file changed, 40 insertions(+), 87 deletions(-) diff --git a/app/component/map/StopsNearYouMap.js b/app/component/map/StopsNearYouMap.js index cf6588a70b..cf77e50cea 100644 --- a/app/component/map/StopsNearYouMap.js +++ b/app/component/map/StopsNearYouMap.js @@ -1,8 +1,7 @@ import React, { useEffect, useState, useRef } from 'react'; import PropTypes from 'prop-types'; import { matchShape } from 'found'; -import { graphql, fetchQuery } from 'react-relay'; -import moment from 'moment'; +import { fetchQuery } from 'react-relay'; import uniqBy from 'lodash/uniqBy'; import compact from 'lodash/compact'; import isEqual from 'lodash/isEqual'; @@ -18,7 +17,6 @@ import { stopRealTimeClient, changeRealTimeClientTopics, } from '../../action/realTimeClientAction'; -import { locationToUri } from '../../util/otpStrings'; import { sortNearbyRentalStations, sortNearbyStops, @@ -35,6 +33,7 @@ import LazilyLoad, { importLazy } from '../LazilyLoad'; import { getDefaultNetworks } from '../../util/vehicleRentalUtils'; import { getRouteMode } from '../../util/modeUtils'; import CookieSettingsButton from '../CookieSettingsButton'; +import { walkQuery } from './WalkQuery'; const locationMarkerModules = { LocationMarker: () => @@ -146,7 +145,6 @@ const getLocationMarker = location => { function StopsNearYouMap( { breakpoint, - currentTime, stopsNearYou, match, loading, @@ -164,11 +162,7 @@ function StopsNearYouMap( const [routeLines, setRouteLines] = useState([]); const [bounds, setBounds] = useState([]); const [clientOn, setClientOn] = useState(false); - const [firstPlan, setFirstPlan] = useState({ - itinerary: [], - isFetching: false, - stop: null, - }); + const [walk, setWalk] = useState({ itinerary: null, stop: null }); const prevPlace = useRef(); const prevMode = useRef(); const { mode } = match.params; @@ -176,56 +170,36 @@ function StopsNearYouMap( const walkRoutingThreshold = mode === 'RAIL' || mode === 'SUBWAY' || mode === 'FERRY' ? 3000 : 1500; const { environment } = relay; + const fetchPlan = stop => { - const toPlace = { - address: stop.name ? stop.name : 'stop', - lon: stop.lon, - lat: stop.lat, - }; - const settings = getSettings(context.config); - const variables = { - fromPlace: locationToUri(position), - toPlace: locationToUri(toPlace), - date: moment(currentTime * 1000).format('YYYY-MM-DD'), - time: moment(currentTime * 1000).format('HH:mm:ss'), - walkSpeed: settings.walkSpeed, - wheelchair: !!settings.accessibilityOption, - }; - const query = graphql` - query StopsNearYouMapQuery( - $fromPlace: String! - $toPlace: String! - $date: String! - $time: String! - $walkSpeed: Float - $wheelchair: Boolean - ) { - plan: plan( - fromPlace: $fromPlace - toPlace: $toPlace - date: $date - time: $time - transportModes: [{ mode: WALK }] - walkSpeed: $walkSpeed - wheelchair: $wheelchair - ) { - itineraries { - legs { - mode - ...ItineraryLine_legs - } - } - } - } - `; if (stop.distance < walkRoutingThreshold) { - fetchQuery(environment, query, variables) + const settings = getSettings(context.config); + const variables = { + origin: { + location: { + coordinate: { latitude: position.lat, longitude: position.lon }, + }, + }, + destination: { + location: { + coordinate: { latitude: stop.lat, longitude: stop.lon }, + }, + }, + walkSpeed: settings.walkSpeed, + wheelchair: !!settings.accessibilityOption, + }; + fetchQuery(environment, walkQuery, variables) .toPromise() - .then(({ plan: result }) => { - setFirstPlan({ itinerary: result, isFetching: false, stop }); + .then(result => { + setWalk({ + itinerary: result.plan.edges.length + ? result.plan.edges?.[0].node + : null, + stop, + }); }); } else { - setFirstPlan({ itinerary: [], isFetching: false, stop }); + setWalk({ itinerary: null, stop }); } }; @@ -239,27 +213,14 @@ function StopsNearYouMap( favouriteIds.has(firstStop.gtfsId) ); }; - if (!isEqual(firstStop, firstPlan.stop) && shouldFetchWalkRoute()) { - setFirstPlan({ - itinerary: firstPlan.itinerary, - isFetching: true, - stop: firstStop, - }); + if (!isEqual(firstStop, walk.stop) && shouldFetchWalkRoute()) { fetchPlan(firstStop); } else if (!shouldFetchWalkRoute()) { - setFirstPlan({ - itinerary: [], - isFetching: false, - stop: null, - }); + setWalk({ itinerary: null, stop: null }); } } } else { - setFirstPlan({ - itinerary: [], - isFetching: false, - stop: null, - }); + setWalk({ itinerary: null, stop: null }); } }; useEffect(() => { @@ -412,23 +373,16 @@ function StopsNearYouMap( />, ); } - if ( - firstPlan.itinerary.itineraries && - firstPlan.itinerary.itineraries.length > 0 - ) { + if (walk.itinerary) { leafletObjs.push( - firstPlan.itinerary.itineraries.map((itinerary, i) => { - return ( - - ); - }), + , ); } @@ -481,7 +435,6 @@ function StopsNearYouMap( } StopsNearYouMap.propTypes = { - currentTime: PropTypes.number.isRequired, stopsNearYou: PropTypes.shape({ nearest: PropTypes.shape({ // eslint-disable-next-line From 713ce8c1ce566342c7e1b9bbfda12aa71b01676f Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Fri, 8 Nov 2024 16:08:31 +0200 Subject: [PATCH 006/123] fix: remove unused time prop --- app/component/StopsNearYouFavoritesMapContainer.js | 10 +++------- app/component/StopsNearYouMapContainer.js | 5 +---- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/app/component/StopsNearYouFavoritesMapContainer.js b/app/component/StopsNearYouFavoritesMapContainer.js index 3a36f90f8e..38ffa8d27f 100644 --- a/app/component/StopsNearYouFavoritesMapContainer.js +++ b/app/component/StopsNearYouFavoritesMapContainer.js @@ -4,7 +4,6 @@ import connectToStores from 'fluxible-addons-react/connectToStores'; import { graphql, createFragmentContainer } from 'react-relay'; import distance from '@digitransit-search-util/digitransit-search-util-distance'; import StopsNearYouMap from './map/StopsNearYouMap'; -import TimeStore from '../store/TimeStore'; import PreferencesStore from '../store/PreferencesStore'; import FavouriteStore from '../store/FavouriteStore'; import { @@ -84,16 +83,13 @@ StopsNearYouFavoritesMapContainer.defaultProps = { const StopsNearYouMapWithStores = connectToStores( StopsNearYouFavoritesMapContainer, - [TimeStore, PreferencesStore, FavouriteStore], + [PreferencesStore, FavouriteStore], ({ getStore }) => { - const currentTime = getStore(TimeStore).getCurrentTime(); const language = getStore(PreferencesStore).getLanguage(); - return { - language, - currentTime, - }; + return { language }; }, ); + const containerComponent = createFragmentContainer(StopsNearYouMapWithStores, { stops: graphql` fragment StopsNearYouFavoritesMapContainer_stops on Stop diff --git a/app/component/StopsNearYouMapContainer.js b/app/component/StopsNearYouMapContainer.js index 5990365524..4e508b71b1 100644 --- a/app/component/StopsNearYouMapContainer.js +++ b/app/component/StopsNearYouMapContainer.js @@ -2,15 +2,13 @@ import connectToStores from 'fluxible-addons-react/connectToStores'; import { graphql, createPaginationContainer } from 'react-relay'; import StopsNearYouMap from './map/StopsNearYouMap'; -import TimeStore from '../store/TimeStore'; import FavouriteStore from '../store/FavouriteStore'; import PreferencesStore from '../store/PreferencesStore'; const StopsNearYouMapWithStores = connectToStores( StopsNearYouMap, - [TimeStore, PreferencesStore, FavouriteStore], + [PreferencesStore, FavouriteStore], ({ getStore }, { match }) => { - const currentTime = getStore(TimeStore).getCurrentTime(); const language = getStore(PreferencesStore).getLanguage(); const favouriteIds = match.params.mode === 'CITYBIKE' @@ -26,7 +24,6 @@ const StopsNearYouMapWithStores = connectToStores( ); return { language, - currentTime, favouriteIds, }; }, From d9379b2fd0ec1a149c3ca2cb690d3e4f48825e3e Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Fri, 8 Nov 2024 20:08:12 +0200 Subject: [PATCH 007/123] fix: default value for hash prop --- app/component/map/ItineraryLine.js | 3 ++- app/component/map/StopPageMap.js | 1 - app/component/map/StopsNearYouMap.js | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/component/map/ItineraryLine.js b/app/component/map/ItineraryLine.js index 187ad0c624..ef4666e567 100644 --- a/app/component/map/ItineraryLine.js +++ b/app/component/map/ItineraryLine.js @@ -30,7 +30,7 @@ class ItineraryLine extends React.Component { static propTypes = { legs: PropTypes.arrayOf(legShape).isRequired, passive: PropTypes.bool, - hash: PropTypes.number.isRequired, + hash: PropTypes.number, showTransferLabels: PropTypes.bool, showIntermediateStops: PropTypes.bool, showDurationBubble: PropTypes.bool, @@ -38,6 +38,7 @@ class ItineraryLine extends React.Component { }; static defaultProps = { + hash: 0, passive: false, streetMode: undefined, showTransferLabels: false, diff --git a/app/component/map/StopPageMap.js b/app/component/map/StopPageMap.js index 2e95a72223..1cd9eeba10 100644 --- a/app/component/map/StopPageMap.js +++ b/app/component/map/StopPageMap.js @@ -136,7 +136,6 @@ function StopPageMap( leafletObjs.push( Date: Fri, 8 Nov 2024 20:10:49 +0200 Subject: [PATCH 008/123] chore: rename --- app/component/map/StopPageMap.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/component/map/StopPageMap.js b/app/component/map/StopPageMap.js index 1cd9eeba10..59a1e99112 100644 --- a/app/component/map/StopPageMap.js +++ b/app/component/map/StopPageMap.js @@ -56,11 +56,11 @@ function StopPageMap( const maxShowRouteDistance = breakpoint === 'large' ? 900 : 470; const { environment } = useContext(ReactRelayContext); - const [itinerary, setItinerary] = useState(null); + const [walk, setWalk] = useState(null); useEffect(() => { let isMounted = true; - const fetchItinerary = async targetStop => { + const fetchWalk = async targetStop => { if (locationState.hasLocation && locationState.address) { if (distance(locationState, stop) < maxShowRouteDistance) { const settings = getSettings(config); @@ -88,7 +88,7 @@ function StopPageMap( .toPromise() .then(result => { if (isMounted) { - setItinerary( + setWalk( result.plan.edges.length ? result.plan.edges?.[0].node : null, ); } @@ -97,7 +97,7 @@ function StopPageMap( } }; if (stop && locationState.hasLocation) { - fetchItinerary(stop); + fetchWalk(stop); } return () => { isMounted = false; @@ -132,11 +132,11 @@ function StopPageMap( ); } - if (itinerary) { + if (walk) { leafletObjs.push( Date: Mon, 11 Nov 2024 09:15:08 +0200 Subject: [PATCH 009/123] chore: format --- app/component/itinerary/ItineraryDetails.js | 109 +++++++++++--------- 1 file changed, 61 insertions(+), 48 deletions(-) diff --git a/app/component/itinerary/ItineraryDetails.js b/app/component/itinerary/ItineraryDetails.js index 8adae18d57..115dab0cbe 100644 --- a/app/component/itinerary/ItineraryDetails.js +++ b/app/component/itinerary/ItineraryDetails.js @@ -83,7 +83,7 @@ class ItineraryDetails extends React.Component { this.context.match.params.hash !== streetHash.walk && this.context.match.params.hash !== streetHash.bike ); - }; + } getFutureText(startTime) { const refTime = Date.now(); @@ -96,7 +96,7 @@ class ItineraryDetails extends React.Component { }); } return getFormattedTimeDate(startTime, 'dd D.M.'); - }; + } getExtraProps(itinerary) { const compressedItinerary = { @@ -130,24 +130,36 @@ class ItineraryDetails extends React.Component { futureText, isMultiRow, }; - }; + } render() { - const { itinerary, currentLanguage, isMobile, bikeAndPublicItineraryCount } = this.props; + const { + itinerary, + currentLanguage, + isMobile, + bikeAndPublicItineraryCount, + } = this.props; const { config } = this.context; if (!itinerary?.legs[0]) { return null; } const fares = getFaresFromLegs(itinerary.legs, config); const extraProps = this.getExtraProps(itinerary); - const {biking, walking, driving, futureText, isMultiRow} = extraProps; + const { biking, walking, driving, futureText, isMultiRow } = extraProps; const legsWithRentalBike = compressLegs(itinerary.legs).filter(leg => legContainsRentalBike(leg), ); - const legswithBikePark = compressLegs(itinerary.legs).filter(leg => legContainsBikePark(leg)); - const legsWithScooter = compressLegs(itinerary.legs).some(leg => leg.mode === 'SCOOTER'); + const legswithBikePark = compressLegs(itinerary.legs).filter(leg => + legContainsBikePark(leg), + ); + const legsWithScooter = compressLegs(itinerary.legs).some( + leg => leg.mode === 'SCOOTER', + ); const containsBiking = biking.duration > 0 && biking.distance > 0; - const showBikeBoardingInformation = containsBiking && bikeAndPublicItineraryCount > 0 && legswithBikePark.length === 0; + const showBikeBoardingInformation = + containsBiking && + bikeAndPublicItineraryCount > 0 && + legswithBikePark.length === 0; const rentalBikeNetworks = new Set(); let showRentalBikeDurationWarning = false; if (legsWithRentalBike.length > 0) { @@ -183,7 +195,10 @@ class ItineraryDetails extends React.Component { const externalOperatorJourneys = legsWithScooter; - if (shouldShowFareInfo(config) && (fares.some(fare => fare.isUnknown) || externalOperatorJourneys) ) { + if ( + shouldShowFareInfo(config) && + (fares.some(fare => fare.isUnknown) || externalOperatorJourneys) + ) { const found = {}; itinerary.legs.forEach(leg => { if (config.modeDisclaimers?.[leg.mode] && !found[leg.mode]) { @@ -201,13 +216,10 @@ class ItineraryDetails extends React.Component { }); const info = config.callAgencyInfo?.[currentLanguage]; - if ( - info && - itinerary.legs.some(leg => isCallAgencyPickupType(leg)) - ) { + if (info && itinerary.legs.some(leg => isCallAgencyPickupType(leg))) { disclaimers.push( , ); @@ -238,10 +252,10 @@ class ItineraryDetails extends React.Component { number: itineraryIndex, }} /> - + {breakpoint => [ - breakpoint === 'large' && !this.props.hideTitle && ( + breakpoint === 'large' && !this.props.hideTitle && (
), - , showRentalBikeDurationWarning && ( @@ -283,28 +296,28 @@ class ItineraryDetails extends React.Component { shouldShowFareInfo(config) && (shouldShowFarePurchaseInfo(config, breakpoint, fares) ? ( ) : ( )), - this.props.setNavigation && ( - - ), + this.props.setNavigation && ( + + ), config.showCO2InItinerarySummary && !legsWithScooter && ( @@ -319,11 +332,11 @@ class ItineraryDetails extends React.Component { className={cx('itinerary-main', { 'bp-large': breakpoint === 'large', })} - key="legwrapper" + key="legwrapper" > {disclaimers} {config.showCO2InItinerarySummary && !legsWithScooter && (
)} -
+
, ]} @@ -447,14 +460,14 @@ const withRelay = createFragmentContainer( lat lon name - vehicleParking { + vehicleParking { name vehicleParkingId } vehicleRentalStation { rentalNetwork { - networkId - } + networkId + } availableVehicles { total } @@ -469,7 +482,7 @@ const withRelay = createFragmentContainer( lon rentalUris { android - ios + ios web } rentalNetwork { @@ -507,7 +520,7 @@ const withRelay = createFragmentContainer( lon stationId rentalNetwork { - networkId + networkId } availableVehicles { total @@ -542,13 +555,13 @@ const withRelay = createFragmentContainer( } } } - vehicleParking { - vehicleParkingId - name + vehicleParking { + vehicleParkingId + name } } intermediatePlaces { - arrival { + arrival { scheduledTime estimated { time From 826fd5d55645fd42bc4c245bf042eb69dba7772f Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Mon, 11 Nov 2024 09:26:42 +0200 Subject: [PATCH 010/123] in vehicle card --- app/component/itinerary/NaviCard.js | 12 +++- app/component/itinerary/NaviCardContainer.js | 15 +++-- app/component/itinerary/NaviCardExtension.js | 42 ++++++++++++- app/component/itinerary/NaviInstructions.js | 44 ++++++++++++- app/component/itinerary/navigator.scss | 65 +++++++++++++++----- app/translations.js | 15 +++++ 6 files changed, 170 insertions(+), 23 deletions(-) diff --git a/app/component/itinerary/NaviCard.js b/app/component/itinerary/NaviCard.js index e7e89f48e3..4488794e7a 100644 --- a/app/component/itinerary/NaviCard.js +++ b/app/component/itinerary/NaviCard.js @@ -12,13 +12,19 @@ const iconMap = { SCOOTER: 'icon-icon_scooter_rider', WALK: 'icon-icon_walk', WAIT: 'icon-icon_navigation_wait', + BUS: 'icon-icon_bus', + RAIL: 'icon-icon_rail', + SUBWAY: 'icon-icon_subway', + TRAM: 'icon-icon_tram', + FERRY: 'icon-icon_ferry', }; export default function NaviCard({ leg, nextLeg, legType, cardExpanded }) { const iconName = legType === 'wait' ? iconMap.WAIT : iconMap[leg.mode]; let instructions = `navileg-${leg.mode.toLowerCase()}`; - - if (isRental(leg, nextLeg)) { + if (legType === 'in-vehicle') { + instructions = `navileg-in-vehicle`; + } else if (isRental(leg, nextLeg)) { if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') { instructions = `navileg-rent-scooter`; } else { @@ -44,7 +50,7 @@ export default function NaviCard({ leg, nextLeg, legType, cardExpanded }) {
- {cardExpanded && } + {cardExpanded && } ); } diff --git a/app/component/itinerary/NaviCardContainer.js b/app/component/itinerary/NaviCardContainer.js index 9d65cf630b..28cc821f5b 100644 --- a/app/component/itinerary/NaviCardContainer.js +++ b/app/component/itinerary/NaviCardContainer.js @@ -151,10 +151,10 @@ function NaviCardContainer( /> ); } else if (currentLeg) { + const nextLeg = realTimeLegs.find(leg => { + return legTime(leg.start) > legTime(currentLeg.start); + }); if (!currentLeg.transitLeg) { - const nextLeg = realTimeLegs.find(leg => { - return legTime(leg.start) > legTime(currentLeg.start); - }); let legType; if (destCountRef.current >= TIME_AT_DESTINATION) { legType = 'wait'; @@ -170,7 +170,14 @@ function NaviCardContainer( /> ); } else { - naviTopContent = `Tracking ${currentLeg?.mode} leg`; + naviTopContent = ( + + ); } } else if (time > legTime(last.end)) { naviTopContent = ; diff --git a/app/component/itinerary/NaviCardExtension.js b/app/component/itinerary/NaviCardExtension.js index f21c0466de..8c50a8f305 100644 --- a/app/component/itinerary/NaviCardExtension.js +++ b/app/component/itinerary/NaviCardExtension.js @@ -1,4 +1,7 @@ import React from 'react'; +import cx from 'classnames'; +import PropTypes from 'prop-types'; +import { FormattedMessage } from 'react-intl'; import Icon from '../Icon'; import StopCode from '../StopCode'; import PlatformNumber from '../PlatformNumber'; @@ -6,8 +9,9 @@ import { getZoneLabel } from '../../util/legUtils'; import ZoneIcon from '../ZoneIcon'; import { legShape, configShape } from '../../util/shapes'; import { getDestinationProperties } from './NaviUtils'; +import RouteNumberContainer from '../RouteNumberContainer'; -const NaviCardExtension = ({ leg }, { config }) => { +const NaviCardExtension = ({ legType, leg }, { config }) => { const { stop, name } = leg.to; const { code, platformCode, zoneId, vehicleMode } = stop || {}; const [place, address] = name?.split(/, (.+)/) || []; @@ -21,6 +25,37 @@ const NaviCardExtension = ({ leg }, { config }) => { destination.className = 'place'; destination.name = place; } + if (legType === 'in-vehicle') { + // Todo routenumbercontainer on taas hanurista, tyylittelyt ja nimet kuntoon. Rakenne on ok mutta pitää viilata + // Lasketaan interMediateplaces taulukosta arrival ajan ja nykyhetken perusteella. + // Lähijuna = juna ? Pitääköhän tuokin tehdä.. + // ei oo kommitointivalmis, pitää muutella muuttujie ja classnameja ja kattoa voisko navicardontainerin järkeistää tässä vaiheessa. + const nrStopsRemaining = 0; + return ( +
+
+
+ +
{leg.to.name}
+
+
+ +
+
+ ); + } + return (
@@ -59,6 +94,11 @@ const NaviCardExtension = ({ leg }, { config }) => { NaviCardExtension.propTypes = { leg: legShape.isRequired, + legType: PropTypes.string, +}; + +NaviCardExtension.defaultProps = { + legType: '', }; NaviCardExtension.contextTypes = { diff --git a/app/component/itinerary/NaviInstructions.js b/app/component/itinerary/NaviInstructions.js index a5becf30ce..cbc0679465 100644 --- a/app/component/itinerary/NaviInstructions.js +++ b/app/component/itinerary/NaviInstructions.js @@ -3,7 +3,7 @@ import { FormattedMessage, intlShape } from 'react-intl'; import PropTypes from 'prop-types'; import cx from 'classnames'; import { legShape, configShape } from '../../util/shapes'; -import { legDestination } from '../../util/legUtils'; +import { legDestination, legTimeStr, legTime } from '../../util/legUtils'; import RouteNumber from '../RouteNumber'; import { displayDistance } from '../../util/geo-utils'; import { durationToString } from '../../util/timeUtils'; @@ -73,6 +73,48 @@ export default function NaviInstructions( ); } + + if (legType === 'in-vehicle') { + const t = legTime(leg.end); + const stopOrStation = leg.to.stop.parentStation + ? intl.formatMessage({ id: 'navileg-from-station' }) + : intl.formatMessage({ id: 'navileg-from-stop' }); + const rt = leg.realtimeState !== 'SCHEDULED'; + const localizedMode = intl.formatMessage({ + id: `${leg.mode.toLowerCase()}`, + defaultMessage: `${leg.mode}`, + }); + const remainingDuration = Math.ceil((t - Date.now()) / 60000); // ms to minutes + const values = { + stopOrStation, + stop: leg.to.stop.name, + duration: ( + {remainingDuration} + ), + legTime: ( + {legTimeStr(leg.end)} + ), + }; + + return ( + <> +
+ +
+
+ +
+ + ); + } return null; } diff --git a/app/component/itinerary/navigator.scss b/app/component/itinerary/navigator.scss index f2defb6ce5..5839151cbe 100644 --- a/app/component/itinerary/navigator.scss +++ b/app/component/itinerary/navigator.scss @@ -103,6 +103,14 @@ display: flex; } + .vehicle-leg { + display: flex; + margin-top: var(--space-xs); + font-weight: $font-weight-book; + width: 80%; + text-align: left; + } + .wait-leg { display: flex; align-items: center; @@ -120,20 +128,6 @@ height: 25px; width: 25px; } - - .route-number { - min-width: 55px; - - .vcenter-children { - .vehicle-number { - color: white; - font-size: $font-size-large; - margin-top: 4px; - } - - display: flex; - } - } } } @@ -159,6 +153,49 @@ margin-left: 50px; } + .remaining { + display: flex; + margin-left: 48px; + font-weight: $font-weight-book; + } + + .secondary-vehicle { + display: flex; + flex-direction: row; + font-weight: $font-weight-book; + margin-left: 48px; + margin-top: var(--space-xs); + margin-bottom: var(--space-s); + text-align: left; + + .route-number { + min-width: 55px; + + .vcenter-children { + .vehicle-number { + color: white; + font-size: $font-size-large; + margin-top: 4px; + } + + display: flex; + } + } + + .line { + text-align: center; + + .icon { + font-size: 24px; + } + } + + .info { + display: flex; + flex-direction: column; + } + } + .secondary-content { display: flex; margin-left: var(--space-xxl); diff --git a/app/translations.js b/app/translations.js index 04947c9526..31611480c7 100644 --- a/app/translations.js +++ b/app/translations.js @@ -1314,6 +1314,11 @@ const translations = { 'navigation-wait-mode': 'Odota {mode}a', 'navileg-bicycle': 'Cycle to', 'navileg-car': 'Drive to', + 'navileg-from-station': 'asemalla', + 'navileg-from-stop': 'pysäkillä', + 'navileg-in-vehicle': 'TODO_{mode}matka', + 'navileg-leave-at': + 'Jää pois {stopOrStation} {stop} {duration} min päästä klo {legTime}', 'navileg-mode-citybike': 'Kaupunkipyöriä on asemalla {available} kpl', 'navileg-mode-realtime': '{mode} on aikataulussa', 'navileg-mode-schedule': 'The {mode} is on schedule', @@ -2564,6 +2569,11 @@ const translations = { 'navigation-wait-mode': 'Odota {mode}a', 'navileg-bicycle': 'Pyöräile', 'navileg-car': 'Aja', + 'navileg-from-station': 'asemalla', + 'navileg-from-stop': 'pysäkillä', + 'navileg-in-vehicle': '{mode}matka', + 'navileg-leave-at': + 'Jää pois {stopOrStation} {stop} {duration} min päästä klo {legTime}', 'navileg-mode-citybike': 'Kaupunkipyöriä on asemalla {available} kpl', 'navileg-mode-realtime': '{mode} on aikataulussa', 'navileg-mode-schedule': 'Reaaliaikaista tietoa ei ole saatavilla', @@ -5465,6 +5475,11 @@ const translations = { 'navigation-wait-mode': 'Odota {mode}a', 'navileg-bicycle': 'Cycla till', 'navileg-car': 'Kör till', + 'navileg-from-station': 'TODO_asemalla', + 'navileg-from-stop': 'TODO_pysäkillä', + 'navileg-in-vehicle': 'TODO_{mode}matka', + 'navileg-leave-at': + 'TODO_Jää pois {stopOrStation} {stop} {duration} min päästä klo {legTime}', 'navileg-mode-citybike': 'Kaupunkipyöriä on asemalla {available} kpl', 'navileg-mode-realtime': '{mode} on aikataulussa', 'navileg-mode-schedule': 'Reaaliaikaista tietoa ei ole saatavilla', From 4fce2480ce6040d4c8b7f55f72f4317dfb1886ae Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Mon, 11 Nov 2024 09:42:38 +0200 Subject: [PATCH 011/123] chore: move stopsnearyou components to a sub folder --- .../{ => stopsnearyou}/StopNearYou.js | 12 +++--- .../StopNearYouContainer.js | 0 .../StopNearYouDepartureRowContainer.js | 2 +- .../{ => stopsnearyou}/StopNearYouHeader.js | 12 +++--- .../StopsNearYouContainer.js | 15 +++++--- .../StopsNearYouFavorites.js | 6 +-- .../StopsNearYouFavoritesMapContainer.js | 8 ++-- .../StopsNearYouFavouritesContainer.js | 2 +- .../StopsNearYouMapContainer.js | 6 +-- .../{ => stopsnearyou}/StopsNearYouPage.js | 38 +++++++++---------- .../StopsNearYouPageMeta.js | 4 +- .../{ => stopsnearyou}/StopsNearYouSearch.js | 6 +-- .../VehicleRentalStationNearYou.js | 14 +++---- .../{ => stopsnearyou}/stops-near-you.scss | 0 app/routes.js | 4 +- sass/_main.scss | 2 +- 16 files changed, 67 insertions(+), 64 deletions(-) rename app/component/{ => stopsnearyou}/StopNearYou.js (93%) rename app/component/{ => stopsnearyou}/StopNearYouContainer.js (100%) rename app/component/{ => stopsnearyou}/StopNearYouDepartureRowContainer.js (97%) rename app/component/{ => stopsnearyou}/StopNearYouHeader.js (84%) rename app/component/{ => stopsnearyou}/StopsNearYouContainer.js (97%) rename app/component/{ => stopsnearyou}/StopsNearYouFavorites.js (96%) rename app/component/{ => stopsnearyou}/StopsNearYouFavoritesMapContainer.js (94%) rename app/component/{ => stopsnearyou}/StopsNearYouFavouritesContainer.js (99%) rename app/component/{ => stopsnearyou}/StopsNearYouMapContainer.js (97%) rename app/component/{ => stopsnearyou}/StopsNearYouPage.js (97%) rename app/component/{ => stopsnearyou}/StopsNearYouPageMeta.js (90%) rename app/component/{ => stopsnearyou}/StopsNearYouSearch.js (93%) rename app/component/{ => stopsnearyou}/VehicleRentalStationNearYou.js (87%) rename app/component/{ => stopsnearyou}/stops-near-you.scss (100%) diff --git a/app/component/StopNearYou.js b/app/component/stopsnearyou/StopNearYou.js similarity index 93% rename from app/component/StopNearYou.js rename to app/component/stopsnearyou/StopNearYou.js index 177de36d80..c38ab4d095 100644 --- a/app/component/StopNearYou.js +++ b/app/component/stopsnearyou/StopNearYou.js @@ -4,14 +4,14 @@ import { FormattedMessage, intlShape } from 'react-intl'; import { Link } from 'found'; import connectToStores from 'fluxible-addons-react/connectToStores'; import Modal from '@hsl-fi/modal'; -import { stopShape, configShape, relayShape } from '../util/shapes'; -import { hasEntitiesOfType } from '../util/alertUtils'; -import { PREFIX_STOPS, PREFIX_TERMINALS } from '../util/path'; -import { AlertEntityType } from '../constants'; +import { stopShape, configShape, relayShape } from '../../util/shapes'; +import { hasEntitiesOfType } from '../../util/alertUtils'; +import { PREFIX_STOPS, PREFIX_TERMINALS } from '../../util/path'; +import { AlertEntityType } from '../../constants'; import StopNearYouHeader from './StopNearYouHeader'; -import AlertBanner from './AlertBanner'; +import AlertBanner from '../AlertBanner'; import StopNearYouDepartureRowContainer from './StopNearYouDepartureRowContainer'; -import CapacityModal from './CapacityModal'; +import CapacityModal from '../CapacityModal'; const StopNearYou = ( { stop, desc, stopId, currentTime, currentMode, relay }, diff --git a/app/component/StopNearYouContainer.js b/app/component/stopsnearyou/StopNearYouContainer.js similarity index 100% rename from app/component/StopNearYouContainer.js rename to app/component/stopsnearyou/StopNearYouContainer.js diff --git a/app/component/StopNearYouDepartureRowContainer.js b/app/component/stopsnearyou/StopNearYouDepartureRowContainer.js similarity index 97% rename from app/component/StopNearYouDepartureRowContainer.js rename to app/component/stopsnearyou/StopNearYouDepartureRowContainer.js index fb29f1b848..ed9c93de3e 100644 --- a/app/component/StopNearYouDepartureRowContainer.js +++ b/app/component/stopsnearyou/StopNearYouDepartureRowContainer.js @@ -2,7 +2,7 @@ import React from 'react'; import { v4 as uuid } from 'uuid'; import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import DepartureRow from './DepartureRow'; +import DepartureRow from '../DepartureRow'; export default function StopNearYouDepartureRowContainer({ stopTimes, diff --git a/app/component/StopNearYouHeader.js b/app/component/stopsnearyou/StopNearYouHeader.js similarity index 84% rename from app/component/StopNearYouHeader.js rename to app/component/stopsnearyou/StopNearYouHeader.js index dc1d2de372..033be39f66 100644 --- a/app/component/StopNearYouHeader.js +++ b/app/component/stopsnearyou/StopNearYouHeader.js @@ -1,12 +1,12 @@ import React from 'react'; import PropTypes from 'prop-types'; import { Link } from 'found'; -import { stopShape, configShape } from '../util/shapes'; -import AddressRow from './AddressRow'; -import ZoneIcon from './ZoneIcon'; -import PlatformNumber from './PlatformNumber'; -import FavouriteStopContainer from './FavouriteStopContainer'; -import { getZoneLabel } from '../util/legUtils'; +import { stopShape, configShape } from '../../util/shapes'; +import AddressRow from '../AddressRow'; +import ZoneIcon from '../ZoneIcon'; +import PlatformNumber from '../PlatformNumber'; +import FavouriteStopContainer from '../FavouriteStopContainer'; +import { getZoneLabel } from '../../util/legUtils'; const StopNearYouHeader = ( { stop, desc, isStation, linkAddress }, diff --git a/app/component/StopsNearYouContainer.js b/app/component/stopsnearyou/StopsNearYouContainer.js similarity index 97% rename from app/component/StopsNearYouContainer.js rename to app/component/stopsnearyou/StopsNearYouContainer.js index f601fbb16b..fe0a746c8c 100644 --- a/app/component/StopsNearYouContainer.js +++ b/app/component/stopsnearyou/StopsNearYouContainer.js @@ -4,14 +4,17 @@ import { createPaginationContainer, graphql } from 'react-relay'; import { intlShape, FormattedMessage } from 'react-intl'; import connectToStores from 'fluxible-addons-react/connectToStores'; import { matchShape } from 'found'; -import { configShape, relayShape } from '../util/shapes'; +import { configShape, relayShape } from '../../util/shapes'; import StopNearYouContainer from './StopNearYouContainer'; -import withBreakpoint from '../util/withBreakpoint'; -import { sortNearbyRentalStations, sortNearbyStops } from '../util/sortUtils'; +import withBreakpoint from '../../util/withBreakpoint'; +import { + sortNearbyRentalStations, + sortNearbyStops, +} from '../../util/sortUtils'; import CityBikeStopNearYou from './VehicleRentalStationNearYou'; -import Loading from './Loading'; -import Icon from './Icon'; -import { getDefaultNetworks } from '../util/vehicleRentalUtils'; +import Loading from '../Loading'; +import Icon from '../Icon'; +import { getDefaultNetworks } from '../../util/vehicleRentalUtils'; class StopsNearYouContainer extends React.Component { static propTypes = { diff --git a/app/component/StopsNearYouFavorites.js b/app/component/stopsnearyou/StopsNearYouFavorites.js similarity index 96% rename from app/component/StopsNearYouFavorites.js rename to app/component/stopsnearyou/StopsNearYouFavorites.js index b4f2373544..c1d8c51fe8 100644 --- a/app/component/StopsNearYouFavorites.js +++ b/app/component/stopsnearyou/StopsNearYouFavorites.js @@ -8,10 +8,10 @@ import { stopShape, stationShape, vehicleRentalStationShape, -} from '../util/shapes'; +} from '../../util/shapes'; import StopsNearYouFavouritesContainer from './StopsNearYouFavouritesContainer'; -import withBreakpoint from '../util/withBreakpoint'; -import Loading from './Loading'; +import withBreakpoint from '../../util/withBreakpoint'; +import Loading from '../Loading'; function StopsNearYouFavorites({ favoriteStops, diff --git a/app/component/StopsNearYouFavoritesMapContainer.js b/app/component/stopsnearyou/StopsNearYouFavoritesMapContainer.js similarity index 94% rename from app/component/StopsNearYouFavoritesMapContainer.js rename to app/component/stopsnearyou/StopsNearYouFavoritesMapContainer.js index 38ffa8d27f..7559de5f7b 100644 --- a/app/component/StopsNearYouFavoritesMapContainer.js +++ b/app/component/stopsnearyou/StopsNearYouFavoritesMapContainer.js @@ -3,15 +3,15 @@ import React from 'react'; import connectToStores from 'fluxible-addons-react/connectToStores'; import { graphql, createFragmentContainer } from 'react-relay'; import distance from '@digitransit-search-util/digitransit-search-util-distance'; -import StopsNearYouMap from './map/StopsNearYouMap'; -import PreferencesStore from '../store/PreferencesStore'; -import FavouriteStore from '../store/FavouriteStore'; +import StopsNearYouMap from '../map/StopsNearYouMap'; +import PreferencesStore from '../../store/PreferencesStore'; +import FavouriteStore from '../../store/FavouriteStore'; import { vehicleRentalStationShape, stopShape, stationShape, locationShape, -} from '../util/shapes'; +} from '../../util/shapes'; function StopsNearYouFavoritesMapContainer(props) { const { stops, stations, vehicleStations, position } = props; diff --git a/app/component/StopsNearYouFavouritesContainer.js b/app/component/stopsnearyou/StopsNearYouFavouritesContainer.js similarity index 99% rename from app/component/StopsNearYouFavouritesContainer.js rename to app/component/stopsnearyou/StopsNearYouFavouritesContainer.js index 2491be8c26..2605a020ae 100644 --- a/app/component/StopsNearYouFavouritesContainer.js +++ b/app/component/stopsnearyou/StopsNearYouFavouritesContainer.js @@ -7,7 +7,7 @@ import { stationShape, vehicleRentalStationShape, locationShape, -} from '../util/shapes'; +} from '../../util/shapes'; import StopNearYouContainer from './StopNearYouContainer'; import CityBikeStopNearYou from './VehicleRentalStationNearYou'; diff --git a/app/component/StopsNearYouMapContainer.js b/app/component/stopsnearyou/StopsNearYouMapContainer.js similarity index 97% rename from app/component/StopsNearYouMapContainer.js rename to app/component/stopsnearyou/StopsNearYouMapContainer.js index 4e508b71b1..1857f87933 100644 --- a/app/component/StopsNearYouMapContainer.js +++ b/app/component/stopsnearyou/StopsNearYouMapContainer.js @@ -1,9 +1,9 @@ import connectToStores from 'fluxible-addons-react/connectToStores'; import { graphql, createPaginationContainer } from 'react-relay'; -import StopsNearYouMap from './map/StopsNearYouMap'; +import StopsNearYouMap from '../map/StopsNearYouMap'; -import FavouriteStore from '../store/FavouriteStore'; -import PreferencesStore from '../store/PreferencesStore'; +import FavouriteStore from '../../store/FavouriteStore'; +import PreferencesStore from '../../store/PreferencesStore'; const StopsNearYouMapWithStores = connectToStores( StopsNearYouMap, diff --git a/app/component/StopsNearYouPage.js b/app/component/stopsnearyou/StopsNearYouPage.js similarity index 97% rename from app/component/StopsNearYouPage.js rename to app/component/stopsnearyou/StopsNearYouPage.js index cb82593ee0..b5a2255a9f 100644 --- a/app/component/StopsNearYouPage.js +++ b/app/component/stopsnearyou/StopsNearYouPage.js @@ -9,46 +9,46 @@ import Modal from '@hsl-fi/modal'; import DTAutoSuggest from '@digitransit-component/digitransit-component-autosuggest'; import DTIcon from '@digitransit-component/digitransit-component-icon'; import distance from '@digitransit-search-util/digitransit-search-util-distance'; -import { relayShape, configShape, locationShape } from '../util/shapes'; -import Icon from './Icon'; -import DesktopView from './DesktopView'; -import MobileView from './MobileView'; -import withBreakpoint, { DesktopOrMobile } from '../util/withBreakpoint'; -import { otpToLocation, locationToUri } from '../util/otpStrings'; -import { isKeyboardSelectionEvent } from '../util/browser'; -import Loading from './Loading'; +import { relayShape, configShape, locationShape } from '../../util/shapes'; +import Icon from '../Icon'; +import DesktopView from '../DesktopView'; +import MobileView from '../MobileView'; +import withBreakpoint, { DesktopOrMobile } from '../../util/withBreakpoint'; +import { otpToLocation, locationToUri } from '../../util/otpStrings'; +import { isKeyboardSelectionEvent } from '../../util/browser'; +import Loading from '../Loading'; import StopNearYouContainer from './StopNearYouContainer'; import { checkPositioningPermission, startLocationWatch, -} from '../action/PositionActions'; -import DisruptionBanner from './DisruptionBanner'; +} from '../../action/PositionActions'; +import DisruptionBanner from '../DisruptionBanner'; import StopsNearYouSearch from './StopsNearYouSearch'; import { getGeolocationState, getReadMessageIds, setReadMessageIds, -} from '../store/localStorage'; -import withSearchContext from './WithSearchContext'; -import { PREFIX_NEARYOU } from '../util/path'; +} from '../../store/localStorage'; +import withSearchContext from '../WithSearchContext'; +import { PREFIX_NEARYOU } from '../../util/path'; import StopsNearYouContainer from './StopsNearYouContainer'; -import SwipeableTabs from './SwipeableTabs'; +import SwipeableTabs from '../SwipeableTabs'; import StopsNearYouFavorites from './StopsNearYouFavorites'; import StopsNearYouMapContainer from './StopsNearYouMapContainer'; import StopsNearYouFavoritesMapContainer from './StopsNearYouFavoritesMapContainer'; -import { mapLayerShape } from '../store/MapLayerStore'; +import { mapLayerShape } from '../../store/MapLayerStore'; import { getRentalNetworkConfig, getRentalNetworkId, getDefaultNetworks, -} from '../util/vehicleRentalUtils'; -import { getMapLayerOptions } from '../util/mapLayerUtils'; +} from '../../util/vehicleRentalUtils'; +import { getMapLayerOptions } from '../../util/mapLayerUtils'; import { getTransportModes, getNearYouModes, useCitybikes, -} from '../util/modeUtils'; -import FavouriteStore from '../store/FavouriteStore'; +} from '../../util/modeUtils'; +import FavouriteStore from '../../store/FavouriteStore'; // component initialization phases const PH_START = 'start'; diff --git a/app/component/StopsNearYouPageMeta.js b/app/component/stopsnearyou/StopsNearYouPageMeta.js similarity index 90% rename from app/component/StopsNearYouPageMeta.js rename to app/component/stopsnearyou/StopsNearYouPageMeta.js index 62bd7f4235..c3264dcecf 100644 --- a/app/component/StopsNearYouPageMeta.js +++ b/app/component/stopsnearyou/StopsNearYouPageMeta.js @@ -3,9 +3,9 @@ import { intlShape } from 'react-intl'; import compose from 'recompose/compose'; import getContext from 'recompose/getContext'; import mapProps from 'recompose/mapProps'; -import { configShape } from '../util/shapes'; +import { configShape } from '../../util/shapes'; -import { generateMetaData } from '../util/metaUtils'; +import { generateMetaData } from '../../util/metaUtils'; export default compose( getContext({ config: configShape, intl: intlShape }), diff --git a/app/component/StopsNearYouSearch.js b/app/component/stopsnearyou/StopsNearYouSearch.js similarity index 93% rename from app/component/StopsNearYouSearch.js rename to app/component/stopsnearyou/StopsNearYouSearch.js index bbb95f48cc..d69bcbc03f 100644 --- a/app/component/StopsNearYouSearch.js +++ b/app/component/stopsnearyou/StopsNearYouSearch.js @@ -4,9 +4,9 @@ import { routerShape } from 'found'; import { pure } from 'recompose'; import DTAutoSuggest from '@digitransit-component/digitransit-component-autosuggest'; import { filterSearchResultsByMode } from '@digitransit-search-util/digitransit-search-util-query-utils'; -import { configShape } from '../util/shapes'; -import withSearchContext from './WithSearchContext'; -import { getStopRoutePath } from '../util/path'; +import { configShape } from '../../util/shapes'; +import withSearchContext from '../WithSearchContext'; +import { getStopRoutePath } from '../../util/path'; const DTAutoSuggestWithSearchContext = withSearchContext(DTAutoSuggest); const searchSources = ['Favourite', 'History', 'Datasource']; diff --git a/app/component/VehicleRentalStationNearYou.js b/app/component/stopsnearyou/VehicleRentalStationNearYou.js similarity index 87% rename from app/component/VehicleRentalStationNearYou.js rename to app/component/stopsnearyou/VehicleRentalStationNearYou.js index 1384d7ddec..560c7def59 100644 --- a/app/component/VehicleRentalStationNearYou.js +++ b/app/component/stopsnearyou/VehicleRentalStationNearYou.js @@ -3,13 +3,13 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; import { Link } from 'found'; import { graphql, createRefetchContainer } from 'react-relay'; -import VehicleRentalStation from './VehicleRentalStation'; -import FavouriteVehicleRentalStationContainer from './FavouriteVehicleRentalStationContainer'; -import { PREFIX_BIKESTATIONS } from '../util/path'; -import { isKeyboardSelectionEvent } from '../util/browser'; -import { hasVehicleRentalCode } from '../util/vehicleRentalUtils'; -import { getIdWithoutFeed } from '../util/feedScopedIdUtils'; -import { relayShape } from '../util/shapes'; +import VehicleRentalStation from '../VehicleRentalStation'; +import FavouriteVehicleRentalStationContainer from '../FavouriteVehicleRentalStationContainer'; +import { PREFIX_BIKESTATIONS } from '../../util/path'; +import { isKeyboardSelectionEvent } from '../../util/browser'; +import { hasVehicleRentalCode } from '../../util/vehicleRentalUtils'; +import { getIdWithoutFeed } from '../../util/feedScopedIdUtils'; +import { relayShape } from '../../util/shapes'; const VehicleRentalStationNearYou = ({ stop, diff --git a/app/component/stops-near-you.scss b/app/component/stopsnearyou/stops-near-you.scss similarity index 100% rename from app/component/stops-near-you.scss rename to app/component/stopsnearyou/stops-near-you.scss diff --git a/app/routes.js b/app/routes.js index c848a03ef7..0befeb21d1 100644 --- a/app/routes.js +++ b/app/routes.js @@ -224,7 +224,7 @@ export default config => { import( - /* webpackChunkName: "nearyou" */ './component/StopsNearYouPage' + /* webpackChunkName: "nearyou" */ './component/stopsnearyou/StopsNearYouPage' ).then(getDefault) } render={({ Component, props, error }) => { @@ -244,7 +244,7 @@ export default config => { path="(.*)?" getComponent={() => import( - /* webpackChunkName: "itinerary" */ './component/StopsNearYouPageMeta' + /* webpackChunkName: "itinerary" */ './component/stopsnearyou/StopsNearYouPageMeta' ).then(getDefault) } /> diff --git a/sass/_main.scss b/sass/_main.scss index dcf055ec56..626ab4df14 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -27,7 +27,7 @@ $body-font-weight: $font-weight-medium; @import '../app/component/routepage/route'; @import '../app/component/checkbox'; @import '../app/component/toggle'; -@import '../app/component/stops-near-you'; +@import '../app/component/stopsnearyou/stops-near-you'; @import '../app/component/disruption'; @import '../app/component/departure'; @import '../app/component/stop'; From 7ddf35710fbd4fc6f6da0913b32624d3e587f011 Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Mon, 11 Nov 2024 15:18:37 +0200 Subject: [PATCH 012/123] fix: don't change initial map center on mobile It will cause prompt to update the stop search --- app/component/map/StopsNearYouMap.js | 30 +++++++++------------------- 1 file changed, 9 insertions(+), 21 deletions(-) diff --git a/app/component/map/StopsNearYouMap.js b/app/component/map/StopsNearYouMap.js index 1db49e932f..9ce7106937 100644 --- a/app/component/map/StopsNearYouMap.js +++ b/app/component/map/StopsNearYouMap.js @@ -101,7 +101,7 @@ const updateClient = (context, topics) => { } }; -const handleBounds = (location, edges, breakpoint) => { +const handleBounds = (location, edges) => { if (edges.length === 0) { // No stops anywhere near return [ @@ -110,25 +110,13 @@ const handleBounds = (location, edges, breakpoint) => { ]; } const nearestStop = edges[0].node.place; - const bounds = - breakpoint !== 'large' - ? [ - [ - nearestStop.lat + (nearestStop.lat - location.lat) * 0.5, - nearestStop.lon + (nearestStop.lon - location.lon) * 0.5, - ], - [ - location.lat + (location.lat - nearestStop.lat) * 0.5, - location.lon + (location.lon - nearestStop.lon) * 0.5, - ], - ] - : [ - [nearestStop.lat, nearestStop.lon], - [ - location.lat + location.lat - nearestStop.lat, - location.lon + location.lon - nearestStop.lon, - ], - ]; + const bounds = [ + [nearestStop.lat, nearestStop.lon], + [ + location.lat + location.lat - nearestStop.lat, + location.lon + location.lon - nearestStop.lon, + ], + ]; return bounds; }; @@ -232,7 +220,7 @@ function StopsNearYouMap( }, []); useEffect(() => { - const newBounds = handleBounds(position, sortedStopEdges, breakpoint); + const newBounds = handleBounds(position, sortedStopEdges); if (newBounds.length > 0) { setBounds(newBounds); } From b682c01e8213ebf16bc755fbe1d743c6fc9ce9fb Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Mon, 11 Nov 2024 15:21:41 +0200 Subject: [PATCH 013/123] vehicle card now counts remaining stops Styling of the component --- app/component/itinerary/NaviCard.js | 6 ++-- app/component/itinerary/NaviCardContainer.js | 29 ++++++++------------ app/component/itinerary/NaviCardExtension.js | 23 +++++++++++----- app/component/itinerary/NaviInstructions.js | 2 +- app/component/itinerary/NaviStack.js | 14 ++++++++-- app/component/itinerary/PlanConnection.js | 8 ++++++ app/component/itinerary/navigator.scss | 27 ++++++++++++++---- app/translations.js | 16 +++++++++-- 8 files changed, 85 insertions(+), 40 deletions(-) diff --git a/app/component/itinerary/NaviCard.js b/app/component/itinerary/NaviCard.js index 4488794e7a..5b6e237f5e 100644 --- a/app/component/itinerary/NaviCard.js +++ b/app/component/itinerary/NaviCard.js @@ -22,8 +22,8 @@ const iconMap = { export default function NaviCard({ leg, nextLeg, legType, cardExpanded }) { const iconName = legType === 'wait' ? iconMap.WAIT : iconMap[leg.mode]; let instructions = `navileg-${leg.mode.toLowerCase()}`; - if (legType === 'in-vehicle') { - instructions = `navileg-in-vehicle`; + if (legType === 'in-transit') { + instructions = `navileg-in-transit`; } else if (isRental(leg, nextLeg)) { if (leg.mode === 'WALK' && nextLeg?.mode === 'SCOOTER') { instructions = `navileg-rent-scooter`; @@ -35,7 +35,7 @@ export default function NaviCard({ leg, nextLeg, legType, cardExpanded }) {
-
+
legTime(currentLeg.start); }); if (!currentLeg.transitLeg) { - let legType; if (destCountRef.current >= TIME_AT_DESTINATION) { legType = 'wait'; } else { legType = 'move'; } - naviTopContent = ( - - ); } else { - naviTopContent = ( - - ); + legType = 'in-transit'; } + naviTopContent = ( + + ); } else if (time > legTime(last.end)) { naviTopContent = ; } else { @@ -202,6 +194,7 @@ function NaviCardContainer( messages={activeMessages} cardExpanded={cardExpanded} handleRemove={handleRemove} + legType={legType} /> )} diff --git a/app/component/itinerary/NaviCardExtension.js b/app/component/itinerary/NaviCardExtension.js index 8c50a8f305..f1593f10d4 100644 --- a/app/component/itinerary/NaviCardExtension.js +++ b/app/component/itinerary/NaviCardExtension.js @@ -25,12 +25,21 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { destination.className = 'place'; destination.name = place; } - if (legType === 'in-vehicle') { - // Todo routenumbercontainer on taas hanurista, tyylittelyt ja nimet kuntoon. Rakenne on ok mutta pitää viilata - // Lasketaan interMediateplaces taulukosta arrival ajan ja nykyhetken perusteella. - // Lähijuna = juna ? Pitääköhän tuokin tehdä.. - // ei oo kommitointivalmis, pitää muutella muuttujie ja classnameja ja kattoa voisko navicardontainerin järkeistää tässä vaiheessa. - const nrStopsRemaining = 0; + // todo translationID ei toimi + if (legType === 'in-transit') { + const arrivalTimes = + leg.intermediatePlaces?.map( + p => + new Date(p.arrival.estimated?.time) || + new Date(p.arrival.scheduledTime), + ) || []; + + const now = new Date(); + const idx = arrivalTimes.findIndex(d => d.getTime() > now.getTime()); + const count = arrivalTimes.length - idx; + const nrStopsRemaining = {count}; + const translationId = + count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining'; return (
@@ -47,7 +56,7 @@ const NaviCardExtension = ({ legType, leg }, { config }) => {
diff --git a/app/component/itinerary/NaviInstructions.js b/app/component/itinerary/NaviInstructions.js index cbc0679465..1c27ba47b7 100644 --- a/app/component/itinerary/NaviInstructions.js +++ b/app/component/itinerary/NaviInstructions.js @@ -74,7 +74,7 @@ export default function NaviInstructions( ); } - if (legType === 'in-vehicle') { + if (legType === 'in-transit') { const t = legTime(leg.end); const stopOrStation = leg.to.stop.parentStation ? intl.formatMessage({ id: 'navileg-from-station' }) diff --git a/app/component/itinerary/NaviStack.js b/app/component/itinerary/NaviStack.js index eb08da4298..43b2f02b32 100644 --- a/app/component/itinerary/NaviStack.js +++ b/app/component/itinerary/NaviStack.js @@ -3,9 +3,17 @@ import PropTypes from 'prop-types'; import cx from 'classnames'; import NaviMessage from './NaviMessage'; -const NaviStack = ({ messages, handleRemove, cardExpanded }) => { +const NaviStack = ({ messages, handleRemove, cardExpanded, legType }) => { return ( -
+
{messages.map((notification, index) => ( Date: Mon, 11 Nov 2024 16:27:48 +0200 Subject: [PATCH 014/123] chore: remove funny complexity --- app/component/map/StopsNearYouMap.js | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/app/component/map/StopsNearYouMap.js b/app/component/map/StopsNearYouMap.js index 9ce7106937..c143b67a66 100644 --- a/app/component/map/StopsNearYouMap.js +++ b/app/component/map/StopsNearYouMap.js @@ -195,15 +195,12 @@ function StopsNearYouMap( if (showWalkRoute) { if (stopsAndStations.length > 0) { const firstStop = stopsAndStations[0]; - const shouldFetchWalkRoute = () => { - return ( - (mode !== 'BUS' && mode !== 'TRAM') || - favouriteIds.has(firstStop.gtfsId) - ); - }; - if (!isEqual(firstStop, walk.stop) && shouldFetchWalkRoute()) { + const shouldFetch = + (mode !== 'BUS' && mode !== 'TRAM') || + favouriteIds.has(firstStop.gtfsId); + if (shouldFetch && !isEqual(firstStop, walk.stop)) { fetchPlan(firstStop); - } else if (!shouldFetchWalkRoute()) { + } else if (!shouldFetch) { setWalk({ itinerary: null, stop: null }); } } @@ -211,6 +208,7 @@ function StopsNearYouMap( setWalk({ itinerary: null, stop: null }); } }; + useEffect(() => { prevPlace.current = match.params.place; prevMode.current = match.params.mode; From b3cae9069a35cc9b591451243f633f1932720a25 Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Mon, 11 Nov 2024 16:35:08 +0200 Subject: [PATCH 015/123] chore: rename Near you view shows more than stops --- app/component/{stopsnearyou => nearyou}/StopNearYou.js | 0 .../{stopsnearyou => nearyou}/StopNearYouContainer.js | 0 .../StopNearYouDepartureRowContainer.js | 0 app/component/{stopsnearyou => nearyou}/StopNearYouHeader.js | 0 .../{stopsnearyou => nearyou}/StopsNearYouContainer.js | 0 .../{stopsnearyou => nearyou}/StopsNearYouFavorites.js | 0 .../StopsNearYouFavoritesMapContainer.js | 0 .../StopsNearYouFavouritesContainer.js | 0 .../{stopsnearyou => nearyou}/StopsNearYouMapContainer.js | 0 app/component/{stopsnearyou => nearyou}/StopsNearYouPage.js | 0 .../{stopsnearyou => nearyou}/StopsNearYouPageMeta.js | 0 app/component/{stopsnearyou => nearyou}/StopsNearYouSearch.js | 0 .../{stopsnearyou => nearyou}/VehicleRentalStationNearYou.js | 0 app/component/{stopsnearyou => nearyou}/stops-near-you.scss | 0 app/routes.js | 4 ++-- sass/_main.scss | 2 +- 16 files changed, 3 insertions(+), 3 deletions(-) rename app/component/{stopsnearyou => nearyou}/StopNearYou.js (100%) rename app/component/{stopsnearyou => nearyou}/StopNearYouContainer.js (100%) rename app/component/{stopsnearyou => nearyou}/StopNearYouDepartureRowContainer.js (100%) rename app/component/{stopsnearyou => nearyou}/StopNearYouHeader.js (100%) rename app/component/{stopsnearyou => nearyou}/StopsNearYouContainer.js (100%) rename app/component/{stopsnearyou => nearyou}/StopsNearYouFavorites.js (100%) rename app/component/{stopsnearyou => nearyou}/StopsNearYouFavoritesMapContainer.js (100%) rename app/component/{stopsnearyou => nearyou}/StopsNearYouFavouritesContainer.js (100%) rename app/component/{stopsnearyou => nearyou}/StopsNearYouMapContainer.js (100%) rename app/component/{stopsnearyou => nearyou}/StopsNearYouPage.js (100%) rename app/component/{stopsnearyou => nearyou}/StopsNearYouPageMeta.js (100%) rename app/component/{stopsnearyou => nearyou}/StopsNearYouSearch.js (100%) rename app/component/{stopsnearyou => nearyou}/VehicleRentalStationNearYou.js (100%) rename app/component/{stopsnearyou => nearyou}/stops-near-you.scss (100%) diff --git a/app/component/stopsnearyou/StopNearYou.js b/app/component/nearyou/StopNearYou.js similarity index 100% rename from app/component/stopsnearyou/StopNearYou.js rename to app/component/nearyou/StopNearYou.js diff --git a/app/component/stopsnearyou/StopNearYouContainer.js b/app/component/nearyou/StopNearYouContainer.js similarity index 100% rename from app/component/stopsnearyou/StopNearYouContainer.js rename to app/component/nearyou/StopNearYouContainer.js diff --git a/app/component/stopsnearyou/StopNearYouDepartureRowContainer.js b/app/component/nearyou/StopNearYouDepartureRowContainer.js similarity index 100% rename from app/component/stopsnearyou/StopNearYouDepartureRowContainer.js rename to app/component/nearyou/StopNearYouDepartureRowContainer.js diff --git a/app/component/stopsnearyou/StopNearYouHeader.js b/app/component/nearyou/StopNearYouHeader.js similarity index 100% rename from app/component/stopsnearyou/StopNearYouHeader.js rename to app/component/nearyou/StopNearYouHeader.js diff --git a/app/component/stopsnearyou/StopsNearYouContainer.js b/app/component/nearyou/StopsNearYouContainer.js similarity index 100% rename from app/component/stopsnearyou/StopsNearYouContainer.js rename to app/component/nearyou/StopsNearYouContainer.js diff --git a/app/component/stopsnearyou/StopsNearYouFavorites.js b/app/component/nearyou/StopsNearYouFavorites.js similarity index 100% rename from app/component/stopsnearyou/StopsNearYouFavorites.js rename to app/component/nearyou/StopsNearYouFavorites.js diff --git a/app/component/stopsnearyou/StopsNearYouFavoritesMapContainer.js b/app/component/nearyou/StopsNearYouFavoritesMapContainer.js similarity index 100% rename from app/component/stopsnearyou/StopsNearYouFavoritesMapContainer.js rename to app/component/nearyou/StopsNearYouFavoritesMapContainer.js diff --git a/app/component/stopsnearyou/StopsNearYouFavouritesContainer.js b/app/component/nearyou/StopsNearYouFavouritesContainer.js similarity index 100% rename from app/component/stopsnearyou/StopsNearYouFavouritesContainer.js rename to app/component/nearyou/StopsNearYouFavouritesContainer.js diff --git a/app/component/stopsnearyou/StopsNearYouMapContainer.js b/app/component/nearyou/StopsNearYouMapContainer.js similarity index 100% rename from app/component/stopsnearyou/StopsNearYouMapContainer.js rename to app/component/nearyou/StopsNearYouMapContainer.js diff --git a/app/component/stopsnearyou/StopsNearYouPage.js b/app/component/nearyou/StopsNearYouPage.js similarity index 100% rename from app/component/stopsnearyou/StopsNearYouPage.js rename to app/component/nearyou/StopsNearYouPage.js diff --git a/app/component/stopsnearyou/StopsNearYouPageMeta.js b/app/component/nearyou/StopsNearYouPageMeta.js similarity index 100% rename from app/component/stopsnearyou/StopsNearYouPageMeta.js rename to app/component/nearyou/StopsNearYouPageMeta.js diff --git a/app/component/stopsnearyou/StopsNearYouSearch.js b/app/component/nearyou/StopsNearYouSearch.js similarity index 100% rename from app/component/stopsnearyou/StopsNearYouSearch.js rename to app/component/nearyou/StopsNearYouSearch.js diff --git a/app/component/stopsnearyou/VehicleRentalStationNearYou.js b/app/component/nearyou/VehicleRentalStationNearYou.js similarity index 100% rename from app/component/stopsnearyou/VehicleRentalStationNearYou.js rename to app/component/nearyou/VehicleRentalStationNearYou.js diff --git a/app/component/stopsnearyou/stops-near-you.scss b/app/component/nearyou/stops-near-you.scss similarity index 100% rename from app/component/stopsnearyou/stops-near-you.scss rename to app/component/nearyou/stops-near-you.scss diff --git a/app/routes.js b/app/routes.js index 0befeb21d1..756d5b9d91 100644 --- a/app/routes.js +++ b/app/routes.js @@ -224,7 +224,7 @@ export default config => { import( - /* webpackChunkName: "nearyou" */ './component/stopsnearyou/StopsNearYouPage' + /* webpackChunkName: "nearyou" */ './component/nearyou/StopsNearYouPage' ).then(getDefault) } render={({ Component, props, error }) => { @@ -244,7 +244,7 @@ export default config => { path="(.*)?" getComponent={() => import( - /* webpackChunkName: "itinerary" */ './component/stopsnearyou/StopsNearYouPageMeta' + /* webpackChunkName: "itinerary" */ './component/nearyou/StopsNearYouPageMeta' ).then(getDefault) } /> diff --git a/sass/_main.scss b/sass/_main.scss index 626ab4df14..2f66fb1934 100644 --- a/sass/_main.scss +++ b/sass/_main.scss @@ -27,7 +27,7 @@ $body-font-weight: $font-weight-medium; @import '../app/component/routepage/route'; @import '../app/component/checkbox'; @import '../app/component/toggle'; -@import '../app/component/stopsnearyou/stops-near-you'; +@import '../app/component/nearyou/stops-near-you'; @import '../app/component/disruption'; @import '../app/component/departure'; @import '../app/component/stop'; From 339e9def32ad20c42d0dce6d1798d77bfbb9deb2 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Tue, 12 Nov 2024 08:28:39 +0200 Subject: [PATCH 016/123] show how many stops are before your stop style tweaks --- app/component/itinerary/NaviCardExtension.js | 22 ++++++++++---------- app/component/itinerary/navigator.scss | 19 ++++++++++------- app/translations.js | 16 ++++++-------- 3 files changed, 29 insertions(+), 28 deletions(-) diff --git a/app/component/itinerary/NaviCardExtension.js b/app/component/itinerary/NaviCardExtension.js index f1593f10d4..79305b5f4a 100644 --- a/app/component/itinerary/NaviCardExtension.js +++ b/app/component/itinerary/NaviCardExtension.js @@ -25,7 +25,7 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { destination.className = 'place'; destination.name = place; } - // todo translationID ei toimi + if (legType === 'in-transit') { const arrivalTimes = leg.intermediatePlaces?.map( @@ -37,13 +37,13 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { const now = new Date(); const idx = arrivalTimes.findIndex(d => d.getTime() > now.getTime()); const count = arrivalTimes.length - idx; - const nrStopsRemaining = {count}; + const stopCount = {count}; const translationId = count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining'; return ( -
-
-
+
+
+
{ vertical withBar /> -
{leg.to.name}
+
{leg.to.name}
-
+
@@ -66,9 +66,9 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { } return ( -
-
-
+
+
+
Date: Tue, 12 Nov 2024 08:41:28 +0200 Subject: [PATCH 017/123] navistack top value based on card sizes --- app/component/itinerary/NaviStack.js | 20 +++++++++++--------- app/component/itinerary/navigator.scss | 4 ++++ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/app/component/itinerary/NaviStack.js b/app/component/itinerary/NaviStack.js index 43b2f02b32..819a7f0f3f 100644 --- a/app/component/itinerary/NaviStack.js +++ b/app/component/itinerary/NaviStack.js @@ -4,16 +4,18 @@ import cx from 'classnames'; import NaviMessage from './NaviMessage'; const NaviStack = ({ messages, handleRemove, cardExpanded, legType }) => { + // Card has 4 sizes: first leg collapsed, expanded + // and in transit collapsed, expanded. + let classPostfix = ''; + if (legType === 'in-transit' && cardExpanded) { + classPostfix = 'expand-transit'; + } else if (legType === 'in-transit') { + classPostfix = 'in-transit'; + } else if (cardExpanded) { + classPostfix = 'expanded'; + } return ( -
+
{messages.map((notification, index) => ( Date: Tue, 12 Nov 2024 08:52:44 +0200 Subject: [PATCH 018/123] exlude the last stop where user is supposed to get off --- app/component/itinerary/NaviCardExtension.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/app/component/itinerary/NaviCardExtension.js b/app/component/itinerary/NaviCardExtension.js index 79305b5f4a..015382c207 100644 --- a/app/component/itinerary/NaviCardExtension.js +++ b/app/component/itinerary/NaviCardExtension.js @@ -28,7 +28,7 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { if (legType === 'in-transit') { const arrivalTimes = - leg.intermediatePlaces?.map( + leg.intermediatePlaces.map( p => new Date(p.arrival.estimated?.time) || new Date(p.arrival.scheduledTime), @@ -36,7 +36,9 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { const now = new Date(); const idx = arrivalTimes.findIndex(d => d.getTime() > now.getTime()); - const count = arrivalTimes.length - idx; + // Count the number of stops remaining, excluding the last one where + // the user is supposed to get off. + const count = arrivalTimes.length - idx - 1; const stopCount = {count}; const translationId = count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining'; From 929ed63520a3f34a1cd49efaa41e21525c5581e4 Mon Sep 17 00:00:00 2001 From: sharhio Date: Tue, 12 Nov 2024 09:22:03 +0200 Subject: [PATCH 019/123] DT-6534 limit mobile logo height --- app/component/navigation.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/component/navigation.scss b/app/component/navigation.scss index d4070149d3..01d2500aa5 100644 --- a/app/component/navigation.scss +++ b/app/component/navigation.scss @@ -113,6 +113,7 @@ $content-background-color: $background-color; .logo { min-height: 30px; + max-height: 40px; } } From 56109e0f0d5f223d01f011f5f4ab3b5e6150c41b Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Tue, 12 Nov 2024 10:17:12 +0200 Subject: [PATCH 020/123] refactor the calculation of stops --- app/component/itinerary/NaviCardExtension.js | 23 ++++++++++---------- 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/app/component/itinerary/NaviCardExtension.js b/app/component/itinerary/NaviCardExtension.js index 015382c207..fefd6322cb 100644 --- a/app/component/itinerary/NaviCardExtension.js +++ b/app/component/itinerary/NaviCardExtension.js @@ -27,19 +27,18 @@ const NaviCardExtension = ({ legType, leg }, { config }) => { } if (legType === 'in-transit') { - const arrivalTimes = - leg.intermediatePlaces.map( + const { intermediatePlaces } = leg; + const now = new Date(); + const idx = + intermediatePlaces.findIndex( p => - new Date(p.arrival.estimated?.time) || - new Date(p.arrival.scheduledTime), - ) || []; + new Date( + p.arrival.estimated?.time || p.arrival.scheduledTime, + ).getTime() > now.getTime(), + ) ?? -1; - const now = new Date(); - const idx = arrivalTimes.findIndex(d => d.getTime() > now.getTime()); - // Count the number of stops remaining, excluding the last one where - // the user is supposed to get off. - const count = arrivalTimes.length - idx - 1; - const stopCount = {count}; + const count = idx > -1 ? intermediatePlaces.length - idx : 0; + const stopCountElement = {count}; const translationId = count === 1 ? 'navileg-one-stop-remaining' : 'navileg-stops-remaining'; return ( @@ -59,7 +58,7 @@ const NaviCardExtension = ({ legType, leg }, { config }) => {
From 5ea27d797c965a54f7b28fcd21eb3c1196b909c0 Mon Sep 17 00:00:00 2001 From: Janne Antikainen Date: Tue, 12 Nov 2024 10:34:46 +0200 Subject: [PATCH 021/123] small tweaks --- app/component/itinerary/NaviCard.js | 2 +- app/component/itinerary/NaviInstructions.js | 2 +- app/component/itinerary/navigator.scss | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/app/component/itinerary/NaviCard.js b/app/component/itinerary/NaviCard.js index 5b6e237f5e..e0972d3852 100644 --- a/app/component/itinerary/NaviCard.js +++ b/app/component/itinerary/NaviCard.js @@ -34,7 +34,7 @@ export default function NaviCard({ leg, nextLeg, legType, cardExpanded }) { return (
- +
Date: Tue, 12 Nov 2024 11:16:06 +0200 Subject: [PATCH 022/123] fix: do not assemble complex static configuration many times at every render --- app/component/nearyou/StopsNearYouPage.js | 33 +++++++++++------------ 1 file changed, 15 insertions(+), 18 deletions(-) diff --git a/app/component/nearyou/StopsNearYouPage.js b/app/component/nearyou/StopsNearYouPage.js index b5a2255a9f..6f59348dd3 100644 --- a/app/component/nearyou/StopsNearYouPage.js +++ b/app/component/nearyou/StopsNearYouPage.js @@ -64,6 +64,17 @@ const PH_READY = [PH_USEDEFAULTPOS, PH_USEGEOLOCATION, PH_USEMAPCENTER]; // rend const DTAutoSuggestWithSearchContext = withSearchContext(DTAutoSuggest); +function getNearByStopModes(config) { + const transportModes = getTransportModes(config); + const nearYouModes = getNearYouModes(config); + const modes = nearYouModes.length + ? nearYouModes + : Object.keys(transportModes).filter( + mode => transportModes[mode].availableForSelection, + ); + return modes.map(nearYouMode => nearYouMode.toUpperCase()); +} + class StopsNearYouPage extends React.Component { static contextTypes = { config: configShape.isRequired, @@ -107,6 +118,7 @@ class StopsNearYouPage extends React.Component { } componentDidMount() { + this.modes = getNearByStopModes(this.context.config); const readMessageIds = getReadMessageIds(); const showCityBikeTeaser = !readMessageIds.includes('citybike_teaser'); if (this.context.config.map.showLayerSelector) { @@ -299,20 +311,6 @@ class StopsNearYouPage extends React.Component { return this.setState({ searchPosition: this.getPosition() }); }; - getNearByStopModes = () => { - const transportModes = getTransportModes(this.context.config); - const nearYouModes = getNearYouModes(this.context.config); - const configNearByYouModes = nearYouModes.length - ? nearYouModes - : Object.keys(transportModes).filter( - mode => transportModes[mode].availableForSelection, - ); - const nearByStopModes = configNearByYouModes.map(nearYouMode => - nearYouMode.toUpperCase(), - ); - return nearByStopModes; - }; - getPosition = () => { return this.state.phase === PH_USEDEFAULTPOS ? this.state.searchPosition @@ -320,9 +318,8 @@ class StopsNearYouPage extends React.Component { }; onSwipe = e => { - const nearByStopModes = this.getNearByStopModes(); const { mode } = this.props.match.params; - const newMode = nearByStopModes[e]; + const newMode = this.modes[e]; const paramArray = this.props.match.location.pathname.split(mode); const pathParams = paramArray.length > 1 ? paramArray[1] : '/POS'; const path = `/${PREFIX_NEARYOU}/${newMode}${pathParams}`; @@ -385,7 +382,7 @@ class StopsNearYouPage extends React.Component { const { mode } = this.props.match.params; const noFavorites = mode === 'FAVORITE' && this.noFavorites(); const renderRefetchButton = centerOfMapChanged && !noFavorites; - const nearByStopModes = this.getNearByStopModes(); + const nearByStopModes = this.modes; const index = nearByStopModes.indexOf(mode); const tabs = nearByStopModes.map(nearByStopMode => { const renderSearch = @@ -913,7 +910,7 @@ class StopsNearYouPage extends React.Component { render() { const { mode } = this.props.match.params; const { phase } = this.state; - const nearByStopModes = this.getNearByStopModes(); + const nearByStopModes = this.modes; if (PH_SHOWSEARCH.includes(phase)) { return
{this.renderDialogModal()}
; From df26195533bfb4dcff9484c8d48b257c3311d650 Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Tue, 12 Nov 2024 11:26:23 +0200 Subject: [PATCH 023/123] fix: use sensible stop count --- app/component/nearyou/StopsNearYouPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/component/nearyou/StopsNearYouPage.js b/app/component/nearyou/StopsNearYouPage.js index 6f59348dd3..20b3d6cb9c 100644 --- a/app/component/nearyou/StopsNearYouPage.js +++ b/app/component/nearyou/StopsNearYouPage.js @@ -237,7 +237,7 @@ class StopsNearYouPage extends React.Component { return { lat: searchPosition.lat, lon: searchPosition.lon, - maxResults: 2000, + maxResults: 50, first: this.context.config.maxNearbyStopAmount, maxDistance: this.context.config.maxNearbyStopDistance[mode.toLowerCase()], From 3f8c7f803db38e9a68a94f4d325faef1a33d832c Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Tue, 12 Nov 2024 11:58:00 +0200 Subject: [PATCH 024/123] fix: use same center point login in mobile and desktop --- app/component/nearyou/StopsNearYouPage.js | 13 +------------ 1 file changed, 1 insertion(+), 12 deletions(-) diff --git a/app/component/nearyou/StopsNearYouPage.js b/app/component/nearyou/StopsNearYouPage.js index 20b3d6cb9c..0ad3d54f9e 100644 --- a/app/component/nearyou/StopsNearYouPage.js +++ b/app/component/nearyou/StopsNearYouPage.js @@ -254,20 +254,9 @@ class StopsNearYouPage extends React.Component { let location; if (!mapElement) { location = this.props.position; - } else if (this.props.breakpoint === 'large') { + } else { const centerOfMap = mapElement.leafletElement.getCenter(); location = { lat: centerOfMap.lat, lon: centerOfMap.lng }; - } else { - const drawer = document.getElementsByClassName('drawer-container')[0]; - const { scrollTop } = drawer; - - const height = (window.innerHeight * 0.9 - 24 - scrollTop) / 2; - const width = window.innerWidth / 2; - const point = mapElement.leafletElement.containerPointToLatLng([ - width, - height, - ]); - location = { lat: point.lat, lon: point.lng }; } this.centerOfMap = location; const changed = distance(location, this.state.searchPosition) > 100; From 5198a86e23f186fe96a1792494d83d82a68ff2ed Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Tue, 12 Nov 2024 11:58:39 +0200 Subject: [PATCH 025/123] fix: use more reasonable near you distance limit --- app/configurations/config.default.js | 16 ++++++++-------- app/configurations/config.hsl.js | 15 +++++++-------- app/configurations/config.waltti.js | 8 ++++++++ 3 files changed, 23 insertions(+), 16 deletions(-) diff --git a/app/configurations/config.default.js b/app/configurations/config.default.js index ddd30c3c62..b86cc9cf94 100644 --- a/app/configurations/config.default.js +++ b/app/configurations/config.default.js @@ -170,14 +170,14 @@ export default { maxNearbyStopAmount: 5, maxNearbyStopRefetches: 5, maxNearbyStopDistance: { - favorite: 100000, - bus: 100000, - tram: 100000, - subway: 100000, - rail: 100000, - ferry: 100000, - citybike: 100000, - airplane: 200000, + favorite: 20000, + bus: 20000, + tram: 20000, + subway: 20000, + rail: 50000, + ferry: 50000, + citybike: 20000, + airplane: 100000, }, defaultSettings: { diff --git a/app/configurations/config.hsl.js b/app/configurations/config.hsl.js index e5b4689f36..af5acc4e67 100644 --- a/app/configurations/config.hsl.js +++ b/app/configurations/config.hsl.js @@ -308,15 +308,14 @@ export default { en: 'HSL', }, - maxNearbyStopAmount: 5, maxNearbyStopDistance: { - favorite: 100000, - bus: 30000, - tram: 100000, - subway: 100000, - rail: 50000, - ferry: 100000, - citybike: 100000, + favorite: 10000, + bus: 10000, + tram: 10000, + subway: 10000, + rail: 10000, + ferry: 10000, + citybike: 10000, }, prioritizedStopsNearYou: { diff --git a/app/configurations/config.waltti.js b/app/configurations/config.waltti.js index 7ce97c693b..d03c11d133 100644 --- a/app/configurations/config.waltti.js +++ b/app/configurations/config.waltti.js @@ -136,6 +136,14 @@ export default { nearbyModeSet: 'waltti', + maxNearbyStopDistance: { + bus: 10000, + tram: 10000, + rail: 10000, + ferry: 10000, + citybike: 10000, + }, + redirectReittiopasParams: true, queryMaxAgeDays: 14, From e9618c35b4de090603391fab098fa637b6fbe959 Mon Sep 17 00:00:00 2001 From: sharhio Date: Tue, 12 Nov 2024 13:43:14 +0200 Subject: [PATCH 026/123] DT-6448 logo size refinement --- sass/themes/hameenlinna/_theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sass/themes/hameenlinna/_theme.scss b/sass/themes/hameenlinna/_theme.scss index 8efa1a652d..f7e7e37b48 100644 --- a/sass/themes/hameenlinna/_theme.scss +++ b/sass/themes/hameenlinna/_theme.scss @@ -17,4 +17,4 @@ $link-color: $primary-color; $top-bar-color: $primary-color; /* Navbar dimensions */ -$nav-logo-height: 4em; +$nav-logo-height: 3em; From fcb394350a9c2690070560bd6e458937ba77c9a0 Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Tue, 12 Nov 2024 14:34:59 +0200 Subject: [PATCH 027/123] chore: lower maxResults seems to work fine --- app/component/nearyou/StopsNearYouPage.js | 2 +- app/configurations/config.hsl.js | 14 +++++++------- app/configurations/config.waltti.js | 10 +++++----- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/component/nearyou/StopsNearYouPage.js b/app/component/nearyou/StopsNearYouPage.js index 0ad3d54f9e..5c26cb32a0 100644 --- a/app/component/nearyou/StopsNearYouPage.js +++ b/app/component/nearyou/StopsNearYouPage.js @@ -237,7 +237,7 @@ class StopsNearYouPage extends React.Component { return { lat: searchPosition.lat, lon: searchPosition.lon, - maxResults: 50, + maxResults: 10, first: this.context.config.maxNearbyStopAmount, maxDistance: this.context.config.maxNearbyStopDistance[mode.toLowerCase()], diff --git a/app/configurations/config.hsl.js b/app/configurations/config.hsl.js index af5acc4e67..78ce3059eb 100644 --- a/app/configurations/config.hsl.js +++ b/app/configurations/config.hsl.js @@ -309,13 +309,13 @@ export default { }, maxNearbyStopDistance: { - favorite: 10000, - bus: 10000, - tram: 10000, - subway: 10000, - rail: 10000, - ferry: 10000, - citybike: 10000, + favorite: 20000, + bus: 20000, + tram: 20000, + subway: 20000, + rail: 20000, + ferry: 20000, + citybike: 20000, }, prioritizedStopsNearYou: { diff --git a/app/configurations/config.waltti.js b/app/configurations/config.waltti.js index d03c11d133..cbbe92f231 100644 --- a/app/configurations/config.waltti.js +++ b/app/configurations/config.waltti.js @@ -137,11 +137,11 @@ export default { nearbyModeSet: 'waltti', maxNearbyStopDistance: { - bus: 10000, - tram: 10000, - rail: 10000, - ferry: 10000, - citybike: 10000, + bus: 30000, + tram: 30000, + rail: 50000, + ferry: 50000, + citybike: 30000, }, redirectReittiopasParams: true, From 4b1e1828ee674bbf647cee6c1c17929761a29dbe Mon Sep 17 00:00:00 2001 From: Vesa Meskanen Date: Tue, 12 Nov 2024 15:15:17 +0200 Subject: [PATCH 028/123] chore: tune max nearby distances --- app/configurations/config.default.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/configurations/config.default.js b/app/configurations/config.default.js index b86cc9cf94..cc46059917 100644 --- a/app/configurations/config.default.js +++ b/app/configurations/config.default.js @@ -171,7 +171,7 @@ export default { maxNearbyStopRefetches: 5, maxNearbyStopDistance: { favorite: 20000, - bus: 20000, + bus: 50000, tram: 20000, subway: 20000, rail: 50000, From 6e81d9de3cd44569aee0ec8e1809f8a639327c79 Mon Sep 17 00:00:00 2001 From: sharhio Date: Tue, 12 Nov 2024 15:57:09 +0200 Subject: [PATCH 029/123] DT-6494 use config when showing mobile price, lahti price off --- app/component/itinerary/MobileTicketPurchaseInformation.js | 4 +++- app/configurations/config.lahti.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/app/component/itinerary/MobileTicketPurchaseInformation.js b/app/component/itinerary/MobileTicketPurchaseInformation.js index 633c802239..5d3aa8e08d 100644 --- a/app/component/itinerary/MobileTicketPurchaseInformation.js +++ b/app/component/itinerary/MobileTicketPurchaseInformation.js @@ -22,7 +22,9 @@ export default function MobileTicketPurchaseInformation( config.availableTickets, ); const price = - fare.price > 0 ? `${fare.price.toFixed(2)} €`.replace('.', ',') : ''; + config.showTicketPrice && fare.price > 0 + ? `${fare.price.toFixed(2)} €`.replace('.', ',') + : ''; const faresInfo = () => { const header = `${intl.formatMessage({ diff --git a/app/configurations/config.lahti.js b/app/configurations/config.lahti.js index 73e87ec78d..44c351d4bb 100644 --- a/app/configurations/config.lahti.js +++ b/app/configurations/config.lahti.js @@ -176,7 +176,7 @@ export default configMerger(walttiConfig, { showTicketInformation: true, useTicketIcons: true, ticketLink: 'https://www.lsl.fi/liput-ja-hinnat/', - showTicketPrice: true, + showTicketPrice: false, showTicketLinkOnlyWhenTesting: true, settingsForFeatureTesting: { From e0a93cbc6c64d6f406b4a703504f7847ec028fa2 Mon Sep 17 00:00:00 2001 From: Simo Partinen Date: Tue, 12 Nov 2024 23:02:57 +0200 Subject: [PATCH 030/123] chore: moved navigator itinerary storage to more appropriate place --- app/component/itinerary/ItineraryDetails.js | 1 + app/component/itinerary/ItineraryPage.js | 6 ----- app/component/itinerary/StartNavi.js | 26 +++++++++++++++++---- 3 files changed, 23 insertions(+), 10 deletions(-) diff --git a/app/component/itinerary/ItineraryDetails.js b/app/component/itinerary/ItineraryDetails.js index 115dab0cbe..4a3ed6e6b4 100644 --- a/app/component/itinerary/ItineraryDetails.js +++ b/app/component/itinerary/ItineraryDetails.js @@ -312,6 +312,7 @@ class ItineraryDetails extends React.Component { this.props.setNavigation && ( ), diff --git a/app/component/itinerary/ItineraryPage.js b/app/component/itinerary/ItineraryPage.js index 06ea3eef92..bd8c2ee491 100644 --- a/app/component/itinerary/ItineraryPage.js +++ b/app/component/itinerary/ItineraryPage.js @@ -17,7 +17,6 @@ import { getDialogState, getLatestNavigatorItinerary, setDialogState, - setLatestNavigatorItinerary, } from '../../store/localStorage'; import { addAnalyticsEvent } from '../../util/analyticsUtils'; import { getWeatherData } from '../../util/apiUtils'; @@ -650,11 +649,6 @@ export default function ItineraryPage(props, context) { setMapState({ center: undefined, zoom: undefined, bounds: undefined }); navigateMap(); clearLatestNavigatorItinerary(); - } else { - const { combinedEdges, selectedIndex } = getItinerarySelection(); - if (combinedEdges[selectedIndex]?.node) { - setLatestNavigatorItinerary(combinedEdges[selectedIndex]?.node); - } } setNaviMode(isEnabled); }; diff --git a/app/component/itinerary/StartNavi.js b/app/component/itinerary/StartNavi.js index f29a104a1c..52aae69d3e 100644 --- a/app/component/itinerary/StartNavi.js +++ b/app/component/itinerary/StartNavi.js @@ -1,18 +1,34 @@ +import { matchShape } from 'found'; import PropTypes from 'prop-types'; import React from 'react'; import { FormattedMessage, intlShape } from 'react-intl'; -import { configShape } from '../../util/shapes'; +import { setLatestNavigatorItinerary } from '../../store/localStorage'; +import { configShape, itineraryShape } from '../../util/shapes'; import Icon from '../Icon'; -const StartNavi = ({ setNavigation }, context) => { - const { config, intl } = context; +const StartNavi = ({ setNavigation, itinerary }, context) => { + const { config, intl, match } = context; const color = config.colors?.accessiblePrimary || config.colors?.primary || 'black'; + const handleClick = () => { + setNavigation(true); + setLatestNavigatorItinerary({ + itinerary, + params: { + from: match.params.from, + to: match.params.to, + arriveBy: match.location.query.arriveBy, + time: match.location.query.time, + index: match.params.hash, + }, + }); + }; + return (
-