33 Commits

Author SHA1 Message Date
5c59866dc4 Add: More progress regarding findstops button 2020-12-10 09:56:24 +01:00
d304b250a2 Add: Json files for nearby busstops and a component for accessing said json files 2020-12-09 17:54:28 +01:00
68b6e4e836 Polish and button functionality for traffic info page 2020-12-08 12:28:33 +01:00
3accd7806a Add help message for button errors 2020-12-08 12:28:32 +01:00
b207b464bd Merge pull request #9 from thefeli73/we-select-user
Add: Multiple disruptions
2020-12-08 12:10:51 +01:00
2d2ec96533 Add: Multiple disruptions 2020-12-08 12:10:08 +01:00
359c0a8192 Merge pull request #8 from thefeli73/we-select-user
Add: Select user buttons
2020-12-08 11:55:46 +01:00
3c0fc6fe1f Add: Select user buttons 2020-12-08 11:54:34 +01:00
c7517f185c Merge pull request #7 from thefeli73/we-fix-broken-git
We fix broken git
2020-12-08 10:43:20 +01:00
d39f114d5c Fix 2of2 2020-12-08 10:42:50 +01:00
a0ff50ab23 Fix 1of2 2020-12-08 10:41:31 +01:00
ca1ca3884d Merge pull request #6 from thefeli73/we-demo-disruption-first
Add: code to fetch disruption data and see if it is relevant
2020-12-08 10:30:41 +01:00
ea2a18f3ad Add: code to fetch disruption data and see if it is relevant 2020-12-08 10:29:03 +01:00
75b4ecc4ed Merge pull request #5 from thefeli73/we-json-examples
Add: json files for scenarios
2020-12-08 09:38:22 +01:00
3080359dcd Merge branch 'main' into we-json-examples 2020-12-08 09:38:11 +01:00
3d7e6cf52f Add: json files for scenarios 2020-12-08 09:36:19 +01:00
34f4b8af18 Merge pull request #4 from thefeli73/we-Disruption-base
We disruption base
2020-12-08 09:18:21 +01:00
7c59fa2825 Merge branch 'main' into we-Disruption-base 2020-12-08 09:18:00 +01:00
31263e919e Minor modifications to Example API components and base classes 2020-12-08 09:13:38 +01:00
d40420ad2b Remove irrelevant button errors in console 2020-12-04 12:02:45 +01:00
4ce76dbe90 Merge branch 'aw-disruption-control' into main 2020-12-04 11:53:37 +01:00
051afedcc5 Add user name to navigation drawer 2020-12-04 11:52:41 +01:00
bff5a73c8c Merge branch 'main' into aw-disruption-control 2020-12-04 11:49:28 +01:00
093199d0e0 Add global data variable 2020-12-04 11:48:56 +01:00
25d66f9195 Updated class changes in TrafficEntry 2020-12-04 11:47:42 +01:00
4e36270130 Format TrafficInfo.js 2020-12-04 11:13:55 +01:00
c36d6afea7 Merge to work on aw branch 2020-12-04 10:51:09 +01:00
ff8a87c961 Hack: Nothing is done just commiting to swap branch 2020-12-04 10:45:22 +01:00
c3edd2d74f Add basic component for calls to traffic disruption API 2020-12-04 10:08:11 +01:00
b324250c79 Merge remote-tracking branch 'origin/aw-client-side-classes' into aw-disruption-control 2020-12-04 09:59:51 +01:00
e35524fa19 Merge pull request #3 from williameriksson126/we-AccessToken-class
Add: AccessToken now updated to seperate class
2020-11-30 10:21:10 +01:00
521d3b2e63 Add: AccessToken now updated to seperate class 2020-11-30 10:18:18 +01:00
3bc1ff9a1a Add and update classes for client-side data management 2020-11-27 17:32:35 +01:00
47 changed files with 825 additions and 200 deletions

View File

@ -25,20 +25,37 @@ Tutorials för React går att hitta [här](https://www.youtube.com/playlist?list
* ``public/index.html`` är den enda HTML-fil vi kommer ha i appen, detta eftersom vi bygger en s.k. SPA (Single Page Application). Man ändrar oftast inget i denna fil utöver möjligtvis innehållet i ``<head>``, detta eftersom React hanterar hela vårt UI.
* Ursprungspunkten för React är ``src/index.js``.
<!--
## Upplägg
``` mermaid
```mermaid
classDiagram
class User
User : String deviceId
User : Coordinates location
User : nearbyStops()
class User
User : Subscription[] subs
User : Location loc
class Coordinates
Coordinates : Float lon
Coordinates : Float lat
class Line
class Stop
Stop : String name
Stop : Track[] locations
Stop : Departure[] departures
class Subscription
Subscription : Line line
class Departure
Departure : String lineName
Departure : Stop finalStop
Departure : String time
Departure : String trafficInfo
```
-->
class Track
Track : String name
User <.. Coordinates
User <.. Stop
Stop <.. Departure
Departure <.. Stop
Stop <.. Track
```

5
package-lock.json generated
View File

@ -12386,6 +12386,11 @@
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-native-push-notification": {
"version": "6.1.3",
"resolved": "https://registry.npmjs.org/react-native-push-notification/-/react-native-push-notification-6.1.3.tgz",
"integrity": "sha512-qNbFCkObCXwSFQbK6hJyx1Bym1D7V4XM8iN2L6eL3GAdNLmeBTdLdx3mPbKJtuaDJ1+deniFTQ2rz6hU4ELOXA=="
},
"react-push-notification": {
"version": "1.3.0",
"resolved": "https://registry.npmjs.org/react-push-notification/-/react-push-notification-1.3.0.tgz",

View File

@ -10,6 +10,7 @@
"react": "^17.0.1",
"react-axios": "^2.0.3",
"react-dom": "^17.0.1",
"react-native-push-notification": "^6.1.3",
"react-push-notification": "^1.3.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.0",

View File

@ -0,0 +1,15 @@
{
"situationNumber": "RT1",
"severity":"normal",
"title":"Stannar inte på dessa hållplatser",
"affectedStopPoints":[
{
"gid": "9022014014020001",
"name": "Ekelöv västra, Kungälv"
},
{
"gid": "9022014014751001",
"name": "Guddeby, Kungälv"
}
]
}

View File

@ -0,0 +1,11 @@
{
"situationNumber": "RT2",
"severity":"normal",
"title":"Försening",
"affectedStopPoints":[
{
"gid": "9021014014225000",
"name": "Skrämmenborg, Kungälv"
}
]
}

View File

@ -0,0 +1,36 @@
{
"LocationList": {
"noNamespaceSchemaLocation": "http://api.vasttrafik.se/v1/hafasRestLocation.xsd",
"servertime": "16:48",
"serverdate": "2020-12-09",
"StopLocation": [
{
"name": "Bollestadsvägen, Kungälv",
"id": "9022014014754001",
"lat": "57.888940",
"lon": "11.885663",
"track": "A"
},
{
"name": "Bollestadsvägen, Kungälv",
"id": "9021014014754000",
"lat": "57.889030",
"lon": "11.885708"
},
{
"name": "Bollestadsvägen, Kungälv",
"id": "9022014014754002",
"lat": "57.889111",
"lon": "11.885753",
"track": "B"
},
{
"name": "Bredsten, Kungälv",
"id": "9022014014753002",
"lat": "57.886450",
"lon": "11.889529",
"track": "B"
}
]
}
}

View File

@ -0,0 +1,36 @@
{
"LocationList": {
"noNamespaceSchemaLocation": "http://api.vasttrafik.se/v1/hafasRestLocation.xsd",
"servertime": "16:47",
"serverdate": "2020-12-09",
"StopLocation": [
{
"name": "Ekelöv västra, Kungälv",
"id": "9022014014020001",
"lat": "57.892527",
"lon": "11.865321",
"track": "A"
},
{
"name": "Ekelöv västra, Kungälv",
"id": "9021014014020000",
"lat": "57.892608",
"lon": "11.865312"
},
{
"name": "Ekelöv västra, Kungälv",
"id": "9022014014020002",
"lat": "57.892689",
"lon": "11.865285",
"track": "B"
},
{
"name": "Ekelöv östra, Kungälv",
"id": "9022014014021002",
"lat": "57.892994",
"lon": "11.873923",
"track": "B"
}
]
}
}

View File

@ -0,0 +1,36 @@
{
"LocationList": {
"noNamespaceSchemaLocation": "http://api.vasttrafik.se/v1/hafasRestLocation.xsd",
"servertime": "16:45",
"serverdate": "2020-12-09",
"StopLocation": [
{
"name": "Guddeby, Kungälv",
"id": "9022014014751001",
"lat": "57.874665",
"lon": "11.903884",
"track": "A"
},
{
"name": "Guddeby, Kungälv",
"id": "9021014014751000",
"lat": "57.874710",
"lon": "11.903929"
},
{
"name": "Guddeby, Kungälv",
"id": "9022014014751002",
"lat": "57.874746",
"lon": "11.903965",
"track": "B"
},
{
"name": "Stället, Kungälv",
"id": "9022014014744001",
"lat": "57.869784",
"lon": "11.904172",
"track": "A"
}
]
}
}

View File

@ -0,0 +1,35 @@
{
"LocationList": {
"noNamespaceSchemaLocation": "http://api.vasttrafik.se/v1/hafasRestLocation.xsd",
"servertime": "16:44",
"serverdate": "2020-12-09",
"StopLocation": [
{
"name": "Skrämmenborg, Kungälv",
"id": "9021014014225000",
"lat": "57.863528",
"lon": "11.867406"
},
{
"name": "Skrämmenborg, Kungälv",
"id": "9022014014225001",
"lat": "57.863528",
"lon": "11.867406",
"track": "A"
},
{
"name": "Kuröd, Kungälv",
"id": "9022014014762002",
"lat": "57.856966",
"lon": "11.863774",
"track": "B"
},
{
"name": "Kuröd, Kungälv",
"id": "9021014014762000",
"lat": "57.856831",
"lon": "11.864260"
}
]
}
}

View File

@ -0,0 +1,5 @@
{
"name":"1",
"deviceId":"1",
"stoppointgid":"9022014014754001"
}

View File

@ -0,0 +1,5 @@
{
"name":"2",
"deviceId":"2",
"stoppointgid":"9022014014020001"
}

View File

@ -0,0 +1,5 @@
{
"name":"3",
"deviceId":"3",
"stoppointgid":"9022014014751001"
}

View File

@ -0,0 +1,5 @@
{
"name":"4",
"deviceId":"4",
"stoppointgid":"9021014014225000"
}

View File

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

19
src/GlobalData.js Normal file
View File

@ -0,0 +1,19 @@
import User from './classes/User.js';
import Disruption from './classes/Disruption.js'
import Coordinates from './classes/Coordinates.js';
import Stop from './classes/Stop.js'
let globalData = {
user: new User(
"test",
"123",
new Coordinates(),
"9022014014020001"
),
disruption: new Disruption(
),
stop: new Stop(
)
};
export default globalData;

View File

@ -0,0 +1,21 @@
import axios from 'axios';
class AccessToken {
credentials = 'NXR5N2d4bUFmUWxVSERIZG03a2dhcVh3SzVJYTp3cElPVVJuSkpjVHRPNnJPUlltWVlQcTR3WGth'
device = '123'
constructor() {
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + this.credentials
};
axios.post('https://api.vasttrafik.se/token','grant_type=client_credentials&scope=device_'+this.device, {headers} )
.then(response => {
console.log(response);
this.token = response.data.access_token
});
}
}
export default AccessToken

View File

@ -0,0 +1,15 @@
/*
Denna klass är en modell för platskoordinater.
lon : Float (Longitud)
lat : Float (Latitud)
*/
class Coordinates {
constructor(lon, lat) {
this.lon = lon;
this.lat = lat;
}
}
export default Coordinates;

View File

@ -2,17 +2,22 @@
Denna klass är en modell för avgångar.
lineName : String (Linjenamnet)
destination : String (Exempelvis "Mot Heden")
time : String (Avgångstid)
info : String (Trafikinformation)
finalStop : Stop (Ändhållplats)
originalTime : String (Ursprunglig Avgångstid)
newTime : String (Ny Avgångstid)
trafficInfo : String (Trafikinformation)
*/
class Departure {
constructor(lineName, destination, time, info) {
constructor(lineName, finalStop, originalTime, trafficInfo) {
this.lineName = lineName;
this.destination = destination;
this.time = time;
this.info = info;
this.finalStop = finalStop;
this.originalTime = originalTime;
this.trafficInfo = trafficInfo;
}
timeUpdate(time) {
this.newTime = time;
}
}

11
src/classes/Disruption.js Normal file
View File

@ -0,0 +1,11 @@
class Disruption {
constructor(situationNumber, severity, title, affectedStopPoints) {
this.situationNumber = situationNumber;
this.severity = severity;
this.title = title;
this.affectedStopPoints = affectedStopPoints;
}
}
export default Disruption;

View File

@ -2,16 +2,30 @@
Denna klass är en modell för hållplatser.
name : String (Hållplatsens namn)
locations : String[] (Möjliga lägen)
locations : Track[] (Möjliga lägen)
departures : Departure[] (Avgångar från hållplatsen)
*/
class Stop {
constructor(name, locations, departures) {
constructor(name, id, lat, lon, locations, departures) {
this.name = name;
this.id = id;
this.lat = lat;
this.lon = lon;
this.locations = locations;
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 Stop;

13
src/classes/Track.js Normal file
View File

@ -0,0 +1,13 @@
/*
Denna klass är en modell för hållplatslägen, ex. "Läge A" eller "Spår 3".
name : String (Lägets namn)
*/
class Track {
constructor(name) {
this.name = name;
}
}
export default Track;

18
src/classes/User.js Normal file
View File

@ -0,0 +1,18 @@
/*
Denna klass är en modell för användare.
name : String (Användarnamn)
deviceId : Int (Enhetens ID)
location : Coordinates (Användarens koordinater)
*/
class User {
constructor(name, deviceId, location, stoppointgid) {
this.name = name;
this.deviceId = deviceId;
this.location = location;
this.stoppointgid = stoppointgid;
}
}
export default User;

View File

@ -1,65 +0,0 @@
import React from 'react';
import axios from 'axios';
var globToken = ''
const GetToken = () => {
const vars = {
credentials: 'NXR5N2d4bUFmUWxVSERIZG03a2dhcVh3SzVJYTp3cElPVVJuSkpjVHRPNnJPUlltWVlQcTR3WGth',
token: undefined,
device: '123',
}
const headers = {
'Content-Type': 'application/x-www-form-urlencoded',
'Authorization': 'Basic ' + vars.credentials
};
axios.post('https://api.vasttrafik.se/token','grant_type=client_credentials&scope=device_'+vars.device, { headers })
.then(response => {
console.log(response);
globToken = response.data.access_token
});
}
class AccessToken extends React.Component {
state = {
token: 'No Token',
}
handleChange = event => {
this.setState({ token: event.target.value});
}
handleSubmit = event => {
event.preventDefault();
this.setState({
credentials: 'Attempting to send token'
});
GetToken();
}
handleFetch = event => {
event.preventDefault();
this.setState({token: globToken})
}
render() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<button type="submit">Get Token</button>
</form>
<h1>
{this.state.token}
</h1>
<form onSubmit={this.handleFetch}>
<button type="submit">fetch</button>
</form>
</div>
)
}
}
export default AccessToken

View File

@ -6,8 +6,6 @@ import './css/Button.css';
class Button extends Component {
// Multiple onClick functions
onClick = () => {
console.log(this.props.onClick);
if (this.props.onClick !== null
&& this.props.onClick !== undefined) {
if (Array.isArray(this.props.onClick)) {
@ -15,10 +13,8 @@ class Button extends Component {
func();
});
} else {
console.log("Error when parsing Button onClick functions.");
console.log("Error when parsing Button onClick functions. Make sure the functions are passed as an array.");
}
} else {
console.log("Error when parsing Button onClick functions.");
}
}

View 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

View File

@ -1,11 +1,39 @@
import addNotification from "react-push-notification";
import globData from '../GlobalData.js';
import ex1 from '../APIexamples/disruption1.json'
import ex2 from '../APIexamples/disruption2.json'
import Button from './Button.js';
import disruptIcon from '../img/flash.svg';
class DisruptionButton extends Button {
state = {
jsonLocation: this.props.path,
disruption: ""
}
genDisrupt = () => {
this.state.disruption = ""
if(this.state.jsonLocation === "ex1"){
for (let stopPoint of ex1.affectedStopPoints) {
if(stopPoint.gid === globData.user.stoppointgid){
this.state.disruption = ex1
}
}
} else if (this.state.jsonLocation === "ex2"){
for (let stopPoint of ex2.affectedStopPoints) {
if(stopPoint.gid === globData.user.stoppointgid){
this.state.disruption = ex2
}
}
}
console.log(this.state.disruption)
globData.disruption = this.state.disruption
addNotification({
title: "Warning",
subtitle: "This is a subtitle",

View File

@ -0,0 +1,45 @@
import globData from '../GlobalData.js';
import locationuser1 from '../APIexamples/locationuser1.json'
import locationuser2 from '../APIexamples/locationuser2.json'
import locationuser3 from '../APIexamples/locationuser3.json'
import locationuser4 from '../APIexamples/locationuser4.json'
import StopSelectButton from './StopSelectButton.js';
import Button from './Button.js';
import disruptIcon from '../img/flash.svg';
class FindStops extends Button {
state = {
locations : []
}
findStops = () => {
if(globData.user.deviceId === "1"){
this.state.locations = locationuser1.LocationList.StopLocation
}else if (globData.user.deviceId === "2"){
this.state.locations = locationuser2.LocationList.StopLocation
}else if (globData.user.deviceId === "3"){
this.state.locations = locationuser3.LocationList.StopLocation
}else if (globData.user.deviceId === "4"){
this.state.locations = locationuser4.LocationList.StopLocation
}
}
render() {
return (
<>
<Button onClick={[this.findStops]} className="disruptBtn">
<img src={disruptIcon} alt="" />
<span>Select nearby stops</span>
</Button>
{this.state.locations.map((item) =>
<StopSelectButton stop={item}/>
)}
</>
);
}
}
export default FindStops;

View File

@ -5,7 +5,7 @@ import './css/MainArea.css';
class MainArea extends Component {
render() {
return (
<main>
<main style={this.props.style}>
{this.props.children}
</main>
);

View File

@ -1,12 +1,15 @@
import React, { Component } from 'react';
import globalData from '../GlobalData.js';
import DisruptionButton from "./DisruptionButton.js";
import SelectUserButton from "./SelectUserButton.js"
import Popup from './Popup.js';
import Button from './Button.js';
import './css/NavigationDrawer.css';
import userIcon from '../img/user.svg';
import FindStops from './FindStops.js';
class NavigationDrawer extends Component {
@ -58,11 +61,17 @@ class NavigationDrawer extends Component {
<div id="navDrawer" className={`${this.state.open ? "open" : ""}`}>
<header>
<img src={userIcon} alt="" />
<span>Mitt konto</span>
<span>{globalData.user.name}</span>
<span>example@gmail.com</span>
</header>
<div id="navList">
<DisruptionButton onClick={[this.showPopup, this.close]} />
<SelectUserButton path={"user1"} username="user1"/>
<SelectUserButton path={"user2"} username="user2"/>
<SelectUserButton path={"user3"} username="user3"/>
<SelectUserButton path={"user4"} username="user4"/>
<FindStops/>
<DisruptionButton path={"ex1"} onClick={[this.showPopup, this.close]} />
<DisruptionButton path={"ex2"} onClick={[this.showPopup, this.close]} />
</div>
<hr />
<span id="version">Projektgrupp 3 - Utmaning 7</span>

View File

@ -1,5 +1,8 @@
import React from 'react';
import axios from 'axios';
import AccessToken from '../classes/AccessToken';
import StopComponent from './StopComponent';
import Stop from '../classes/Stop';
class NearbyStation extends React.Component {
state = {
@ -7,7 +10,7 @@ class NearbyStation extends React.Component {
long: '12.0',
stops: [],
token: undefined,
device: '123',
tokenClass: new AccessToken()
}
handleChangeLat = event => {
@ -18,20 +21,16 @@ class NearbyStation extends React.Component {
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
'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=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({
@ -52,10 +51,6 @@ class NearbyStation extends React.Component {
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>
@ -65,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

View File

@ -0,0 +1,36 @@
import globData from '../GlobalData.js';
import user1 from '../APIexamples/user1.json'
import user2 from '../APIexamples/user2.json'
import user3 from '../APIexamples/user3.json'
import user4 from '../APIexamples/user4.json'
import Button from './Button.js';
import disruptIcon from '../img/flash.svg';
class SelectUserButton extends Button {
selectUser = () => {
if(this.props.path === "user1"){
globData.user = user1
}else if (this.props.path === "user2"){
globData.user = user2
}else if (this.props.path === "user3"){
globData.user = user3
}else if (this.props.path === "user4"){
globData.user = user4
}
}
render() {
return (
<Button onClick={[this.selectUser]} className="disruptBtn">
<img src={disruptIcon} alt="" />
<span>{this.props.username}</span>
</Button>
);
}
}
export default SelectUserButton;

View 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

View 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

View File

@ -0,0 +1,22 @@
import React, {Component} from 'react';
import globalData from '../GlobalData';
import Button from './Button.js';
class StopSelectButton extends Component {
selectStop = () => {
globalData.stop = this.props.stop
}
render() {
return (
<>
<Button onClick={[this.selectStop]}>
<span>{this.props.stop.name}</span>
</Button>
</>
);
}
}
// TODO Add css
export default StopSelectButton

View File

View File

@ -1,4 +1,5 @@
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import './css/TrafficInfo.css';
@ -6,33 +7,71 @@ import busIcon from '../img/bus.svg';
import warningIcon from '../img/warning.svg';
class TrafficEntry extends Component {
state = {
expanded: false
};
toggle = () => {
if (this.state.expanded)
this.collapse();
else
this.expand();
};
expand = () => {
this.setState({
expanded: true
});
};
collapse = () => {
this.setState({
expanded: false
});
};
render() {
let trafficInfo = this.props.departure.info;
let lineInterference = trafficInfo !== "" && trafficInfo !== null;
let trafficInfo = this.props.departure.trafficInfo;
let lineInterference = trafficInfo !== "" && trafficInfo !== null && trafficInfo !== undefined;
return (
<div className="trafficEntry">
<div>
<div className="timeColumn">
<span>{this.props.departure.time}</span>
{!lineInterference &&
<span>{this.props.departure.originalTime}</span>
}
{lineInterference &&
<>
<div style={{display: "flex", flexDirection: "column"}}>
<span style={{color: "red", fontWeight: "bold"}}>{this.props.departure.newTime}</span>
<span style={{textDecoration: "line-through"}}>{this.props.departure.originalTime}</span>
</div>
<img src={warningIcon} alt=""></img>
</>
}
</div>
<div className="lineColumn">
<div>
<span className="lineName">{this.props.departure.lineName}</span>
<img src={busIcon} alt=""></img>
<span className="destination">{this.props.departure.destination}</span>
<span className="destination">{"Mot " + this.props.departure.finalStop}</span>
</div>
{lineInterference &&
<p>{trafficInfo} <u>Visa mer</u></p>
<div className="infoWrapper" onClick={this.toggle}>
<p className={`${this.state.expanded ? "expanded" : ""}`}>{trafficInfo}</p>
<span style={{display: (this.state.expanded ? "none" : "block") }}><u>Visa mer</u></span>
</div>
}
</div>
</div>
{lineInterference &&
<button>Hitta annan resväg</button>
<Link to={
{ pathname: "/travel"
, to: this.props.departure.finalStop
}
}>Hitta annan resväg</Link>
}
</div>
);

View File

@ -5,10 +5,10 @@ class TripSelector extends Component {
return (
<form>
<label>Från:</label>
<input type="text" placeholder="Hållplats/Adress/Plats" />
<input type="text" placeholder="Hållplats/Adress/Plats" defaultValue={this.props.from}/>
<hr/>
<label>Till:</label>
<input type="text" placeholder="Hållplats/Adress/Plats" />
<input type="text" placeholder="Hållplats/Adress/Plats" defaultValue={this.props.to} />
</form>
);
}

View File

@ -1,7 +1,7 @@
#bottomMenu {
width: 100%;
height: 9vh;
min-height: 60px;
min-height: 70px;
background: white;
display: flex;
justify-content: space-evenly;

View File

@ -1,3 +1,7 @@
button:active {
background: rgba(0, 0, 0, 0.1);
}
a:active {
background: rgba(0, 0, 0, 0.1);
}

View File

@ -3,7 +3,7 @@ header {
display: flex;
flex-direction: row;
align-items: center;
padding: 15px 15px 15vh 15px;
padding: 15px 15px 12vh 15px;
top: 0;
background: linear-gradient(90deg, var(--colorVT1), var(--colorVT2));
}

View File

@ -3,6 +3,6 @@ main {
flex: 1 1 auto;
display: flex;
flex-flow: column;
justify-content: space-evenly;
justify-content: flex-start;
overflow: hidden scroll;
}

View File

@ -14,15 +14,31 @@
font-weight: 100;
}
#stopTitle div {
display: flex;
flex-direction: row;
#stopTitle h1 {
font-size: 9vw;
}
#stopTitle h3 {
font-size: 5vw;
color: var(--colorDiscrete);
}
@media screen and (min-width: 350px) {
#stopTitle h1 {
font-size: 35px;
}
#stopTitle h3 {
font-size: 20px;
color: var(--colorDiscrete);
}
}
#stopTitle div {
display: flex;
flex-direction: row;
}
#stopTitle button {
width: auto;
height: 100%;

View File

@ -1,6 +1,7 @@
#trafficList {
height: 100%;
margin-top: 40px;
padding-bottom: 40px;
background: white;
}
@ -10,8 +11,9 @@
justify-content: space-evenly;
align-items: center;
width: 100vw;
padding: 6vw 0;
padding: 8vw 0;
background: white;
font-size: 3.5vw;
}
.trafficEntry div {
@ -19,13 +21,25 @@
display: flex;
flex-direction: row;
justify-content: space-evenly;
margin-bottom: 8px;
}
margin-bottom: 2vh;
}
.trafficEntry div:only-child {
margin-bottom: 0;
}
.trafficEntry div:only-child > .timeColumn,
.trafficEntry div:only-child > .lineColumn {
margin-bottom: 0;
}
.trafficEntry div:only-child > .timeColumn {
justify-content: center !important;
}
.trafficEntry div p {
text-align: left;
font-size: 3.5vw;
padding: 3vw 0;
padding: 3vh 0 0 0;
}
.trafficEntry div div {
@ -33,25 +47,6 @@
flex-direction: column;
}
.timeColumn {
flex-basis: 15%;
justify-content: flex-start;
align-items: center;
}
.timeColumn img {
width: 20px;
}
.lineColumn {
flex-basis: 75%;
}
.lineColumn img {
width: 30px;
margin-right: 10px;
}
.trafficEntry div div div {
display: flex;
flex-direction: row;
@ -59,6 +54,53 @@
align-items: flex-end;
}
.timeColumn {
flex-basis: 15%;
justify-content: space-between !important;
align-items: center;
}
.timeColumn div {
align-items: center !important;
}
.timeColumn img {
width: 3.5vw;
}
.lineColumn {
flex-basis: 75%;
max-width: 75%;
}
.lineColumn div {
margin-bottom: 0px;
}
.lineColumn img {
width: 7.5vw;
margin-right: 10px;
}
.infoWrapper p {
text-overflow: ellipsis;
overflow: hidden;
flex-basis: 75%;
flex-grow: 1;
display: block;
white-space: nowrap;
max-height: 3.5vw;
}
.infoWrapper span {
flex-basis: 25%;
}
.expanded {
white-space: normal !important;
max-height: none !important;
}
.lineName {
background: var(--colorLine);
color: white;
@ -69,11 +111,10 @@
}
.destination {
font-size: 100%;
text-align: left;
}
.trafficEntry button {
.trafficEntry a {
width: 90%;
font-size: 4vw;
font-weight: bold;
@ -81,4 +122,5 @@
padding: 4vw 0;
border-radius: var(--borderRadius);
box-shadow: var(--boxShadow);
text-decoration: none;
}

View File

@ -8,7 +8,7 @@ class Tickets extends Component {
return (
<>
<Header title="Biljetter" />
<MainArea>
<MainArea style={{justifyContent: "space-evenly"}}>
<p>Du har inga biljetter</p>
</MainArea>
</>

View File

@ -19,7 +19,7 @@ class TicketsBuy extends Component {
<MenuButton label="Periodbiljett" icon={calendarIcon} />
<MenuButton label="Dygnsbiljett" icon={recurringIcon} />
</TopMenu>
<MainArea>
<MainArea style={{justifyContent: "space-evenly"}}>
<p>Du har inga tidigare köp</p>
</MainArea>
</>

View File

@ -11,33 +11,37 @@ import Departure from "../../classes/Departure.js";
class TrafficInfo extends Component {
render() {
let testStop = new Stop(
"Lemmingsgatan",
["Läge A", "Läge B", "Läge C"],
[
new Departure(
"519",
"Mot Heden",
"11:59",
"Trafikolycka vid Partille Centrum."
),
new Departure("58", "Mot Västra Eriksberg", "12:07"),
]
);
render() {
/* TEST DATA - TO BE REPLACED */
let testStop = new Stop(
"Lemmingsgatan",
["Läge A", "Läge B", "Läge C"],
[
new Departure(
"519",
"Heden",
"11:59",
"Trafikolycka vid Partille Centrum. Olyckan ska ha inträffat i höjd med brandstationen och det är oklart om någon är skadad. Polis på väg. Två av bilarna behöver bärgas från platsen. Inga uppgifter om personskador."
),
new Departure("58", "Västra Eriksberg", "12:07"),
]
);
return (
<>
<Header title="Trafikinfo" />
<TopMenu>
<StopTitle stop={testStop} />
</TopMenu>
<MainArea>
<TrafficList departures={testStop.departures} />
</MainArea>
</>
);
}
testStop.departures[0].timeUpdate("16:50");
/* TEST DATA - TO BE REPLACED */
return (
<>
<Header title="Trafikinfo" />
<TopMenu>
<StopTitle stop={testStop} />
</TopMenu>
<MainArea>
<TrafficList departures={testStop.departures} />
</MainArea>
</>
);
}
}
export default TrafficInfo;

View File

@ -13,9 +13,12 @@ class Travel extends Component {
<>
<Header title="Reseplanering" />
<TopMenu>
<TripSelector />
<TripSelector
from={this.props.location.from}
to={this.props.location.to}
/>
</TopMenu>
<MainArea>
<MainArea style={{justifyContent: "space-evenly"}}>
</MainArea>
</>
);