diff --git a/app/app.jsx b/app/app.jsx
index dfabb1c..22e45c0 100644
--- a/app/app.jsx
+++ b/app/app.jsx
@@ -1,9 +1,18 @@
import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
+
import Home from './pages/home';
+import StationProfile from './pages/station-profile';
+
export default function App() {
- return (
-
-
-
+
+ return (
+
+
+ } />
+ } />
+ } />
+
+
);
}
diff --git a/app/pages/home.jsx b/app/pages/home.jsx
index f68f73f..8f67e0e 100644
--- a/app/pages/home.jsx
+++ b/app/pages/home.jsx
@@ -1,129 +1,9 @@
-import React, { useEffect, useState } from 'react';
-import {get} from '../utils/request';
+import React from 'react';
export default function Home() {
-
- const [bsRry, setBsRry] = useState([]);
- const [bpRry, setBpRry] = useState([]);
- const [prRry, setPrRry] = useState([]);
- const [shopRry, setShopRry] = useState([]);
- const [taxiRry, setTaxiRry] = useState([]);
- const [vmRry, setVmRry] = useState([]);
-
- useEffect(() => {
- const address = 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];node[uic_ref=8000050];';
- //get bus stop
- get(address + 'nwr[highway=bus_stop](around:200);out body center qt;')
- .then(data => {
- setBsRry((bsRry) => data.elements);
- });
-
- //get B+R
- get(address + 'nwr[amenity=bicycle_parking](around:200);out body center qt;')
- .then(data => {
- setBpRry((bpRry) => data.elements);
- });
-
- //get P+R
- get(address + 'nwr["park_ride"!="no"]["park_ride"](around:200);out body center qt;')
- .then(data => {
- setPrRry((prRry => data.elements));
- });
-
- //get shop
- get(address + 'nwr[shop=ticket]["tickets:public_transport"!=no](around:500);out body center qt;')
- .then(data => {
- setShopRry((shopRry) => data.elements);
- });
-
- //get taxi
- get(address + 'nwr[amenity=taxi](around:200);out body center qt;')
- .then(data => {
- setTaxiRry((taxiRry) => data.elements);
- });
-
- //get vending machine
- get(address + 'nwr[amenity=vending_machine][vending=public_transport_tickets](around:40);out body center qt;')
- .then(data => {
- setVmRry((vmRry) => data.elements);
- });
-
-}, []);
-
return (
<>
- Bus Stop
-
- {
- bsRry.map((value, index) => {
- return -
- Description: {value.tags.description}
-
;
- })
- }
-
- B+R
-
- {
- bpRry.map((value, index) => {
- return -
- Name: {value.tags.name},
- Capacity: {value.tags.capacity},
- Covered: {value.tags.covered},
- Fee: {value.tags.fee},
- Operator: {value.tags.operator}
-
;
- })
- }
-
- P+R
-
- {
- prRry.map((value, index) => {
- return -
- Name: {value.tags.name},
- Capacity: {value.tags.capacity},
- Fee: {value.tags.fee},
- Website:
- {value.tags.website}
-
-
;
- })
- }
-
- Ticket Shop
-
- {
- shopRry.map((value, index) => {
- return -
- Name: {value.tags.name},
- Opening Hours: {value.tags.opening_hours}
-
;
- })
- }
-
- Taxi Stop
-
- {
- taxiRry.map((value, index) => {
- return -
- Name: {value.tags.name}
-
;
- })
- }
-
- Vending Machine
-
- {
- vmRry.map((value, index) => {
- return -
- Name: {value.tags.name},
- Brand: {value.tags.brand},
- Operator: {value.tags.operator}
-
;
- })
- }
-
+ Enter UIC station code:
);
}
diff --git a/app/pages/station-profile.jsx b/app/pages/station-profile.jsx
new file mode 100644
index 0000000..22d8113
--- /dev/null
+++ b/app/pages/station-profile.jsx
@@ -0,0 +1,144 @@
+import React, { useEffect, useState } from 'react';
+import {get} from '../utils/request';
+
+import { useParams } from "react-router-dom";
+
+export default function StationProfile() {
+
+ // Get the userId param from the URL.
+ const { uic } = useParams();
+
+ const [bsRry, setBsRry] = useState([]);
+ const [bpRry, setBpRry] = useState([]);
+ const [prRry, setPrRry] = useState([]);
+ const [shopRry, setShopRry] = useState([]);
+ const [taxiRry, setTaxiRry] = useState([]);
+ const [vmRry, setVmRry] = useState([]);
+
+ useEffect(() => {
+
+ //console.log('StationProfile:useEffect() uic: ' + uic);
+
+ /*
+ const uicSttn = 8000050;
+ console.log('StationProfile:useEffect() uicSttn: ' + uicSttn);
+ const address = 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];node[uic_ref=' + uicSttn + '];';
+ */
+ const address = 'https://overpass-api.de/api/interpreter?data=[out:json][timeout:60];node[uic_ref=' + uic + '];';
+ //console.log('StationProfile:useEffect() address: ' + address);
+
+ //get bus stop
+ get(address + 'nwr[highway=bus_stop](around:200);out body center qt;')
+ .then(data => {
+ setBsRry((bsRry) => data.elements);
+ });
+
+ //get B+R
+ get(address + 'nwr[amenity=bicycle_parking](around:200);out body center qt;')
+ .then(data => {
+ setBpRry((bpRry) => data.elements);
+ });
+
+ //get P+R
+ get(address + 'nwr["park_ride"!="no"]["park_ride"](around:200);out body center qt;')
+ .then(data => {
+ setPrRry((prRry => data.elements));
+ });
+
+ //get shop
+ get(address + 'nwr[shop=ticket]["tickets:public_transport"!=no](around:500);out body center qt;')
+ .then(data => {
+ setShopRry((shopRry) => data.elements);
+ });
+
+ //get taxi
+ get(address + 'nwr[amenity=taxi](around:200);out body center qt;')
+ .then(data => {
+ setTaxiRry((taxiRry) => data.elements);
+ });
+
+ //get vending machine
+ get(address + 'nwr[amenity=vending_machine][vending=public_transport_tickets](around:40);out body center qt;')
+ .then(data => {
+ setVmRry((vmRry) => data.elements);
+ });
+
+}, []);
+
+ return (
+ <>
+ Bus Stop
+
+ {
+ bsRry.map((value, index) => {
+ return -
+ Description: {value.tags.description}
+
;
+ })
+ }
+
+ B+R
+
+ {
+ bpRry.map((value, index) => {
+ return -
+ Name: {value.tags.name},
+ Capacity: {value.tags.capacity},
+ Covered: {value.tags.covered},
+ Fee: {value.tags.fee},
+ Operator: {value.tags.operator}
+
;
+ })
+ }
+
+ P+R
+
+ {
+ prRry.map((value, index) => {
+ return -
+ Name: {value.tags.name},
+ Capacity: {value.tags.capacity},
+ Fee: {value.tags.fee},
+ Website:
+ {value.tags.website}
+
+
;
+ })
+ }
+
+ Ticket Shop
+
+ {
+ shopRry.map((value, index) => {
+ return -
+ Name: {value.tags.name},
+ Opening Hours: {value.tags.opening_hours}
+
;
+ })
+ }
+
+ Taxi Stop
+
+ {
+ taxiRry.map((value, index) => {
+ return -
+ Name: {value.tags.name}
+
;
+ })
+ }
+
+ Vending Machine
+
+ {
+ vmRry.map((value, index) => {
+ return -
+ Name: {value.tags.name},
+ Brand: {value.tags.brand},
+ Operator: {value.tags.operator}
+
;
+ })
+ }
+
+
+ );
+}
diff --git a/package-lock.json b/package-lock.json
index f8453be..f82d94e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,8 @@
"dependencies": {
"prop-types": "15.8.1",
"react": "18.2.0",
- "react-dom": "18.2.0"
+ "react-dom": "18.2.0",
+ "react-router-dom": "6.15.0"
},
"devDependencies": {
"@babel/core": "7.22.10",
@@ -1876,6 +1877,14 @@
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
"dev": true
},
+ "node_modules/@remix-run/router": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+ "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg==",
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
"node_modules/@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -4900,6 +4909,36 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
+ "node_modules/react-router": {
+ "version": "6.15.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+ "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+ "dependencies": {
+ "@remix-run/router": "1.8.0"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8"
+ }
+ },
+ "node_modules/react-router-dom": {
+ "version": "6.15.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+ "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+ "dependencies": {
+ "@remix-run/router": "1.8.0",
+ "react-router": "6.15.0"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "react": ">=16.8",
+ "react-dom": ">=16.8"
+ }
+ },
"node_modules/readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
@@ -7457,6 +7496,11 @@
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
"dev": true
},
+ "@remix-run/router": {
+ "version": "1.8.0",
+ "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.8.0.tgz",
+ "integrity": "sha512-mrfKqIHnSZRyIzBcanNJmVQELTnX+qagEDlcKO90RgRBVOZGSGvZKeDihTRfWcqoDn5N/NkUcwWTccnpN18Tfg=="
+ },
"@types/body-parser": {
"version": "1.19.2",
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
@@ -9788,6 +9832,23 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
+ "react-router": {
+ "version": "6.15.0",
+ "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.15.0.tgz",
+ "integrity": "sha512-NIytlzvzLwJkCQj2HLefmeakxxWHWAP+02EGqWEZy+DgfHHKQMUoBBjUQLOtFInBMhWtb3hiUy6MfFgwLjXhqg==",
+ "requires": {
+ "@remix-run/router": "1.8.0"
+ }
+ },
+ "react-router-dom": {
+ "version": "6.15.0",
+ "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.15.0.tgz",
+ "integrity": "sha512-aR42t0fs7brintwBGAv2+mGlCtgtFQeOzK0BM1/OiqEzRejOZtpMZepvgkscpMUnKb8YO84G7s3LsHnnDNonbQ==",
+ "requires": {
+ "@remix-run/router": "1.8.0",
+ "react-router": "6.15.0"
+ }
+ },
"readable-stream": {
"version": "3.6.2",
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
diff --git a/package.json b/package.json
index 33f2960..c2bc37a 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
"dependencies": {
"prop-types": "15.8.1",
"react": "18.2.0",
- "react-dom": "18.2.0"
+ "react-dom": "18.2.0",
+ "react-router-dom": "6.15.0"
}
}
diff --git a/readme.md b/readme.md
index 9a0c05e..ad42ed0 100644
--- a/readme.md
+++ b/readme.md
@@ -1,3 +1,23 @@
-# station-profile
+# test
-station profile
\ No newline at end of file
+* setup
+```
+npm i
+npm run start
+```
+
+* Bremen Hbf
+```
+http://localhost:8080/8000050
+```
+
+* Braunschweig Hbf
+```
+http://localhost:8080/8000049
+```
+
+# doku
+
+[taginfo for uic_ref](https://taginfo.openstreetmap.org/keys/uic_ref#overview)
+
+[UIC station code](https://www.wikidata.org/wiki/Property:P722)
\ No newline at end of file