Commit bdc7c092 authored by Wahyu Adjie Prasetyo's avatar Wahyu Adjie Prasetyo

change menu selection and add outlet list

parent fe4cca37
......@@ -203,36 +203,10 @@ class Account extends React.Component {
</View>
</View>
{
this.props.set_card === false ? (
<View>
<View style={styles.Card}>
{/* <Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
<Text style={{ textAlign: "center", fontSize: 40, color: '#c9af6d' }}>
</Text>
<Text style={{ textAlign: 'left', fontWeight: 'bold' }}> {'\n'}
</Text>
<Text style={{ textAlign: 'left', fontWeight: 'bold' }}>{'\n'}
</Text>
</Card>
<Card style={{ padding: 10, margin: 10, alignContent: 'center' }}>
<Text style={{ textAlign: "center", fontSize: 40, color: '#c9af6d' }}>
</Text>
<Text style={{ textAlign: 'left', fontWeight: 'bold' }}> {'\n'}
</Text>
<Text style={{ textAlign: 'left', fontWeight: 'bold' }}>{'\n'}
</Text>
</Card> */}
</View>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top: 20 }}>
<View style={{ flex: 1, flexDirection: 'row', justifyContent: 'center', top:50 }}>
<View style={{ height: 250, flex: 1, backgroundColor: 'grey', marginRight: 20, marginLeft: 20, top: 25, borderRadius: 20 }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center', top: 20 }}>No card yet</Text>
<TouchableOpacity onPress={() => this.handleLoggin()}>
......@@ -243,11 +217,11 @@ class Account extends React.Component {
</View>
</View>
<TouchableOpacity onPress={() => this.logout()}>
<View style={{ height: 50, borderRadius: 20, backgroundColor: '#CFB368', margin: 40, top: 30 }}>
<View style={{ height: 50, borderRadius: 20, backgroundColor: '#CFB368', margin: 40, top: 40, }}>
<Text style={{ fontFamily: 'Gotham-Black', color: 'white', fontSize: 20, textAlign: 'center', margin: 15 }}>LOGOUT</Text>
</View>
</TouchableOpacity>
</View>
</View>
) : (
<View>
<View style={styles.Card}>
......
......@@ -181,7 +181,7 @@ class MenuSelection extends React.Component {
return (
<View style={{ flex: 1, height: 270 }}>
<TouchableOpacity>
<Image style={{ height: 70, width: 70,top:5}} source={{ uri: item.image }} />
<Image style={{ height: 60, width: 60, top: 5 }} source={{ uri: item.image }} />
</TouchableOpacity>
</View>
)
......@@ -280,7 +280,7 @@ class MenuSelection extends React.Component {
return (
<View style={styles.container}>
<StatusBar hidden={true} />
<View style={{ flex:0.5, height: 50, flexDirection: 'row' }}>
<View style={{ flex: 0.5, height: 50, flexDirection: 'row' }}>
<FlatList horizontal={true} style={{ flexDirection: 'row' }}
showsHorizontalScrollIndicator={false}
data={this.state.listCategory}
......@@ -288,7 +288,7 @@ class MenuSelection extends React.Component {
keyExtractor={(item) => item.id}
/>
</View>
<View style={{height:1,backgroundColor:'grey',marginRight:10,marginLeft:10,marginTop:5}}></View>
<View style={{ height: 1, backgroundColor: 'grey', marginRight: 10, marginLeft: 10, marginTop: 5 }}></View>
<View style={{ flex: 3 }}>
{this.state.indicator == true ? (
<ActivityIndicator style={{ top: 10 }} size="large" color="#c9af6d" />
......@@ -310,19 +310,22 @@ class MenuSelection extends React.Component {
</View>
<View style={styles.shadow}>
<Text style={{ fontSize: 12, margin: 10, fontFamily: 'Gotham-Black' }}> {this.props.order_quantity} Item | {this.props.type_pickup == true ? (null) : (
<Text style={{ fontSize: 12, margin: 10 }}> Ongkir {this.props.grabamount} </Text>
)} </Text>
<View style={{ flex: 1, flexDirection: 'row' }}>
<View style={{ flex: 1 }}>
<Text style={{ fontSize: 20, margin: 10, marginBottom: 10, fontFamily: 'Gotham-Light' }}> Rp. {this.props.order_total}</Text>
<View style={{ flex: 0.7}}>
<Text style={{ fontSize: 12, fontFamily: 'Gotham-Black',top:10 }}> {this.props.order_quantity} Item | {this.props.type_pickup == true ? (null) : (
<Text style={{ fontSize: 12 }}> Ongkir {this.props.grabamount} </Text>
)} </Text>
<Text style={{ fontSize: 20, fontFamily: 'Gotham-Light', top:20 }}> Rp. {this.props.order_total}</Text>
</View>
<View style={{ flex: 1,height:100,marginBottom:30}}>
<View style={{ flex: 1, height: 100 }}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('Shopping Cart')}>
<View style={{ height: 40, borderRadius: 10, backgroundColor: '#CFB368',marginRight:20,flexDirection:'row',marginBottom:30}}>
<View>
<View style={{ height: 50, borderRadius: 10, backgroundColor: '#CFB368',marginRight:20,marginLeft:20,top:10,flexDirection:'row',marginBottom:30}}>
<Image source={(require('../assets/icon/icon-order.png'))} style={{height:50,width:40,tintColor:'white',}}></Image>
<Text style={{ fontFamily: 'Gotham-Light', color: 'white', fontSize: 15,alignSelf:'center', textAlign: 'center' }}>View Cart</Text>
</View>
</View>
</TouchableOpacity>
</View>
</View>
......@@ -340,7 +343,6 @@ const styles = StyleSheet.create({
backgroundColor: 'white',
},
shadow: {
borderWidth: 1,
borderRadius: 2,
borderColor: '#ddd',
borderBottomWidth: 0,
......@@ -348,7 +350,7 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 10,
shadowRadius: 5,
elevation: 1,
elevation: 0.5,
marginTop: 10,
flex: 0.5,
height: 50,
......
import React from 'react';
import { View, Text, StyleSheet, FlatList, TextInput, Alert,Linking } from 'react-native';
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';
......@@ -12,7 +12,7 @@ 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 MapView, { PROVIDER_GOOGLE, Marker } from 'react-native-maps';
import { Icon } from 'react-native-elements'
class Outlets extends React.Component {
......@@ -31,7 +31,7 @@ class Outlets extends React.Component {
spinner: false,
data_outlet: [],
outlet_selected: '',
data_name:''
data_name: ''
}
}
......@@ -107,6 +107,7 @@ class Outlets extends React.Component {
}
dataOutlets[i]['full_address'] = address;
}
this.setState({
dataOutlets: dataOutlets,
data_before_search: dataOutlets,
......@@ -157,27 +158,29 @@ class Outlets extends React.Component {
_getOutletClosest() {
let params = {
session_id: this.props.session_id,
lat: this.props.lat,
long: this.props.long
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
})
let outletName = res.data.data.outlet_name
this.setState({
indicator: false,
data_name: outletName
})
console.log("INI DATANYA NAME : " + outletName)
console.log("INI ADALAH RESPON : + " + JSON.stringify(res))
console.log("INI DATANYA NAME : " + outletName)
}).catch(error => {
const {navigation} = this.props
let response = error.response.data
session(response,navigation)
Alert.alert(response.msg);
const { navigation } = this.props
let response = error.response.data
session(response, navigation)
Alert.alert(response.msg);
})
}
}
toRad(value) {
return value * Math.PI / 180;
......@@ -223,34 +226,32 @@ class Outlets extends React.Component {
<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' }}>
<Text style={{ fontFamily: 'Gotham-Black', color: '#ccb46c', fontSize: 20, margin: 5 }}>{item.name}</Text>
<Text style={{ fontFamily: 'Gotham-Light', color: '#b1b1b2', fontSize: 15, margin: 5 }}>{item.full_address}</Text>
<Text style={{ fontFamily: 'Gotham-Light', 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'
/>
<View style={{ flex: 1,top:20 }}>
<TouchableOpacity onPress={() => { Linking.openURL('tel:(021) 56985640') }}>
<Icon
name='ios-call'
type='ionicon'
color='grey'
size={40}
/>
</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 style={{ flex: 1,top:20 }}>
<TouchableOpacity onPress={() => Linking.openURL('https://www.google.com/maps/dir/?api=1&destination=' + item.lat + item.long)}>
<Icon
name='ios-navigate'
type='ionicon'
color='grey'
size={40}
/>
</TouchableOpacity>
</View>
</View>
);
......@@ -264,7 +265,7 @@ class Outlets extends React.Component {
textContent={'Loading...'}
textStyle={styles.spinnerTextStyle}
/>
<View style={{ flex: 1, backgroundColor: 'red' }}>
<View style={{ flex: 1 }}>
<MapView style={{ flex: 1 }}
region={{
latitude: this.state.my_lat,
......@@ -277,13 +278,22 @@ class Outlets extends React.Component {
loadingEnabled={true}
provider={PROVIDER_GOOGLE}
>
<MapView.Marker
coordinate={{
latitude: this.state.my_lat,
longitude: this.state.my_long
}}
title={"Lokasi Kamu "}
description={this.state.street}
/>
</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={{ height: 50, flexDirection: 'row' }}>
<View style={{ flex: 1 }}></View>
<View style={{ flex: 1 }}>
<RNPickerSelect
placeholder={{ label: 'Select Area', value: null }}
onValueChange={(label) => this.filterData(label)}
items={this.state.data_outlet}
/>
......@@ -320,11 +330,10 @@ const styles = StyleSheet.create({
body: {
flex: 1,
margin: 20,
},
list_addrees: {
flex: 3,
margin: 5,
margin: 20,
},
searchbar: {
......
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