edited
This commit is contained in:
185
app/containers/Location/location.js
Executable file
185
app/containers/Location/location.js
Executable file
@@ -0,0 +1,185 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Platform,
|
||||
StyleSheet,
|
||||
Text,
|
||||
View,
|
||||
Alert,
|
||||
NetInfo,
|
||||
Geolocation
|
||||
} from "react-native";
|
||||
import Header from "../../components/Public/header";
|
||||
import { observer, inject } from "mobx-react/native";
|
||||
import { observable, transaction } from "mobx";
|
||||
import { width, height } from "../../config/screen";
|
||||
import MapView, { Polyline } from "react-native-maps";
|
||||
import MapViewDirections from "react-native-maps-directions";
|
||||
import AsyncStorageHelper from "../../config/asyncStorageHelper";
|
||||
|
||||
const asyncStorageHelper = new AsyncStorageHelper();
|
||||
|
||||
const origin = { latitude: 22.320508, longitude: 114.170222 };
|
||||
const destination = { latitude: 22.320568, longitude: 114.171273 };
|
||||
const GOOGLE_MAPS_APIKEY = "AIzaSyB_9Wi7BcAgqMPxZvW_5DWb8UxF5W9tWz0";
|
||||
|
||||
export const getCurrentLocation = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
position => resolve(position),
|
||||
e => reject(e)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class Location extends Component {
|
||||
title = "";
|
||||
pickUpPointLoaction = { latitude: 0, longitude: 0 };
|
||||
|
||||
static navigationOptions = {
|
||||
drawerLabel: "My Orders"
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.menuStore;
|
||||
this.userStore = this.props.userStore;
|
||||
this.state = {
|
||||
region: {
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
latitudeDelta: 1,
|
||||
longitudeDelta: 1
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
getIndex(id) {
|
||||
var index = this.userStore.pickupPointLabel.findIndex(function(item, i) {
|
||||
return item.id == parseInt(id);
|
||||
});
|
||||
|
||||
return index;
|
||||
}
|
||||
|
||||
getUserLocation() {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
position => {
|
||||
this.userStore.userLocation = position;
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
},
|
||||
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
|
||||
);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const { navigation } = this.props;
|
||||
this.getUserLocation();
|
||||
this.title = navigation.getParam("title", "Location");
|
||||
this.pickUpPointLoaction = navigation.getParam("location", {
|
||||
latitude: 0,
|
||||
longitude: 0
|
||||
});
|
||||
this.setState({
|
||||
region: {
|
||||
latitude: this.userStore.userLocation.coords.latitude,
|
||||
longitude: this.userStore.userLocation.coords.longitude,
|
||||
latitudeDelta: 0.02,
|
||||
longitudeDelta: 0.02
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
clickMarkerAction(id) {
|
||||
Alert.alert(
|
||||
"",
|
||||
"Select " +
|
||||
this.userStore.pickupPointLabel[this.getIndex(id)].value +
|
||||
"?",
|
||||
[
|
||||
{ text: "Cancel", onPress: () => console.log("Cancel") },
|
||||
{ text: "Yes", onPress: () => this.picked(id) }
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
picked(id) {
|
||||
asyncStorageHelper.saveData("pickupPointId", id);
|
||||
this.store.getMenuItem();
|
||||
this.props.navigation.goBack();
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this.userStore.userLocation);
|
||||
if (this.title == "Pick the loaction") {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Header title={this.title} navigation={this.props.navigation} />
|
||||
<MapView
|
||||
style={{ width: width, height: 400 }}
|
||||
showsUserLocation={true}
|
||||
initialRegion={this.state.region}
|
||||
>
|
||||
{this.userStore.pickupLoactionPoint.data.content.map(marker => (
|
||||
<MapView.Marker
|
||||
coordinate={{ latitude: marker.lat, longitude: marker.lng }}
|
||||
title={marker.name}
|
||||
onPress={() => this.clickMarkerAction(marker.id)}
|
||||
/>
|
||||
))}
|
||||
</MapView>
|
||||
</View>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Header title={this.title} navigation={this.props.navigation} />
|
||||
<MapView
|
||||
style={{ width: width, height: 400 }}
|
||||
showsUserLocation={true}
|
||||
initialRegion={this.state.region}
|
||||
>
|
||||
<MapView.Marker
|
||||
coordinate={{
|
||||
latitude: this.userStore.userLocation.coords.latitude,
|
||||
longitude: this.userStore.userLocation.coords.longitude
|
||||
}}
|
||||
/>
|
||||
<MapView.Marker coordinate={this.pickUpPointLoaction} />
|
||||
<MapViewDirections
|
||||
origin={{latitude: this.userStore.userLocation.coords.latitude,
|
||||
longitude: this.userStore.userLocation.coords.longitude,}}
|
||||
destination={this.pickUpPointLoaction}
|
||||
apikey={GOOGLE_MAPS_APIKEY}
|
||||
mode = 'walking'
|
||||
strokeWidth={3}
|
||||
strokeColor="red"
|
||||
/>
|
||||
)
|
||||
</MapView>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F5FCFF"
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: "center",
|
||||
margin: 10
|
||||
},
|
||||
instructions: {
|
||||
textAlign: "center",
|
||||
color: "#333333",
|
||||
marginBottom: 5
|
||||
}
|
||||
});
|
||||
390
app/containers/Location/locationRequest.js
Executable file
390
app/containers/Location/locationRequest.js
Executable file
@@ -0,0 +1,390 @@
|
||||
import React, { Component } from "react";
|
||||
import {
|
||||
Platform,
|
||||
StyleSheet,
|
||||
View,
|
||||
Alert,
|
||||
NetInfo,
|
||||
Geolocation,
|
||||
TouchableOpacity,
|
||||
SafeAreaView,
|
||||
StatusBar,
|
||||
Image,
|
||||
ImageBackground
|
||||
} from "react-native";
|
||||
import Header from "../../components/Public/header";
|
||||
import Text from "react-native-text";
|
||||
import { SearchBar } from "react-native-elements";
|
||||
import { observer, inject } from "mobx-react/native"
|
||||
import { Fonts } from "../../config/fonts";;
|
||||
import { observable, transaction } from "mobx";
|
||||
import { scale, verticalScale, moderateScale } from "react-native-size-matters";
|
||||
import { width, height } from "../../config/screen";
|
||||
import MapView, { Polyline } from "react-native-maps";
|
||||
import MapViewDirections from "react-native-maps-directions";
|
||||
import AsyncStorageHelper from "../../config/asyncStorageHelper";
|
||||
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view";
|
||||
import { ifIphoneX } from 'react-native-iphone-x-helper'
|
||||
import theme from "../../config/colors";
|
||||
import FastImage from "react-native-fast-image";
|
||||
import MyStatusBar from "../../components/Public/statusBar";
|
||||
const asyncStorageHelper = new AsyncStorageHelper();
|
||||
import Log from '../../config/log'
|
||||
import { GooglePlacesAutocomplete } from "react-native-google-places-autocomplete";
|
||||
const origin = { latitude: 22.320508, longitude: 114.170222 };
|
||||
const destination = { latitude: 22.320568, longitude: 114.171273 };
|
||||
const GOOGLE_MAPS_APIKEY = "AIzaSyBM8eEWcSWBuZcM0lGH_JSoDjgImlqHwPs";
|
||||
const log = new Log()
|
||||
export const getCurrentLocation = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
position => resolve(position),
|
||||
e => reject(e)
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
@inject(["menuStore"], ["userStore"])
|
||||
@observer
|
||||
export default class LocationRequest extends Component {
|
||||
@observable
|
||||
markerId = null;
|
||||
title = "";
|
||||
pickUpPointLoaction = { latitude: 0, longitude: 0 };
|
||||
perdefinedPlaces = [];
|
||||
|
||||
static navigationOptions = {
|
||||
drawerLabel: "My Orders"
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.store = this.props.menuStore;
|
||||
this.userStore = this.props.userStore;
|
||||
this.state = {
|
||||
region: {
|
||||
latitude: null,
|
||||
longitude: null,
|
||||
latitudeDelta: 1,
|
||||
longitudeDelta: 1
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
navigatieAction(page) {
|
||||
this.props.navigation.navigate(page);
|
||||
}
|
||||
|
||||
_requestPermission() {
|
||||
Permissions.request("location").then(response => {
|
||||
|
||||
if (
|
||||
response == "allow" ||
|
||||
response == "restricted" ||
|
||||
response == "authorized"
|
||||
) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
position => {
|
||||
this.userStore.userLocation = position;
|
||||
console.log(position);
|
||||
// self.navigatieAction("LocationRequest");
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
// self.navigatieAction("LocationRequest");
|
||||
},
|
||||
{ enableHighAccuracy: false, timeout: 4000, maximumAge: 10000 }
|
||||
);
|
||||
} else {
|
||||
// self.navigatieAction("LocationRequest");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
onClickAction(data, details) {
|
||||
this.map.animateToRegion({
|
||||
latitude: details.geometry.location.lat,
|
||||
longitude: details.geometry.location.lng,
|
||||
latitudeDelta: 0.02,
|
||||
longitudeDelta: 0.02
|
||||
});
|
||||
|
||||
for (var i = 0; i < this.userStore.perdefinedPlaces.length; i++) {
|
||||
if (
|
||||
this.userStore.perdefinedPlaces[i].geometry.location.lat ==
|
||||
details.geometry.location.lat &&
|
||||
this.userStore.perdefinedPlaces[i].geometry.location.lng ==
|
||||
details.geometry.location.lng
|
||||
) {
|
||||
this.markerId = this.userStore.perdefinedPlaces[i].id
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
console.log(details);
|
||||
}
|
||||
|
||||
googlePlacesAutoComplete() {
|
||||
return (
|
||||
<View
|
||||
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
backgroundColor: theme.mainColor,
|
||||
...ifIphoneX(
|
||||
{
|
||||
//height:'10%'
|
||||
},{
|
||||
|
||||
}
|
||||
)
|
||||
}}
|
||||
>
|
||||
|
||||
<GooglePlacesAutocomplete
|
||||
placeholder={this.userStore.text.googleSearch}
|
||||
placeholderTextColor="white"
|
||||
minLength={1} // minimum length of text to search
|
||||
autoFocus={false}
|
||||
returnKeyType={"search"} // Can be left out for default return key https://facebook.github.io/react-native/docs/textinput.html#returnkeytype
|
||||
listViewDisplayed="false" // true/false/undefined
|
||||
fetchDetails={true}
|
||||
renderDescription={row => row.description} // custom description render
|
||||
onPress={(data, details = null) => {
|
||||
this.onClickAction(data, details);
|
||||
}}
|
||||
getDefaultValue={() => ""}
|
||||
query={{
|
||||
// available options: https://developers.google.com/places/web-service/autocomplete
|
||||
key: GOOGLE_MAPS_APIKEY,
|
||||
language: "zh-TW||en", // language of the results
|
||||
types: ["(cities)", "(country)"],
|
||||
components: "country:hk" // default: 'geocode'
|
||||
}}
|
||||
styles={{
|
||||
textInputContainer: {
|
||||
backgroundColor: theme.mainColor,
|
||||
borderTopWidth: 0,
|
||||
borderBottomWidth: 0,
|
||||
width: width,
|
||||
paddingRight: 20,
|
||||
paddingLeft: 20,
|
||||
marginBottom: 10
|
||||
},
|
||||
textInput: {
|
||||
textAlign: "center",
|
||||
height: verticalScale(40),
|
||||
color: "white",
|
||||
fontSize: 16,
|
||||
borderWidth: 0,
|
||||
backgroundColor: theme.searchMapInputColor,
|
||||
fontFamily: Fonts.century,
|
||||
fontWeight: "bold"
|
||||
},
|
||||
description: {
|
||||
fontWeight: "bold"
|
||||
},
|
||||
listView: {
|
||||
backgroundColor: "white"
|
||||
},
|
||||
predefinedPlacesDescription: {
|
||||
color: "#1faadb",
|
||||
}
|
||||
}}
|
||||
currentLocation={false} // Will add a 'Current location' button at the top of the predefined places list
|
||||
currentLocationLabel="Current location"
|
||||
nearbyPlacesAPI="GooglePlacesSearch" // Which API to use: GoogleReverseGeocoding or GooglePlacesSearch
|
||||
GoogleReverseGeocodingQuery={
|
||||
{
|
||||
// available options for GoogleReverseGeocoding API : https://developers.google.com/maps/documentation/geocoding/intro
|
||||
}
|
||||
}
|
||||
GooglePlacesSearchQuery={{
|
||||
// available options for GooglePlacesSearch API : https://developers.google.com/places/web-service/search
|
||||
rankby: "distance",
|
||||
types: "food"
|
||||
}}
|
||||
filterReverseGeocodingByTypes={[
|
||||
"locality",
|
||||
"administrative_area_level_3"
|
||||
]} // filter the reverse geocoding results by types - ['locality', 'administrative_area_level_3'] if you want to display only cities
|
||||
predefinedPlaces={this.userStore.perdefinedPlaces}
|
||||
debounce={200} // debounce the requests in ms. Set to 0 to remove debounce. By default 0ms.
|
||||
// renderLeftButton={() => <Image source={require('path/custom/left-icon')} />}
|
||||
//renderRightButton={() => <Text>Custom text </Text>}
|
||||
/>
|
||||
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
getIndex(id) {
|
||||
var index = this.userStore.pickupPointLabel.findIndex(function(item, i) {
|
||||
return item.id == parseInt(id);
|
||||
});
|
||||
|
||||
return index;
|
||||
}
|
||||
|
||||
getUserLocation() {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
position => {
|
||||
this.userStore.userLocation = position;
|
||||
},
|
||||
error => {
|
||||
console.log(error);
|
||||
},
|
||||
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
|
||||
);
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
const { navigation } = this.props;
|
||||
this.title = navigation.getParam("title", "Location");
|
||||
this.pickUpPointLoaction = navigation.getParam("location", {
|
||||
latitude: 0,
|
||||
longitude: 0
|
||||
});
|
||||
this.setUserLocation();
|
||||
this.userStore.pickupLoactionPoint.data.content.forEach(element => {
|
||||
var place = {
|
||||
description: element.name,
|
||||
geometry: { location: { lat: element.lat, lng: element.lng } }
|
||||
};
|
||||
this.perdefinedPlaces.push(place);
|
||||
});
|
||||
}
|
||||
|
||||
setUserLocation() {
|
||||
console.log(this.userStore.userLocation);
|
||||
if (this.userStore.userLocation === null) {
|
||||
this.setState({
|
||||
region: {
|
||||
latitude: 22.396427,
|
||||
longitude: 114.109497,
|
||||
latitudeDelta: 1,
|
||||
longitudeDelta: 1
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.setState({
|
||||
region: {
|
||||
latitude: this.userStore.userLocation.coords.latitude,
|
||||
longitude: this.userStore.userLocation.coords.longitude,
|
||||
|
||||
latitudeDelta: 0.02,
|
||||
longitudeDelta: 0.02
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
clickMarkerAction(id) {
|
||||
this.markerId = id;
|
||||
}
|
||||
|
||||
confirmAction() {
|
||||
Alert.alert(
|
||||
"",
|
||||
"Select " +
|
||||
this.userStore.pickupPointLabel[this.getIndex(this.markerId)].value +
|
||||
"?",
|
||||
[
|
||||
{ text: "Cancel", onPress: () => console.log("Cancel") },
|
||||
{ text: "Yes", onPress: () => this.picked(this.markerId) }
|
||||
]
|
||||
);
|
||||
}
|
||||
|
||||
picked(id) {
|
||||
if(this.markerId != null){
|
||||
asyncStorageHelper.saveData("pickupPointId", id);
|
||||
this.userStore.pickupPointId = id;
|
||||
this.store.pickupPointId = id;
|
||||
log.firebaseLog("select_pickuppoint_first_time_start_app",{pickuppointid:id})
|
||||
this.store.getMenuItem(this);
|
||||
}
|
||||
}
|
||||
|
||||
searchClear() {}
|
||||
|
||||
searchChangeText() {}
|
||||
|
||||
confirmButton() {
|
||||
if (!this.markerId) {
|
||||
return null;
|
||||
} else {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
style={{
|
||||
height: verticalScale(60),
|
||||
width: width,
|
||||
backgroundColor: theme.mainColor,
|
||||
alignItems: "center",
|
||||
justifyContent: "center"
|
||||
}}
|
||||
onPress={() => this.confirmAction()}
|
||||
>
|
||||
<Text style={{ color: "white", fontWeight: "bold" }}>confirm</Text>
|
||||
</TouchableOpacity>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<SafeAreaView style={{ flex: 1, backgroundColor: theme.mainColor }}>
|
||||
<MyStatusBar
|
||||
backgroundColor={theme.mainColor}
|
||||
barStyle="light-content"
|
||||
/>
|
||||
<View style={styles.container}>
|
||||
<MapView
|
||||
ref={ref => {
|
||||
this.map = ref;
|
||||
}}
|
||||
style={{ width: width, flex: 1 }}
|
||||
showsUserLocation={true}
|
||||
initialRegion={this.state.region}
|
||||
>
|
||||
{this.userStore.pickupPointLabel.map(marker => (
|
||||
<MapView.Marker
|
||||
coordinate={{ latitude: marker.lat, longitude: marker.lng }}
|
||||
title={marker.name}
|
||||
onPress={() => this.clickMarkerAction(marker.id)}
|
||||
>
|
||||
<Image
|
||||
resizeMode={"contain"}
|
||||
source={require("../../images/maplocator.png")}
|
||||
style={{ width: scale(50), height: scale(50) }}
|
||||
/>
|
||||
</MapView.Marker>
|
||||
))}
|
||||
</MapView>
|
||||
|
||||
{this.confirmButton()}
|
||||
{this.googlePlacesAutoComplete()}
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignItems: "center",
|
||||
backgroundColor: "#F5FCFF"
|
||||
},
|
||||
welcome: {
|
||||
fontSize: 20,
|
||||
textAlign: "center",
|
||||
margin: 10
|
||||
},
|
||||
instructions: {
|
||||
textAlign: "center",
|
||||
color: "#333333",
|
||||
marginBottom: 5
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user