src/APIexamples/departureuser1.json

@@ -10,7 +10,7 @@
         "journeyNumber": "22",
         "type": "BUS",
         "stopid": "9022014014751002",
-        "stop": "Guddeby",
+        "stop": "Guddeby, Kungälv",
         "time": "09:40",
         "date": "2020-12-11",
         "journeyid": "9015014621000022",
@@ -32,7 +32,7 @@
         "journeyNumber": "2",
         "type": "BUS",
         "stopid": "9022014014751002",
-        "stop": "Guddeby",
+        "stop": "Guddeby, Kungälv",
         "time": "12:29",
         "date": "2020-12-11",
         "journeyid": "9015014692700002",

src/APIexamples/departureuser2.json

@@ -10,7 +10,7 @@
         "journeyNumber": "22",
         "type": "BUS",
         "stopid": "9022014014010002",
-        "stop": "Hålta kyrka",
+        "stop": "Hålta kyrka, Kungälv",
         "time": "09:47",
         "date": "2020-12-11",
         "journeyid": "9015014621000022",
@@ -32,7 +32,7 @@
         "journeyNumber": "2",
         "type": "BUS",
         "stopid": "9022014014010002",
-        "stop": "Hålta kyrka",
+        "stop": "Hålta kyrka, Kungälv",
         "time": "12:38",
         "date": "2020-12-11",
         "journeyid": "9015014692700002",

src/APIexamples/departureuser3.json

@@ -10,7 +10,7 @@
         "journeyNumber": "22",
         "type": "BUS",
         "stopid": "9022014014614002",
-        "stop": "Stenskärsvägen",
+        "stop": "Stenskärsvägen, Kungälv",
         "time": "09:52",
         "date": "2020-12-11",
         "journeyid": "9015014621000022",
@@ -32,7 +32,7 @@
         "journeyNumber": "10",
         "type": "BUS",
         "stopid": "9022014014614002",
-        "stop": "Stenskärsvägen",
+        "stop": "Stenskärsvägen, Kungälv",
         "time": "10:44",
         "date": "2020-12-11",
         "journeyid": "9015014632000010",

src/APIexamples/departureuser4.json

@@ -9,7 +9,7 @@
       "journeyNumber": "10",
       "type": "BUS",
       "stopid": "9022014014225001",
-      "stop": "Skrämmenborg",
+      "stop": "Skrämmenborg, Kungälv",
       "time": "15:19",
       "date": "2020-12-11",
       "journeyid": "9015014692800010",

src/APIexamples/disruption1.json

@@ -4,9 +4,13 @@
     "title":"Nabbensbergsvägen närmast Edsvägen helt avstängd och trafiken hänvisas istället via Korsebergsvägen. Samtidigt tas den tillfälliga förbifarten bort på Edsvägen och trafiken kommer att ledas förbi den nya cirkulationsplatsen i de två västra körfälten tills arbetet på Nabbensbergsvägen är klart Hastighet: 50km/h",
     "time":"00:07",
     "affectedStopPoints":[
+        {
+            "gid": "9022014014010001",
+            "name": "Hålta kyrka, Kungälv"
+        },
         {
             "gid": "9022014014614001",
-            "name": "Stenskärsvägen"
+            "name": "Stenskärsvägen, Kungälv"
         }
     ]
 }

src/APIexamples/disruption2.json

@@ -5,16 +5,8 @@
     "time":"00:09",
     "affectedStopPoints":[
         {
-            "gid": "9022014014751001",
+            "gid": "9022014014762001",
-            "name": "Guddeby"
+            "name": "Kuröd, Kungälv"
-        },
-        {
-            "gid": "9022014014010001",
-            "name": "Hålta kyrka"
-        },
-        {
-            "gid": "9022014014614001",
-            "name": "Stenskärsvägen"
         }
     ]
 }

src/APIexamples/locationuser1.json

@@ -5,27 +5,27 @@
     "serverdate": "2020-12-11",
     "StopLocation": [
       {
-        "name": "Guddeby",
+        "name": "Guddeby, Kungälv",
         "id": "9022014014751001",
         "lat": "57.874665",
         "lon": "11.903884",
         "track": "A"
       },
       {
-        "name": "Guddeby",
+        "name": "Guddeby, Kungälv",
         "id": "9021014014751000",
         "lat": "57.874710",
         "lon": "11.903929"
       },
       {
-        "name": "Guddeby",
+        "name": "Guddeby, Kungälv",
         "id": "9022014014751002",
         "lat": "57.874746",
         "lon": "11.903965",
         "track": "B"
       },
       {
-        "name": "Stället",
+        "name": "Stället, Kungälv",
         "id": "9022014014744001",
         "lat": "57.869784",
         "lon": "11.904172",

src/APIexamples/locationuser2.json

@@ -5,27 +5,27 @@
     "serverdate": "2020-12-11",
     "StopLocation": [
       {
-        "name": "Hålta kyrka",
+        "name": "Hålta kyrka, Kungälv",
         "id": "9022014014010001",
         "lat": "57.895125",
         "lon": "11.827854",
         "track": "A"
       },
       {
-        "name": "Hålta kyrka",
+        "name": "Hålta kyrka, Kungälv",
         "id": "9021014014010000",
         "lat": "57.895206",
         "lon": "11.827647"
       },
       {
-        "name": "Hålta kyrka",
+        "name": "Hålta kyrka, Kungälv",
         "id": "9022014014010002",
         "lat": "57.895278",
         "lon": "11.827440",
         "track": "B"
       },
       {
-        "name": "Hålta skola",
+        "name": "Hålta skola, Kungälv",
         "id": "9022014014015001",
         "lat": "57.896015",
         "lon": "11.824555",

src/APIexamples/locationuser3.json

@@ -5,27 +5,27 @@
     "serverdate": "2020-12-11",
     "StopLocation": [
       {
-        "name": "Stenskärsvägen",
+        "name": "Stenskärsvägen, Kungälv",
         "id": "9022014014614001",
         "lat": "57.894594",
         "lon": "11.740128",
         "track": "A"
       },
       {
-        "name": "Stenskärsvägen",
+        "name": "Stenskärsvägen, Kungälv",
         "id": "9022014014614002",
         "lat": "57.894729",
         "lon": "11.739984",
         "track": "B"
       },
       {
-        "name": "Stenskärsvägen",
+        "name": "Stenskärsvägen, Kungälv",
         "id": "9021014014614000",
         "lat": "57.894738",
         "lon": "11.739858"
       },
       {
-        "name": "Tjuvkilsboden",
+        "name": "Tjuvkilsboden, Kungälv",
         "id": "9022014014615002",
         "lat": "57.892743",
         "lon": "11.743490",

src/APIexamples/locationuser4.json

@@ -5,27 +5,27 @@
     "serverdate": "2020-12-11",
     "StopLocation": [
       {
-        "name": "Kuröd",
+        "name": "Kuröd, Kungälv",
         "id": "9022014014762001",
         "lat": "57.856687",
         "lon": "11.864727",
         "track": "A"
       },
       {
-        "name": "Kuröd",
+        "name": "Kuröd, Kungälv",
         "id": "9021014014762000",
         "lat": "57.856831",
         "lon": "11.864260"
       },
       {
-        "name": "Kuröd",
+        "name": "Kuröd, Kungälv",
         "id": "9022014014762002",
         "lat": "57.856966",
         "lon": "11.863774",
         "track": "B"
       },
       {
-        "name": "Skrämmenborg",
+        "name": "Skrämmenborg, Kungälv",
         "id": "9021014014225000",
         "lat": "57.863528",
         "lon": "11.867406"

src/App.js

@@ -2,12 +2,12 @@ import "./variables.css";
 import "./App.css";
 
 import React, { Component } from "react";
-import { BrowserRouter as Router, Route, Link } from "react-router-dom";
+import { BrowserRouter as Router, Route } 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,21 +15,9 @@ 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 {
-    currentPageName = () => {
-        if (globalData.currentPage.constructor !== undefined)
-            return globalData.currentPage.constructor.name;
-        else
-            return "";
-    };
-    
 	render() {
-        globalData.root = this;
-
 		return (
 			<Router>
 				<div className="App">
@@ -40,32 +28,6 @@ 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() }}
-                            >
-                                {this.currentPageName() !== "TrafficInfo" &&
-                                    <Link to="/traffic">Visa trafikinfo</Link>
-                                }
-                                <img src={closeIcon} alt="" />
-                            </IconButton>,
-                        ]}
-                    />
 				</div>
 			</Router>
 		);

src/GlobalData.js

@@ -14,8 +14,7 @@ let globalData = {
     disruption: new Disruption(
     ),
     stop: new Stop(
-    ),
+    )
-    currentPage: ""
 };
 
 export default globalData;

src/components/DisruptionButton.js

@@ -23,16 +23,13 @@ import ex2 from '../APIexamples/disruption2.json'
 
 
 class DisruptionButton extends Button {
-    constructor(props) {
+	state = {
-        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 = () => {
@@ -40,11 +37,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;
@@ -67,44 +64,42 @@ 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();
 				}
 			}
 		}
@@ -114,11 +109,9 @@ class DisruptionButton extends Button {
 
 	render() {
 		return (
-            <div>
+			<Button onClick={this.props.onClick.concat([this.genDisrupt,this.updatePage])} className="disruptBtn">
-                <Button onClick={this.props.onClick.concat([this.genDisrupt, this.updatePage])} className="disruptBtn">
 				{this.props.children}
 			</Button>
-            </div>
 		);
 	}
 }

src/components/NavigationDrawer.js

@@ -71,10 +71,10 @@ class NavigationDrawer extends Component {
                         <span>example@gmail.com</span>
                     </header>
                     <div id="navList">
-                        <SelectUserButton path={"user1"} username="Guddeby"/>
+                        <SelectUserButton path={"user1"} username="Användare 1"/>
-                        <SelectUserButton path={"user2"} username="Hålta kyrka"/>
+                        <SelectUserButton path={"user2"} username="Användare 2"/>
-                        <SelectUserButton path={"user3"} username="Stenskärsvägen"/>
+                        <SelectUserButton path={"user3"} username="Användare 3"/>
-                        <SelectUserButton path={"user4"} username="Kuröd"/>
+                        <SelectUserButton path={"user4"} username="Användare 4"/>
                         <Button onClick={[this.showPopup, this.close]} className="disruptBtn"><img src={disruptIcon} alt="" />Generera Störning</Button>
                     </div>
                     <hr />

src/components/TrafficEntry.js

@@ -59,10 +59,7 @@ class TrafficEntry extends Component {
                         </div>
                         {lineInterference &&
                             <div className="infoWrapper" onClick={this.toggle}>
-                                <p className={`${this.state.expanded ? "expanded" : ""}`}>
+                                <p className={`${this.state.expanded ? "expanded" : ""}`}>{trafficInfo}</p>
-                                    {trafficInfo}
-                                    <span style={{display: (this.state.expanded ? "inline" : "none"), marginLeft: "5px" }}><u>Visa mindre</u></span>    
-                                </p>
                                 <span style={{display: (this.state.expanded ? "none" : "block") }}><u>Visa mer</u></span>
                             </div>
                         }

src/components/css/StopTitle.css

@@ -16,7 +16,7 @@
 }
 
 #stopTitle h1 {
-    font-size: 3.5vh;
+    font-size: 9vw;
 }
 
 #stopTitle h3 {
@@ -26,7 +26,7 @@
 
 @media screen and (min-width: 400px) {
     #stopTitle h1 {
-        font-size: 4vh;
+        font-size: 35px;
     }
     
     #stopTitle h3 {

src/components/css/TrafficInfo.css

@@ -20,7 +20,7 @@
     width: 90%;
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
+    justify-content: space-evenly;
     margin-bottom: 2vh;
 }
 
@@ -39,7 +39,7 @@
 
 .trafficEntry div p {
     text-align: left;
-    padding: 2vh 0 0 0;
+    padding: 3vh 0 0 0;
 }
 
 .trafficEntry div div {
@@ -50,17 +50,13 @@
 .trafficEntry div div div {
     display: flex;
     flex-direction: row;
-    justify-content: space-around;
+    justify-content: flex-start;
     align-items: flex-end;
 }
 
-.timeColumn div:first-child, .lineColumn div:first-child {
-    height: 5.5vh;
-}
-
 .timeColumn {
-    flex-basis: 20%;
+    flex-basis: 15%;
-    justify-content: flex-start !important;
+    justify-content: space-between !important;
     align-items: center;
 }
 
@@ -82,8 +78,8 @@
 }
 
 .lineColumn img {
-    flex-basis: 25%;
+    width: 7.5vw;
-    height: 9vw;
+    margin-right: 10px;
 }
 
 .infoWrapper p {
@@ -110,20 +106,12 @@
     color: white;
     font-size: 6vw;
     font-weight: 100;
-    padding: 1vw 2.5vw;
+    margin-right: 10px;
-    border-radius: var(--borderRadius);
+    padding: 1vw 4vw;
-    font-family: 'Roboto Light';
-    height: 7vw;
-    flex-basis: 35%;
 }
 
 .destination {
-    flex-basis: 40%;
-    height: 9vw;
-    font-size: 4vw;
     text-align: left;
-    display: flex;
-    align-items: flex-end;
 }
 
 .trafficEntry a {
@@ -135,5 +123,4 @@
     border-radius: var(--borderRadius);
     box-shadow: var(--boxShadow);
     text-decoration: none;
-    border: 1px solid rgba(0, 0, 0, 0.2);
 }

src/img/close.svg

@@ -1,8 +0,0 @@
-<?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">
-<path d="M194.6,164.8L322.7,36.7c8.3-8.3,8.3-21.8,0-30.1s-21.8-8.3-30.1,0l-128.1,128L36.4,6.5c-8.3-8.3-21.8-8.3-30.1,0
-	s-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.2s10.9-2.1,15.1-6.2l128.1-128.1
-	l128,128.1c4.2,4.2,9.6,6.2,15.1,6.2s10.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,76 +33,3 @@ button {
     opacity: 0;
     pointer-events: none;
 }
-
-.MuiSnackbar-root {
-    width: 90%;
-    left: 50% !important;
-    bottom: 90px !important;
-    transform: translateX(-50%);
-}
-
-.MuiSnackbarContent-root {
-    background: white !important;
-    color: black !important;
-    justify-content: space-between;
-    padding: 3.5vw 4vw !important;
-    border: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-.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: flex-end !important;
-}
-
-.MuiIconButton-label a {
-    align-items: center;
-    font-size: 3.5vw;
-    color: black;
-    text-decoration: none;
-    margin-right: 5vw;
-}
-
-.MuiIconButton-label img {
-    height: 3.5vw;
-}
-
-#snackDisruptInfo {
-    display: flex;
-    height: 7.5vw;
-    align-items: center;
-    font-size: 3.5vw;
-    font-weight: bold;
-}
-
-#snackDisruptInfo img {
-    height: 100%;
-    margin-right: 15px;
-}

src/index.js

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