From f07cf35ba8c82c14e976ad800e12038096e8b7d8 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Thu, 5 Oct 2023 19:13:10 +0300 Subject: [PATCH 01/18] fix in menu.scss for Bug - Open Menu In the Mobile Display #64 --- src/pages/components/header/menu/menu.scss | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/components/header/menu/menu.scss b/src/pages/components/header/menu/menu.scss index 25847bc6..81bddee2 100644 --- a/src/pages/components/header/menu/menu.scss +++ b/src/pages/components/header/menu/menu.scss @@ -57,6 +57,9 @@ } .main .header.open{ + display: block; + position: absolute; + z-index: 500; max-width: 100%; padding: 30px; } From 277c88ac5e2e472aed8523156ee44523bdf93b2c Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Fri, 6 Oct 2023 17:36:58 +0300 Subject: [PATCH 02/18] fix in menu.scss for Bug - Open Menu In the Mobile Display #64 --- src/pages/components/header/menu/menu.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/components/header/menu/menu.scss b/src/pages/components/header/menu/menu.scss index 81bddee2..cf47b06d 100644 --- a/src/pages/components/header/menu/menu.scss +++ b/src/pages/components/header/menu/menu.scss @@ -37,6 +37,7 @@ max-width: 0; padding: 0; transition: all 0.2s ease-in-out; + margin-right: 2.51rem; .header-menu { display: block; @@ -62,6 +63,7 @@ z-index: 500; max-width: 100%; padding: 30px; + margin-right: .51rem; } } From 661ab12f6bf7e21e6dff92f212804a6f31007e0c Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Fri, 6 Oct 2023 17:38:51 +0300 Subject: [PATCH 03/18] fix in menu.scss for Bug - Open Menu In the Mobile Display #64 --- src/pages/components/header/menu/menu.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/components/header/menu/menu.scss b/src/pages/components/header/menu/menu.scss index cf47b06d..57a57708 100644 --- a/src/pages/components/header/menu/menu.scss +++ b/src/pages/components/header/menu/menu.scss @@ -37,7 +37,6 @@ max-width: 0; padding: 0; transition: all 0.2s ease-in-out; - margin-right: 2.51rem; .header-menu { display: block; From 88062d52efc87c6ed8eab1c13b39d925ee7081e0 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Sat, 7 Oct 2023 14:12:27 +0300 Subject: [PATCH 04/18] change rem to px --- src/pages/components/header/menu/menu.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/components/header/menu/menu.scss b/src/pages/components/header/menu/menu.scss index 57a57708..c8695404 100644 --- a/src/pages/components/header/menu/menu.scss +++ b/src/pages/components/header/menu/menu.scss @@ -62,7 +62,7 @@ z-index: 500; max-width: 100%; padding: 30px; - margin-right: .51rem; + margin-right: 1px; } } From d856647b7a0d0ff6bf929dcea20ed25ba16c07f6 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Tue, 10 Oct 2023 21:09:44 +0300 Subject: [PATCH 05/18] begin to design card --- src/pages/RealtimeMapPage.tsx | 27 ++++++++++--------- src/pages/components/MapLayers/BusToolTip.tsx | 19 +++++++++++++ 2 files changed, 33 insertions(+), 13 deletions(-) create mode 100644 src/pages/components/MapLayers/BusToolTip.tsx diff --git a/src/pages/RealtimeMapPage.tsx b/src/pages/RealtimeMapPage.tsx index 307da8cf..bd0edfb7 100644 --- a/src/pages/RealtimeMapPage.tsx +++ b/src/pages/RealtimeMapPage.tsx @@ -20,6 +20,7 @@ import { Label } from './components/Label' import { getColorByHashString } from './dashboard/OperatorHbarChart/utils' import createClusterCustomIcon from './components/utils/customCluster/customCluster' import { TimeSelector } from './components/TimeSelector' +import { BusToolTip } from 'src/pages/components/MapLayers/BusToolTip' export interface Point { loc: [number, number] @@ -249,19 +250,19 @@ export function Markers({ positions }: { positions: Point[] }) { return ( <> - {positions.map((pos, i) => ( - agency.operator_ref === pos.operator)?.agency_name, - })} - key={i}> - - 
{JSON.stringify(pos, null, 2)}
- - - ))} + {positions.map((pos, i) => { + const icon = colorIcon({ + operator_id: pos.operator?.toString() || 'default', + name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name, + }) + return ( + + + + + + ) + })} ) diff --git a/src/pages/components/MapLayers/BusToolTip.tsx b/src/pages/components/MapLayers/BusToolTip.tsx new file mode 100644 index 00000000..c3bb5fda --- /dev/null +++ b/src/pages/components/MapLayers/BusToolTip.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { Point } from 'src/pages/RealtimeMapPage' +import { Card, CardContent, Typography } from '@mui/material' +import { DivIcon } from 'leaflet' + +export function BusToolTip({ position, icon }: { position: Point; icon: DivIcon }) { + return ( + + + +
+ + + This is a nice card with some content. You can customize it further. + + + + ) +} From b7a347c44bc5dc2a2d5b0c086d502a9ef5fc10c5 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Wed, 11 Oct 2023 14:07:50 +0300 Subject: [PATCH 06/18] tool tip begin to get body --- src/pages/components/MapLayers/BusToolTip.tsx | 103 ++++++++++++++++-- 1 file changed, 95 insertions(+), 8 deletions(-) diff --git a/src/pages/components/MapLayers/BusToolTip.tsx b/src/pages/components/MapLayers/BusToolTip.tsx index c3bb5fda..ee9c8443 100644 --- a/src/pages/components/MapLayers/BusToolTip.tsx +++ b/src/pages/components/MapLayers/BusToolTip.tsx @@ -1,18 +1,105 @@ import React from 'react' import { Point } from 'src/pages/RealtimeMapPage' -import { Card, CardContent, Typography } from '@mui/material' +import { Card, CardContent, Grid, Typography } from '@mui/material' import { DivIcon } from 'leaflet' - +//{ +// "loc": [ +// 32.224567, +// 34.830898 +// ], +// "color": 97, +// "operator": 3, +// "bearing": 191, +// "recorded_at_time": 1682931622000, +// "point": { +// "id": 1981609473, +// "siri_snapshot_id": 658007, +// "siri_ride_stop_id": 968055722, +// "recorded_at_time": "2023-05-01T09:00:22+00:00", +// "lon": 34.830898, +// "lat": 32.224567, +// "bearing": 191, +// "velocity": 97, +// "distance_from_journey_start": 95389, +// "distance_from_siri_ride_stop_meters": 11513, +// "siri_snapshot__id": 658007, +// "siri_snapshot__snapshot_id": "2023/05/01/09/00", +// "siri_snapshot__etl_status": "loaded", +// "siri_snapshot__etl_start_time": "2023-05-01T09:01:07.600557+00:00", +// "siri_snapshot__etl_end_time": "2023-05-01T09:02:02.884330+00:00", +// "siri_snapshot__error": "", +// "siri_snapshot__num_successful_parse_vehicle_locations": 5541, +// "siri_snapshot__num_failed_parse_vehicle_locations": 52, +// "siri_snapshot__num_added_siri_rides": 183, +// "siri_snapshot__num_added_siri_ride_stops": 2615, +// "siri_snapshot__num_added_siri_routes": 0, +// "siri_snapshot__num_added_siri_stops": 0, +// "siri_snapshot__last_heartbeat": "2023-05-01T09:01:47.190618+00:00", +// "siri_snapshot__created_by": "siri-etl-7d6b95c8bb-f4fqh", +// "siri_ride__id": 37248601, +// "siri_ride__journey_ref": "2023-05-01-20766070", +// "siri_ride__scheduled_start_time": "2023-05-01T07:30:00+00:00", +// "siri_ride__vehicle_ref": "7687169", +// "siri_ride__first_vehicle_location_id": 1981130688, +// "siri_ride__last_vehicle_location_id": 1981750968, +// "siri_ride__duration_minutes": 116, +// "siri_ride__gtfs_ride_id": 40253487, +// "siri_route__id": 1603, +// "siri_route__line_ref": 6921, +// "siri_route__operator_ref": 3 +// } +// } export function BusToolTip({ position, icon }: { position: Point; icon: DivIcon }) { + console.log(position) + console.log(icon.options.html) return ( - -
- - - This is a nice card with some content. You can customize it further. - + + + +
+ + + + + קו : + + {position.point?.siri_route__id} + + + + מהירות : + + {position.point?.velocity} קמ״ש + + + + כיוון נסיעה : + + ( {position.point?.bearing} מעלות) + + + + זמן דגימה : + + {position.point?.recorded_at_time.split('+')[0].replace('T', ' , ').slice(0, -3)} + + + + לוחית רישוי : + + {position.point?.siri_ride__vehicle_ref} + + + + נ.צ: + + {position.loc.join(' , ')} + + + + ) From 55c820405b82a8687c38f8430c0e27046dec34c7 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Wed, 11 Oct 2023 19:36:33 +0300 Subject: [PATCH 07/18] add api add hebrew text in file --- src/api/siriService.ts | 16 ++ src/pages/RealtimeMapPage.tsx | 4 - src/pages/components/MapLayers/BusToolTip.tsx | 153 +++++++++++++----- src/resources/texts.tsx | 11 ++ 4 files changed, 138 insertions(+), 46 deletions(-) diff --git a/src/api/siriService.ts b/src/api/siriService.ts index db768f33..33b731f9 100644 --- a/src/api/siriService.ts +++ b/src/api/siriService.ts @@ -6,6 +6,7 @@ import { geoLocationBoundary, nearestLocation } from 'src/api/geoService' import { Coordinates } from 'src/model/location' import { log } from 'src/log' import { BusRoute } from 'src/model/busRoute' +import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel' const SIRI_API = new SiriApi(API_CONFIG) const LOCATION_DELTA_METERS = 500 @@ -26,6 +27,21 @@ async function getRidesAsync(route: BusRoute, stop: BusStop, timestamp: moment.M }) } +export async function getSiriRideWithRelated( + siriRouteId: string, + vehicleRefs: string, + siriRouteLineRefs: string, +) { + const gtfs_route_promise: SiriRideWithRelatedPydanticModel[] = await SIRI_API.siriRidesListGet({ + limit: 122, + siriRouteIds: siriRouteId.toString(), + siriRouteLineRefs, + vehicleRefs, + }) + + return gtfs_route_promise[0] +} + export async function getSiriStopHitTimesAsync(route: BusRoute, stop: BusStop, timestamp: Moment) { log('looking for rides arriving at stop around time', { route, diff --git a/src/pages/RealtimeMapPage.tsx b/src/pages/RealtimeMapPage.tsx index bd0edfb7..24c2c094 100644 --- a/src/pages/RealtimeMapPage.tsx +++ b/src/pages/RealtimeMapPage.tsx @@ -81,8 +81,6 @@ export default function RealtimeMapPage() { from: formatTime(from), to: formatTime(to), }) - console.log(locations) - const loaded = locations.length const positions = useMemo(() => { @@ -125,8 +123,6 @@ export default function RealtimeMapPage() { [locations], ) - console.log(paths) - return ( diff --git a/src/pages/components/MapLayers/BusToolTip.tsx b/src/pages/components/MapLayers/BusToolTip.tsx index ee9c8443..6a4df44c 100644 --- a/src/pages/components/MapLayers/BusToolTip.tsx +++ b/src/pages/components/MapLayers/BusToolTip.tsx @@ -1,7 +1,15 @@ -import React from 'react' +import React, { useEffect, useState } from 'react' import { Point } from 'src/pages/RealtimeMapPage' -import { Card, CardContent, Grid, Typography } from '@mui/material' +import { Button, Card, CardContent, Grid, Typography } from '@mui/material' import { DivIcon } from 'leaflet' +import moment from 'moment-timezone' + +import { getSiriRideWithRelated, getSiriStopHitTimesAsync } from 'src/api/siriService' +import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel' +import { Row } from 'src/pages/components/Row' +import { Label } from 'src/pages/components/Label' +import { TEXTS } from 'src/resources/texts' +import { Spin } from 'antd' //{ // "loc": [ // 32.224567, @@ -49,56 +57,117 @@ import { DivIcon } from 'leaflet' // "siri_route__operator_ref": 3 // } // } +// siriRouteId: string, +// vehicleRefs: string, +// siriRouteLineRefs: string, export function BusToolTip({ position, icon }: { position: Point; icon: DivIcon }) { - console.log(position) - console.log(icon.options.html) + const [siriRide, setSiriRide] = useState() + const [isLoading, setIsLoading] = useState(false) + const [showJson, setShowJson] = useState(false) + + useEffect(() => { + setIsLoading(true) + Promise.all([ + getSiriRideWithRelated( + position.point!.siri_route__id.toString(), + position.point!.siri_ride__vehicle_ref.toString(), + position.point!.siri_route__line_ref.toString(), + ), + ]) + .then(([siriRideRes]) => setSiriRide(siriRideRes)) + .finally(() => setIsLoading(false)) + }, [position]) return ( - + - - - -
- - - - - קו : - - {position.point?.siri_route__id} + {isLoading ? ( + + + ) : showJson ? ( + 
+            {JSON.stringify(position, null, 2)}
+            

+            {siriRide && JSON.stringify(siriRide, null, 2)}
+
+ ) : ( + + + +
+ + + + + {TEXTS.line} : + + {siriRide && siriRide!.gtfsRouteRouteShortName} + - - - מהירות : - - {position.point?.velocity} קמ״ש + + + + {TEXTS.from} : + + {siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[0]} + - - - כיוון נסיעה : - - ( {position.point?.bearing} מעלות) + + {TEXTS.destination} : + + {siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[1]} + - - - זמן דגימה : - - {position.point?.recorded_at_time.split('+')[0].replace('T', ' , ').slice(0, -3)} + + {TEXTS.velocity} : + + {position.point?.velocity} קמ״ש + - - - לוחית רישוי : - - {position.point?.siri_ride__vehicle_ref} + + + {TEXTS.sample_time} : + + {moment(position.point!.recorded_at_time as string, moment.ISO_8601) + .tz('Israel') + .format('HH:mm')} + - - - נ.צ: - - {position.loc.join(' , ')} + + {TEXTS.vehicle_ref} : + + {position.point?.siri_ride__vehicle_ref} + - + {/*maybe option to add info like this in extend card for now I put this condition */} + {window.screen.height > 1100 && ( + <> + + {TEXTS.drive_direction} : + + ( {position.point?.bearing} {TEXTS.bearing}) + + + + {TEXTS.coords} : + + {position.loc.join(' , ')} + + + + )} + {' '} + )} + + diff --git a/src/resources/texts.tsx b/src/resources/texts.tsx index fac06e31..137718e2 100644 --- a/src/resources/texts.tsx +++ b/src/resources/texts.tsx @@ -87,6 +87,17 @@ export const TEXTS = { and_smaller_donors: 'ותרומות קטנות נוספות של ידידי ואוהדי הסדנא.', all_rides_completed: 'כמעט / כל הנסיעות בוצעו', missing_rides: 'מהנסיעות חסרות', + line: 'קו', + from: 'מוצא', + destination: 'יעד', + sample_time: 'זמן דגימה', + velocity: 'מהירות', + drive_direction: 'כיוון נסיעה:', + coords: 'נ.צ:', + vehicle_ref: 'לוחית רישוי', + show_card: 'הצג כרטיס', + show_document: 'הצג מסמך', + bearing: 'מעלות', } export const formatted = (text: string, value: string) => text.replace(PLACEHOLDER, value) From c095fa20bdcd614b71e895c19ea6a6a2e3be5b78 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Wed, 11 Oct 2023 20:29:45 +0300 Subject: [PATCH 08/18] add bus tool tip for SingleLineMapPage and find bug there open #113 issue for it --- src/pages/SingleLineMapPage.tsx | 35 ++++++++----- src/pages/components/MapLayers/BusToolTip.tsx | 51 +------------------ 2 files changed, 22 insertions(+), 64 deletions(-) diff --git a/src/pages/SingleLineMapPage.tsx b/src/pages/SingleLineMapPage.tsx index 772d7cf2..c18f3fb5 100644 --- a/src/pages/SingleLineMapPage.tsx +++ b/src/pages/SingleLineMapPage.tsx @@ -21,6 +21,7 @@ import { DateSelector } from './components/DateSelector' import { CircularProgress } from '@mui/material' import { FilterPositionsByStartTimeSelector } from './components/FilterPositionsByStartTimeSelector' import { PageContainer } from './components/PageContainer' +import { BusToolTip } from 'src/pages/components/MapLayers/BusToolTip' interface Path { locations: VehicleLocation[] @@ -164,20 +165,26 @@ const SingleLineMapPage = () => { url="https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png" /> - {filteredPositions.map((pos, i) => ( - agency.operator_ref === pos.operator) - ?.agency_name, - })} - key={i}> - - 
{JSON.stringify(pos, null, 2)}
- - - ))} + {filteredPositions.map((pos, i) => { + const icon = colorIcon({ + operator_id: pos.operator?.toString() || 'default', + name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name, + }) + return ( + agency.operator_ref === pos.operator) + ?.agency_name, + })} + key={i}> + + + + + ) + })} {paths.map((path) => ( () const [isLoading, setIsLoading] = useState(false) From 8bc43b00fa7ef404bcf47b1846ff9d8b05e95477 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Wed, 11 Oct 2023 20:29:45 +0300 Subject: [PATCH 09/18] add bus tool tip for SingleLineMapPage and find bug there open #113 issue for it --- src/pages/SingleLineMapPage.tsx | 35 +++++++----- src/pages/components/MapLayers/BusToolTip.tsx | 53 +------------------ 2 files changed, 23 insertions(+), 65 deletions(-) diff --git a/src/pages/SingleLineMapPage.tsx b/src/pages/SingleLineMapPage.tsx index 772d7cf2..c18f3fb5 100644 --- a/src/pages/SingleLineMapPage.tsx +++ b/src/pages/SingleLineMapPage.tsx @@ -21,6 +21,7 @@ import { DateSelector } from './components/DateSelector' import { CircularProgress } from '@mui/material' import { FilterPositionsByStartTimeSelector } from './components/FilterPositionsByStartTimeSelector' import { PageContainer } from './components/PageContainer' +import { BusToolTip } from 'src/pages/components/MapLayers/BusToolTip' interface Path { locations: VehicleLocation[] @@ -164,20 +165,26 @@ const SingleLineMapPage = () => { url="https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png" /> - {filteredPositions.map((pos, i) => ( - agency.operator_ref === pos.operator) - ?.agency_name, - })} - key={i}> - - 
{JSON.stringify(pos, null, 2)}
- - - ))} + {filteredPositions.map((pos, i) => { + const icon = colorIcon({ + operator_id: pos.operator?.toString() || 'default', + name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name, + }) + return ( + agency.operator_ref === pos.operator) + ?.agency_name, + })} + key={i}> + + + + + ) + })} {paths.map((path) => ( () const [isLoading, setIsLoading] = useState(false) From ddd3633329d16defdc51cee37a89e43d6cf0dce6 Mon Sep 17 00:00:00 2001 From: Noam Gaash Date: Thu, 12 Oct 2023 00:32:54 +0300 Subject: [PATCH 10/18] fix: single line map page --- src/api/useVehicleLocations.ts | 2 +- src/pages/SingleLineMapPage.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/api/useVehicleLocations.ts b/src/api/useVehicleLocations.ts index 25914fe5..09653769 100644 --- a/src/api/useVehicleLocations.ts +++ b/src/api/useVehicleLocations.ts @@ -145,7 +145,7 @@ export default function useVehicleLocations({ const [locations, setLocations] = useState([]) const [isLoading, setIsLoading] = useState([]) useEffect(() => { - const range = split ? getMinutesInRange(from, to) : [{ from, to }] + const range = split ? getMinutesInRange(from, to, split) : [{ from, to }] setIsLoading(range.map(() => true)) const unmounts = range.map(({ from, to }, i) => getLocations({ diff --git a/src/pages/SingleLineMapPage.tsx b/src/pages/SingleLineMapPage.tsx index 278728c7..a9605e75 100644 --- a/src/pages/SingleLineMapPage.tsx +++ b/src/pages/SingleLineMapPage.tsx @@ -48,7 +48,12 @@ const SingleLineMapPage = () => { if (!operatorId || !lineNumber) { return } - getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber).then((routes) => + getRoutesAsync( + moment(timestamp - 24 * 60 * 60 * 1000), + moment(timestamp), + operatorId, + lineNumber, + ).then((routes) => setSearch((current) => search.lineNumber === lineNumber ? { ...current, routes: routes } : current, ), From 622ea0b6d3d1189c466fdc19c83400799ccde9df Mon Sep 17 00:00:00 2001 From: Noam Gaash Date: Thu, 12 Oct 2023 08:20:20 +0300 Subject: [PATCH 11/18] fix: route times --- src/api/gtfsService.ts | 4 ++-- src/api/useVehicleLocations.ts | 2 +- src/pages/SingleLineMapPage.tsx | 7 +------ 3 files changed, 4 insertions(+), 9 deletions(-) diff --git a/src/api/gtfsService.ts b/src/api/gtfsService.ts index d18ddb85..b9c54316 100644 --- a/src/api/gtfsService.ts +++ b/src/api/gtfsService.ts @@ -20,8 +20,8 @@ export async function getRoutesAsync( const gtfsRoutes = await GTFS_API.gtfsRoutesListGet({ routeShortName: lineNumber, operatorRefs: operatorId, - dateFrom: fromTimestamp.toDate(), - dateTo: toTimestamp.toDate(), + dateFrom: fromTimestamp.startOf('day').toDate(), + dateTo: moment.min(toTimestamp.endOf('day'), moment()).toDate(), limit: 100, }) const routes = Object.values( diff --git a/src/api/useVehicleLocations.ts b/src/api/useVehicleLocations.ts index 09653769..87802682 100644 --- a/src/api/useVehicleLocations.ts +++ b/src/api/useVehicleLocations.ts @@ -175,7 +175,7 @@ export default function useVehicleLocations({ unmounts.forEach((unmount) => unmount()) setIsLoading([]) } - }, [from, to]) + }, [from, to, lineRef, split]) return { locations, isLoading: isLoading.some((loading) => loading), diff --git a/src/pages/SingleLineMapPage.tsx b/src/pages/SingleLineMapPage.tsx index a9605e75..278728c7 100644 --- a/src/pages/SingleLineMapPage.tsx +++ b/src/pages/SingleLineMapPage.tsx @@ -48,12 +48,7 @@ const SingleLineMapPage = () => { if (!operatorId || !lineNumber) { return } - getRoutesAsync( - moment(timestamp - 24 * 60 * 60 * 1000), - moment(timestamp), - operatorId, - lineNumber, - ).then((routes) => + getRoutesAsync(moment(timestamp), moment(timestamp), operatorId, lineNumber).then((routes) => setSearch((current) => search.lineNumber === lineNumber ? { ...current, routes: routes } : current, ), From 62005764550bd8707c0395b841b4fa1da03de6ad Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Thu, 12 Oct 2023 14:24:15 +0300 Subject: [PATCH 12/18] change after comment --- src/api/siriService.ts | 2 +- src/pages/components/MapLayers/BusToolTip.tsx | 14 ++++++-------- 2 files changed, 7 insertions(+), 9 deletions(-) diff --git a/src/api/siriService.ts b/src/api/siriService.ts index 33b731f9..764b6c30 100644 --- a/src/api/siriService.ts +++ b/src/api/siriService.ts @@ -33,7 +33,7 @@ export async function getSiriRideWithRelated( siriRouteLineRefs: string, ) { const gtfs_route_promise: SiriRideWithRelatedPydanticModel[] = await SIRI_API.siriRidesListGet({ - limit: 122, + limit: 1, siriRouteIds: siriRouteId.toString(), siriRouteLineRefs, vehicleRefs, diff --git a/src/pages/components/MapLayers/BusToolTip.tsx b/src/pages/components/MapLayers/BusToolTip.tsx index 5bc2e930..fa3efd89 100644 --- a/src/pages/components/MapLayers/BusToolTip.tsx +++ b/src/pages/components/MapLayers/BusToolTip.tsx @@ -18,14 +18,12 @@ export function BusToolTip({ position, icon }: { position: Point; icon: DivIcon useEffect(() => { setIsLoading(true) - Promise.all([ - getSiriRideWithRelated( - position.point!.siri_route__id.toString(), - position.point!.siri_ride__vehicle_ref.toString(), - position.point!.siri_route__line_ref.toString(), - ), - ]) - .then(([siriRideRes]) => setSiriRide(siriRideRes)) + getSiriRideWithRelated( + position.point!.siri_route__id.toString(), + position.point!.siri_ride__vehicle_ref.toString(), + position.point!.siri_route__line_ref.toString(), + ) + .then((siriRideRes: SiriRideWithRelatedPydanticModel) => setSiriRide(siriRideRes)) .finally(() => setIsLoading(false)) }, [position]) return ( From 89af2295ca8864f387c33400393a56dedfb80644 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Sun, 15 Oct 2023 13:19:18 +0300 Subject: [PATCH 13/18] change from mui element like Card and Typography to div and h4/span. only keep Grid as I see it using in another place in the project --- src/pages/components/MapLayers/BusToolTip.tsx | 166 ++++++++---------- src/resources/texts.tsx | 1 + 2 files changed, 75 insertions(+), 92 deletions(-) diff --git a/src/pages/components/MapLayers/BusToolTip.tsx b/src/pages/components/MapLayers/BusToolTip.tsx index fa3efd89..2e2f8641 100644 --- a/src/pages/components/MapLayers/BusToolTip.tsx +++ b/src/pages/components/MapLayers/BusToolTip.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import { Point } from 'src/pages/RealtimeMapPage' -import { Button, Card, CardContent, Grid, Typography } from '@mui/material' +import { Button, Grid } from '@mui/material' import { DivIcon } from 'leaflet' import moment from 'moment-timezone' @@ -27,98 +27,80 @@ export function BusToolTip({ position, icon }: { position: Point; icon: DivIcon .finally(() => setIsLoading(false)) }, [position]) return ( - - - {isLoading ? ( - - - ) : showJson ? ( - 
-            {JSON.stringify(position, null, 2)}
-            

-            {siriRide && JSON.stringify(siriRide, null, 2)}
-
- ) : ( - - - -
- - - - - {TEXTS.line} : - - {siriRide && siriRide!.gtfsRouteRouteShortName} - - - - - - {TEXTS.from} : - - {siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[0]} - - - - {TEXTS.destination} : - - {siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[1]} - - - - {TEXTS.velocity} : - - {position.point?.velocity} קמ״ש - - - - - {TEXTS.sample_time} : - - {moment(position.point!.recorded_at_time as string, moment.ISO_8601) - .tz('Israel') - .format('HH:mm')} - - - - {TEXTS.vehicle_ref} : - - {position.point?.siri_ride__vehicle_ref} - - - {/*maybe option to add info like this in extend card for now I put this condition */} - {window.screen.height > 1100 && ( - <> - - {TEXTS.drive_direction} : - - ( {position.point?.bearing} {TEXTS.bearing}) - - - - {TEXTS.coords} : - - {position.loc.join(' , ')} - - - - )} - {' '} +
+ {isLoading ? ( + + + ) : showJson ? ( + 
+          {JSON.stringify(position, null, 2)}
+          

+          {siriRide && JSON.stringify(siriRide, null, 2)}
+
+ ) : ( + + +

+
+

+ + +

+ {TEXTS.line} :{siriRide && siriRide!.gtfsRouteRouteShortName} +

- )} - - + +

+ {TEXTS.from} : + {siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[0]} +

+

+ {TEXTS.destination} : + {siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[1]} +

+

+ {TEXTS.velocity} :{`${position.point?.velocity} ${TEXTS.kmh}`} +

+ +

+ {TEXTS.sample_time} : + + {moment(position.point!.recorded_at_time as string, moment.ISO_8601) + .tz('Israel') + .format('HH:mm')} + +

+

+ {TEXTS.vehicle_ref} :{position.point?.siri_ride__vehicle_ref} +

+ {/*maybe option to add info like this in extend card for now I put this condition */} + {window.screen.height > 1100 && ( + <> +

+ {TEXTS.drive_direction} : + + ( {position.point?.bearing} {TEXTS.bearing}) + +

+

+ {TEXTS.coords} :{position.loc.join(' , ')} +

+ + )} + {' '} - - + )} + + + +
) } diff --git a/src/resources/texts.tsx b/src/resources/texts.tsx index 939371b3..b57f934c 100644 --- a/src/resources/texts.tsx +++ b/src/resources/texts.tsx @@ -101,6 +101,7 @@ export const TEXTS = { show_card: 'הצג כרטיס', show_document: 'הצג מסמך', bearing: 'מעלות', + kmh: 'קמ״ש', } export const formatted = (text: string, value: string) => text.replace(PLACEHOLDER, value) From 681d5a39c25f11deabb30391b5ba11e7b5664c5d Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Sun, 15 Oct 2023 14:16:14 +0300 Subject: [PATCH 14/18] change from mui element like Card and Typography to div and h4/span. only keep Grid as I see it using in another place in the project --- src/pages/RealtimeMapPage.tsx | 29 +++++++++++++++-------------- src/pages/SingleLineMapPage.tsx | 29 +++++++++++++++-------------- 2 files changed, 30 insertions(+), 28 deletions(-) diff --git a/src/pages/RealtimeMapPage.tsx b/src/pages/RealtimeMapPage.tsx index 2084d9ce..490db9a0 100644 --- a/src/pages/RealtimeMapPage.tsx +++ b/src/pages/RealtimeMapPage.tsx @@ -19,6 +19,7 @@ import { getColorByHashString } from './dashboard/OperatorHbarChart/utils' import createClusterCustomIcon from './components/utils/customCluster/customCluster' import { TimeSelector } from './components/TimeSelector' import { busIcon } from './components/utils/BusIcon' +import { BusToolTip } from 'src/pages/components/MapLayers/BusToolTip' export interface Point { loc: [number, number] @@ -152,7 +153,7 @@ export default function RealtimeMapPage() { {/* Buttons */} {/*TODO (another PR another issue) - 3) use text `TEXTS`. + 3) use text `TEXTS`. */} {/* loaded info */} @@ -205,19 +206,19 @@ export function Markers({ positions }: { positions: Point[] }) { return ( <> - {positions.map((pos) => ( - agency.operator_ref === pos.operator)?.agency_name, - })} - key={pos.point?.id}> - - 
{JSON.stringify(pos, null, 2)}
- - - ))} + {positions.map((pos) => { + const icon = busIcon({ + operator_id: pos.operator?.toString() || 'default', + name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name, + }) + return ( + + + + + + ) + })} ) diff --git a/src/pages/SingleLineMapPage.tsx b/src/pages/SingleLineMapPage.tsx index 39322910..547bb947 100644 --- a/src/pages/SingleLineMapPage.tsx +++ b/src/pages/SingleLineMapPage.tsx @@ -12,6 +12,7 @@ import { TEXTS } from 'src/resources/texts' import { SearchContext } from '../model/pageState' import { NotFound } from './components/NotFound' import { Point } from './RealtimeMapPage' + import Grid from '@mui/material/Unstable_Grid2' // Grid version 2 import './Map.scss' import getAgencyList, { Agency } from 'src/api/agencyList' @@ -22,6 +23,7 @@ import { CircularProgress } from '@mui/material' import { FilterPositionsByStartTimeSelector } from './components/FilterPositionsByStartTimeSelector' import { PageContainer } from './components/PageContainer' import { busIcon } from './components/utils/BusIcon' +import { BusToolTip } from 'src/pages/components/MapLayers/BusToolTip' interface Path { locations: VehicleLocation[] @@ -165,20 +167,19 @@ const SingleLineMapPage = () => { url="https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png" /> - {filteredPositions.map((pos, i) => ( - agency.operator_ref === pos.operator) - ?.agency_name, - })} - key={i}> - - 
{JSON.stringify(pos, null, 2)}
- - - ))} + {filteredPositions.map((pos, i) => { + const icon = busIcon({ + operator_id: pos.operator?.toString() || 'default', + name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name, + }) + return ( + + + + + + ) + })} {paths.map((path) => ( Date: Sun, 15 Oct 2023 14:16:14 +0300 Subject: [PATCH 15/18] change from mui element like Card and Typography to div and h4/span. only keep Grid as I see it using in another place in the project --- src/pages/RealtimeMapPage.tsx | 29 +++++++++++++++-------------- src/pages/SingleLineMapPage.tsx | 29 +++++++++++++++-------------- 2 files changed, 30 insertions(+), 28 deletions(-) diff --git a/src/pages/RealtimeMapPage.tsx b/src/pages/RealtimeMapPage.tsx index 2084d9ce..490db9a0 100644 --- a/src/pages/RealtimeMapPage.tsx +++ b/src/pages/RealtimeMapPage.tsx @@ -19,6 +19,7 @@ import { getColorByHashString } from './dashboard/OperatorHbarChart/utils' import createClusterCustomIcon from './components/utils/customCluster/customCluster' import { TimeSelector } from './components/TimeSelector' import { busIcon } from './components/utils/BusIcon' +import { BusToolTip } from 'src/pages/components/MapLayers/BusToolTip' export interface Point { loc: [number, number] @@ -152,7 +153,7 @@ export default function RealtimeMapPage() { {/* Buttons */} {/*TODO (another PR another issue) - 3) use text `TEXTS`. + 3) use text `TEXTS`. */} {/* loaded info */} @@ -205,19 +206,19 @@ export function Markers({ positions }: { positions: Point[] }) { return ( <> - {positions.map((pos) => ( - agency.operator_ref === pos.operator)?.agency_name, - })} - key={pos.point?.id}> - - 
{JSON.stringify(pos, null, 2)}
- - - ))} + {positions.map((pos) => { + const icon = busIcon({ + operator_id: pos.operator?.toString() || 'default', + name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name, + }) + return ( + + + + + + ) + })} ) diff --git a/src/pages/SingleLineMapPage.tsx b/src/pages/SingleLineMapPage.tsx index 39322910..547bb947 100644 --- a/src/pages/SingleLineMapPage.tsx +++ b/src/pages/SingleLineMapPage.tsx @@ -12,6 +12,7 @@ import { TEXTS } from 'src/resources/texts' import { SearchContext } from '../model/pageState' import { NotFound } from './components/NotFound' import { Point } from './RealtimeMapPage' + import Grid from '@mui/material/Unstable_Grid2' // Grid version 2 import './Map.scss' import getAgencyList, { Agency } from 'src/api/agencyList' @@ -22,6 +23,7 @@ import { CircularProgress } from '@mui/material' import { FilterPositionsByStartTimeSelector } from './components/FilterPositionsByStartTimeSelector' import { PageContainer } from './components/PageContainer' import { busIcon } from './components/utils/BusIcon' +import { BusToolTip } from 'src/pages/components/MapLayers/BusToolTip' interface Path { locations: VehicleLocation[] @@ -165,20 +167,19 @@ const SingleLineMapPage = () => { url="https://tile-a.openstreetmap.fr/hot/{z}/{x}/{y}.png" /> - {filteredPositions.map((pos, i) => ( - agency.operator_ref === pos.operator) - ?.agency_name, - })} - key={i}> - - 
{JSON.stringify(pos, null, 2)}
- - - ))} + {filteredPositions.map((pos, i) => { + const icon = busIcon({ + operator_id: pos.operator?.toString() || 'default', + name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name, + }) + return ( + + + + + + ) + })} {paths.map((path) => ( Date: Sun, 15 Oct 2023 17:45:28 +0300 Subject: [PATCH 16/18] add scss file and remove all using of sx --- .../components/MapLayers/BusToolTip.scss | 24 ++++++++++++++++++ src/pages/components/MapLayers/BusToolTip.tsx | 25 ++++++++++--------- 2 files changed, 37 insertions(+), 12 deletions(-) create mode 100644 src/pages/components/MapLayers/BusToolTip.scss diff --git a/src/pages/components/MapLayers/BusToolTip.scss b/src/pages/components/MapLayers/BusToolTip.scss new file mode 100644 index 00000000..4793fa30 --- /dev/null +++ b/src/pages/components/MapLayers/BusToolTip.scss @@ -0,0 +1,24 @@ + +.extend-for-json { + min-width: 30rem; + background: white; + +} + +.tool-tip-container { + display: flex; + flex-direction: row-reverse; + justify-content: space-between; + h4 { + align-content: start; + } + + .bus-icon { + align-content: end; + + } +} + +.button { + float: left; +} diff --git a/src/pages/components/MapLayers/BusToolTip.tsx b/src/pages/components/MapLayers/BusToolTip.tsx index 2e2f8641..81e4b299 100644 --- a/src/pages/components/MapLayers/BusToolTip.tsx +++ b/src/pages/components/MapLayers/BusToolTip.tsx @@ -3,6 +3,7 @@ import { Point } from 'src/pages/RealtimeMapPage' import { Button, Grid } from '@mui/material' import { DivIcon } from 'leaflet' import moment from 'moment-timezone' +import './BusToolTip.scss' import { getSiriRideWithRelated } from 'src/api/siriService' import { SiriRideWithRelatedPydanticModel } from 'open-bus-stride-client/openapi/models/SiriRideWithRelatedPydanticModel' @@ -27,7 +28,7 @@ export function BusToolTip({ position, icon }: { position: Point; icon: DivIcon .finally(() => setIsLoading(false)) }, [position]) return ( -
+
{isLoading ? (
) } diff --git a/src/pages/components/header/menu/menu.scss b/src/pages/components/header/menu/menu.scss index c8695404..858f465c 100644 --- a/src/pages/components/header/menu/menu.scss +++ b/src/pages/components/header/menu/menu.scss @@ -33,7 +33,7 @@ @media screen and (max-width: $mobile-max-width) { - .main .header { + .main > .header { max-width: 0; padding: 0; transition: all 0.2s ease-in-out; @@ -56,7 +56,7 @@ } } - .main .header.open{ + .main > .header.open{ display: block; position: absolute; z-index: 500; diff --git a/src/pages/components/utils/BusIcon.tsx b/src/pages/components/utils/BusIcon.tsx index 8c843c59..559a57e6 100644 --- a/src/pages/components/utils/BusIcon.tsx +++ b/src/pages/components/utils/BusIcon.tsx @@ -1,7 +1,9 @@ import { DivIcon } from 'leaflet' +export const busIconPath = (operator_id: string) => `/bus-logos/${operator_id}.svg` + export const busIcon = ({ operator_id, name }: { operator_id: string; name?: string }) => { - const path = `/bus-logos/${operator_id}.svg` + const path = busIconPath(operator_id) return new DivIcon({ className: 'my-div-icon', html: ` diff --git a/src/resources/texts.tsx b/src/resources/texts.tsx index b57f934c..16bd7b6d 100644 --- a/src/resources/texts.tsx +++ b/src/resources/texts.tsx @@ -98,8 +98,8 @@ export const TEXTS = { drive_direction: 'כיוון נסיעה:', coords: 'נ.צ:', vehicle_ref: 'לוחית רישוי', - show_card: 'הצג כרטיס', - show_document: 'הצג מסמך', + hide_document: 'הסתר מידע לחנונים', + show_document: 'הצג מידע לחנונים', bearing: 'מעלות', kmh: 'קמ״ש', } From 79a9e07191734fe61e8c8123c8b07cb73c781298 Mon Sep 17 00:00:00 2001 From: giladfuchs Date: Mon, 16 Oct 2023 11:41:23 +0300 Subject: [PATCH 18/18] fix for linter --- src/pages/components/MapLayers/BusToolTip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/components/MapLayers/BusToolTip.tsx b/src/pages/components/MapLayers/BusToolTip.tsx index a0540987..1d106064 100644 --- a/src/pages/components/MapLayers/BusToolTip.tsx +++ b/src/pages/components/MapLayers/BusToolTip.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from 'react' import { Point } from 'src/pages/RealtimeMapPage' -import { Button, Grid } from '@mui/material' +import { Button } from '@mui/material' import moment from 'moment-timezone' import './BusToolTip.scss'