From a965012728d50a31b0e2e6fc9668581772fd267a Mon Sep 17 00:00:00 2001
From: Andrew <andrew.mihai@mail.utoronto.ca>
Date: Wed, 27 Mar 2019 21:47:13 -0400
Subject: Drop pin feature completed

---
 mobile/screens/MapPage.js | 94 +++++++++++++++++++++++++++++++++++++----------
 1 file changed, 74 insertions(+), 20 deletions(-)

diff --git a/mobile/screens/MapPage.js b/mobile/screens/MapPage.js
index 813432d..ea3388b 100644
--- a/mobile/screens/MapPage.js
+++ b/mobile/screens/MapPage.js
@@ -6,42 +6,96 @@ import { Location, Permissions, Constants } from 'expo';
 import {MapView} from 'expo';
 
 // press location on map
-// on press, drop pin at location, ask user to confirm the location
-// redirect to the formpage
+// on press, drop pin at location
+// press proceed to redirect to the formpage
 
 
 // default initial map region is Toronto
-//var Initial_region_coordinates = [-79.3832, 43.6532];
 
 export default class Form1 extends Component {
 
 	constructor(props) {
 	    super(props);
-	    // const { navigation } = this.props;
-    	// const coordinates = navigation.getParam('coordinates');
 	    this.state = {
 	    	initial_region_coordinates: [-79.3832, 43.6532],
+	    	markers: [],
+	    	canProceed: false,
 	    }
       }
 
-	/*get_region_coordinates() {
-		const { navigation } = this.props;
-    	const coordinates = navigation.getParam('coordinates');
-    	return coordinates;
-	}*/
+  	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]
+	      });
+  };
 
 	render() {
 	    return (
-		  		<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,
-		   			}}
-		  		/>
+	    	<View style={{flex:1,}}>
+		    	<View style={{flex:1}}>
+			  		<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>
+			</View>
 	    );
   }
   
-}
\ No newline at end of file
+}
+const styles = StyleSheet.create( {
+	first_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
-- 
cgit v1.2.3