dancingCycle
/
gtfs-rt-display
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: introduce switch for GTFS Realtime feeds without GTFS API available

This commit is contained in:
dancingCycle 2022-09-30 14:16:21 +02:00
parent b8e155b6af
commit b0c2850094
9 changed files with 213 additions and 75 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
app/components/map/icon-gtfs.js Normal file
View File

@ -0,0 +1,35 @@
import getIconUrl from './icon-url';
/*return icon object*/
export default function getIcon(ptByIfleet){
if(ptByIfleet===undefined || ptByIfleet===null){
//console.log('getIcon(): ptByIfleet NOT available')
return null;
}
else{
//console.log('getIcon(): ptByIfleet available')
const icon = new L.Icon({
/*path to icon graphic*/
iconUrl: getIconUrl(ptByIfleet.route_type),
/*path to graphic used for high resolution monitors*/
iconRetinaUrl: getIconUrl(ptByIfleet.route_type),
popupAnchor: [-0, -0],
/*size of the icon in width and hight*/
iconSize: [32,32],
/*determine how the popup is positions relative to the actual point on the map*/
popupAnchor:[0,-10],
/*determine how the image is positions relative to the actual point on the map*/
iconAnchor: null,
/*path to shadow graphic*/
shadowUrl: null,
/*size of the shadow in width and hight*/
shadowSize: null,
/*determine how the mage is positions relative to the actual point on the map*/
shadowAnchor: null,
className: 'marker-msg'
});
//console.log('getIcon(): icon available')
return icon;
}
}

57
app/components/map/icon.js
View File

@ -1,35 +1,28 @@
import getIconUrl from './icon-url';
import bfly from '../../assets/Logo_SIB_electricindigo.svg';
/*return icon object*/
export default function getIcon(ptByIfleet){
if(ptByIfleet===undefined || ptByIfleet===null){
//console.log('getIcon(): ptByIfleet NOT available')
return null;
}
else{
//console.log('getIcon(): ptByIfleet available')
const icon = new L.Icon({
/*path to icon graphic*/
iconUrl: getIconUrl(ptByIfleet.route_type),
/*path to graphic used for high resolution monitors*/
iconRetinaUrl: getIconUrl(ptByIfleet.route_type),
popupAnchor: [-0, -0],
/*size of the icon in width and hight*/
iconSize: [32,32],
/*determine how the popup is positions relative to the actual point on the map*/
popupAnchor:[0,-10],
/*determine how the image is positions relative to the actual point on the map*/
iconAnchor: null,
/*path to shadow graphic*/
shadowUrl: null,
/*size of the shadow in width and hight*/
shadowSize: null,
/*determine how the mage is positions relative to the actual point on the map*/
shadowAnchor: null,
className: 'marker-msg'
});
//console.log('getIcon(): icon available')
return icon;
}
export default function getIcon(){
//console.log('getIcon(): ptByIfleet available')
const icon = new L.Icon({
/*path to icon graphic*/
iconUrl: bfly,
/*path to graphic used for high resolution monitors*/
iconRetinaUrl: bfly,
popupAnchor: [-0, -0],
/*size of the icon in width and hight*/
iconSize: [32,32],
/*determine how the popup is positions relative to the actual point on the map*/
popupAnchor:[0,-10],
/*determine how the image is positions relative to the actual point on the map*/
iconAnchor: null,
/*path to shadow graphic*/
shadowUrl: null,
/*size of the shadow in width and hight*/
shadowSize: null,
/*determine how the mage is positions relative to the actual point on the map*/
shadowAnchor: null,
className: 'marker-msg'
});
//console.log('getIcon(): icon available')
return icon;
}

11
app/components/map/map.jsx
View File

@ -5,11 +5,14 @@ import {MapContainer,TileLayer} from 'react-leaflet';
import 'leaflet/dist/leaflet.css'
import './map.css';
import MsgMarker from './marker-msg';
import MsgMarkerWithGtfs from './marker-msg-gtfs';
import MsgMarkerWithoutGtfs from './marker-msg';
export default function Map({messages}) {
/*lat and lon of Braunschweig,DE*/
const position = [52.26594, 10.52673]
//TODO make this switch available via configuration
const hasGtfs = true;
return (
<>
<MapContainer
@ -25,7 +28,11 @@ export default function Map({messages}) {
{
messages.map(function(value,key) {
//console.log(`key: ${key}, value: ${value}`);
return <MsgMarker key={key} index={key} message={value}/>;
if(hasGtfs){
return <MsgMarkerWithGtfs key={key} index={key} message={value}/>;
}else{
return <MsgMarkerWithoutGtfs key={key} index={key} message={value}/>;
}
})
}
</MapContainer>

47
app/components/map/marker-msg-gtfs.jsx Normal file
View File

@ -0,0 +1,47 @@
import React, {useEffect,useState} from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import MarkerMsgPlus from './marker-msg-plus-gtfs';
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();
},[]);
if(message===undefined || message===null
|| Object.keys(ptByIfleet).length===0){
return null;
}else{
return(
<>
<MarkerMsgPlus
index={index}
key={index}
message={message}
ptByIfleet={ptByIfleet}
/>
</>
);
}
}
export default MarkerMsg;
MarkerMsg.propTypes = {
index: PropTypes.number,
message: PropTypes.object
};

40
app/components/map/marker-msg-plus-gtfs.jsx Normal file
View File

@ -0,0 +1,40 @@
import React from 'react';
import PropTypes from 'prop-types';
import {Marker} from 'react-leaflet';
import PopupMsg from './popup-msg-gtfs';
import getIcon from './icon-gtfs';
const MarkerMsgPlusGtfs = ({ index,message,ptByIfleet }) => {
if(message===undefined || message===null
|| Object.keys(ptByIfleet).length===0){
return null;
}else{
const markerIcon=getIcon(ptByIfleet);
if(markerIcon===null){
return null;
}else{
return(
<>
<Marker
index={index}
key={index}
position={[message.lat,message.lon]}
icon={markerIcon}
>
<PopupMsg index={index} message={message} ptByIfleet={ptByIfleet} />
</Marker>
</>
);
}
}
}
export default MarkerMsgPlusGtfs;
MarkerMsgPlusGtfs.propTypes = {
index: PropTypes.number,
message: PropTypes.object,
ptByIfleet: PropTypes.object
};

12
app/components/map/marker-msg-plus.jsx
View File

@ -5,13 +5,12 @@ import {Marker} from 'react-leaflet';
import PopupMsg from './popup-msg';
import getIcon from './icon';
const MarkerMsgPlus = ({ index,message,ptByIfleet }) => {
const MarkerMsgPlus = ({ index,message }) => {
if(message===undefined || message===null
|| Object.keys(ptByIfleet).length===0){
if(message===undefined || message===null){
return null;
}else{
const markerIcon=getIcon(ptByIfleet);
const markerIcon=getIcon();
if(markerIcon===null){
return null;
}else{
@ -23,7 +22,7 @@ const MarkerMsgPlus = ({ index,message,ptByIfleet }) => {
position={[message.lat,message.lon]}
icon={markerIcon}
>
<PopupMsg index={index} message={message} ptByIfleet={ptByIfleet} />
<PopupMsg index={index} message={message} />
</Marker>
</>
);
@ -35,6 +34,5 @@ export default MarkerMsgPlus;
MarkerMsgPlus.propTypes = {
index: PropTypes.number,
message: PropTypes.object,
ptByIfleet: PropTypes.object
message: PropTypes.object
};

22
app/components/map/marker-msg.jsx
View File

@ -1,29 +1,10 @@
import React, {useEffect,useState} from 'react';
import axios from 'axios';
import PropTypes from 'prop-types';
import MarkerMsgPlus from './marker-msg-plus';
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();
},[]);
if(message===undefined || message===null
|| Object.keys(ptByIfleet).length===0){
if(message===undefined || message===null){
return null;
}else{
return(
@ -32,7 +13,6 @@ const MarkerMsg = ({ index,message }) => {
index={index}
key={index}
message={message}
ptByIfleet={ptByIfleet}
/>
</>
);

49
app/components/map/popup-msg-gtfs.jsx Normal file
View File

@ -0,0 +1,49 @@
import React from 'react';
import PropTypes from 'prop-types';
import {Popup} from 'react-leaflet';
import seconds2dmhs from '../../utils/seconds2dhms';
import getRouteType from '../../utils/gtfs-route-type';
const PopupMsgGtfs = ({index,message,ptByIfleet}) => {
/*get number of ms since epoch*/
const nowTsMs=Date.now();
const nowTs=Math.round(nowTsMs/1000);
const itcsTs=message.tsMsgCreationItcs;
const itcsTsMs=itcsTs*1000;
const itcsAge=seconds2dmhs(Math.round(nowTs-itcsTs));
const itcsDate=new Date(itcsTsMs);
const itcsString=itcsDate.toString()
return (
<>
<Popup
index={index}
key={index}
>
message id: {message.id} <br/>
vehicle id: {message.vehicleId} <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}({getRouteType(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/>
<br/>
GTFS Realtime age: {itcsAge} <br/>
</Popup>
</>
);
}
export default PopupMsgGtfs;
PopupMsgGtfs.propTypes = {
index: PropTypes.number,
message: PropTypes.object,
ptByIfleet: PropTypes.object
};

15
app/components/map/popup-msg.jsx
View File

@ -3,9 +3,8 @@ import PropTypes from 'prop-types';
import {Popup} from 'react-leaflet';
import seconds2dmhs from '../../utils/seconds2dhms';
import getRouteType from '../../utils/gtfs-route-type';
const PopupMsg = ({index,message,ptByIfleet}) => {
const PopupMsg = ({index,message}) => {
/*get number of ms since epoch*/
const nowTsMs=Date.now();
const nowTs=Math.round(nowTsMs/1000);
@ -23,15 +22,6 @@ const PopupMsg = ({index,message,ptByIfleet}) => {
>
message id: {message.id} <br/>
vehicle id: {message.vehicleId} <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}({getRouteType(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/>
<br/>
@ -44,6 +34,5 @@ export default PopupMsg;
PopupMsg.propTypes = {
index: PropTypes.number,
message: PropTypes.object,
ptByIfleet: PropTypes.object
message: PropTypes.object
};