96 lines
2.8 KiB
JavaScript

import React from 'react';
import axios from 'axios';
class NearbyStation extends React.Component {
state = {
lat: '57.7',
long: '12.0',
stops: [],
token: undefined,
device: '123',
}
handleChangeLat = event => {
this.setState({ lat: event.target.value});
}
handleChangeLong = event => {
this.setState({ long: event.target.value});
}
handleChangeToken = event => {
this.setState({ token: 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>
<label>
Token:
<input type="text" name="token" onChange={this.handleChangeToken} />
</label>
<button type="submit">Stops</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