Map tooltip bus

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: 1,
+    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,

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() {
         </Grid>
         {/* Buttons */}
         {/*TODO (another PR another issue)
-          3) use text `TEXTS`. 
+          3) use text `TEXTS`.
         */}
         {/* loaded info */}
         <Grid xs={11}>
@@ -205,19 +206,19 @@ export function Markers({ positions }: { positions: Point[] }) {
   return (
     <>
       <MarkerClusterGroup chunkedLoading iconCreateFunction={createClusterCustomIcon}>
-        {positions.map((pos) => (
-          <Marker
-            position={pos.loc}
-            icon={busIcon({
-              operator_id: pos.operator?.toString() || 'default',
-              name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name,
-            })}
-            key={pos.point?.id}>
-            <Popup>
-              <pre>{JSON.stringify(pos, null, 2)}</pre>
-            </Popup>
-          </Marker>
-        ))}
+        {positions.map((pos) => {
+          const icon = busIcon({
+            operator_id: pos.operator?.toString() || 'default',
+            name: agencyList.find((agency) => agency.operator_ref === pos.operator)?.agency_name,
+          })
+          return (
+            <Marker position={pos.loc} icon={icon} key={pos.point?.id}>
+              <Popup>
+                <BusToolTip position={pos} icon={icon} />
+              </Popup>
+            </Marker>
+          )
+        })}
       </MarkerClusterGroup>
     </>
   )

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) => (
-            <Marker
-              position={pos.loc}
-              icon={busIcon({
-                operator_id: pos.operator?.toString() || 'default',
-                name: agencyList.find((agency) => agency.operator_ref === pos.operator)
-                  ?.agency_name,
-              })}
-              key={i}>
-              <Popup>
-                <pre>{JSON.stringify(pos, null, 2)}</pre>
-              </Popup>
-            </Marker>
-          ))}
+          {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 (
+              <Marker position={pos.loc} icon={icon} key={i}>
+                <Popup>
+                  <BusToolTip position={pos} icon={icon} />
+                </Popup>
+              </Marker>
+            )
+          })}
 
           {paths.map((path) => (
             <Polyline

src/pages/components/MapLayers/BusToolTip.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react'
+import { Point } from 'src/pages/RealtimeMapPage'
+import { Button, Grid } from '@mui/material'
+import { DivIcon } from 'leaflet'
+import moment from 'moment-timezone'
+
+import { getSiriRideWithRelated } 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'
+
+export function BusToolTip({ position, icon }: { position: Point; icon: DivIcon }) {
+  const [siriRide, setSiriRide] = useState<SiriRideWithRelatedPydanticModel | undefined>()
+  const [isLoading, setIsLoading] = useState(false)
+  const [showJson, setShowJson] = useState(false)
+
+  useEffect(() => {
+    setIsLoading(true)
+    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 (
+    <div style={showJson ? { minWidth: '30rem', background: 'white' } : {}}>
+      {isLoading ? (
+        <Row>
+          <Label text={TEXTS.loading_routes} />
+          <Spin />
+        </Row>
+      ) : showJson ? (
+        <pre>
+          {JSON.stringify(position, null, 2)}
+          <br />
+          {siriRide && JSON.stringify(siriRide, null, 2)}
+        </pre>
+      ) : (
+        <Grid container display="flex" direction="row-reverse" justifyContent="space-between">
+          <Grid item xs={4}>
+            <h4 style={{ alignContent: 'end' }}>
+              <div dangerouslySetInnerHTML={{ __html: icon.options.html as string }} />
+            </h4>
+          </Grid>
+          <Grid item xs={8} mt={2}>
+            <h4 style={{ textAlign: 'start' }}>
+              {TEXTS.line} :<span>{siriRide && siriRide!.gtfsRouteRouteShortName}</span>
+            </h4>
+          </Grid>
+          <Grid item xs={12}>
+            <h4 style={{ textAlign: 'start' }}>
+              {TEXTS.from} :
+              <span>{siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[0]}</span>
+            </h4>
+            <h4 style={{ textAlign: 'start' }}>
+              {TEXTS.destination} :
+              <span>{siriRide && siriRide!.gtfsRouteRouteLongName?.split('<->')[1]}</span>
+            </h4>
+            <h4 style={{ textAlign: 'start' }}>
+              {TEXTS.velocity} :<span>{`${position.point?.velocity}  ${TEXTS.kmh}`}</span>
+            </h4>
+
+            <h4 style={{ textAlign: 'start' }}>
+              {TEXTS.sample_time} :
+              <span>
+                {moment(position.point!.recorded_at_time as string, moment.ISO_8601)
+                  .tz('Israel')
+                  .format('HH:mm')}
+              </span>
+            </h4>
+            <h4 style={{ textAlign: 'start' }}>
+              {TEXTS.vehicle_ref} :<span>{position.point?.siri_ride__vehicle_ref}</span>
+            </h4>
+            {/*maybe option to add info like this in extend card for now I  put this condition */}
+            {window.screen.height > 1100 && (
+              <>
+                <h4 style={{ textAlign: 'start' }}>
+                  {TEXTS.drive_direction} :
+                  <span>
+                    ( {position.point?.bearing} {TEXTS.bearing})
+                  </span>
+                </h4>
+                <h4 style={{ textAlign: 'start' }}>
+                  {TEXTS.coords} :<span>{position.loc.join(' , ')}</span>
+                </h4>
+              </>
+            )}
+          </Grid>{' '}
+        </Grid>
+      )}
+      <Grid item xs={3} mt={1} mb={1} sx={{ float: 'left' }}>
+        <Button
+          variant="contained"
+          onClick={() => {
+            setShowJson(!showJson)
+          }}>
+          {showJson ? TEXTS.show_card : TEXTS.show_document}
+        </Button>
+      </Grid>
+    </div>
+  )
+}

src/resources/texts.tsx

@@ -90,6 +90,18 @@ export const TEXTS = {
   missing_rides: 'מהנסיעות חסרות',
   order_by_hour: 'לפי שעה',
   order_by_severity: 'לפי חומרה',
+  line: 'קו',
+  from: 'מוצא',
+  destination: 'יעד',
+  sample_time: 'זמן דגימה',
+  velocity: 'מהירות',
+  drive_direction: 'כיוון נסיעה:',
+  coords: 'נ.צ:',
+  vehicle_ref: 'לוחית רישוי',
+  show_card: 'הצג כרטיס',
+  show_document: 'הצג מסמך',
+  bearing: 'מעלות',
+  kmh: 'קמ״ש',
 }
 
 export const formatted = (text: string, value: string) => text.replace(PLACEHOLDER, value)