494 lines
17 KiB
JavaScript
494 lines
17 KiB
JavaScript
|
import React, {Component} from 'react';
|
||
|
|
import {Image, ProgressBarAndroid, ScrollView, StatusBar, StyleSheet, Text, View} from 'react-native';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
||
|
|
import {readUser} from './../../webservice/AuthApi';
|
||
|
|
import {getAgentNetworksList} from './../../webservice/NetworkApi'
|
||
|
|
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
|
||
|
|
import MapView, {Marker} from 'react-native-maps';
|
||
|
|
import * as Utils from '../../utils/DeviceUtils';
|
||
|
|
import CardView from "react-native-cardview";
|
||
|
|
import I18n from 'react-native-i18n'
|
||
|
|
import {IlinkEmitter} from "../../utils/events";
|
||
|
|
import {Card, CardContent, CardTitle} from 'react-native-material-cards'
|
||
|
|
import {Color} from '../../config/Color';
|
||
|
|
|
||
|
|
let theme = require('./../../utils/theme.json');
|
||
|
|
let route = require('../../route.json');
|
||
|
|
|
||
|
|
require('./../../utils/Translations')
|
||
|
|
const height = responsiveHeight(100) - 250;
|
||
|
|
/*
|
||
|
|
var Fabric = require('react-native-fabric');
|
||
|
|
var { Crashlytics } = Fabric;*/
|
||
|
|
export default class UserAccount extends Component {
|
||
|
|
static navigatorStyle = {
|
||
|
|
navBarHidden: false,
|
||
|
|
navBarBackgroundColor: theme.primaryDark,
|
||
|
|
navBarTextColor: 'white',
|
||
|
|
navBarButtonColor: 'white',
|
||
|
|
drawUnderStatusBar: false,
|
||
|
|
statusBarColor: theme.primaryDarkAdvanced,
|
||
|
|
statusBarTextColorScheme: 'light',
|
||
|
|
};
|
||
|
|
static navigationOptions = ({navigation}) => {
|
||
|
|
return {
|
||
|
|
headerTitle: I18n.t('USER_ACCOUNT'),
|
||
|
|
headerStyle: {
|
||
|
|
backgroundColor: theme.primary,
|
||
|
|
paddingTop: 10
|
||
|
|
},
|
||
|
|
headerTitleStyle: {
|
||
|
|
color: "white"
|
||
|
|
},
|
||
|
|
drawerIcon: ({tintColor}) => (
|
||
|
|
<Icon
|
||
|
|
name={'person'}
|
||
|
|
size={24}
|
||
|
|
/>
|
||
|
|
),
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
static options(passProps) {
|
||
|
|
return {
|
||
|
|
topBar: {
|
||
|
|
drawBehind: false,
|
||
|
|
visible: true,
|
||
|
|
animate: true,
|
||
|
|
buttonColor: 'white',
|
||
|
|
background: {
|
||
|
|
color: theme.primaryDark,
|
||
|
|
},
|
||
|
|
rightButtons: []
|
||
|
|
},
|
||
|
|
backButton: {
|
||
|
|
visible: true,
|
||
|
|
color: "white"
|
||
|
|
},
|
||
|
|
buttonColor: "white",
|
||
|
|
background: {
|
||
|
|
color: theme.primaryDark
|
||
|
|
},
|
||
|
|
statusBar: {
|
||
|
|
drawBehind: false,
|
||
|
|
visible: true,
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props)
|
||
|
|
this.state = this.initState();
|
||
|
|
IlinkEmitter.on("langueChange", this.updateLangue.bind(this))
|
||
|
|
readUser().then((user) => {
|
||
|
|
if (user !== null) {
|
||
|
|
this.setState({user: user})
|
||
|
|
|
||
|
|
this.updateContent(user)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
updateLangue() {
|
||
|
|
|
||
|
|
this.props.navigation.setParams({name: I18n.t('USER_ACCOUNT')})
|
||
|
|
this.forceUpdate()
|
||
|
|
}
|
||
|
|
|
||
|
|
updateContent(user) {
|
||
|
|
getAgentNetworksList(user.agentId).then((networks) => {
|
||
|
|
if (networks['success'] !== undefined) {
|
||
|
|
this.setState({mynetworks: networks.networks})
|
||
|
|
}
|
||
|
|
|
||
|
|
});
|
||
|
|
this.setState({user: user});
|
||
|
|
}
|
||
|
|
|
||
|
|
initState() {
|
||
|
|
return {
|
||
|
|
user: {},
|
||
|
|
mynetworks: []
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
|
||
|
|
let cat = "";
|
||
|
|
|
||
|
|
const {user} = this.state
|
||
|
|
|
||
|
|
if (user.category !== undefined || user.category !== null)
|
||
|
|
cat = user.category === 'super' ? I18n.t("ADMIN") : user.category === 'hyper' ?
|
||
|
|
I18n.t("SUPER_ADMIN") : user.category === 'geolocated' ?
|
||
|
|
I18n.t("GEOLOCATED") : I18n.t("SIMPLE_USER")
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
<StatusBar
|
||
|
|
backgroundColor={theme.primaryDark}
|
||
|
|
barStyle="light-content"
|
||
|
|
translucent={false}
|
||
|
|
/>
|
||
|
|
<ScrollView style={{
|
||
|
|
flex: 1,
|
||
|
|
marginTop: -5
|
||
|
|
}}>
|
||
|
|
<View style={styles.userInformation}>
|
||
|
|
<ScrollView>
|
||
|
|
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
|
||
|
|
<Image source={require('../../assets/img/users/man.png')}
|
||
|
|
style={{width: 92, height: 92}}/>
|
||
|
|
</View>
|
||
|
|
<View style={{flex: 1, flexDirection: 'row'}}>
|
||
|
|
{user.category === undefined || user.category === null ?
|
||
|
|
this.getHeaderLeftProfil(user) : this.getHeaderLeftAgentProfil(user)
|
||
|
|
}
|
||
|
|
<View style={{flex: user.category === undefined || user.category === null ? 2 : 2}}>
|
||
|
|
<Text style={styles.textInformation}>{this.state.user.firstname}</Text>
|
||
|
|
<Text style={styles.textInformation}>{this.state.user.lastname}</Text>
|
||
|
|
{<Text style={{
|
||
|
|
color: 'white',
|
||
|
|
fontSize: 17,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
textAlign: 'center'
|
||
|
|
}}>{cat}</Text>
|
||
|
|
}
|
||
|
|
|
||
|
|
</View>
|
||
|
|
{user.category === undefined || user.category === null ?
|
||
|
|
this.getHeaderRight(user)
|
||
|
|
: this.getHeaderRightAgent(user)}
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
<View style={styles.networkInformation}>
|
||
|
|
|
||
|
|
<Text style={{
|
||
|
|
marginLeft: 10, marginRight: 10, marginTop: 15, marginBottom: 5, fontSize: 17,
|
||
|
|
fontWeight: 'bold', color: 'black'
|
||
|
|
}}>{I18n.t("ACCOUNT_INFO")}</Text>
|
||
|
|
<CardView style={{marginLeft: 10, marginRight: 10, paddingBottom: 20}}>
|
||
|
|
<ScrollView>
|
||
|
|
{user.category !== undefined && user.category !== null ? this
|
||
|
|
.addAgentInformation(user) : null}
|
||
|
|
<Text style={styles.textInformation2}>
|
||
|
|
<Icon name={"location-on"} size={18}/>{" " + this.state.user.country ? this.state.user.country : ''}</Text>
|
||
|
|
|
||
|
|
{user.balance !== undefined && user.balance !== null ? this.showBalance(user) : null}
|
||
|
|
<Text style={styles.textInformation2}>
|
||
|
|
<Icon name={"mail"} size={18}/>{" " + this.state.user.email}</Text>
|
||
|
|
|
||
|
|
|
||
|
|
<Text style={styles.textInformation2}>
|
||
|
|
|
||
|
|
<Icon name={"phone"} size={18}/>
|
||
|
|
{" " + this.state.user.phone}</Text>
|
||
|
|
{this.showPhoneSup()}
|
||
|
|
{/* <Text style={styles.textInformation2}>
|
||
|
|
|
||
|
|
<Icon name={"account-balance-wallet"} size={18} />
|
||
|
|
{" " + this.state.user.network}</Text>*/}
|
||
|
|
</ScrollView>
|
||
|
|
</CardView>
|
||
|
|
|
||
|
|
{user.category === 'geolocated' ?
|
||
|
|
(<Text style={{
|
||
|
|
marginLeft: 10,
|
||
|
|
marginRight: 10,
|
||
|
|
marginTop: 15,
|
||
|
|
marginBottom: 5,
|
||
|
|
fontSize: 17,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: 'black'
|
||
|
|
}}>{I18n.t("MY_NETWORK")}</Text>)
|
||
|
|
|
||
|
|
: null}
|
||
|
|
{user.category === 'geolocated' || user.category === 'super' ? (this.state.mynetworks.length > 0 ? this.state.mynetworks.map(item => this.generateItemNetwork(item)) : this.showLoader()) : null}
|
||
|
|
</View>
|
||
|
|
</ScrollView>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
showPhoneSup() {
|
||
|
|
if (this.state.user.phoneTransaction != undefined && this.state.user.phoneTransaction != null) {
|
||
|
|
|
||
|
|
return (<Text style={styles.textInformation2}>
|
||
|
|
|
||
|
|
<Icon name={"phone"} size={18}/>
|
||
|
|
{" " + this.state.user.phoneTransaction}</Text>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getHeaderLeftProfil(user) {
|
||
|
|
return (<View style={{flex: 2}}>
|
||
|
|
<Text style={{
|
||
|
|
color: 'white',
|
||
|
|
fontSize: 15,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
textAlign: 'center'
|
||
|
|
}}>{I18n.t("NETWORK")}</Text>
|
||
|
|
<Text style={{color: 'white', fontSize: 15, textAlign: 'center'}}>{user.network}</Text>
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
|
||
|
|
getHeaderRight(user) {
|
||
|
|
return (<View style={{flex: 0}}>
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
|
||
|
|
getHeaderRightAgent(user) {
|
||
|
|
|
||
|
|
return (<View style={{flex: 2}}>
|
||
|
|
<Text style={{
|
||
|
|
color: 'white',
|
||
|
|
fontSize: 15,
|
||
|
|
textAlign: 'center',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
}}>{I18n.t("MEMBER_CODE")}</Text>
|
||
|
|
<Text style={{color: 'white', fontSize: 13, textAlign: 'center'}}>{user.code_membre}</Text>
|
||
|
|
</View>)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
getHeaderLeftAgentProfil(user) {
|
||
|
|
return (<View style={{flex: 2}}>
|
||
|
|
<Text style={{
|
||
|
|
color: 'white',
|
||
|
|
fontSize: 15,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
textAlign: 'center'
|
||
|
|
}}>{I18n.t("NETWORK")}</Text>
|
||
|
|
<Text style={{color: 'white', fontSize: 13, textAlign: 'center'}}>{user.network}</Text>
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
|
||
|
|
addAgentInformation(user) {
|
||
|
|
console.log(user)
|
||
|
|
if (user.category === "geolocated") {
|
||
|
|
(<View>
|
||
|
|
<Text style={{marginLeft: 10, marginTop: 10, color: theme.primaryDark}}>
|
||
|
|
<Icon name={'code'} size={18} color={theme.primaryDark} style={{paddingRight: 10}}/>
|
||
|
|
{" " + user.code_parrain}</Text>
|
||
|
|
</View>)
|
||
|
|
|
||
|
|
} else
|
||
|
|
return (<View>
|
||
|
|
|
||
|
|
<Text style={{marginLeft: 10, marginTop: 10, color: theme.primaryDark}}>
|
||
|
|
<Icon name={'code'} size={18} color={theme.primaryDark} style={{paddingRight: 10}}/>
|
||
|
|
{" " + user.code_parrain}</Text>
|
||
|
|
<View style={{
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
width: responsiveWidth(90),
|
||
|
|
marginRight: 50
|
||
|
|
}}>
|
||
|
|
<Text style={{marginLeft: 12, marginTop: 10, color: theme.primaryDark}}>
|
||
|
|
<Icon name={"group-work"} color={theme.primaryDark} size={18}/>
|
||
|
|
{" " + ((user.nbre_reseau === null || user.nbre_reseau === undefined) ? 0 : user.nbre_reseau) + " " + I18n.t("FREE")}
|
||
|
|
</Text>
|
||
|
|
<Text style={{marginLeft: 12, marginTop: 10, color: theme.primaryDark}}>
|
||
|
|
<Icon name={"book"} color={theme.primaryDark}
|
||
|
|
size={18}/>{" " + ((user.nbre_reseau === null || user.nbre_membre === undefined) ? 0 : user.nbre_membre) + " " + I18n.t("SAVED")}
|
||
|
|
</Text>
|
||
|
|
</View>
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
|
||
|
|
mapUser(user) {
|
||
|
|
const myPosition = {latitude: parseFloat(user.latitude), longitude: parseFloat(user.longitude)}
|
||
|
|
|
||
|
|
return (<MapView
|
||
|
|
liteMode
|
||
|
|
ref={(ref) => {
|
||
|
|
this.mapRef = ref
|
||
|
|
}}
|
||
|
|
style={styles.map}
|
||
|
|
>
|
||
|
|
{this.state.myPosition !== undefined ?
|
||
|
|
<Marker
|
||
|
|
title={"Vous êtes ici"}
|
||
|
|
minZoomLevel={10}
|
||
|
|
coordinate={{longitude: myPosition.longitude, latitude: myPosition.latitude}}
|
||
|
|
/> :
|
||
|
|
null}
|
||
|
|
</MapView>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
showBalance(user) {
|
||
|
|
return <Text style={styles.textInformation2}>
|
||
|
|
<Icon name={"folder"} size={18}/>{" " + this.state.user.balance + " "}</Text>
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
makeGeolocatedNetworkList() {
|
||
|
|
|
||
|
|
return (<View>
|
||
|
|
<Text style={{
|
||
|
|
marginLeft: 10,
|
||
|
|
marginRight: 10,
|
||
|
|
marginTop: 15,
|
||
|
|
marginBottom: 5,
|
||
|
|
fontSize: 17,
|
||
|
|
fontWeight: 'bold',
|
||
|
|
color: 'black'
|
||
|
|
}}>Mes reseaux</Text>
|
||
|
|
|
||
|
|
</View>)
|
||
|
|
}
|
||
|
|
|
||
|
|
generateItemNetwork(item) {
|
||
|
|
return (
|
||
|
|
|
||
|
|
<Card>
|
||
|
|
|
||
|
|
<CardTitle
|
||
|
|
title={item.name}
|
||
|
|
subtitle={item.phone}
|
||
|
|
/>
|
||
|
|
<CardContent>
|
||
|
|
<View Style={{flex: 1}}>
|
||
|
|
<Text style={styles.textInformation2}>
|
||
|
|
<Icon name={"code"} size={18}/>{" " + item.code_membre + " "}</Text>
|
||
|
|
<Text style={styles.textInformation2}>
|
||
|
|
<Icon name={"people"} size={18}/>{" " + item.code_parrain + " "}</Text>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</CardContent>
|
||
|
|
{/* <CardAction
|
||
|
|
separator={true}
|
||
|
|
inColumn={false}>
|
||
|
|
<CardButton
|
||
|
|
onPress={() => {
|
||
|
|
Alert.alert(
|
||
|
|
I18n.t("TITLE_SUPPRESS_CONFIRM"),
|
||
|
|
I18n.t("TEXT_SUPPRESS_CONFIRM"),
|
||
|
|
[
|
||
|
|
{ text: I18n.t('NO'), onPress: () => { } },
|
||
|
|
{
|
||
|
|
text: I18n.t("YES"), onPress: () => {
|
||
|
|
deleteUser(item).then(() => {
|
||
|
|
this.setState({ isLoading: true })
|
||
|
|
this.updateContent(this.state.user)
|
||
|
|
})
|
||
|
|
},
|
||
|
|
style: 'cancel'
|
||
|
|
},
|
||
|
|
],
|
||
|
|
)
|
||
|
|
}}
|
||
|
|
title={I18n.t('DELETE_GEOLOCATED_USER')}
|
||
|
|
color="crimson"
|
||
|
|
/>
|
||
|
|
</CardAction>*/}
|
||
|
|
</Card>)
|
||
|
|
}
|
||
|
|
|
||
|
|
showLoader() {
|
||
|
|
return (<View style={{height: responsiveHeight(20)}}><ProgressBarAndroid
|
||
|
|
|
||
|
|
style={{justifyContent: "center", alignItems: "center"}}
|
||
|
|
/></View>)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
const styles = StyleSheet.create({
|
||
|
|
userInformation: {
|
||
|
|
backgroundColor: theme.primary,
|
||
|
|
flex: 1,
|
||
|
|
justifyContent: 'center',
|
||
|
|
paddingTop: responsiveHeight(2),
|
||
|
|
paddingBottom: responsiveHeight(5)
|
||
|
|
},
|
||
|
|
map: {
|
||
|
|
height: 200,
|
||
|
|
marginRight: responsiveWidth(5),
|
||
|
|
marginLeft: responsiveWidth(5),
|
||
|
|
marginVertical: 10,
|
||
|
|
},
|
||
|
|
networkInformation: {
|
||
|
|
width: responsiveWidth(100),
|
||
|
|
backgroundColor: '#EEEEEE',
|
||
|
|
flex: 1
|
||
|
|
},
|
||
|
|
container: {
|
||
|
|
flex: 1,
|
||
|
|
backgroundColor: '#EEEEEE',
|
||
|
|
},
|
||
|
|
contain: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
},
|
||
|
|
identificationOptionMenuContainer: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
paddingTop: 10,
|
||
|
|
paddingLeft: 10,
|
||
|
|
paddingRight: 10,
|
||
|
|
},
|
||
|
|
containerTouch: {
|
||
|
|
flex: 1,
|
||
|
|
flexDirection: 'row',
|
||
|
|
marginRight: 2.5,
|
||
|
|
alignItems: 'center',
|
||
|
|
shadowColor: Color.borderColor,
|
||
|
|
borderColor: Color.borderColor,
|
||
|
|
shadowOffset: {width: 1.5, height: 1.5},
|
||
|
|
shadowOpacity: 1.0,
|
||
|
|
elevation: 5,
|
||
|
|
borderRadius: 10,
|
||
|
|
backgroundColor: Color.cardBackgroundColor
|
||
|
|
},
|
||
|
|
contain: {
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
},
|
||
|
|
imageBanner: {
|
||
|
|
marginTop: 15,
|
||
|
|
marginLeft: 5,
|
||
|
|
width: Utils.scaleWithPixel(30),
|
||
|
|
height: Utils.scaleWithPixel(30)
|
||
|
|
},
|
||
|
|
content: {
|
||
|
|
height: Utils.scaleWithPixel(60),
|
||
|
|
paddingHorizontal: 10,
|
||
|
|
justifyContent: 'space-between',
|
||
|
|
alignItems: 'flex-start',
|
||
|
|
flex: 1,
|
||
|
|
},
|
||
|
|
contentTitle: {
|
||
|
|
paddingTop: 5,
|
||
|
|
},
|
||
|
|
textInformation: {
|
||
|
|
fontSize: 16,
|
||
|
|
color: 'white',
|
||
|
|
textAlign: 'center'
|
||
|
|
},
|
||
|
|
textInformation2: {
|
||
|
|
fontSize: 15,
|
||
|
|
marginTop: 7,
|
||
|
|
color: theme.primaryDark,
|
||
|
|
marginLeft: 10,
|
||
|
|
},
|
||
|
|
textTitle: {
|
||
|
|
fontSize: 25,
|
||
|
|
color: 'white',
|
||
|
|
fontWeight: 'bold'
|
||
|
|
},
|
||
|
|
|
||
|
|
textTitle2: {
|
||
|
|
fontSize: 25,
|
||
|
|
color: theme.primaryDark,
|
||
|
|
fontWeight: 'bold'
|
||
|
|
}
|
||
|
|
});
|