Merge pull request #4 from thefeli73/we-Disruption-base
We disruption base
This commit is contained in:
commit
34f4b8af18
@ -5,8 +5,9 @@ import React, { Component } from "react";
|
||||
import { BrowserRouter as Router, Route } from "react-router-dom";
|
||||
|
||||
import BottomMenu from "./components/BottomMenu.js";
|
||||
//import AccessToken from "./components/AccessToken.js";
|
||||
import NearbyStation from "./components/NearbyStation";
|
||||
import NearbyStation from "./components/NearbyStation.js";
|
||||
import Disruption from "./components/Disruption.js";
|
||||
import StationDisruption from "./components/StationDisruption.js";
|
||||
|
||||
import Tickets from "./components/pages/Tickets.js";
|
||||
import TicketsBuy from "./components/pages/TicketsBuy.js";
|
||||
@ -20,6 +21,8 @@ class App extends Component {
|
||||
return (
|
||||
<Router>
|
||||
<div className="App">
|
||||
<NearbyStation/>
|
||||
<Disruption/>
|
||||
<Route path="/" exact component={TicketsBuy} />
|
||||
<Route path="/tickets" exact component={Tickets} />
|
||||
<Route path="/ticketsBuy" exact component={TicketsBuy} />
|
||||
|
24
src/classes/Disruption.js
Normal file
24
src/classes/Disruption.js
Normal file
@ -0,0 +1,24 @@
|
||||
/*
|
||||
Denna klass är en modell för störningar.
|
||||
*/
|
||||
|
||||
class Disruption {
|
||||
constructor(startTime, locations, departures) {
|
||||
this.startTime = startTime;
|
||||
this.affectedLines = affectedLines;
|
||||
this.departures = departures;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Från västtrafiks api ett element i listan av hållplatser ser ut som följande
|
||||
"id": "string",
|
||||
"lon": "string",
|
||||
"idx": "string",
|
||||
"weight": "string",
|
||||
"name": "string",
|
||||
"track": "string",
|
||||
"lat": "string"
|
||||
*/
|
||||
|
||||
export default Disruption;
|
@ -14,4 +14,15 @@ class Stop {
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Från västtrafiks api ett element i listan av hållplatser ser ut som följande
|
||||
"id": "string",
|
||||
"lon": "string",
|
||||
"idx": "string",
|
||||
"weight": "string",
|
||||
"name": "string",
|
||||
"track": "string",
|
||||
"lat": "string"
|
||||
*/
|
||||
|
||||
export default Stop;
|
@ -11,6 +11,7 @@ class User {
|
||||
this.name = name;
|
||||
this.deviceId = deviceId;
|
||||
this.location = location;
|
||||
this.stoppointgid = stoppointgid;
|
||||
}
|
||||
}
|
||||
|
||||
|
60
src/components/Disruption.js
Normal file
60
src/components/Disruption.js
Normal file
@ -0,0 +1,60 @@
|
||||
import React from 'react';
|
||||
import axios from 'axios';
|
||||
import AccessToken from '../classes/AccessToken'
|
||||
|
||||
class Diruption extends React.Component {
|
||||
state = {
|
||||
gid: '9022014005700002',
|
||||
disruptions: [],
|
||||
token: undefined,
|
||||
tokenClass: new AccessToken()
|
||||
}
|
||||
|
||||
handleChangeGid = event => {
|
||||
this.setState({ lat: event.target.value});
|
||||
}
|
||||
|
||||
handleSubmit = event => {
|
||||
event.preventDefault();
|
||||
|
||||
const headers = {
|
||||
'Authorization': 'Bearer ' + this.state.tokenClass.token
|
||||
};
|
||||
|
||||
console.log('Attempted connection')
|
||||
|
||||
axios.get('https://api.vasttrafik.se/ts/v1/traffic-situations/stoppoint/'+this.state.gid, { headers })
|
||||
//axios.get('https://api.vasttrafik.se/ts/v1/traffic-situations/stoppoint/9022014005700002', { headers })
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
this.setState({
|
||||
disruptions: response.data
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<label>
|
||||
Stoppoint Gid:
|
||||
<input type="text" name="gid" onChange={this.handleChangeGid} />
|
||||
</label>
|
||||
<button type="submit">Find traffic disruptions</button>
|
||||
</form>
|
||||
<h1>
|
||||
{this.state.gid}
|
||||
</h1>
|
||||
{this.state.disruptions.map((item) =>
|
||||
<div>
|
||||
<h1>
|
||||
{item.description}
|
||||
</h1>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default Diruption
|
@ -1,6 +1,8 @@
|
||||
import React from 'react';
|
||||
import axios from 'axios';
|
||||
import AccessToken from '../classes/AccessToken'
|
||||
import AccessToken from '../classes/AccessToken';
|
||||
import StopComponent from './StopComponent';
|
||||
import Stop from '../classes/Stop';
|
||||
|
||||
class NearbyStation extends React.Component {
|
||||
state = {
|
||||
@ -28,7 +30,7 @@ class NearbyStation extends React.Component {
|
||||
|
||||
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 })
|
||||
axios.get('https://api.vasttrafik.se/bin/rest.exe/v2/location.nearbystops?originCoordLat='+this.state.lat+'&originCoordLong='+this.state.long+'&maxNo=5&format=json', { headers })
|
||||
.then(response => {
|
||||
console.log(response.data.LocationList.StopLocation)
|
||||
this.setState({
|
||||
@ -58,32 +60,11 @@ class NearbyStation extends React.Component {
|
||||
{this.state.long}
|
||||
</h1>
|
||||
{this.state.stops.map((item) =>
|
||||
<div>
|
||||
<h1>
|
||||
{item.name},
|
||||
{item.id},
|
||||
{item.lat},
|
||||
{item.lon},
|
||||
{item.track}
|
||||
</h1>
|
||||
</div>
|
||||
<StopComponent stop={item} />
|
||||
)}
|
||||
</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
|
64
src/components/StationDisruption.js
Normal file
64
src/components/StationDisruption.js
Normal file
@ -0,0 +1,64 @@
|
||||
import React from 'react';
|
||||
import axios from 'axios';
|
||||
import AccessToken from '../classes/AccessToken'
|
||||
|
||||
class StationDisruption extends React.Component {
|
||||
state = {
|
||||
gid: '9022014005700002',
|
||||
lat: '57.7',
|
||||
long: '12.0',
|
||||
disruptions: [],
|
||||
token: undefined,
|
||||
tokenClass: new AccessToken()
|
||||
}
|
||||
|
||||
handleChangeGid = event => {
|
||||
this.setState({ lat: event.target.value});
|
||||
}
|
||||
|
||||
handleSubmit = event => {
|
||||
event.preventDefault();
|
||||
|
||||
const headers = {
|
||||
'Authorization': 'Bearer ' + this.state.tokenClass.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=5&format=json', { headers })
|
||||
.then(response => {
|
||||
console.log(response.data.LocationList.StopLocation)
|
||||
})
|
||||
axios.get('https://api.vasttrafik.se/ts/v1/traffic-situations/stoppoint/'+this.state.gid, { headers })
|
||||
.then(response => {
|
||||
console.log(response)
|
||||
this.setState({
|
||||
disruptions: response.data
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<form onSubmit={this.handleSubmit}>
|
||||
<label>
|
||||
Stoppoint Gid:
|
||||
<input type="text" name="gid" onChange={this.handleChangeGid} />
|
||||
</label>
|
||||
<button type="submit">Find traffic disruptions</button>
|
||||
</form>
|
||||
<h1>
|
||||
{this.state.gid}
|
||||
</h1>
|
||||
{this.state.disruptions.map((item) =>
|
||||
<div>
|
||||
<h1>
|
||||
{item.description}
|
||||
</h1>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
export default StationDisruption
|
19
src/components/StopComponent.js
Normal file
19
src/components/StopComponent.js
Normal file
@ -0,0 +1,19 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class StopComponent extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<h1>
|
||||
{this.props.stop.name},
|
||||
{this.props.stop.id},
|
||||
{this.props.stop.lat},
|
||||
{this.props.stop.lon},
|
||||
{this.props.stop.track}
|
||||
</h1>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
// TODO Add css
|
||||
export default StopComponent
|
Loading…
Reference in New Issue
Block a user