From be292c8aa3db89178f065fec405b729e3868379d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Wahlberg?= <andre.wahlberg@outlook.com>
Date: Thu, 10 Dec 2020 13:52:58 +0100
Subject: [PATCH] Change of track and fix minor design flaws

---
 src/components/DisruptionButton.js | 40 ++++++++++++++----------------
 src/components/FindStops.js        | 10 ++++----
 src/components/MenuButton.js       |  4 +--
 src/components/NavigationDrawer.js |  6 ++---
 src/components/SelectUserButton.js | 39 ++++++++++++++---------------
 src/components/StopTitle.js        | 21 +++++++++++++---
 src/components/css/Popup.css       | 18 +++++++++++---
 src/components/css/StopTitle.css   |  5 ++--
 src/components/css/TopMenu.css     |  4 +--
 src/components/css/TrafficInfo.css |  2 +-
 10 files changed, 85 insertions(+), 64 deletions(-)

diff --git a/src/components/DisruptionButton.js b/src/components/DisruptionButton.js
index 08f0dc3..af5ddcf 100644
--- a/src/components/DisruptionButton.js
+++ b/src/components/DisruptionButton.js
@@ -1,4 +1,7 @@
-import globData from '../GlobalData.js';
+import moment from "moment";
+
+import globalData from '../GlobalData.js';
+import Button from './Button.js';
 
 import user1 from '../APIexamples/user1.json'
 import user2 from '../APIexamples/user2.json'
@@ -18,11 +21,6 @@ import departureuser4 from '../APIexamples/departureuser4.json'
 import ex1 from '../APIexamples/disruption1.json'
 import ex2 from '../APIexamples/disruption2.json'
 
-import Button from './Button.js';
-import disruptIcon from '../img/flash.svg';
-
-import globalData from '../GlobalData.js'
-import moment from "moment";
 
 class DisruptionButton extends Button {
 	state = {
@@ -39,12 +37,11 @@ class DisruptionButton extends Button {
 	}
 	
 	showMomentTime = (time) => {
-		//return(time.hours().toString()+ ":"+time.minutes().toString())
 		return(time.format("HH:mm"))
 	}
 
 	genUsers = () => {
-		if(globData.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;
@@ -54,7 +51,7 @@ class DisruptionButton extends Button {
 			this.state.u3.stop.departures = departureuser3.DepartureBoard.Departures;
 			this.state.u4.stop = locationuser4.LocationList.StopLocation[0];
 			this.state.u4.stop.departures = departureuser4.DepartureBoard.Departures;
-			globData.users = [
+			globalData.users = [
 				this.state.u1,
 				this.state.u2,
 				this.state.u3,
@@ -69,7 +66,7 @@ class DisruptionButton extends Button {
 		this.state.disruption = undefined
 		if(this.state.jsonLocation === "ex1"){
 			for (let stopPoint of ex1.affectedStopPoints) {
-				for (let user of globData.users){
+				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");
@@ -78,17 +75,17 @@ class DisruptionButton extends Button {
 						user.stop.departures[0].trafficInfo = ex1.title;
 					}
 				}
-				if(stopPoint.gid === globData.user.stoppointgid){
+				if(stopPoint.gid === globalData.user.stoppointgid){
 					this.state.disruption = ex1;
-					var old2t = moment(globData.stop.departures[0].time,"HH:mm");
+					var old2t = moment(globalData.stop.departures[0].time,"HH:mm");
 					old2t.add(ex1.time, "HH:mm");
-					globData.stop.departures[0].newTime = this.showMomentTime(old2t);
-					globData.stop.departures[0].trafficInfo = ex1.title;
+					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 globData.users){
+				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");
@@ -97,24 +94,23 @@ class DisruptionButton extends Button {
 						user.stop.departures[0].trafficInfo = ex2.title;
 					}
 				}
-				if(stopPoint.gid === globData.user.stoppointgid){
+				if(stopPoint.gid === globalData.user.stoppointgid){
 					this.state.disruption = ex2;
-					var old4t = moment(globData.stop.departures[0].time,"HH:mm");
+					var old4t = moment(globalData.stop.departures[0].time,"HH:mm");
 					old4t.add(ex2.time, "HH:mm");
-					globData.stop.departures[0].newTime = this.showMomentTime(old4t);
-					globData.stop.departures[0].trafficInfo = ex2.title;
+					globalData.stop.departures[0].newTime = this.showMomentTime(old4t);
+					globalData.stop.departures[0].trafficInfo = ex2.title;
 				}
 			}
 		}
 
-		globData.disruption = this.state.disruption
+		globalData.disruption = this.state.disruption
 	}
 
 	render() {
 		return (
 			<Button onClick={this.props.onClick.concat([this.genDisrupt,this.updatePage])} className="disruptBtn">
-				<img src={disruptIcon} alt="" />
-				<span>Generera Störning</span>
+				{this.props.children}
 			</Button>
 		);
 	}
diff --git a/src/components/FindStops.js b/src/components/FindStops.js
index 46a7d0d..9c8cfd1 100644
--- a/src/components/FindStops.js
+++ b/src/components/FindStops.js
@@ -1,5 +1,5 @@
 
-import globData from '../GlobalData.js';
+import globalData from '../GlobalData.js';
 
 import locationuser1 from '../APIexamples/locationuser1.json'
 import locationuser2 from '../APIexamples/locationuser2.json'
@@ -15,13 +15,13 @@ class FindStops extends Button {
         locations : []
     }
 	findStops = () => {
-        if(globData.user.deviceId === "1"){
+        if(globalData.user.deviceId === "1"){
             this.state.locations = locationuser1.LocationList.StopLocation
-        }else if (globData.user.deviceId === "2"){
+        }else if (globalData.user.deviceId === "2"){
             this.state.locations = locationuser2.LocationList.StopLocation
-        }else if (globData.user.deviceId === "3"){
+        }else if (globalData.user.deviceId === "3"){
             this.state.locations = locationuser3.LocationList.StopLocation
-        }else if (globData.user.deviceId === "4"){
+        }else if (globalData.user.deviceId === "4"){
             this.state.locations = locationuser4.LocationList.StopLocation
         }
 	}
diff --git a/src/components/MenuButton.js b/src/components/MenuButton.js
index 0ab96d0..090dbd5 100644
--- a/src/components/MenuButton.js
+++ b/src/components/MenuButton.js
@@ -5,14 +5,14 @@ class MenuButton extends Button {
     render() {
         if (this.props.childOrderReverse) {
             return (
-                <Button>
+                <Button className="menuButton">
                     <span>{this.props.label}</span>
                     <img src={this.props.icon} alt="" />
                 </Button>
             );
         } else {
             return (
-                <Button>
+                <Button className="menuButton">
                     <img src={this.props.icon} alt="" />
                     <span>{this.props.label}</span>
                 </Button>
diff --git a/src/components/NavigationDrawer.js b/src/components/NavigationDrawer.js
index 48a40d7..c4bd993 100644
--- a/src/components/NavigationDrawer.js
+++ b/src/components/NavigationDrawer.js
@@ -9,6 +9,7 @@ import Button from './Button.js';
 import './css/NavigationDrawer.css';
 
 import userIcon from '../img/user.svg';
+import disruptIcon from '../img/flash.svg';
 
 
 class NavigationDrawer extends Component {
@@ -53,11 +54,10 @@ class NavigationDrawer extends Component {
     }
 
     render() {
-
         return (
             <>
                 <Popup ref={this.popupElem}>
-                    <h3>Välj hållplats:</h3>
+                    <h3>Välj scenario:</h3>
                     <ul>
                         <li><DisruptionButton path={"ex1"} onClick={[this.hidePopup]}>Störningsscenario 1</DisruptionButton></li>
                         <li><DisruptionButton path={"ex2"} onClick={[this.hidePopup]}>Störningsscenario 2</DisruptionButton></li>
@@ -75,7 +75,7 @@ class NavigationDrawer extends Component {
                         <SelectUserButton path={"user2"} username="Användare 2"/>
                         <SelectUserButton path={"user3"} username="Användare 3"/>
                         <SelectUserButton path={"user4"} username="Användare 4"/>
-                        <Button onClick={[this.showPopup, this.close]}><span>Generera Störning</span></Button>
+                        <Button onClick={[this.showPopup, this.close]} className="disruptBtn"><img src={disruptIcon} alt="" />Generera Störning</Button>
                     </div>
                     <hr />
                     <span id="version">Projektgrupp 3 - Utmaning 7</span>
diff --git a/src/components/SelectUserButton.js b/src/components/SelectUserButton.js
index aeb5da8..1f80fba 100644
--- a/src/components/SelectUserButton.js
+++ b/src/components/SelectUserButton.js
@@ -1,4 +1,4 @@
-import globData from '../GlobalData.js';
+import globalData from '../GlobalData.js';
 
 import user1 from '../APIexamples/user1.json'
 import user2 from '../APIexamples/user2.json'
@@ -17,7 +17,6 @@ import departureuser4 from '../APIexamples/departureuser4.json'
 
 import Button from './Button.js';
 import userIcon from '../img/userDark.svg';
-import globalData from '../GlobalData.js';
 
 
 class SelectUserButton extends Button {
@@ -30,7 +29,7 @@ class SelectUserButton extends Button {
 	}
 
 	genUsers = () => {
-		if(globData.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;
@@ -40,7 +39,7 @@ class SelectUserButton extends Button {
 			this.state.u3.stop.departures = departureuser3.DepartureBoard.Departures;
 			this.state.u4.stop = locationuser4.LocationList.StopLocation[0];
 			this.state.u4.stop.departures = departureuser4.DepartureBoard.Departures;
-			globData.users = [
+			globalData.users = [
 				this.state.u1,
 				this.state.u2,
 				this.state.u3,
@@ -53,25 +52,25 @@ class SelectUserButton extends Button {
 		this.genUsers()
 
         if(this.props.path === "user1"){
-			globData.user = user1
-			globData.user.track = locationuser1.LocationList.StopLocation[0].track
-			globData.stop = locationuser1.LocationList.StopLocation[0]
-            globData.stop.departures = departureuser1.DepartureBoard.Departures
+			globalData.user = user1
+			globalData.user.track = locationuser1.LocationList.StopLocation[0].track
+			globalData.stop = locationuser1.LocationList.StopLocation[0]
+            globalData.stop.departures = departureuser1.DepartureBoard.Departures
         }else if (this.props.path === "user2"){
-			globData.user = user2
-            globData.user.track = locationuser2.LocationList.StopLocation[0].track
-			globData.stop = locationuser2.LocationList.StopLocation[0]
-			globData.stop.departures = departureuser2.DepartureBoard.Departures
+			globalData.user = user2
+            globalData.user.track = locationuser2.LocationList.StopLocation[0].track
+			globalData.stop = locationuser2.LocationList.StopLocation[0]
+			globalData.stop.departures = departureuser2.DepartureBoard.Departures
         }else if (this.props.path === "user3"){
-			globData.user = user3
-			globData.user.track = locationuser3.LocationList.StopLocation[0].track
-            globData.stop = locationuser3.LocationList.StopLocation[0]
-			globData.stop.departures = departureuser3.DepartureBoard.Departures
+			globalData.user = user3
+			globalData.user.track = locationuser3.LocationList.StopLocation[0].track
+            globalData.stop = locationuser3.LocationList.StopLocation[0]
+			globalData.stop.departures = departureuser3.DepartureBoard.Departures
         }else if (this.props.path === "user4"){
-            globData.user = user4
-			globData.user.track = locationuser4.LocationList.StopLocation[0].track
-			globData.stop = locationuser4.LocationList.StopLocation[0]
-			globData.stop.departures = departureuser4.DepartureBoard.Departures
+            globalData.user = user4
+			globalData.user.track = locationuser4.LocationList.StopLocation[0].track
+			globalData.stop = locationuser4.LocationList.StopLocation[0]
+			globalData.stop.departures = departureuser4.DepartureBoard.Departures
 		}
 	}
     
diff --git a/src/components/StopTitle.js b/src/components/StopTitle.js
index f8719ca..dcdfcc5 100644
--- a/src/components/StopTitle.js
+++ b/src/components/StopTitle.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 
 import Button from './Button.js';
 import Popup from './Popup.js';
+import globalData from '../GlobalData.js';
 
 import './css/StopTitle.css';
 
@@ -20,6 +21,18 @@ class StopTitle extends Component {
         this.popupElem.current.hide();
     };
 
+    setTrackA = () => {
+        globalData.user.track = "A";
+    };
+
+    setTrackB = () => {
+        globalData.user.track = "B";
+    };
+
+    updatePage = () => {
+        globalData.currentPage.forceUpdate();
+	}
+
     render() {
         return (
             <div id="stopTitle">
@@ -27,8 +40,8 @@ class StopTitle extends Component {
                     <h3>Välj läge:</h3>
                     <ul>
                         <>
-                            <li><Button onClick={[this.hidePopup]}>{"Läge A"}</Button></li>
-                            <li><Button onClick={[this.hidePopup]}>{"Läge B"}</Button></li>
+                            <li><Button onClick={[this.setTrackA, this.updatePage, this.hidePopup]}>{"Läge A"}</Button></li>
+                            <li><Button onClick={[this.setTrackB, this.updatePage, this.hidePopup]}>{"Läge B"}</Button></li>
                         </>
                     </ul>
                 </Popup>
@@ -41,9 +54,9 @@ class StopTitle extends Component {
                 {this.props.stop.name !== undefined && this.props.stop.track !== undefined ?
                     <div>
                         <h3>
-                            <span>{"Läge " + this.props.stop.track}</span>
+                            <span>{"Läge " + globalData.user.track}</span>
                         </h3>
-                        <Button onclick={this.showPopup}>Byt Läge</Button>
+                        <Button className="changeTrackBtn" onClick={[this.showPopup]}>Byt Läge</Button>
                     </div>
                     :
                     (this.props.stop.name !== undefined ?
diff --git a/src/components/css/Popup.css b/src/components/css/Popup.css
index b244b0f..2bec33e 100644
--- a/src/components/css/Popup.css
+++ b/src/components/css/Popup.css
@@ -5,6 +5,8 @@
     transform: translate(-50%, -50%) scale(0);
     transform-origin: center;
     background: white;
+    display: flex !important;
+    flex-direction: column !important;
     width: 55vw;
     height: 39vh;
     padding: 3vh 5vw;
@@ -21,16 +23,26 @@
 
 .popup h3 {
     margin-bottom: 20px;
+    display: block;
+    font-size: 1.17em;
+    font-weight: bold !important;
+    text-align: center;
+    color: black !important;
 }
 
 .popup ul {
     list-style: none;
+    width: 100%;
 }
 
 .popup li button {
-    width: 100%;
-    padding: 8% 0;
-    font-size: 16px;
+    width: 100% !important;
+    height: 50px;
+    padding: 8% 0 !important;
+    font-size: 16px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .popupClose {
diff --git a/src/components/css/StopTitle.css b/src/components/css/StopTitle.css
index 8063d66..2607aac 100644
--- a/src/components/css/StopTitle.css
+++ b/src/components/css/StopTitle.css
@@ -38,9 +38,10 @@
 #stopTitle div {
     display: flex;
     flex-direction: row;
+    align-items: center;
 }
 
-#stopTitle button {
+.changeTrackBtn {
     width: auto;
     height: 100%;
     box-shadow: none;
@@ -52,6 +53,6 @@
     border-radius: calc(var(--topMenuHeight) / 15);
 }
 
-#stopTitle button:active {
+.changeTrackBtn:active {
     background: rgba(0, 0, 0, 0.3);
 }
\ No newline at end of file
diff --git a/src/components/css/TopMenu.css b/src/components/css/TopMenu.css
index 74b52d0..eec9bb0 100644
--- a/src/components/css/TopMenu.css
+++ b/src/components/css/TopMenu.css
@@ -6,7 +6,7 @@
     justify-content: space-evenly;
 }
 
-#topMenu button {
+#topMenu .menuButton {
     width: var(--topMenuHeight);
     height: calc(var(--topMenuHeight) / 1.3);
     display: flex;
@@ -17,7 +17,7 @@
     box-shadow: var(--boxShadow);
 }
 
-#topMenu button:active {
+#topMenu .menuButton:active {
     background: rgb(235, 235, 235);
 }
 
diff --git a/src/components/css/TrafficInfo.css b/src/components/css/TrafficInfo.css
index 5b2333f..b9e8775 100644
--- a/src/components/css/TrafficInfo.css
+++ b/src/components/css/TrafficInfo.css
@@ -89,7 +89,7 @@
     flex-grow: 1;
     display: block;
     white-space: nowrap;
-    max-height: 3.5vw;
+    max-height: 4.5vw;
 }
 
 .infoWrapper span {