391 lines
11 KiB
JavaScript
Executable File
391 lines
11 KiB
JavaScript
Executable File
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
|
|
}
|
|
});
|