Merge branch 'main' into we-json-examples

src/App.js

@@ -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.js";
-import NearbyStation from "./components/NearbyStation";
+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} />

src/classes/Disruption.js

@@ -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;

src/classes/Stop.js

@@ -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;

src/classes/User.js

@@ -11,6 +11,7 @@ class User {
         this.name = name;
         this.deviceId = deviceId;
         this.location = location;
+        this.stoppointgid = stoppointgid;
     }
 }
 

src/components/Disruption.js

@@ -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

src/components/NearbyStation.js

@@ -1,7 +1,8 @@
 import React from 'react';
 import axios from 'axios';
-import AccessToken from '../classes/AccessToken'
+import AccessToken from '../classes/AccessToken';
-import json5 from 'json5';
+import StopComponent from './StopComponent';
+import Stop from '../classes/Stop';
 
 class NearbyStation extends React.Component {
     state = {
@@ -29,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({
@@ -59,32 +60,11 @@ class NearbyStation extends React.Component {
                     {this.state.long}
                 </h1>
                 {this.state.stops.map((item) =>
-                    <div>
+                    <StopComponent stop={item} />
-                        <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

src/components/StationDisruption.js

@@ -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

src/components/StopComponent.js

@@ -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