feat: add route with uic param /:uic
This commit is contained in:
parent
8e79c5dbfc
commit
d7b8a41575
17
app/app.jsx
17
app/app.jsx
|
@ -1,9 +1,18 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom'
|
||||||
|
|
||||||
import Home from './pages/home';
|
import Home from './pages/home';
|
||||||
|
import StationProfile from './pages/station-profile';
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
return (
|
|
||||||
<div>
|
return (
|
||||||
<Home />
|
<Router>
|
||||||
</div>
|
<Routes>
|
||||||
|
<Route path="/" element={<Home />} />
|
||||||
|
<Route path="/:uic" element={<StationProfile />} />
|
||||||
|
<Route path="*" element={<Navigate to="/" />} />
|
||||||
|
</Routes>
|
||||||
|
</Router>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,129 +1,9 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React from 'react';
|
||||||
import {get} from '../utils/request';
|
|
||||||
|
|
||||||
export default function Home() {
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<p>Bus Stop</p>
|
Enter UIC station code:
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
bsRry.map((value, index) => {
|
|
||||||
return <li key={index}>
|
|
||||||
Description: {value.tags.description}
|
|
||||||
</li>;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
<p>B+R</p>
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
bpRry.map((value, index) => {
|
|
||||||
return <li key={index}>
|
|
||||||
Name: {value.tags.name},
|
|
||||||
Capacity: {value.tags.capacity},
|
|
||||||
Covered: {value.tags.covered},
|
|
||||||
Fee: {value.tags.fee},
|
|
||||||
Operator: {value.tags.operator}
|
|
||||||
</li>;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
<p>P+R</p>
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
prRry.map((value, index) => {
|
|
||||||
return <li key={index}>
|
|
||||||
Name: {value.tags.name},
|
|
||||||
Capacity: {value.tags.capacity},
|
|
||||||
Fee: {value.tags.fee},
|
|
||||||
Website: <a href={value.tags.website}>
|
|
||||||
{value.tags.website}
|
|
||||||
</a>
|
|
||||||
</li>;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
<p>Ticket Shop</p>
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
shopRry.map((value, index) => {
|
|
||||||
return <li key={index}>
|
|
||||||
Name: {value.tags.name},
|
|
||||||
Opening Hours: {value.tags.opening_hours}
|
|
||||||
</li>;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
<p>Taxi Stop</p>
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
taxiRry.map((value, index) => {
|
|
||||||
return <li key={index}>
|
|
||||||
Name: {value.tags.name}
|
|
||||||
</li>;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
<p>Vending Machine</p>
|
|
||||||
<ul>
|
|
||||||
{
|
|
||||||
vmRry.map((value, index) => {
|
|
||||||
return <li key={index}>
|
|
||||||
Name: {value.tags.name},
|
|
||||||
Brand: {value.tags.brand},
|
|
||||||
Operator: {value.tags.operator}
|
|
||||||
</li>;
|
|
||||||
})
|
|
||||||
}
|
|
||||||
</ul>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 (
|
||||||
|
<>
|
||||||
|
<p>Bus Stop</p>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
bsRry.map((value, index) => {
|
||||||
|
return <li key={index}>
|
||||||
|
Description: {value.tags.description}
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
<p>B+R</p>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
bpRry.map((value, index) => {
|
||||||
|
return <li key={index}>
|
||||||
|
Name: {value.tags.name},
|
||||||
|
Capacity: {value.tags.capacity},
|
||||||
|
Covered: {value.tags.covered},
|
||||||
|
Fee: {value.tags.fee},
|
||||||
|
Operator: {value.tags.operator}
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
<p>P+R</p>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
prRry.map((value, index) => {
|
||||||
|
return <li key={index}>
|
||||||
|
Name: {value.tags.name},
|
||||||
|
Capacity: {value.tags.capacity},
|
||||||
|
Fee: {value.tags.fee},
|
||||||
|
Website: <a href={value.tags.website}>
|
||||||
|
{value.tags.website}
|
||||||
|
</a>
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
<p>Ticket Shop</p>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
shopRry.map((value, index) => {
|
||||||
|
return <li key={index}>
|
||||||
|
Name: {value.tags.name},
|
||||||
|
Opening Hours: {value.tags.opening_hours}
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
<p>Taxi Stop</p>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
taxiRry.map((value, index) => {
|
||||||
|
return <li key={index}>
|
||||||
|
Name: {value.tags.name}
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
<p>Vending Machine</p>
|
||||||
|
<ul>
|
||||||
|
{
|
||||||
|
vmRry.map((value, index) => {
|
||||||
|
return <li key={index}>
|
||||||
|
Name: {value.tags.name},
|
||||||
|
Brand: {value.tags.brand},
|
||||||
|
Operator: {value.tags.operator}
|
||||||
|
</li>;
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
|
@ -11,7 +11,8 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"prop-types": "15.8.1",
|
"prop-types": "15.8.1",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0"
|
"react-dom": "18.2.0",
|
||||||
|
"react-router-dom": "6.15.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "7.22.10",
|
"@babel/core": "7.22.10",
|
||||||
|
@ -1876,6 +1877,14 @@
|
||||||
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
|
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
|
||||||
"dev": true
|
"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": {
|
"node_modules/@types/body-parser": {
|
||||||
"version": "1.19.2",
|
"version": "1.19.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
"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": {
|
"node_modules/readable-stream": {
|
||||||
"version": "3.6.2",
|
"version": "3.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||||
|
@ -7457,6 +7496,11 @@
|
||||||
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
|
"integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==",
|
||||||
"dev": true
|
"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": {
|
"@types/body-parser": {
|
||||||
"version": "1.19.2",
|
"version": "1.19.2",
|
||||||
"resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
|
||||||
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
|
"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": {
|
"readable-stream": {
|
||||||
"version": "3.6.2",
|
"version": "3.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
"resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
|
||||||
|
|
|
@ -29,6 +29,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"prop-types": "15.8.1",
|
"prop-types": "15.8.1",
|
||||||
"react": "18.2.0",
|
"react": "18.2.0",
|
||||||
"react-dom": "18.2.0"
|
"react-dom": "18.2.0",
|
||||||
|
"react-router-dom": "6.15.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
24
readme.md
24
readme.md
|
@ -1,3 +1,23 @@
|
||||||
# station-profile
|
# test
|
||||||
|
|
||||||
station profile
|
* 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)
|
Loading…
Reference in New Issue