Skip to content

N
new_excelso
Commit 6cf089e2 authored by Trisno's avatar Trisno
Browse files
Options

ganti kolom pencarian alamat menggunakan google places

parent 17e45f8e
Show whitespace changes
Inline Side-by-side
Showing with 79 additions and 16 deletions
app.json
View file @ 6cf089e2
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
"bundleIdentifier": "id.web.ravintola.excelsocrm", "bundleIdentifier": "id.web.ravintola.excelsocrm",
"buildNumber": "2009041500", "buildNumber": "2009041500",
"config": { "config": {
"googleMapsApiKey": "AIzaSyCvIFNvXKmBNetqPrV4VnjvF772avYbA3M" "googleMapsApiKey": "AIzaSyCnsGKSJtSNAbVAPX2cSNTQk2L97X7PX68"
}, },
"infoPlist": { "infoPlist": {
"NSCameraUsageDescription": "This app uses the camera to capture data from ID cards for upgrade membership to Premium Account.", "NSCameraUsageDescription": "This app uses the camera to capture data from ID cards for upgrade membership to Premium Account.",
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
"versionCode": 2009041500, "versionCode": 2009041500,
"config": { "config": {
"googleMaps": { "googleMaps": {
"apiKey": "AIzaSyAcCfuNHVFstDUE-ZDafWsiUmA3ON79cqo" "apiKey": "AIzaSyCnsGKSJtSNAbVAPX2cSNTQk2L97X7PX68"
} }
} }
}, },
......
package-lock.json
View file @ 6cf089e2
...@@ -4696,6 +4696,11 @@ ...@@ -4696,6 +4696,11 @@
"resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.15.tgz",
"integrity": "sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==" "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": { "lodash.get": {
"version": "4.4.2", "version": "4.4.2",
"resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz", "resolved": "https://registry.npmjs.org/lodash.get/-/lodash.get-4.4.2.tgz",
...@@ -6755,6 +6760,16 @@ ...@@ -6755,6 +6760,16 @@
"prop-types": "^15.7.2" "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": { "react-native-i18n": {
"version": "2.0.15", "version": "2.0.15",
"resolved": "https://registry.npmjs.org/react-native-i18n/-/react-native-i18n-2.0.15.tgz", "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'; ...@@ -8,6 +8,7 @@ import React from 'react';
import { ActivityIndicator, Alert, Platform, StyleSheet, Text, TextInput, View, KeyboardAvoidingView } from 'react-native'; import { ActivityIndicator, Alert, Platform, StyleSheet, Text, TextInput, View, KeyboardAvoidingView } from 'react-native';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler'; import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps'; import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { GooglePlacesAutocomplete } from 'react-native-google-places-autocomplete';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import session from '../function/session'; import session from '../function/session';
...@@ -181,12 +182,13 @@ class AddreesDetail extends React.Component { ...@@ -181,12 +182,13 @@ class AddreesDetail extends React.Component {
} }
onChangeLocation = async (e) => { onChangeLocation = async (e) => {
// console.log(e.nativeEvent.coordinate.latitude) // console.log(e.nativeEvent.coordinate)
this.setState({ this.setState({
latitude: e.nativeEvent.coordinate.latitude, latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude, longitude: e.nativeEvent.coordinate.longitude,
}) })
let detail = await Location.reverseGeocodeAsync(e.nativeEvent.coordinate) let detail = await Location.reverseGeocodeAsync(e.nativeEvent.coordinate)
// console.log('ini detail : ', detail)
this.setState({ this.setState({
street: detail[0].street, street: detail[0].street,
city: detail[0].city, city: detail[0].city,
...@@ -196,6 +198,24 @@ class AddreesDetail extends React.Component { ...@@ -196,6 +198,24 @@ class AddreesDetail extends React.Component {
}) })
} }
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() { saveAddress() {
this.setState({ this.setState({
...@@ -249,19 +269,45 @@ class AddreesDetail extends React.Component { ...@@ -249,19 +269,45 @@ class AddreesDetail extends React.Component {
<View style={styles.container}> <View style={styles.container}>
<ScrollView> <ScrollView keyboardShouldPersistTaps='handled'>
<View style={styles.content}> <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 }}> <View style={{ flex: 1, top: 5 }}>
<MaterialCommunityIcons name="map-marker" size={32} color="#ccb46c" /> <MaterialCommunityIcons name="map-marker" size={32} color="#ccb46c" />
</View> </View>
<View style={{ flex: 6 }}> <View style={{ flex: 6 }}>
<TextInput style={{ height: 45 }} placeholder={i18n.t('findAddress')} <GooglePlacesAutocomplete
caretHidden={this.state.caretHidden} placeholder={i18n.t('findAddress')}
onFocus={() => this.setState({ caretHidden: false })} fetchDetails
onChangeText={(address) => this.setState({ address })} onPress={(data, details = null) => {
onSubmitEditing={() => this._searchLocation()}> this.onSubmit(details.geometry.location)
</TextInput> }}
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>
<View style={{ flex: 1, margin: 5 }}> <View style={{ flex: 1, margin: 5 }}>
<TouchableOpacity onPress={() => this._searchLocation()}> <TouchableOpacity onPress={() => this._searchLocation()}>
...@@ -269,6 +315,7 @@ class AddreesDetail extends React.Component { ...@@ -269,6 +315,7 @@ class AddreesDetail extends React.Component {
</TouchableOpacity> </TouchableOpacity>
</View> </View>
</View> </View>
<View style={styles.cont_google_map}> <View style={styles.cont_google_map}>
<MapView <MapView
region={{ region={{
......
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