Present correct information about track in traffic info

src/classes/User.js

@@ -4,14 +4,16 @@
     name     : String           (Användarnamn)
     deviceId : Int              (Enhetens ID)
     location : Coordinates      (Användarens koordinater)
+    track    : String      (Nuvarande hållplatsläge)
 */
 
 class User {
-    constructor(name, deviceId, location, stoppointgid) {
+    constructor(name, deviceId, location, stoppointgid, track) {
         this.name = name;
         this.deviceId = deviceId;
         this.location = location;
         this.stoppointgid = stoppointgid;
+        this.track = track;
     }
 }
 

src/components/SelectUserButton.js

@@ -16,25 +16,30 @@ import departureuser3 from '../APIexamples/departureuser3.json'
 import departureuser4 from '../APIexamples/departureuser4.json'
 
 import Button from './Button.js';
-import disruptIcon from '../img/flash.svg';
+import userIcon from '../img/userDark.svg';
 import globalData from '../GlobalData.js';
 
+
 class SelectUserButton extends Button {
 	selectUser = () => {
         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
         }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
         }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
         }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
 		}

src/components/StopTitle.js

@@ -1,12 +1,38 @@
 import React, { Component } from 'react';
 
+import Button from './Button.js';
+import Popup from './Popup.js';
+
 import './css/StopTitle.css';
 
-class StopTitle extends Component {
-    render() {
 
+class StopTitle extends Component {
+    constructor(props) {
+        super(props);
+        this.popupElem = React.createRef();
+    }
+
+    showPopup = () => {
+        this.popupElem.current.show();
+    };
+
+    hidePopup = () => {
+        this.popupElem.current.hide();
+    };
+
+    render() {
         return (
             <div id="stopTitle">
+                <Popup ref={this.popupElem} className="">
+                    <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>
+                        </>
+                    </ul>
+                </Popup>
+
                 <h1>{this.props.stop.name !== undefined ?
                     this.props.stop.name
                     : "Hållplats saknas"
@@ -15,9 +41,9 @@ class StopTitle extends Component {
                 {this.props.stop.name !== undefined && this.props.stop.track !== undefined ?
                     <div>
                         <h3>
-                            <span>{this.props.stop.track}</span>
+                            <span>{"Läge " + this.props.stop.track}</span>
                         </h3>
-                        <button>Byt Läge</button>
+                        <Button onclick={this.showPopup}>Byt Läge</Button>
                     </div>
                     :
                     (this.props.stop.name !== undefined ?