diff --git a/app/components/map.jsx b/app/components/entities-map-comp.jsx
similarity index 68%
rename from app/components/map.jsx
rename to app/components/entities-map-comp.jsx
index 52f991b..c8afe68 100644
--- a/app/components/map.jsx
+++ b/app/components/entities-map-comp.jsx
@@ -4,15 +4,16 @@ import PropTypes from 'prop-types';
import EntitiesMap from './map/entities-map';
//destructure props
-export default function Map({entities}){
+export default function EntitiesMapComp({entities}){
return (
<>
Map
Entity Map
+
>
);
}
-Map.propTypes = {
- entities: PropTypes.array,
+EntitiesMapComp.propTypes = {
+ entities: PropTypes.array
};
diff --git a/app/components/map/entities-map.jsx b/app/components/map/entities-map.jsx
index 91b83eb..744d2a7 100644
--- a/app/components/map/entities-map.jsx
+++ b/app/components/map/entities-map.jsx
@@ -7,20 +7,15 @@ import 'leaflet/dist/leaflet.css'
import './entities-map.css';
import EntitiesMarker from './entities-marker';
-import {getCoordinates} from '../../utils/entities';
export default function EntitiesMap({entities}) {
/*lat and lon of Braunschweig,DE*/
const position = [52.26594, 10.52673]
- //TODO make this switch available via configuration!
- const hasGtfs = false;
- //set polyline color
- const colorOptions = { color: 'darkblue' }
return (
<>
@@ -40,7 +35,6 @@ export default function EntitiesMap({entities}) {
/>;
})
}
-
>
);
diff --git a/app/components/map/relations-map.jsx b/app/components/map/relations-map.jsx
new file mode 100644
index 0000000..c3985ba
--- /dev/null
+++ b/app/components/map/relations-map.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import {MapContainer,Polyline,TileLayer} from 'react-leaflet';
+
+/*JS module import (vs cdn or style link)*/
+import 'leaflet/dist/leaflet.css'
+import './entities-map.css';
+
+import EntitiesMarker from './entities-marker';
+
+export default function RelationsMap({relations}) {
+ /*lat and lon of Braunschweig,DE*/
+ const position = [52.26594, 10.52673]
+ //set polyline color
+ const colorOptions = { color: 'darkblue' }
+ if(relations.length === 0){
+ return (
+ <>
+ RelationsMap loading...
;
+ >
+ );
+ }else{
+ return (
+ <>
+
+
+ {
+ relations.map(function(value,key) {
+ //console.log(`key: ${key}, valueFromLat: ${value[0][2]}, valueToLon: ${value[1][3]}`);
+ return
+
+ })
+ }
+
+ >
+ );
+ }
+}
+RelationsMap.propTypes = {
+ relations: PropTypes.array.isRequired
+};
diff --git a/app/components/relations-map-comp.jsx b/app/components/relations-map-comp.jsx
new file mode 100644
index 0000000..83cd0e5
--- /dev/null
+++ b/app/components/relations-map-comp.jsx
@@ -0,0 +1,43 @@
+import React, {useEffect,useState} from 'react'
+import PropTypes from 'prop-types';
+
+import RelationsMap from './map/relations-map';
+import {getMap} from '../utils/entities';
+import {createRelationsOfEntities} from '../utils/relations';
+
+//destructure props
+export default function RelationsMapComp({entities,relations}){
+
+ //store rltns
+ const [rltns,setRltns] = useState([]);
+
+ //on page load
+ //add dependency array, otherwise useEffect will not rerun
+ //TODO Study https://www.digitalocean.com/community/tutorials/how-to-handle-async-data-loading-lazy-loading-and-code-splitting-with-react
+ useEffect(()=>{
+ setRltns((rltns) => createRelationsOfEntities(entities,relations));
+ },[entities,relations]);
+
+ if(rltns.length===0){
+ return (
+ <>
+ Map
+ Relations Map
+ RelationsMapComp loading...
;
+ >
+ );
+ }else{
+ return (
+ <>
+ Map
+ Relations Map
+
+ >
+ );
+ }
+}
+//TODO Study .isRequired!
+RelationsMapComp.propTypes = {
+ entities: PropTypes.array.isRequired,
+ relations: PropTypes.array.isRequired
+};
diff --git a/app/pages/home.jsx b/app/pages/home.jsx
index 1f253ed..2225c03 100644
--- a/app/pages/home.jsx
+++ b/app/pages/home.jsx
@@ -2,10 +2,14 @@ import React, {useEffect,useState} from 'react'
import axios from 'axios';
import List from '../components/list';
-import Map from '../components/map';
+import EntitiesMap from '../components/entities-map-comp';
+import RelationsMap from '../components/relations-map-comp';
import '../style.css';
export default function Home(){
+ //store relations
+ const [relations,setRelations]=useState([]);
+
//store entites
const [entities,setEntities]=useState([]);
@@ -20,9 +24,21 @@ export default function Home(){
});
};
+ //get relations
+ const fetchRelations = () => {
+ axios.get('http://83.223.94.182:65535/relations/info')
+ .then((response) => {
+ setRelations(response.data);
+ })
+ .catch((error) => {
+ console.error('Home:fetchRelations() error: ' + error);
+ });
+ };
+
//on page load
useEffect(()=>{
fetchEntities();
+ fetchRelations();
},[]);
//return
@@ -30,7 +46,11 @@ export default function Home(){
<>
Home
-
+
+
>
);
}
diff --git a/app/utils/entities.js b/app/utils/entities.js
index c742312..1f1f2fe 100644
--- a/app/utils/entities.js
+++ b/app/utils/entities.js
@@ -1,16 +1,6 @@
-/* get coordinates from entity array
- * @param entities array of entities
- * @return coordintes as array
+/*
+ * get entity array as map of key (entity.id) and value (entity) pairx
*/
-export function getCoordinates(entities){
- //console.log('entities:getCoordinates() # entities: ' + entities.length);
- let coordinates = new Array();
- for(let i = 0; i < entities.length; i++){
- let coordinate = {};
- coordinate.lat = entities[i][2];
- coordinate.lon = entities[i][3];
- coordinates.push(coordinate);
- }
- //console.log('entities:getCoordinates() # coordinates: ' + coordinates.length);
- return coordinates;
+export function getMap(entities){
+ return new Map(entities.map(item => [item[0],item]));
}
diff --git a/app/utils/relations.js b/app/utils/relations.js
new file mode 100644
index 0000000..abf94bc
--- /dev/null
+++ b/app/utils/relations.js
@@ -0,0 +1,45 @@
+import {getMap} from './entities';
+/*
+ * create Relations array of Entity arrays
+ */
+export function createRelationsOfEntities(entities,relations){
+ const rltnsRry = new Array();
+ if(entities.length === 0){
+ console.error('relations:createRelationsOfEntities() ntts NOT available');
+ return rltnsRry;
+ }
+ //console.log('relations:createRelationsOfEntities() # ntts: ' + entities.length);
+
+ if(relations.length === 0){
+ console.error('relations:createRelationsOfEntities() rltns NOT available');
+ return rltnsRry;
+ }
+ //console.log('relations:createRelationsOfEntities() # rltns: ' + relations.length);
+
+ const entitiesMap = getMap(entities);
+ for(let i=0; i