diff --git a/src/App.js b/src/App.js
index f338a98..41a973a 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,12 +2,12 @@ import "./variables.css";
import "./App.css";
import React, { Component } from "react";
-import { BrowserRouter as Router, Route } from "react-router-dom";
+import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import Snackbar from "@material-ui/core/Snackbar";
+import IconButton from "@material-ui/core/IconButton";
+import globalData from './GlobalData.js';
import BottomMenu from "./components/BottomMenu.js";
-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";
@@ -15,23 +15,52 @@ import Travel from "./components/pages/Travel.js";
import TrafficInfo from "./components/pages/TrafficInfo.js";
import "./variables.css";
+import warningIcon from './img/warning.svg';
+import closeIcon from './img/close.svg';
+
class App extends Component {
- render() {
- return (
-
-
-
-
-
-
-
+ render() {
+ globalData.root = this;
-
-
-
+ return (
+
+
+
+
+
+
+
+
+
+
+
globalData.snackbarVisible = false}
+ message={
+
+
+
Trafikstörning upptäckt
+
+ }
+ action={[
+ { globalData.snackbarVisible = false; globalData.root.forceUpdate() }}
+ >
+ Visa trafikinfo
+
+ ,
+ ]}
+ />
+
+
);
- }
+ }
}
export default App;
diff --git a/src/components/DisruptionButton.js b/src/components/DisruptionButton.js
index af5ddcf..9fb3769 100644
--- a/src/components/DisruptionButton.js
+++ b/src/components/DisruptionButton.js
@@ -23,97 +23,104 @@ import ex2 from '../APIexamples/disruption2.json'
class DisruptionButton extends Button {
- state = {
- jsonLocation: this.props.path,
- disruption: "",
- u1 : user1,
- u2 : user2,
- u3 : user3,
- u4 : user4,
- }
-
+ constructor(props) {
+ super(props);
+ this.state = {
+ jsonLocation: this.props.path,
+ disruption: "",
+ u1: user1,
+ u2: user2,
+ u3: user3,
+ u4: user4,
+ };
+ }
+
updatePage = () => {
globalData.currentPage.forceUpdate();
- }
-
- showMomentTime = (time) => {
- return(time.format("HH:mm"))
- }
+ }
- genUsers = () => {
- if(globalData.users.length < 2){
- this.state.first = true;
- this.state.u1.stop = locationuser1.LocationList.StopLocation[0];
- this.state.u1.stop.departures = departureuser1.DepartureBoard.Departures;
- this.state.u2.stop = locationuser2.LocationList.StopLocation[0];
- this.state.u2.stop.departures = departureuser2.DepartureBoard.Departures;
- this.state.u3.stop = locationuser3.LocationList.StopLocation[0];
- this.state.u3.stop.departures = departureuser3.DepartureBoard.Departures;
- this.state.u4.stop = locationuser4.LocationList.StopLocation[0];
- this.state.u4.stop.departures = departureuser4.DepartureBoard.Departures;
- globalData.users = [
- this.state.u1,
- this.state.u2,
- this.state.u3,
- this.state.u4
- ]
- }
- }
+ showMomentTime = (time) => {
+ return (time.format("HH:mm"))
+ }
- genDisrupt = () => {
- this.genUsers()
+ genUsers = () => {
+ if (globalData.users.length < 2) {
+ this.state.first = true;
+ this.state.u1.stop = locationuser1.LocationList.StopLocation[0];
+ this.state.u1.stop.departures = departureuser1.DepartureBoard.Departures;
+ this.state.u2.stop = locationuser2.LocationList.StopLocation[0];
+ this.state.u2.stop.departures = departureuser2.DepartureBoard.Departures;
+ this.state.u3.stop = locationuser3.LocationList.StopLocation[0];
+ this.state.u3.stop.departures = departureuser3.DepartureBoard.Departures;
+ this.state.u4.stop = locationuser4.LocationList.StopLocation[0];
+ this.state.u4.stop.departures = departureuser4.DepartureBoard.Departures;
+ globalData.users = [
+ this.state.u1,
+ this.state.u2,
+ this.state.u3,
+ this.state.u4
+ ]
+ }
+ }
- this.state.disruption = undefined
- if(this.state.jsonLocation === "ex1"){
- for (let stopPoint of ex1.affectedStopPoints) {
- for (let user of globalData.users){
- if(stopPoint.gid === user.stoppointgid){
- this.state.disruption = ex1;
- var old1t = moment(user.stop.departures[0].time,"HH:mm");
- old1t.add(ex1.time, "HH:mm");
- user.stop.departures[0].newTime = this.showMomentTime(old1t);
- user.stop.departures[0].trafficInfo = ex1.title;
- }
- }
- if(stopPoint.gid === globalData.user.stoppointgid){
- this.state.disruption = ex1;
- var old2t = moment(globalData.stop.departures[0].time,"HH:mm");
- old2t.add(ex1.time, "HH:mm");
- globalData.stop.departures[0].newTime = this.showMomentTime(old2t);
- globalData.stop.departures[0].trafficInfo = ex1.title;
- }
- }
- } else if (this.state.jsonLocation === "ex2"){
- for (let stopPoint of ex2.affectedStopPoints) {
- for (let user of globalData.users){
- if(stopPoint.gid === user.stoppointgid){
- this.state.disruption = ex2;
- var old3t = moment(user.stop.departures[0].time,"HH:mm");
- old3t.add(ex2.time, "HH:mm");
- user.stop.departures[0].newTime = this.showMomentTime(old3t);
- user.stop.departures[0].trafficInfo = ex2.title;
- }
- }
- if(stopPoint.gid === globalData.user.stoppointgid){
- this.state.disruption = ex2;
- var old4t = moment(globalData.stop.departures[0].time,"HH:mm");
- old4t.add(ex2.time, "HH:mm");
- globalData.stop.departures[0].newTime = this.showMomentTime(old4t);
- globalData.stop.departures[0].trafficInfo = ex2.title;
- }
- }
- }
+ genDisrupt = () => {
+ this.genUsers()
- globalData.disruption = this.state.disruption
- }
+ this.state.disruption = undefined
+ if (this.state.jsonLocation === "ex1") {
+ for (let stopPoint of ex1.affectedStopPoints) {
+ for (let user of globalData.users) {
+ if (stopPoint.gid === user.stoppointgid) {
+ this.state.disruption = ex1;
+ var old1t = moment(user.stop.departures[0].time, "HH:mm");
+ old1t.add(ex1.time, "HH:mm");
+ user.stop.departures[0].newTime = this.showMomentTime(old1t);
+ user.stop.departures[0].trafficInfo = ex1.title;
+ }
+ }
+ if (stopPoint.gid === globalData.user.stoppointgid) {
+ this.state.disruption = ex1;
+ var old2t = moment(globalData.stop.departures[0].time, "HH:mm");
+ old2t.add(ex1.time, "HH:mm");
+ globalData.stop.departures[0].newTime = this.showMomentTime(old2t);
+ globalData.stop.departures[0].trafficInfo = ex1.title;
+ globalData.snackbarVisible = true; globalData.root.forceUpdate();
+ }
+ }
+ } else if (this.state.jsonLocation === "ex2") {
+ for (let stopPoint of ex2.affectedStopPoints) {
+ for (let user of globalData.users) {
+ if (stopPoint.gid === user.stoppointgid) {
+ this.state.disruption = ex2;
+ var old3t = moment(user.stop.departures[0].time, "HH:mm");
+ old3t.add(ex2.time, "HH:mm");
+ user.stop.departures[0].newTime = this.showMomentTime(old3t);
+ user.stop.departures[0].trafficInfo = ex2.title;
+ }
+ }
+ if (stopPoint.gid === globalData.user.stoppointgid) {
+ this.state.disruption = ex2;
+ var old4t = moment(globalData.stop.departures[0].time, "HH:mm");
+ old4t.add(ex2.time, "HH:mm");
+ globalData.stop.departures[0].newTime = this.showMomentTime(old4t);
+ globalData.stop.departures[0].trafficInfo = ex2.title;
+ globalData.snackbarVisible = true; globalData.root.forceUpdate();
+ }
+ }
+ }
- render() {
- return (
-
- );
- }
+ globalData.disruption = this.state.disruption
+ }
+
+ render() {
+ return (
+
+
+
+ );
+ }
}
diff --git a/src/img/close.svg b/src/img/close.svg
new file mode 100644
index 0000000..20590cc
--- /dev/null
+++ b/src/img/close.svg
@@ -0,0 +1,12 @@
+
+
+
diff --git a/src/index.css b/src/index.css
index 7f00a1c..7071e84 100644
--- a/src/index.css
+++ b/src/index.css
@@ -32,4 +32,70 @@ button {
.hidden {
opacity: 0;
pointer-events: none;
+}
+
+.MuiSnackbarContent-root {
+ background: white;
+ color: black;
+ justify-content: space-between;
+ padding: 3.5vw 4vw !important;
+}
+
+.MuiSnackbarContent-action {
+ flex-basis: 38%;
+ justify-content: flex-end;
+ margin-left: 0 !important;
+ margin-right: 0 !important;
+ padding-left: 0 !important;
+ height: 7.5vw;
+ align-items: center;
+}
+
+.MuiButtonBase-root{
+ width: 100%;
+ padding: 0 !important;
+ justify-content: space-between;
+}
+
+.MuiButtonBase-root:active {
+ background: none;
+}
+
+.MuiTouchRipple-root {
+ display: none;
+}
+
+.MuiSnackbarContent-message {
+ flex-basis: 60%;
+ padding: 0 !important;
+}
+
+.MuiIconButton-label {
+ justify-content: space-between !important;
+}
+
+.MuiIconButton-label a {
+ align-items: center;
+}
+
+.MuiIconButton-label a {
+ font-size: 3.5vw;
+ color: white;
+ text-decoration: none;
+}
+
+.MuiIconButton-label img {
+ height: 3.5vw;
+}
+
+#snackDisruptInfo {
+ display: flex;
+ height: 7.5vw;
+ align-items: center;
+ font-size: 3.5vw;
+}
+
+#snackDisruptInfo img {
+ height: 100%;
+ margin-right: 15px;
}
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index ef2edf8..03e8e28 100644
--- a/src/index.js
+++ b/src/index.js
@@ -5,10 +5,8 @@ import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
-
-
- ,
- document.getElementById('root')
+ ,
+ document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function