Merge pull request #11 from thefeli73/we-location-select

Add: More progress regarding findstops button

src/components/FindStops.js

@@ -6,22 +6,23 @@ import locationuser2 from '../APIexamples/locationuser2.json'
 import locationuser3 from '../APIexamples/locationuser3.json'
 import locationuser4 from '../APIexamples/locationuser4.json'
 
+import StopSelectButton from './StopSelectButton.js';
 import Button from './Button.js';
 import disruptIcon from '../img/flash.svg';
 
 class FindStops extends Button {
     state = {
-        locations : ""
+        locations : []
     }
 	findStops = () => {
         if(globData.user.deviceId === "1"){
-            this.state.locations = locationuser1.StopLocation
+            this.state.locations = locationuser1.LocationList.StopLocation
         }else if (globData.user.deviceId === "2"){
-            this.state.locations = locationuser2.StopLocation
+            this.state.locations = locationuser2.LocationList.StopLocation
         }else if (globData.user.deviceId === "3"){
-            this.state.locations = locationuser3.StopLocation
+            this.state.locations = locationuser3.LocationList.StopLocation
         }else if (globData.user.deviceId === "4"){
-            this.state.locations = locationuser4.StopLocation
+            this.state.locations = locationuser4.LocationList.StopLocation
         }
 	}
 
@@ -32,6 +33,9 @@ class FindStops extends Button {
                     <img src={disruptIcon} alt="" />
                     <span>Select nearby stops</span>
                 </Button>
+                {this.state.locations.map((item) => 
+                    <StopSelectButton stop={item}/>
+                )}
             </>
 		);
 	}

src/components/NavigationDrawer.js

@@ -9,6 +9,7 @@ import Button from './Button.js';
 import './css/NavigationDrawer.css';
 
 import userIcon from '../img/user.svg';
+import FindStops from './FindStops.js';
 
 
 class NavigationDrawer extends Component {
@@ -68,6 +69,7 @@ class NavigationDrawer extends Component {
                         <SelectUserButton path={"user2"} username="user2"/>
                         <SelectUserButton path={"user3"} username="user3"/>
                         <SelectUserButton path={"user4"} username="user4"/>
+                        <FindStops/>
                         <DisruptionButton path={"ex1"} onClick={[this.showPopup, this.close]} />
                         <DisruptionButton path={"ex2"} onClick={[this.showPopup, this.close]} />
                     </div>

src/components/StopSelectButton.js

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import globalData from '../GlobalData';
+import Button from './Button.js';
+
+class StopSelectButton extends Component {
+
+    selectStop = () => {
+        globalData.stop = this.props.stop
+    }
+
+    render() {
+        return (
+            <>
+                <Button onClick={[this.selectStop]}>
+                    <span>{this.props.stop.name}</span>
+                </Button>
+            </>
+        );
+    }
+}
+// TODO Add css
+export default StopSelectButton