390 lines
14 KiB
JavaScript
390 lines
14 KiB
JavaScript
|
import React,{Component} from 'react';
|
||
|
|
import {StyleSheet,View,Text,Image,StatusBar,ScrollView,ProgressBarAndroid,Alert} from 'react-native';
|
||
|
|
let theme=require('./../../utils/theme.json');
|
||
|
|
import {readUser,deleteUser} from './../../webservice/AuthApi';
|
||
|
|
import {getAgentNetworksList} from './../../webservice/NetworkApi'
|
||
|
|
import {responsiveHeight, responsiveWidth} from 'react-native-responsive-dimensions';
|
||
|
|
import MapView,{Marker} from 'react-native-maps';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialIcons'
|
||
|
|
import Button from 'apsl-react-native-button'
|
||
|
|
import CardView from "react-native-cardview";
|
||
|
|
import I18n from 'react-native-i18n'
|
||
|
|
import {Header} from 'react-native-elements'
|
||
|
|
import {IlinkEmitter} from "../../utils/events";
|
||
|
|
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
|
||
|
|
|
||
|
|
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('./../../datas/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}</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={"signal-cellular-4-bar"} 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'?(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',
|
||
|
|
|
||
|
|
},
|
||
|
|
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'
|
||
|
|
}
|
||
|
|
});
|