Add snackbar notification for disruptions

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,9 +15,14 @@ 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() {
+        globalData.root = this;
+
         return (
             <Router>
                 <div className="App">
@@ -28,6 +33,30 @@ class App extends Component {
                     <Route path="/traffic" exact component={TrafficInfo} />
 
                     <BottomMenu />
+
+                    <Snackbar
+                        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+                        open={globalData.snackbarVisible}
+                        autoHideDuration={3000}
+                        onClose={() => globalData.snackbarVisible = false}
+                        message={
+                            <div id="snackDisruptInfo">
+                                <img src={warningIcon} alt="" />
+                                <span id="message-id">Trafikstörning upptäckt</span>
+                            </div>
+                        }
+                        action={[
+                            <IconButton
+                                key="close"
+                                aria-label="Close"
+                                color="inherit"
+                                onClick={() => { globalData.snackbarVisible = false; globalData.root.forceUpdate() }}
+                            >
+                                <Link to="/traffic">Visa trafikinfo</Link>
+                                <img src={closeIcon} alt="" />
+                            </IconButton>,
+                        ]}
+                    />
                 </div>
             </Router>
 		);

src/components/DisruptionButton.js

@@ -23,13 +23,16 @@ import ex2 from '../APIexamples/disruption2.json'
 
 
 class DisruptionButton extends Button {
-	state = {
+    constructor(props) {
+        super(props);
+        this.state = {
             jsonLocation: this.props.path,
             disruption: "",
-		u1 : user1,
+            u1: user1,
-		u2 : user2,
+            u2: user2,
-		u3 : user3,
+            u3: user3,
-		u4 : user4,
+            u4: user4,
+        };
     }
 
     updatePage = () => {
@@ -37,11 +40,11 @@ class DisruptionButton extends Button {
     }
 
     showMomentTime = (time) => {
-		return(time.format("HH:mm"))
+        return (time.format("HH:mm"))
     }
 
     genUsers = () => {
-		if(globalData.users.length < 2){
+        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;
@@ -64,42 +67,44 @@ class DisruptionButton extends Button {
         this.genUsers()
 
         this.state.disruption = undefined
-		if(this.state.jsonLocation === "ex1"){
+        if (this.state.jsonLocation === "ex1") {
             for (let stopPoint of ex1.affectedStopPoints) {
-				for (let user of globalData.users){
+                for (let user of globalData.users) {
-					if(stopPoint.gid === user.stoppointgid){
+                    if (stopPoint.gid === user.stoppointgid) {
                         this.state.disruption = ex1;
-						var old1t = moment(user.stop.departures[0].time,"HH:mm");
+                        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){
+                if (stopPoint.gid === globalData.user.stoppointgid) {
                     this.state.disruption = ex1;
-					var old2t = moment(globalData.stop.departures[0].time,"HH:mm");
+                    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"){
+        } else if (this.state.jsonLocation === "ex2") {
             for (let stopPoint of ex2.affectedStopPoints) {
-				for (let user of globalData.users){
+                for (let user of globalData.users) {
-					if(stopPoint.gid === user.stoppointgid){
+                    if (stopPoint.gid === user.stoppointgid) {
                         this.state.disruption = ex2;
-						var old3t = moment(user.stop.departures[0].time,"HH:mm");
+                        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){
+                if (stopPoint.gid === globalData.user.stoppointgid) {
                     this.state.disruption = ex2;
-					var old4t = moment(globalData.stop.departures[0].time,"HH:mm");
+                    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();
                 }
             }
         }
@@ -109,9 +114,11 @@ class DisruptionButton extends Button {
 
     render() {
         return (
-			<Button onClick={this.props.onClick.concat([this.genDisrupt,this.updatePage])} className="disruptBtn">
+            <div>
+                <Button onClick={this.props.onClick.concat([this.genDisrupt, this.updatePage])} className="disruptBtn">
                     {this.props.children}
                 </Button>
+            </div>
         );
     }
 }

src/img/close.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 329 329" style="enable-background:new 0 0 329 329;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FFFFFF;}
+</style>
+<path class="st0" d="M194.6,164.8L322.7,36.7c8.3-8.3,8.3-21.8,0-30.1c-8.3-8.3-21.8-8.3-30.1,0L164.5,134.6L36.4,6.5
+	c-8.3-8.3-21.8-8.3-30.1,0c-8.3,8.3-8.3,21.8,0,30.1l128.1,128.1L6.3,292.9c-8.3,8.3-8.3,21.8,0,30.1c4.2,4.2,9.6,6.2,15.1,6.2
+	s10.9-2.1,15.1-6.2l128.1-128.1L292.6,323c4.2,4.2,9.6,6.2,15.1,6.2c5.5,0,10.9-2.1,15.1-6.2c8.3-8.3,8.3-21.8,0-30.1L194.6,164.8z"
+	/>
+</svg>

src/index.css

@@ -33,3 +33,69 @@ button {
     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;
+}

src/index.js

@@ -5,9 +5,7 @@ import App from './App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(
-  <React.StrictMode>
+    <App />,
-    <App />
-  </React.StrictMode>,
     document.getElementById('root')
 );