Skip to content

C
clone_excelso
Commit f5b33cc3 authored by Wahyu Adjie Prasetyo's avatar Wahyu Adjie Prasetyo
Browse files
Options

add outlets pertama

parent 07102d44
Hide whitespace changes
Inline Side-by-side
Showing with 490 additions and 15 deletions
app.json
View file @ f5b33cc3
{ {
"expo": { "expo": {
"name": "Excelso_update v1.12.05.2020", "name": "Excelso_update v1. Sore_12.05.2020",
"slug": "excelso-pro", "slug": "excelso-pro",
"privacy": "public", "privacy": "public",
"sdkVersion": "36.0.0", "sdkVersion": "36.0.0",
......
view/Auth.js
View file @ f5b33cc3
...@@ -48,22 +48,12 @@ import OrderDetail from './OrderDetail'; ...@@ -48,22 +48,12 @@ import OrderDetail from './OrderDetail';
import RewardsList from './RewardsList'; import RewardsList from './RewardsList';
import RewardDetail from './RewardDetail'; import RewardDetail from './RewardDetail';
import RewardSelect from './RewardSelect'; import RewardSelect from './RewardSelect';
import Outlets from './Outlets';
import RewardHistory from './RewardHistory';
enableScreens(); enableScreens();
function Outlets() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text>
Outlets !
</Text>
</View>
)
}
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
function HomePage({navigation}) { function HomePage({navigation}) {
...@@ -161,7 +151,9 @@ class Auth extends React.Component { ...@@ -161,7 +151,9 @@ class Auth extends React.Component {
<Stack.Screen name="Card Info" component={CardInfo} /> <Stack.Screen name="Card Info" component={CardInfo} />
<Stack.Screen name="Shopping Cart" component={ShoppingCart} /> <Stack.Screen name="Shopping Cart" component={ShoppingCart} />
<Stack.Screen name="Order History" component={OrderHistory} /> <Stack.Screen name="Order History" component={OrderHistory} />
<Stack.Screen name="Reward History" component={RewardHistory} />
<Stack.Screen name="Order Detail" component={OrderDetail} options={({ navigation, route }) => ({ headerLeft: props => <HeaderBackButton {...props} onPress={()=>navigation.navigate('Home',{screen:'ORDER'})}/>, <Stack.Screen name="Order Detail" component={OrderDetail} options={({ navigation, route }) => ({ headerLeft: props => <HeaderBackButton {...props} onPress={()=>navigation.navigate('Home',{screen:'ORDER'})}/>,
})}/> })}/>
</> </>
......
view/Home.js
View file @ f5b33cc3
...@@ -294,7 +294,7 @@ class Home extends React.Component { ...@@ -294,7 +294,7 @@ class Home extends React.Component {
<TouchableOpacity style={styles.submitUpgradePemium} activeOpacity={.5} onPress={this.onPress}> <TouchableOpacity style={styles.submitUpgradePemium} activeOpacity={.5} onPress={this.onPress}>
<Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>TOP BALANCE </Text> <Text style={{ textAlign: 'center', bottom: 5, color: 'white' }}>TOP BALANCE </Text>
</TouchableOpacity> </TouchableOpacity>
<Text>12 May 2019 </Text> <Text> sore 12 May 2019 </Text>
<View style={{ height: 60 }}></View> <View style={{ height: 60 }}></View>
</View> </View>
</View> </View>
......
view/Outlets.js
View file @ f5b33cc3
import React from 'react';
import { View, Text, StyleSheet, FlatList, TextInput, Alert,Linking } from 'react-native';
import { ScrollView, TouchableOpacity } from 'react-native-gesture-handler';
import Spinner from 'react-native-loading-spinner-overlay';
import { CheckBox } from 'react-native-elements';
import ActionType from '../redux/globalActionType';
import Axios from 'axios';
import { MaterialCommunityIcons, Ionicons } from '@expo/vector-icons';
import _ from 'lodash';
import * as Location from 'expo-location';
import { connect } from 'react-redux';
import * as Permissions from 'expo-permissions';
import * as Device from 'expo-device';
import RNPickerSelect from 'react-native-picker-select';
import MapView, { PROVIDER_GOOGLE } from 'react-native-maps';
import { Icon } from 'react-native-elements'
class Outlets extends React.Component {
constructor(props) {
super(props)
this.state = {
city: [],
city_selected: '',
dataOutlets: [],
my_lat: 0,
my_long: 0,
distance: [],
search: '',
data: [], // data yg sedang aktif
data_before_search: [],
spinner: false,
data_outlet: [],
outlet_selected: '',
data_name:''
}
}
componentDidMount() {
this._getOutletClosest()
this.OrderedList()
this._getPermissions()
}
_getPermissions = async () => {
let { status } = await Permissions.askAsync(Permissions.LOCATION);
if (status !== 'granted') {
Alert.alert('Akses tidak dizinkan!')
} else if (Platform.OS === 'android' && !Device.isDevice) {
Alert.alert('Silahkan anda coba di real Device')
} else {
this._getCurrentPosisition()
}
}
_getCurrentPosisition = async () => {
this.setState({
spinner: true,
})
let location = await Location.getCurrentPositionAsync({
accuracy: Location.Accuracy.Highest
})
let latitude = location.coords.latitude;
let longitude = location.coords.longitude;
this.setState({
my_lat: latitude,
my_long: longitude
})
this.getOutlet()
}
getOutlet() {
this.setState({
spinner: true,
})
let params = {
session_id: this.props.session_id
}
Axios.post("https://excelsocrm.ravintoladev.com/crm/v2/outlet/get_list", params).then(res => {
let dataOutlets = res.data.outlets;
for (let i = 0; i < dataOutlets.length; i++) {
dataOutlets[i]['distance'] = this.distance(dataOutlets[i]['lat'], dataOutlets[i]['long']);
let address = dataOutlets[i]['address'];
if (dataOutlets[i]['city'] !== '') {
if (address !== '') {
address = address + ', ' + dataOutlets[i]['city'];
} else {
address = dataOutlets[i]['city'];
}
}
if (dataOutlets[i]['province']) {
if (address !== '') {
address = address + ', ' + dataOutlets[i]['province'];
} else {
address = dataOutlets[i]['province'];
}
}
if (dataOutlets[i]['postal_code']) {
if (address !== '') {
address = address + ' ' + dataOutlets[i]['postal_code'];
} else {
address = dataOutlets[i]['postal_code'];
}
}
dataOutlets[i]['full_address'] = address;
}
this.setState({
dataOutlets: dataOutlets,
data_before_search: dataOutlets,
})
this.setState({
spinner: false,
})
}).catch(error => {
let response = error.response.data;
Alert.alert(response.msg);
this.setState({
spinner: false,
})
})
}
OrderedList() {
Axios.get("https://excelsocrm.ravintoladev.com/crm/v2/outlet/get_city_list").then(res => {
let cities = res.data.city
let data_city = []
for (const city in cities) {
if (cities.hasOwnProperty(city)) {
const label = cities[city];
const value = city;
data_city.push({ label: label, value: label })
console.log("INI LABEL : " + label)
}
}
console.log("ISI DATANYA : " + JSON.stringify(data_city))
this.setState({
data_outlet: data_city
})
}).catch(error => {
let response = error.response.data;
Alert.alert(response.msg);
this.setState({
spinner: false,
})
})
}
_getOutletClosest() {
let params = {
session_id: this.props.session_id,
lat: this.props.lat,
long: this.props.long
}
// console.log(params);
Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/outlet/get_closest', params).then(res => {
let outletName = res.data.data.outlet_name
this.setState({
indicator: false,
data_name : outletName
})
console.log("INI DATANYA NAME : " + outletName)
}).catch(error => {
const {navigation} = this.props
let response = error.response.data
session(response,navigation)
Alert.alert(response.msg);
})
}
toRad(value) {
return value * Math.PI / 180;
}
distance(locationLat, locationLong) {
let R = 6371;
let dLat = this.toRad(locationLat - this.state.my_lat); // Javascript functions in radians
let dLon = this.toRad(locationLong - this.state.my_long);
let a = Math.sin(dLat / 2) * Math.sin(dLat / 2) + Math.cos(this.toRad(this.state.my_lat)) * Math.cos(this.toRad(locationLat)) * Math.sin(dLon / 2) * Math.sin(dLon / 2);
let c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
let d = R * c;
return Math.round(d * 10) / 10;
}
clear = () => {
this.state.search.clear();
};
filterData(value) {
let filteredOutlets = this.state.data_before_search.filter(item => {
return item.city.indexOf(value) > -1;
});
if (value === '') {
this.setState({
dataOutlets: this.state.data_before_search,
search: ''
})
} else {
this.setState({
dataOutlets: filteredOutlets,
search: value
});
}
}
RenderItem = ({ item }) => {
return (
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.list_addrees}>
<Text style={{ fontWeight: 'bold', fontSize: 20, margin: 5, color: '#ccb46c' }}>{item.name}</Text>
<Text style={{ margin: 5, color: '#b1b1b2' }}>
{item.full_address}
</Text>
<Text style={{ margin: 5, color: '#aeaead' }}>
{item.distance} KM
</Text>
</View>
<View style={{flex:1}}>
<TouchableOpacity onPress={()=>{Linking.openURL('tel:(021) 56985640')}}>
<Icon
reverse
name='ios-call'
type='ionicon'
color='#517fa4'
/>
</TouchableOpacity>
</View>
<View style={{flex:1}}>
<TouchableOpacity onPress={() => Linking.openURL('https://www.google.de/maps/@" ' + item.lat +"," + item.long)}>
<Icon
reverse
name='ios-navigate'
type='ionicon'
color='#517fa4'
/>
</TouchableOpacity>
</View>
</View>
);
}
render() {
return (
<View style={styles.container}>
<Spinner
visible={this.state.spinner}
textContent={'Loading...'}
textStyle={styles.spinnerTextStyle}
/>
<View style={{ flex: 1, backgroundColor: 'red' }}>
<MapView style={{ flex: 1 }}
region={{
latitude: this.state.my_lat,
longitude: this.state.my_long,
latitudeDelta: 0.1,
longitudeDelta: 0.1,
}}
zoomEnabled={true}
loadingEnabled={true}
provider={PROVIDER_GOOGLE}
>
</MapView>
</View>
<Text style={{ fontWeight: 'bold', fontSize: 20, margin: 5, color: '#ccb46c',textAlign:'center' }}>{this.state.data_name}</Text>
<View style={{ height: 70, flexDirection: 'row' }}>
<View style={{ flex: 1 }}></View>
<View style={{ flex: 1 }}>
<RNPickerSelect
onValueChange={(label) => this.filterData(label)}
items={this.state.data_outlet}
/>
</View>
</View>
<View style={styles.body}>
<FlatList
data={_.orderBy(this.state.dataOutlets, ['distance'], ['asc'])}
renderItem={this.RenderItem}
keyExtractor={item => item.id}
windowSize={5}
initialNumToRender={18}
maxToRenderPerBatch={2}
onEndReachedThreshold={0.5}
/>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
header: {
flex: 0.5,
},
body: {
flex: 1,
margin: 20,
},
list_addrees: {
flex: 3,
margin: 5,
},
searchbar: {
flex: 1,
justifyContent: 'center',
margin: 10,
}
})
const mapStateToProps = (state) => {
return {
session_id: state.session_id,
outlet_id: state.outlet_id,
name_outlet: state.name_outlet,
lat: state.lat,
long: state.long,
}
}
export default connect(mapStateToProps)(Outlets);
{/* <View style={{flex:1,backgroundColor:'red'}}>
</View>
<View style={{ flexDirection: 'row', flex: 1 }}>
<View style={styles.list_addrees}>
<View style={{ margin: 5 }}>
<Text style={{ fontWeight: 'bold', fontSize: 20 }}>{item.name}</Text>
<Text style={{ fontWeight: 'bold', fontSize: 15, color: '#ccb46c' }}>OPEN - </Text>
</View>
<Text style={{ margin: 5, color: '#b1b1b2' }}>
{item.full_address}
</Text>
<Text style={{ margin: 5, color: '#aeaead' }}>
{item.distance} KM
</Text>
</View>
</View> */}
\ No newline at end of file
view/RewardDetail.js
View file @ f5b33cc3
...@@ -88,7 +88,7 @@ class RewardDetail extends React.Component { ...@@ -88,7 +88,7 @@ class RewardDetail extends React.Component {
} }
useDVoucher() { useDVoucher() {
this.props.navigation.navigate('Order Detail') this.props.navigation.navigate('Reward History')
} }
......
view/RewardHistory.js 0 → 100644
View file @ f5b33cc3
import React from 'react';
import { View, Text, Image, StyleSheet, ScrollView, Alert, TouchableOpacity } from 'react-native';
import { Card } from 'react-native-shadow-cards'
import { connect } from 'react-redux';
import Axios from 'axios';
import moment from 'moment'
class RewardHistory extends React.Component {
constructor(props) {
super(props)
this.state = {
rewardsList: []
}
}
componentDidMount() {
this.getRewardsList()
this._unsubscribe = this.props.navigation.addListener('focus', () => {
this.getRewardsList()
});
}
componentWillUnmount() {
this._unsubscribe()
}
getRewardsList() {
let params = {
session_id: this.props.session_id
}
Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/reward/history', params).then(res => {
let data = res.data.rewards
// console.log(data)
data.map((item,key) => {
// console.log(item.expire_time)
item.expire_time = moment(item.expire_time).format("DD MMMM YYYY")
item.used_time = moment(item.used_time).format("DD MMMM YYYY")
})
// console.log(data)
this.setState({
rewardsList: data
})
}).catch(error => {
let response = error.response.data;
Alert.alert(response.status, response.msg);
})
}
render() {
return (
<View style={styles.container}>
<ScrollView style={styles.body}>
{
this.state.rewardsList.map((item, key) => (
<TouchableOpacity key={key} onPress={() => this.props.navigation.navigate('Reward Detail', { rewardId: item.id })}>
<View style={{ alignItems: 'center' }}>
<Card style={{ padding: 5, margin: 10 }}>
<View>
<Image source={{ uri: item.reward.title_image }}
resizeMethod="resize"
resizeMode='cover'
style={{ height: 150, width: '100%' }} />
</View>
<View style={{ flexDirection: 'row', justifyContent:'space-between', padding:10 }}>
<View>
<Text style={{fontWeight:'bold', textAlign:'left'}}>{item.reward.title}</Text>
<Text style={{textAlign:'left'}}>{item.reward.subtitle}</Text>
</View>
<View>
<Text style={{textAlign:'right'}}>Digunakan:</Text>
<Text style={{textAlign:'right'}}>{item.used_time}</Text>
</View>
</View>
</Card>
</View>
</TouchableOpacity>
))
}
</ScrollView>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'white',
},
header: {
flex: 0.1,
backgroundColor: '#ccb46c',
justifyContent: 'center'
},
body: {
flex: 3,
},
list_detail_order: {
flex: 1,
margin: 20,
borderWidth: 1,
}
})
const mapStateToProps = (state) => {
return {
session_id: state.session_id,
}
}
export default connect(mapStateToProps)(RewardHistory);
\ No newline at end of file
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