From f7c320faa5bfdd767fda5c27818dd5d0fc70fcd8 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 12 Oct 2021 09:38:35 +0200 Subject: [PATCH 01/18] Fetch pointsOnLink from API --- src/service.ts | 7 +++++++ src/types.ts | 1 + 2 files changed, 8 insertions(+) diff --git a/src/service.ts b/src/service.ts index 0b50d1fcd..e8ce7b6cd 100644 --- a/src/service.ts +++ b/src/service.ts @@ -51,6 +51,9 @@ interface EstimatedCall { transportSubmode: TransportSubmode publicCode: string } + pointsOnLink: { + points: string + } } } @@ -127,6 +130,9 @@ export async function getStopPlacesWithLines( transportSubmode, publicCode } + pointsOnLink { + points + } } } } @@ -143,6 +149,7 @@ export async function getStopPlacesWithLines( .map(({ destinationDisplay, serviceJourney }) => ({ ...serviceJourney.line, name: `${serviceJourney.line.publicCode} ${destinationDisplay.frontText}`, + pointsOnLink: serviceJourney.pointsOnLink.points, })) const uniqueLines = unique( diff --git a/src/types.ts b/src/types.ts index f0fb9c421..9c876e7ea 100644 --- a/src/types.ts +++ b/src/types.ts @@ -17,6 +17,7 @@ export interface Line { transportMode: TransportMode transportSubmode: TransportSubmode publicCode: string + pointsOnLink: string } export type StopPlaceWithDepartures = StopPlace & { From 0c9a6e8031e36d10198b9dc7c1daad0f324bc346 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 12 Oct 2021 09:39:04 +0200 Subject: [PATCH 02/18] Rename useVehicleData --> useRealtimeVehicleData --- src/components/Map/index.tsx | 4 ++-- src/containers/Admin/EditTab/index.tsx | 4 ++-- src/logic/useRealtimeVehicleData.ts | 8 ++++++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx index db0c50e4c..d22dffbed 100644 --- a/src/components/Map/index.tsx +++ b/src/components/Map/index.tsx @@ -17,7 +17,7 @@ import { Filter } from '../../services/realtimeVehicles/types/filter' import { useDebounce } from '../../utils' -import useVehicleData from '../../logic/useRealtimeVehicleData' +import useRealtimeVehicleData from '../../logic/useRealtimeVehicleData' import BikeRentalStationTag from './BikeRentalStationTag' import StopPlaceTag from './StopPlaceTag' @@ -50,7 +50,7 @@ const Map = ({ const debouncedViewport = useDebounce(viewport, 200) const mapRef = useRef(null) const [filter, setFilter] = useState({}) - const { realtimeVehicles } = useVehicleData(filter) + const { realtimeVehicles } = useRealtimeVehicleData(filter) const [bounds, setBounds] = useState<[number, number, number, number]>( mapRef.current?.getMap()?.getBounds()?.toArray()?.flat() || ([0, 0, 0, 0] as [number, number, number, number]), diff --git a/src/containers/Admin/EditTab/index.tsx b/src/containers/Admin/EditTab/index.tsx index 07a7ee532..7177a71d9 100644 --- a/src/containers/Admin/EditTab/index.tsx +++ b/src/containers/Admin/EditTab/index.tsx @@ -39,7 +39,7 @@ import { } from '../../../settings/LocalStorage' import { useStopPlacesWithLines } from '../../../logic/useStopPlacesWithLines' -import useVehicleData from '../../../logic/useRealtimeVehicleData' +import useRealtimeVehicleData from '../../../logic/useRealtimeVehicleData' import StopPlacePanel from './StopPlacePanel' import BikePanelSearch from './BikeSearch' @@ -104,7 +104,7 @@ const EditTab = (): JSX.Element => { settings?.distance || DEFAULT_DISTANCE, ) - const { allLinesWithRealtimeData } = useVehicleData() + const { allLinesWithRealtimeData } = useRealtimeVehicleData() const { uniqueLines } = useStopPlacesWithLines() const realtimeLines = useMemo( diff --git a/src/logic/useRealtimeVehicleData.ts b/src/logic/useRealtimeVehicleData.ts index c22ede021..65ca849c9 100644 --- a/src/logic/useRealtimeVehicleData.ts +++ b/src/logic/useRealtimeVehicleData.ts @@ -38,7 +38,7 @@ interface QueryData { /** * Hook to query and subscribe to remote vehicle data */ -export default function useVehicleData(filter?: Filter): Return { +export default function useRealtimeVehicleData(filter?: Filter): Return { const [state, dispatch] = useVehicleReducer() const { uniqueLines } = useStopPlacesWithLines() const [settings] = useSettingsContext() @@ -131,7 +131,11 @@ export default function useVehicleData(filter?: Filter): Return { const line = uniqueLines?.find((l) => l.id === vehicle.line.lineRef) return { ...vehicle, - line: { ...vehicle.line, publicCode: line?.publicCode }, + line: { + ...vehicle.line, + publicCode: line?.publicCode, + points: line?.pointsOnLink, + }, } }) setRealtimeVehicles(mappedDataFromBothAPIs) From 7d001ba23d76192b49fc8bca2e48358fa5d3e6ec Mon Sep 17 00:00:00 2001 From: = Date: Tue, 12 Oct 2021 09:52:57 +0200 Subject: [PATCH 03/18] Fix linting --- src/containers/Admin/NameTab/CustomURL/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/containers/Admin/NameTab/CustomURL/index.tsx b/src/containers/Admin/NameTab/CustomURL/index.tsx index 57f1eb495..da76b5345 100644 --- a/src/containers/Admin/NameTab/CustomURL/index.tsx +++ b/src/containers/Admin/NameTab/CustomURL/index.tsx @@ -131,7 +131,7 @@ const CustomURL = (): JSX.Element => { label="Ønsket lenkeadresse" value={customUrlInput} onChange={handleCustomUrlChange} - onKeyDown={(e) => { + onKeyDown={(e: KeyboardEvent) => { if (e.key === 'Enter') tryAddCustomUrl() }} maxLength={80} From ac7ea6b066dbbe35f33b3d6621a5cf300441e6db Mon Sep 17 00:00:00 2001 From: = Date: Tue, 12 Oct 2021 15:03:00 +0200 Subject: [PATCH 04/18] Install polyline-decoder --- package-lock.json | 24 ++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 26 insertions(+) diff --git a/package-lock.json b/package-lock.json index babefabc7..83857e795 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "copy-to-clipboard": "^3.3.1", "date-fns": "^2.23.0", "firebase": "^9.0.1", + "google-polyline": "^1.0.3", "graphql": "^15.6.0", "lodash.debounce": "^4.0.8", "lz-string": "^1.4.4", @@ -67,6 +68,7 @@ "@babel/plugin-proposal-class-properties": "^7.14.5", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", + "@types/google-polyline": "^1.0.0", "@types/lodash.debounce": "^4.0.6", "@types/lz-string": "^1.3.34", "@types/node": "^16.7.13", @@ -4379,6 +4381,12 @@ "@types/node": "*" } }, + "node_modules/@types/google-polyline": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/google-polyline/-/google-polyline-1.0.0.tgz", + "integrity": "sha512-XE9nhb1Su6PbirnBy8o/tZcDE/b53fGeUG4pC/Z4/ku54nfm49PXM5IXcCTuL+Df6rXkY6T5yNiYgX90egq+aw==", + "dev": true + }, "node_modules/@types/history": { "version": "4.7.9", "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz", @@ -11542,6 +11550,11 @@ "node": ">=10" } }, + "node_modules/google-polyline": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/google-polyline/-/google-polyline-1.0.3.tgz", + "integrity": "sha512-36BnqVxmVcR8lTvzO6aeXdICNChAwQLlfMkR1P9IBpTWE8hA6bAbQHCVArwMHB5WIMq9owywtAkjioe3crNq4Q==" + }, "node_modules/got": { "version": "9.6.0", "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", @@ -27768,6 +27781,12 @@ "@types/node": "*" } }, + "@types/google-polyline": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@types/google-polyline/-/google-polyline-1.0.0.tgz", + "integrity": "sha512-XE9nhb1Su6PbirnBy8o/tZcDE/b53fGeUG4pC/Z4/ku54nfm49PXM5IXcCTuL+Df6rXkY6T5yNiYgX90egq+aw==", + "dev": true + }, "@types/history": { "version": "4.7.9", "resolved": "https://registry.npmjs.org/@types/history/-/history-4.7.9.tgz", @@ -33433,6 +33452,11 @@ "node-forge": "^0.10.0" } }, + "google-polyline": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/google-polyline/-/google-polyline-1.0.3.tgz", + "integrity": "sha512-36BnqVxmVcR8lTvzO6aeXdICNChAwQLlfMkR1P9IBpTWE8hA6bAbQHCVArwMHB5WIMq9owywtAkjioe3crNq4Q==" + }, "got": { "version": "9.6.0", "resolved": "https://registry.npmjs.org/got/-/got-9.6.0.tgz", diff --git a/package.json b/package.json index d309f309e..01732feca 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "copy-to-clipboard": "^3.3.1", "date-fns": "^2.23.0", "firebase": "^9.0.1", + "google-polyline": "^1.0.3", "graphql": "^15.6.0", "lodash.debounce": "^4.0.8", "lz-string": "^1.4.4", @@ -85,6 +86,7 @@ "@babel/plugin-proposal-class-properties": "^7.14.5", "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", + "@types/google-polyline": "^1.0.0", "@types/lodash.debounce": "^4.0.6", "@types/lz-string": "^1.3.34", "@types/node": "^16.7.13", From 6e6053052edc605d762b8fab10a68e2286965df5 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 12 Oct 2021 15:32:35 +0200 Subject: [PATCH 05/18] Add overlay to display line route in map --- .../Map/RealtimeVehicleTag/index.tsx | 16 +++++++- src/components/Map/index.tsx | 34 +++++++++++++++-- src/components/Map/polyLineoverlay.tsx | 37 +++++++++++++++++++ src/components/Map/styles.scss | 18 ++++++++- .../Admin/NameTab/CustomURL/index.tsx | 2 +- src/logic/useRealtimeVehicleData.ts | 2 +- src/services/realtimeVehicles/types/line.ts | 1 + 7 files changed, 103 insertions(+), 7 deletions(-) create mode 100644 src/components/Map/polyLineoverlay.tsx diff --git a/src/components/Map/RealtimeVehicleTag/index.tsx b/src/components/Map/RealtimeVehicleTag/index.tsx index 51ebefc37..c1e271a6d 100644 --- a/src/components/Map/RealtimeVehicleTag/index.tsx +++ b/src/components/Map/RealtimeVehicleTag/index.tsx @@ -14,9 +14,13 @@ import './styles.scss' interface Props { realtimeVehicle: RealtimeVehicle + setHoveredVehicle: (realtimeVehicle: RealtimeVehicle | null) => void } -const RealtimeVehicleTag = ({ realtimeVehicle }: Props): JSX.Element => ( +const RealtimeVehicleTag = ({ + realtimeVehicle, + setHoveredVehicle, +}: Props): JSX.Element => ( } @@ -30,6 +34,16 @@ const RealtimeVehicleTag = ({ realtimeVehicle }: Props): JSX.Element => ( } >
{ + console.log('entering') + + setHoveredVehicle(realtimeVehicle) + }} + onMouseLeave={() => { + console.log('leaving') + + setHoveredVehicle(null) + }} className="map__realtime-vehicle-tag-circle-inner" style={ realtimeVehicle.active diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx index d22dffbed..de48c0031 100644 --- a/src/components/Map/index.tsx +++ b/src/components/Map/index.tsx @@ -3,22 +3,26 @@ import React, { useState, memo, useRef, useEffect, useMemo } from 'react' import { InteractiveMap, Marker } from 'react-map-gl' import type { MapRef } from 'react-map-gl' +import type { ClusterProperties } from 'supercluster' import useSupercluster from 'use-supercluster' +import polyline from 'google-polyline' -import type { ClusterProperties } from 'supercluster' +import { TransportMode } from '@entur/sdk' import { Station, Vehicle } from '@entur/sdk/lib/mobility/types' import PositionPin from '../../assets/icons/positionPin' -import { StopPlaceWithDepartures } from '../../types' +import { IconColorType, StopPlaceWithDepartures } from '../../types' import { Filter } from '../../services/realtimeVehicles/types/filter' -import { useDebounce } from '../../utils' +import { getIconColor, useDebounce } from '../../utils' import useRealtimeVehicleData from '../../logic/useRealtimeVehicleData' +import { RealtimeVehicle } from '../../services/realtimeVehicles/types/realtimeVehicle' +import { PolylineOverlay } from './polyLineoverlay' import BikeRentalStationTag from './BikeRentalStationTag' import StopPlaceTag from './StopPlaceTag' import ScooterMarkerTag from './ScooterMarkerTag' @@ -56,6 +60,25 @@ const Map = ({ ([0, 0, 0, 0] as [number, number, number, number]), ) + const [hoveredVehicle, setHoveredVehicle] = + useState(null) + + const displayedLine = useMemo(() => { + if (!hoveredVehicle || !hoveredVehicle.line.pointsOnLink) return null + + const cords = polyline.decode(hoveredVehicle.line.pointsOnLink) + + return ( + + ) + }, [hoveredVehicle]) + useEffect(() => { const newBounds = (mapRef.current ?.getMap() @@ -141,6 +164,7 @@ const Map = ({ > )) @@ -178,6 +202,7 @@ const Map = ({ ref={mapRef} > {realtimeVehicles && liveVehicleMarkers} + {displayedLine} {scooterClusters.map((scooterCluster) => { const [slongitude, slatitude] = scooterCluster.geometry.coordinates @@ -200,6 +225,7 @@ const Map = ({ } latitude={slatitude} longitude={slongitude} + className="map__scooter-marker" > + color?: string + lineWidth?: number +} + +interface lol { + width: number + height: number + ctx: CanvasRenderingContext2D + isDragging: boolean + project: (point: [number, number]) => [number, number] +} + +export const PolylineOverlay = ({ + points, + color = 'red', + lineWidth = 2, +}: Props): JSX.Element | null => { + const redraw = ({ width, height, ctx, project }: lol): void => { + ctx.clearRect(0, 0, width, height) + ctx.globalCompositeOperation = 'lighter' + ctx.lineWidth = lineWidth + ctx.strokeStyle = color + ctx.beginPath() + points.forEach((point) => { + const pixel = project([point[1], point[0]]) + ctx.lineTo(pixel[0], pixel[1]) + }) + ctx.stroke() + } + + return +} diff --git a/src/components/Map/styles.scss b/src/components/Map/styles.scss index 804988d0b..38a2f2ed7 100644 --- a/src/components/Map/styles.scss +++ b/src/components/Map/styles.scss @@ -1,3 +1,19 @@ .map__live-vehicle-marker:hover { - z-index: 1000; + z-index: 3; +} + +.map__live-vehicle-marker { + z-index: 1; +} + +.map__bike-rental-station-marker { + z-index: 2; +} + +.map__scooter-marker { + z-index: 2; +} + +.map__stop-place-marker { + z-index: 2; } diff --git a/src/containers/Admin/NameTab/CustomURL/index.tsx b/src/containers/Admin/NameTab/CustomURL/index.tsx index da76b5345..57f1eb495 100644 --- a/src/containers/Admin/NameTab/CustomURL/index.tsx +++ b/src/containers/Admin/NameTab/CustomURL/index.tsx @@ -131,7 +131,7 @@ const CustomURL = (): JSX.Element => { label="Ønsket lenkeadresse" value={customUrlInput} onChange={handleCustomUrlChange} - onKeyDown={(e: KeyboardEvent) => { + onKeyDown={(e) => { if (e.key === 'Enter') tryAddCustomUrl() }} maxLength={80} diff --git a/src/logic/useRealtimeVehicleData.ts b/src/logic/useRealtimeVehicleData.ts index 65ca849c9..027a2d4b9 100644 --- a/src/logic/useRealtimeVehicleData.ts +++ b/src/logic/useRealtimeVehicleData.ts @@ -134,7 +134,7 @@ export default function useRealtimeVehicleData(filter?: Filter): Return { line: { ...vehicle.line, publicCode: line?.publicCode, - points: line?.pointsOnLink, + pointsOnLink: line?.pointsOnLink, }, } }) diff --git a/src/services/realtimeVehicles/types/line.ts b/src/services/realtimeVehicles/types/line.ts index 298ed80fd..f3b1bf61d 100644 --- a/src/services/realtimeVehicles/types/line.ts +++ b/src/services/realtimeVehicles/types/line.ts @@ -2,4 +2,5 @@ export type Line = { lineRef: string lineName: string publicCode?: string + pointsOnLink?: string } From 7a313b829cb434ad922e8023eddba65946adc476 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 12 Oct 2021 15:34:30 +0200 Subject: [PATCH 06/18] remove console log --- src/components/Map/RealtimeVehicleTag/index.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/components/Map/RealtimeVehicleTag/index.tsx b/src/components/Map/RealtimeVehicleTag/index.tsx index c1e271a6d..28fbadeed 100644 --- a/src/components/Map/RealtimeVehicleTag/index.tsx +++ b/src/components/Map/RealtimeVehicleTag/index.tsx @@ -35,13 +35,9 @@ const RealtimeVehicleTag = ({ >
{ - console.log('entering') - setHoveredVehicle(realtimeVehicle) }} onMouseLeave={() => { - console.log('leaving') - setHoveredVehicle(null) }} className="map__realtime-vehicle-tag-circle-inner" From 73890abb404aed6634dcd901fdae45cd06108607 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 10:46:33 +0200 Subject: [PATCH 07/18] Shorten scss --- src/components/Map/styles.scss | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/src/components/Map/styles.scss b/src/components/Map/styles.scss index 38a2f2ed7..ec7798005 100644 --- a/src/components/Map/styles.scss +++ b/src/components/Map/styles.scss @@ -6,14 +6,8 @@ z-index: 1; } -.map__bike-rental-station-marker { - z-index: 2; -} - -.map__scooter-marker { - z-index: 2; -} - +.map__bike-rental-station-marker, +.map__scooter-marker, .map__stop-place-marker { z-index: 2; } From 6ba099c5dedae30487b06196c2d65c28c8c8901e Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 11:05:36 +0200 Subject: [PATCH 08/18] Adjust z-indices. Offset live vehicle markers --- src/components/Map/index.tsx | 4 +++- src/components/Map/styles.scss | 4 ++-- src/dashboards/Map/styles.scss | 1 + 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx index de48c0031..6a1789313 100644 --- a/src/components/Map/index.tsx +++ b/src/components/Map/index.tsx @@ -160,7 +160,9 @@ const Map = ({ key={vehicle.vehicleRef} latitude={vehicle.location.latitude} longitude={vehicle.location.longitude} - className="map__live-vehicle-marker" + className="map__realtime-vehicle-marker" + offsetTop={-25} + offsetLeft={-10} > Date: Wed, 13 Oct 2021 11:25:50 +0200 Subject: [PATCH 09/18] Refactor lineoverlay --- .../LineOverlay/index.tsx} | 20 ++++++++----------- src/components/Map/index.tsx | 6 +++--- 2 files changed, 11 insertions(+), 15 deletions(-) rename src/components/Map/{polyLineoverlay.tsx => RealtimeVehicleTag/LineOverlay/index.tsx} (62%) diff --git a/src/components/Map/polyLineoverlay.tsx b/src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx similarity index 62% rename from src/components/Map/polyLineoverlay.tsx rename to src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx index ba52a0023..236756fd5 100644 --- a/src/components/Map/polyLineoverlay.tsx +++ b/src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx @@ -3,28 +3,22 @@ import { CanvasOverlay } from 'react-map-gl' interface Props { points: Array<[number, number]> - color?: string - lineWidth?: number + color: string } -interface lol { +interface RedrawArgs { width: number height: number ctx: CanvasRenderingContext2D - isDragging: boolean project: (point: [number, number]) => [number, number] } -export const PolylineOverlay = ({ - points, - color = 'red', - lineWidth = 2, -}: Props): JSX.Element | null => { - const redraw = ({ width, height, ctx, project }: lol): void => { +const LineOverlay = ({ points, color }: Props): JSX.Element | null => { + const redraw = ({ width, height, ctx, project }: RedrawArgs): void => { ctx.clearRect(0, 0, width, height) - ctx.globalCompositeOperation = 'lighter' - ctx.lineWidth = lineWidth + ctx.lineWidth = 3 ctx.strokeStyle = color + ctx.globalAlpha = 0.4 ctx.beginPath() points.forEach((point) => { const pixel = project([point[1], point[0]]) @@ -35,3 +29,5 @@ export const PolylineOverlay = ({ return } + +export default LineOverlay diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx index 6a1789313..309a04c70 100644 --- a/src/components/Map/index.tsx +++ b/src/components/Map/index.tsx @@ -22,7 +22,7 @@ import { getIconColor, useDebounce } from '../../utils' import useRealtimeVehicleData from '../../logic/useRealtimeVehicleData' import { RealtimeVehicle } from '../../services/realtimeVehicles/types/realtimeVehicle' -import { PolylineOverlay } from './polyLineoverlay' +import LineOverlay from './RealtimeVehicleTag/LineOverlay' import BikeRentalStationTag from './BikeRentalStationTag' import StopPlaceTag from './StopPlaceTag' import ScooterMarkerTag from './ScooterMarkerTag' @@ -69,13 +69,13 @@ const Map = ({ const cords = polyline.decode(hoveredVehicle.line.pointsOnLink) return ( - + > ) }, [hoveredVehicle]) From 06717a8180f96650fb93a766500282eed89d95ba Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 12:50:12 +0200 Subject: [PATCH 10/18] Increase line width --- src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx b/src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx index 236756fd5..457e4ef6a 100644 --- a/src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx +++ b/src/components/Map/RealtimeVehicleTag/LineOverlay/index.tsx @@ -16,7 +16,7 @@ interface RedrawArgs { const LineOverlay = ({ points, color }: Props): JSX.Element | null => { const redraw = ({ width, height, ctx, project }: RedrawArgs): void => { ctx.clearRect(0, 0, width, height) - ctx.lineWidth = 3 + ctx.lineWidth = 4 ctx.strokeStyle = color ctx.globalAlpha = 0.4 ctx.beginPath() From df2700bf3544e6536db2d6a8854916b46668bfcf Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 14:10:56 +0200 Subject: [PATCH 11/18] Fix cursor over hidden tooltip --- src/components/Map/RealtimeVehicleTag/styles.scss | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/src/components/Map/RealtimeVehicleTag/styles.scss b/src/components/Map/RealtimeVehicleTag/styles.scss index 798de68f6..0fbe3e599 100644 --- a/src/components/Map/RealtimeVehicleTag/styles.scss +++ b/src/components/Map/RealtimeVehicleTag/styles.scss @@ -24,4 +24,14 @@ align-items: center; font-size: $font-sizes-medium; } + &-tooltip { + visibility: hidden; + opacity: 0; + } + &-tooltip.visible { + visibility: visible; + opacity: 1; + transition: opacity 0.1s ease-in; + margin-bottom: 0.5rem; + } } From 36b5aab100dd6e6975f207553bb781bdadc03ff7 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 14:14:50 +0200 Subject: [PATCH 12/18] Revert visibility: hidden --- src/components/Map/RealtimeVehicleTag/styles.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Map/RealtimeVehicleTag/styles.scss b/src/components/Map/RealtimeVehicleTag/styles.scss index 0fbe3e599..aac47f0a3 100644 --- a/src/components/Map/RealtimeVehicleTag/styles.scss +++ b/src/components/Map/RealtimeVehicleTag/styles.scss @@ -25,11 +25,9 @@ font-size: $font-sizes-medium; } &-tooltip { - visibility: hidden; opacity: 0; } &-tooltip.visible { - visibility: visible; opacity: 1; transition: opacity 0.1s ease-in; margin-bottom: 0.5rem; From 934846d1cbb6dedbd91db97cb67a63f93993cfe5 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 14:32:26 +0200 Subject: [PATCH 13/18] Remove unused import --- src/components/Map/RealtimeVehicleTag/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Map/RealtimeVehicleTag/index.tsx b/src/components/Map/RealtimeVehicleTag/index.tsx index 308421a55..b66dc99ec 100644 --- a/src/components/Map/RealtimeVehicleTag/index.tsx +++ b/src/components/Map/RealtimeVehicleTag/index.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React from 'react' import { Tooltip } from '@entur/tooltip' import { colors } from '@entur/tokens' From d4e5cd3a536ad1d5ae3867ccba4a18066a465f1d Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 14:32:44 +0200 Subject: [PATCH 14/18] Fix cursor on hidden tooltip --- src/components/Map/RealtimeVehicleTag/styles.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Map/RealtimeVehicleTag/styles.scss b/src/components/Map/RealtimeVehicleTag/styles.scss index de50c70b2..b4c911168 100644 --- a/src/components/Map/RealtimeVehicleTag/styles.scss +++ b/src/components/Map/RealtimeVehicleTag/styles.scss @@ -26,9 +26,11 @@ } &-tooltip { opacity: 0; + visibility: hidden; } &-tooltip.visible { opacity: 1; + visibility: visible; transition: opacity 0.1s ease-in; margin-bottom: 0.5rem; } From 503506f94ebee97839cd01e77d6d9d498cbf1b07 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 14:59:42 +0200 Subject: [PATCH 15/18] Change mouse event --- src/components/Map/RealtimeVehicleTag/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Map/RealtimeVehicleTag/index.tsx b/src/components/Map/RealtimeVehicleTag/index.tsx index b66dc99ec..0ae88a5b7 100644 --- a/src/components/Map/RealtimeVehicleTag/index.tsx +++ b/src/components/Map/RealtimeVehicleTag/index.tsx @@ -35,8 +35,8 @@ const RealtimeVehicleTag = ({ >
setHoveredVehicle(realtimeVehicle)} - onMouseOut={() => setHoveredVehicle(null)} + onMouseEnter={() => setHoveredVehicle(realtimeVehicle)} + onMouseLeave={() => setHoveredVehicle(null)} style={ realtimeVehicle.active ? { backgroundColor: 'white' } From 5a3733826ef9eb1a881f0dab6eaafb7a11723270 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 15:47:23 +0200 Subject: [PATCH 16/18] Turn off realtime data by default --- src/settings/UrlStorage.ts | 1 - src/settings/index.ts | 3 ++- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/settings/UrlStorage.ts b/src/settings/UrlStorage.ts index 43369a52c..83621109e 100644 --- a/src/settings/UrlStorage.ts +++ b/src/settings/UrlStorage.ts @@ -22,7 +22,6 @@ export const DEFAULT_SETTINGS: Settings = { logoSize: '32px', description: '', hiddenRealtimeDataLineRefs: [], - hideRealtimeData: false, } const VERSION_PREFIX_REGEX = /^v(\d)+::/ diff --git a/src/settings/index.ts b/src/settings/index.ts index 08497763e..26951b27c 100644 --- a/src/settings/index.ts +++ b/src/settings/index.ts @@ -58,7 +58,7 @@ export interface Settings { hideSituations?: boolean hideTracks?: boolean hideWalkInfo?: boolean - hideRealtimeData: boolean + hideRealtimeData?: boolean hiddenRealtimeDataLineRefs: string[] } @@ -80,6 +80,7 @@ const DEFAULT_SETTINGS: Partial = { owners: [] as string[], hiddenStopModes: {}, hiddenRealtimeDataLineRefs: [], + hideRealtimeData: true, } export function useSettings(): [Settings | null, Setter] { From f1cc9d0c8e5aae1ff7c289d29c050fb37e904630 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 13 Oct 2021 15:48:49 +0200 Subject: [PATCH 17/18] Fix typo --- src/components/Map/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/Map/index.tsx b/src/components/Map/index.tsx index 39c465c16..67b43e278 100644 --- a/src/components/Map/index.tsx +++ b/src/components/Map/index.tsx @@ -66,11 +66,11 @@ const Map = ({ const displayedLine = useMemo(() => { if (!hoveredVehicle || !hoveredVehicle.line.pointsOnLink) return null - const cords = polyline.decode(hoveredVehicle.line.pointsOnLink) + const coords = polyline.decode(hoveredVehicle.line.pointsOnLink) return ( Date: Wed, 13 Oct 2021 15:52:18 +0200 Subject: [PATCH 18/18] Shorten scss --- src/components/Map/styles.scss | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/Map/styles.scss b/src/components/Map/styles.scss index 3006b0d86..f8b30e7f0 100644 --- a/src/components/Map/styles.scss +++ b/src/components/Map/styles.scss @@ -1,9 +1,8 @@ -.map__realtime-vehicle-marker:hover { - z-index: 3; -} - .map__realtime-vehicle-marker { z-index: 1; + &:hover { + z-index: 3; + } } .map__bike-rental-station-marker,