From 1dcd5ea52701be36c9e661ddd42c338c9ae4efc7 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 26 Mar 2019 16:29:27 -0400 Subject: Map of 6ix appears when you press drop pin --- mobile/App.js | 3 ++- mobile/screens/MapPage.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 49 insertions(+), 1 deletion(-) create mode 100644 mobile/screens/MapPage.js 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/screens/MapPage.js b/mobile/screens/MapPage.js new file mode 100644 index 0000000..813432d --- /dev/null +++ b/mobile/screens/MapPage.js @@ -0,0 +1,47 @@ +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, ask user to confirm the location +// 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], + } + } + + /*get_region_coordinates() { + const { navigation } = this.props; + const coordinates = navigation.getParam('coordinates'); + return coordinates; + }*/ + + render() { + return ( + + ); + } + +} \ No newline at end of file -- cgit v1.2.3 From 1e98ac50dc32f1e333811f25ebf06925ada110b3 Mon Sep 17 00:00:00 2001 From: Andrew Date: Tue, 26 Mar 2019 16:39:43 -0400 Subject: 6ix map commit 2.0 --- mobile/components/GreetingPage.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/mobile/components/GreetingPage.js b/mobile/components/GreetingPage.js index 9301fbc..035ee41 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() { // acts like the way
does in JavaScript @@ -95,7 +99,9 @@ export default class GreetingPage extends Component { - + { this.moveToMapPage() }}> -- cgit v1.2.3 From a965012728d50a31b0e2e6fc9668581772fd267a Mon Sep 17 00:00:00 2001 From: Andrew 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 ( - + + + + + { + this.state.markers.map((marker, i) => ( {e.stopPropagation(); this.deleteMarker(i)}} />)) + } + + + + { this.moveToFormPage() }}> + + Proceed + + + ); } -} \ 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 From dbe1de2f2c0cbcd9669d86535c27ce3acb5a2403 Mon Sep 17 00:00:00 2001 From: Andrew Date: Thu, 28 Mar 2019 10:15:00 -0400 Subject: Added a back button to the map page --- mobile/screens/MapPage.js | 24 ++++++++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/mobile/screens/MapPage.js b/mobile/screens/MapPage.js index ea3388b..f8e2a79 100644 --- a/mobile/screens/MapPage.js +++ b/mobile/screens/MapPage.js @@ -43,12 +43,15 @@ export default class Form1 extends Component { this.state.markers[0].latlng.longitude, this.state.markers[0].latlng.latitude] }); - }; + }; + moveToGreetingPage = () => { + this.props.navigation.navigate('GreetingPage'); + } render() { return ( - + + { this.moveToGreetingPage() }}> + + Back + + ); } @@ -84,6 +94,16 @@ const styles = StyleSheet.create( { 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', -- cgit v1.2.3