Skip to content

C
clone_excelso
Commit 6cf089e2 authored by Trisno's avatar Trisno
Browse files
Options

ganti kolom pencarian alamat menggunakan google places

parent 17e45f8e
Hide whitespace changes
Inline Side-by-side
Showing with 79 additions and 16 deletions
app.json
View file @ 6cf089e2
......@@ -35,7 +35,7 @@
"bundleIdentifier": "id.web.ravintola.excelsocrm",
"buildNumber": "2009041500",
"config": {
"googleMapsApiKey": "AIzaSyCvIFNvXKmBNetqPrV4VnjvF772avYbA3M"
"googleMapsApiKey": "AIzaSyCnsGKSJtSNAbVAPX2cSNTQk2L97X7PX68"
},
"infoPlist": {
"NSCameraUsageDescription": "This app uses the camera to capture data from ID cards for upgrade membership to Premium Account.",
......@@ -47,7 +47,7 @@
"versionCode": 2009041500,
"config": {
"googleMaps": {
"apiKey": "AIzaSyAcCfuNHVFstDUE-ZDafWsiUmA3ON79cqo"
"apiKey": "AIzaSyCnsGKSJtSNAbVAPX2cSNTQk2L97X7PX68"
}
}
},
......
package-lock.json
View file @ 6cf089e2
......@@ -4696,6 +4696,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A=="
},
"lodash.debounce": {
"version": "4.0.8",
"resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
"integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168="
},
"lodash.get": {
"version": "4.4.2",
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
......@@ -6755,6 +6760,16 @@
"prop-types": "^15.7.2"
}
},
"react-native-google-places-autocomplete": {
"version": "1.8.2",
"resolved": "https://registry.npmjs.org/react-native-google-places-autocomplete/-/react-native-google-places-autocomplete-1.8.2.tgz",
"integrity": "sha512-+bQPeSJCfq6nqdVSGJQTwe7djCzKHBT/ULuSjhWiijidWhKstVnZ/9bB8z/8Jpk0gHs0fYCJb0DFR3djFrg7uw==",
"requires": {
"lodash.debounce": "^4.0.8",
"prop-types": "^15.5.10",
"qs": "~6.9.1"
}
},
"react-native-i18n": {
"version": "2.0.15",
"resolved": "https://registry.npmjs.org/react-native-i18n/-/react-native-i18n-2.0.15.tgz",
......
view/AddreesDetail.js
View file @ 6cf089e2
......@@ -8,6 +8,7 @@ import React from 'react';
import { ActivityIndicator, Alert, Platform, StyleSheet, Text, TextInput, View, KeyboardAvoidingView } from 'react-native';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { connect } from 'react-redux';
import session from '../function/session';
......@@ -151,7 +152,7 @@ class AddreesDetail extends React.Component {
//searchlocation (mencari lokasi)
_searchLocation = async () => {
let search_location = await Location.geocodeAsync(this.state.address, Location.Accuracy.Balanced)
let search_location = await Location.geocodeAsync(this.state.address, Location.Accuracy.Balanced)
if (search_location.length === 0) {
Alert.alert(i18n.t('alertAddressNotFound'));
} else {
......@@ -181,19 +182,38 @@ class AddreesDetail extends React.Component {
}
onChangeLocation = async (e) => {
// console.log(e.nativeEvent.coordinate.latitude)
// console.log(e.nativeEvent.coordinate)
this.setState({
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude,
})
let detail = await Location.reverseGeocodeAsync(e.nativeEvent.coordinate)
this.setState({
// console.log('ini detail : ', detail)
this.setState({
street: detail[0].street,
city: detail[0].city,
// name: detail[0].name,
region: detail[0].region,
postalCode: detail[0].postalCode,
})
})
}
onSubmit = async (location) => {
let loc = {
latitude: location.lat,
longitude: location.lng
}
let detail = await Location.reverseGeocodeAsync(loc)
// console.log(detail)
this.setState({
latitude: location.lat,
longitude: location.lng,
street: detail[0].street,
city: detail[0].city,
// name: detail[0].name,
region: detail[0].region,
postalCode: detail[0].postalCode,
})
}
saveAddress() {
......@@ -249,19 +269,45 @@ class AddreesDetail extends React.Component {
<View style={styles.container}>
<ScrollView>
<ScrollView keyboardShouldPersistTaps='handled'>
<View style={styles.content}>
<View style={{ height: 45, borderRadius: 10, borderColor: '#ccb46c', borderWidth: 1, flexDirection: 'row', marginTop: 15, marginLeft: 10, marginRight: 10 }}>
<View style={{ borderRadius: 10, borderColor: '#ccb46c', borderWidth: 1, flexDirection: 'row', marginTop: 15, marginLeft: 10, marginRight: 10 }}>
<View style={{ flex: 1, top: 5 }}>
<MaterialCommunityIcons name="map-marker" size={32} color="#ccb46c" />
</View>
<View style={{ flex: 6 }}>
<TextInput style={{ height: 45 }} placeholder={i18n.t('findAddress')}
caretHidden={this.state.caretHidden}
onFocus={() => this.setState({ caretHidden: false })}
onChangeText={(address) => this.setState({ address })}
onSubmitEditing={() => this._searchLocation()}>
</TextInput>
<GooglePlacesAutocomplete
placeholder={i18n.t('findAddress')}
fetchDetails
onPress={(data, details = null) => {
this.onSubmit(details.geometry.location)
}}
textInputProps={{
onChangeText: (address) => { this.setState({ address }) },
onSubmitEditing: () => { this._searchLocation() }
}}
query={{
key: 'AIzaSyCnsGKSJtSNAbVAPX2cSNTQk2L97X7PX68',
language: 'en',
}}
styles={{
textInputContainer: {
backgroundColor: 'rgba(0,0,0,0)',
borderTopWidth: 0,
borderBottomWidth: 0,
},
textInput: {
marginLeft: 0,
marginRight: 0,
height: 30,
color: '#5d5d5d',
fontSize: 14,
},
predefinedPlacesDescription: {
color: '#1faadb',
},
}}
/>
</View>
<View style={{ flex: 1, margin: 5 }}>
<TouchableOpacity onPress={() => this._searchLocation()}>
......@@ -269,6 +315,7 @@ class AddreesDetail extends React.Component {
</TouchableOpacity>
</View>
</View>
<View style={styles.cont_google_map}>
<MapView
region={{
......@@ -289,7 +336,7 @@ class AddreesDetail extends React.Component {
zoomControlEnabled={true}
style={styles.cont_google_map}>
<MapView.Marker
draggable
draggable
onDragEnd={(e) => this.onChangeLocation(e)}
coordinate={{
latitude: this.state.latitude,
......@@ -302,7 +349,7 @@ class AddreesDetail extends React.Component {
<View style={{ position: 'absolute', top: '50%', alignSelf: 'flex-end' }}>
<View style={{ margin: 15 }}>
{/* <TouchableOpacity style={{ height: 30, width: 30, backgroundColor: 'red' }} onPress={() => this._getLocationAsync()}> */}
{/* <Image source={require('../assets/icon/gps.png')} style={{ height: 30, width: 30 }} /> */}
{/* <Image source={require('../assets/icon/gps.png')} style={{ height: 30, width: 30 }} /> */}
{/* </TouchableOpacity> */}
</View>
</View>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment