Add NearbyStation class is a form that given latitude and longitude coordinates gives nearby locations

This commit is contained in:
williameriksson126 2020-11-24 11:54:59 +01:00
parent 3a1d06f53a
commit 51e91981e6
3 changed files with 110 additions and 2 deletions

View File

@ -5,6 +5,7 @@ import Header from './components/Header.js'
import PageArea from './components/PageArea.js' import PageArea from './components/PageArea.js'
import BottomMenu from './components/BottomMenu.js' import BottomMenu from './components/BottomMenu.js'
import AccessToken from './components/AccessToken.js' import AccessToken from './components/AccessToken.js'
import NearbyStation from './components/NearbyStation';
class App extends Component { class App extends Component {
render() { render() {

View File

@ -28,6 +28,12 @@ class AccessToken extends React.Component {
responseFromVT: response.data.access_token, responseFromVT: response.data.access_token,
token: 'token sent' token: 'token sent'
}) })
.error(res => {
this.setState({
responseFromVT: "some error",
token: "some error occured"
})
})
}) })
} }
@ -59,5 +65,5 @@ export default AccessToken
//grant_type=client_credentials&scope=<device_id> //grant_type=client_credentials&scope=<device_id>
//BPvMjPidHckBtETZxr3dHP1rptQa //5ty7gxmAfQlUHDHdm7kgaqXwK5Ia
//z5MFCS_wwmqprc0s4iLZWBAUJdga //wpIOURnJJcTtO6rORYmYYPq4wXka

View File

@ -0,0 +1,101 @@
import React from 'react';
import axios from 'axios';
/*
const StopLocation = ({ name, id, lat, long, track }) => (
<div>
<div>
<p>{name}</p>
<p>{id}</p>
<p>{lat}</p>
<p>{lon}</p>
<p>{track}</p>
</div>
</div>
);
*/
class NearbyStation extends React.Component {
state = {
lat: '57.5987',
long: '11.9454',
token: '2d596c20-a6e7-3272-8df6-51ed2468da63',
stops: [],
}
handleChangeLat = event => {
this.setState({ lat: event.target.value});
}
handleChangeLong = event => {
this.setState({ long: event.target.value});
}
handleSubmit = event => {
event.preventDefault();
const headers = {
'Authorization': 'Bearer ' + this.state.token
};
console.log('Attempted connection')
axios.get('https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops?originCoordLat='+this.state.lat+'&originCoordLong='+this.state.long+'&maxNo=20&format=json', { headers })
.then(response => {
console.log(response.data.LocationList.StopLocation)
this.setState({
stops: response.data.LocationList.StopLocation,
})
})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<label>
Lattitude coord:
<input type="text" name="lat" onChange={this.handleChangeLat} />
</label>
<label>
Longitude coord:
<input type="text" name="long" onChange={this.handleChangeLong} />
</label>
<button type="submit">Get Token</button>
</form>
<h1>
{this.state.lat}
</h1>
<h1>
{this.state.long}
</h1>
{this.state.stops.map((item) =>
<div>
<h1>
{item.name},
{item.id},
{item.lat},
{item.lon},
{item.track}
</h1>
</div>
)}
</div>
)
}
}
export default NearbyStation
//https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops?originCoordLat=57.5987&originCoordLong=11.9454&maxNo=20&format=json
//https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops
//'https://reqres.in/api/articles'
//'https://api.vasttrafik.se/token'
//grant_type=client_credentials&scope=<device_id>
//BPvMjPidHckBtETZxr3dHP1rptQa
//z5MFCS_wwmqprc0s4iLZWBAUJdga