feat: switch from Popup to PopupMsg

app/app.jsx

@@ -18,7 +18,7 @@ export default function App() {
         <BrowserRouter>
             <NavBar />
             <Routes>
-                <Route path="/" element={<Home />} />
+                <Route path="/" element={<Map />} />
                 <Route path="/map" element={<Map />} />
                 <Route path="/contact" element={<Contact />} />
             </Routes>

app/components/map/map.css

@@ -1,4 +1,4 @@
 /*set up the height of*/
 .leaflet-container {
-  height: 50vh;
+  height: 85vh;
 }

app/components/map/marker-msg.jsx

@@ -1,8 +1,27 @@
-import React from 'react';
+import React, {useEffect,useState} from 'react';
+import axios from 'axios';
 import PropTypes from 'prop-types';
-import {Marker,Popup} from 'react-leaflet';
+import {Marker} from 'react-leaflet';
+
+import PopupMsg from './popup-msg';
 import bfly from '../../assets/Logo_SIB_electricindigo.svg';
 const MarkerMsg = ({ index,message }) => {
+    /*store state*/
+    const [ptByIfleet,setPtByIfleet]=useState({});
+    const getPtByIfleet= async ()=>{
+	//console.log('trip id: '+message.tripId);
+	try{
+	    const res=await axios.get(`https://v1gtfs.vbn.api.swingbe.de/pt-by-ifleet?tripshortname=${message.tripId}`);
+	    //console.log('res.data: '+JSON.stringify(res.data));
+	    /*TODO Warning: Failed prop type: Invalid prop `ptByIfleet` of type `string` supplied to `PopupMsg`, expected `object`.*/
+	    setPtByIfleet(res.data);
+	}catch(err){
+	    console.error('err.message: '+err.message);
+	}
+    };
+    useEffect(()=>{
+	getPtByIfleet();
+    },[]);
     const iconBfly = new L.Icon({
 	iconUrl: bfly,
 	iconRetinaUrl: bfly,
@@ -16,18 +35,7 @@ const MarkerMsg = ({ index,message }) => {
 		position={[message.lat,message.lon]}
 		icon={iconBfly}
 	    >
-		<Popup>
-		    id: {message.id} <br/>
-		    vehicle id: {message.vehicleId} <br/>
-		    ts creation vehicle: {message.tsMsgCreationVehicle} <br/>
-		    ts creation ITCS: {message.tsMsgCreationItcs} <br/>
-		    ts reception client; {message.tsMsgReception} <br/>
-		    trip id: {message.tripId} <br/>
-		    trip destination: {message.tripDest} <br/>
-		    route id: {message.routeId} <br/>
-		    lat: {message.lat} <br/>
-		    lon: {message.lon} <br/>
-		</Popup>
+		<PopupMsg index={index} message={message} ptByIfleet={ptByIfleet} />
 	    </Marker>
 	</>
     );

app/components/map/popup-msg.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Popup} from 'react-leaflet';
+const PopupMsg = ({index,message,ptByIfleet}) => {
+    return (
+	<>
+	<Popup
+	    index={index}>
+	    id: {message.id} <br/>
+	    vehicle id: {message.vehicleId} <br/>
+	    ts creation vehicle: {message.tsMsgCreationVehicle} <br/>
+	    ts creation ITCS: {message.tsMsgCreationItcs} <br/>
+	    ts reception client; {message.tsMsgReception} <br/>
+	    trip id: {ptByIfleet.trip_id} <br/>
+	    trip name: {ptByIfleet.trip_short_name} <br/>
+	    trip destination: {ptByIfleet.trip_headsign} <br/>
+	    route id: {ptByIfleet.route_id} <br/>
+	    route name: {ptByIfleet.route_short_name} <br/>
+	    route type: {ptByIfleet.route_type} <br/>
+	    agency id: {ptByIfleet.agency_id} <br/>
+	    agency name: {ptByIfleet.agency_name} <br/>
+	    agency URL: {ptByIfleet.agency_url} <br/>
+	    lat: {message.lat} <br/>
+	    lon: {message.lon} <br/>
+	</Popup>
+	</>
+    );
+}
+export default PopupMsg;
+
+
+PopupMsg.propTypes = {
+    index: PropTypes.number,
+    message: PropTypes.object,
+    ptByIfleet: PropTypes.object
+};

app/utils/gtfs-rt-utils.js

@@ -45,7 +45,7 @@ export default function parseMessages(buffer){
 		/*ts msg reception at client in ms and convert to s*/
 		tsMsgReception: Math.floor(now.getTime() / 1000),
 		/*Feed-unique identifier for this entity. The ids are used only to provide incrementality support.*/
-		id: entity.id === undefined ? -1 : parseInt(entity.id,10) || -2,
+		id: entity.id === undefined ? '' : entity.id,
 		/*Internal system identification of the vehicle.*/
 		vehicleId: vehicle.id === undefined ? '' : vehicle.id,
 		/*The trip_id from the GTFS feed that this selector refers to.*/