Merge pull request #65 from csc301-winter-2019/feat/20

Feat/20

3 files changed, 130 insertions, 2 deletions

diff --git a/mobile/App.js b/mobile/App.js
index f36b696..703c6eb 100644
--- a/mobile/App.js
+++ b/mobile/App.js
@@ -5,9 +5,10 @@ import { createStackNavigator, createAppContainer } from 'react-navigation';
 
 import GreetingPage from './components/GreetingPage';
 import FormPage from './screens/Form1';
+import MapPage from './screens/MapPage';
 
 
-const RootStack = createStackNavigator( {GreetingPage: GreetingPage, FormPage: FormPage,},
+const RootStack = createStackNavigator( {GreetingPage: GreetingPage, FormPage: FormPage, MapPage: MapPage},
 	{headerMode: 'none'})
 
 const App = createAppContainer(RootStack)
diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js
index 0bc61cf..054d44a 100644
--- a/mobile/components/GreetingPage.js
+++ b/mobile/components/GreetingPage.js
@@ -45,6 +45,10 @@ export default class GreetingPage extends Component {
       });
   };
 
+  moveToMapPage = () => {
+    this.props.navigation.navigate('MapPage');
+  }
+
 
   render() {
     //<View> acts like the way <div> does in JavaScript
@@ -98,7 +102,9 @@ export default class GreetingPage extends Component {
 
         </TouchableHighlight>
 
-        <TouchableHighlight disabled style={styles.second_button_container}>
+        <TouchableHighlight 
+          style={styles.second_button_container}
+          onPress={() => { this.moveToMapPage() }}>
           <View style={styles.press_button}>
 
             <View>
diff --git a/mobile/screens/MapPage.js b/mobile/screens/MapPage.js
new file mode 100644
index 0000000..f8e2a79
--- /dev/null
+++ b/mobile/screens/MapPage.js
@@ -0,0 +1,121 @@
+import React, { Component } from 'react';
+import { Text, View, Alert, StyleSheet, Button, AppRegistry, Navigator, TouchableHighlight, Platform} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { createStackNavigator, createAppContainer } from 'react-navigation';
+import { Location, Permissions, Constants } from 'expo';
+import {MapView} from 'expo';
+
+// press location on map
+// on press, drop pin at location
+// press proceed to redirect to the formpage
+
+
+// default initial map region is Toronto
+
+export default class Form1 extends Component {
+
+	constructor(props) {
+	    super(props);
+	    this.state = {
+	    	initial_region_coordinates: [-79.3832, 43.6532],
+	    	markers: [],
+	    	canProceed: false,
+	    }
+      }
+
+  	addMarker(e) {
+  		this.setState(
+  			{ markers : [{ latlng: e.nativeEvent.coordinate}], canProceed: true}
+  		);
+  	}
+  	deleteMarker() {
+  		this.setState(
+  			{ markers : [], canProceed: false}
+  		);
+  	}
+  	moveToFormPage = () => {
+  		if(this.state.canProceed === false) {
+  			alert("Please press on the map to drop a pin");
+  			return;
+  		}
+	    this.props.navigation.navigate('FormPage',
+	      {coordinates : [
+	          this.state.markers[0].latlng.longitude,
+	          this.state.markers[0].latlng.latitude]
+	      });
+  	};
+  	moveToGreetingPage = () => {
+    	this.props.navigation.navigate('GreetingPage');
+  	}
+
+	render() {
+	    return (
+	    	<View style={{flex:1,}}>
+		    	<View style={{flex:3}}>
+			  		<MapView
+			    		style={{ flex: 1 }}
+			    		initialRegion={{
+			      		latitude: this.state.initial_region_coordinates[1],
+			      		longitude: this.state.initial_region_coordinates[0],
+			      		latitudeDelta: 0.0922,
+			      		longitudeDelta: 0.0421,
+			   			}}
+			   			onPress={this.addMarker.bind(this)}
+			  		>
+
+			  			{
+			  				this.state.markers.map((marker, i) =>  (<MapView.Marker key={i} coordinate={marker.latlng}
+			  				onPress={(e) => {e.stopPropagation(); this.deleteMarker(i)}} />))
+			  			}
+			  		</MapView>
+			  	</View>
+
+			  	<TouchableHighlight 
+			  	style={styles.first_button_container}
+			  	onPress={() => { this.moveToFormPage() }}>
+					 	<Text style={styles.proceed_title}>
+					 		Proceed
+					 	</Text>
+				</TouchableHighlight>
+				<TouchableHighlight 
+			  	style={styles.second_button_container}
+			  	onPress={() => { this.moveToGreetingPage() }}>
+					 	<Text style={styles.proceed_title}>
+					 		Back
+					 	</Text>
+				</TouchableHighlight>
+			</View>
+	    );
+  }
+  
+}
+const styles = StyleSheet.create( {
+	first_button_container: {
+	width: '100%',
+	flex: 1,
+	position: 'absolute',
+    bottom:60,
+    backgroundColor: '#c0392b',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'stretch'
+  },
+  second_button_container: {
+	width: '100%',
+	flex: 1,
+	position: 'absolute',
+    bottom:0,
+    backgroundColor: '#535c68',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'stretch'
+  },
+  proceed_title: {
+    color: '#FFF',
+    marginTop: 15,
+    marginBottom: 35,
+    textAlign: 'center',
+    opacity: 0.9,
+    fontSize: 20
+  }
+})
\ No newline at end of file