880 lines
35 KiB
JavaScript
880 lines
35 KiB
JavaScript
|
import React, { Component } from 'react';
|
||
|
|
import {
|
||
|
|
Modal,
|
||
|
|
StyleSheet,
|
||
|
|
Text,
|
||
|
|
View,
|
||
|
|
Image,
|
||
|
|
ProgressBarAndroid,
|
||
|
|
ScrollView,
|
||
|
|
TouchableOpacity,
|
||
|
|
Platform,
|
||
|
|
PermissionsAndroid,
|
||
|
|
Alert,
|
||
|
|
FlatList,
|
||
|
|
BackHandler
|
||
|
|
} from 'react-native';
|
||
|
|
import PropTypes from 'prop-types';
|
||
|
|
import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
|
||
|
|
import { responsiveHeight,responsiveWidth,responsiveFontSize } from 'react-native-responsive-dimensions';
|
||
|
|
import {Fumi,Kaede} from 'react-native-textinput-effects'
|
||
|
|
import * as Animatable from 'react-native-animatable';
|
||
|
|
import Button from 'apsl-react-native-button';
|
||
|
|
import MapView,{Marker} from 'react-native-maps';
|
||
|
|
import { Dropdown } from 'react-native-material-dropdown';
|
||
|
|
import isEqual from 'lodash/isEqual';
|
||
|
|
import {getPositionInformation} from './../../webservice/MapService';
|
||
|
|
import I18n from 'react-native-i18n'
|
||
|
|
import { material } from 'react-native-typography';
|
||
|
|
import Icon from 'react-native-vector-icons/MaterialIcons';
|
||
|
|
import {getCountryNetwork,createGeolocatedAccount,createUserAccount,getTownInformationName,getListCountriesActive,getCodeInformation} from './../../webservice/AuthApi';
|
||
|
|
import {SinglePickerMaterialDialog,MultiPickerMaterialDialog,MaterialDialog} from "react-native-material-dialog";
|
||
|
|
import Geolocation from 'react-native-geolocation-service';
|
||
|
|
const GEOLOCATION_OPTIONS = { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000,useSignificantChanges:true };
|
||
|
|
|
||
|
|
let theme=require('./../../utils/theme.json');
|
||
|
|
let route=require('./../../route.json');
|
||
|
|
let country=require('./../../utils/country_code.json');
|
||
|
|
/*var Fabric = require('react-native-fabric');
|
||
|
|
|
||
|
|
var { Crashlytics } = Fabric;
|
||
|
|
var { Answers } = Fabric;*/
|
||
|
|
declare var google;
|
||
|
|
import Spinner from "react-native-loading-spinner-overlay"
|
||
|
|
const propTypes = {
|
||
|
|
...Marker.propTypes,
|
||
|
|
coordinate: PropTypes.shape({
|
||
|
|
latitude: PropTypes.number.isRequired,
|
||
|
|
longitude: PropTypes.number.isRequired,
|
||
|
|
}),
|
||
|
|
children: PropTypes.node,
|
||
|
|
geolocationOptions: PropTypes.shape({
|
||
|
|
enableHighAccuracy: PropTypes.bool,
|
||
|
|
timeout: PropTypes.number,
|
||
|
|
maximumAge: PropTypes.number,
|
||
|
|
}),
|
||
|
|
heading: PropTypes.number,
|
||
|
|
enableHack: PropTypes.bool,
|
||
|
|
};
|
||
|
|
|
||
|
|
const defaultProps = {
|
||
|
|
enableHack: false,
|
||
|
|
geolocationOptions: GEOLOCATION_OPTIONS,
|
||
|
|
};
|
||
|
|
|
||
|
|
export default class CreateUserStep2 extends Component{
|
||
|
|
static navigatorStyle = {
|
||
|
|
drawUnderNavBar: true,
|
||
|
|
navBarHidden:true,
|
||
|
|
drawUnderStatusBar: false,
|
||
|
|
statusBarHidden: true,
|
||
|
|
statusBarTextColorScheme: 'light',
|
||
|
|
};
|
||
|
|
|
||
|
|
static options(passProps){
|
||
|
|
return {
|
||
|
|
topBar:{
|
||
|
|
visible:false,
|
||
|
|
enabled:false,
|
||
|
|
drawBehind: true,
|
||
|
|
|
||
|
|
},
|
||
|
|
statusBar:{
|
||
|
|
drawBehind: true,
|
||
|
|
enabled:false,
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
constructor(props) {
|
||
|
|
super(props);
|
||
|
|
const {navigation} = this.props;
|
||
|
|
this.type = navigation.getParam("type", 0);
|
||
|
|
this.user = navigation.getParam('user', null);
|
||
|
|
this.state = this.initState();
|
||
|
|
}
|
||
|
|
retreiveCodeInformation(){
|
||
|
|
const membre=this.state.user.member;
|
||
|
|
return new Promise(async (resolve,reject)=>{
|
||
|
|
let datas=await getCodeInformation(membre)
|
||
|
|
resolve(datas)
|
||
|
|
})
|
||
|
|
|
||
|
|
}
|
||
|
|
initState() {
|
||
|
|
return {
|
||
|
|
password: null,
|
||
|
|
enterPhone: null,
|
||
|
|
nameanim: null,
|
||
|
|
networksinglePickerVisible:false,
|
||
|
|
surnameanim: null,
|
||
|
|
passwordanim: null,
|
||
|
|
confirmpassanim: null,
|
||
|
|
isLoging: false,
|
||
|
|
countries:[],
|
||
|
|
snackVisible: false,
|
||
|
|
snackText: '',
|
||
|
|
disableNetwork:false,
|
||
|
|
networks:[],
|
||
|
|
modalVisible:true,
|
||
|
|
select_network:I18n.t("SELECT_NETWORK"),
|
||
|
|
user: this.user
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
render(){
|
||
|
|
|
||
|
|
return this.type===1?this.renderUserGeoAccount():this.renderUserAccount()
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
async getNetworks(indicatif) {
|
||
|
|
|
||
|
|
if (indicatif){
|
||
|
|
let result={}
|
||
|
|
try{
|
||
|
|
result=await this.retreiveCodeInformation()
|
||
|
|
const {category}=result
|
||
|
|
}catch(e){
|
||
|
|
result=false
|
||
|
|
}
|
||
|
|
console.log(result)
|
||
|
|
if(result){
|
||
|
|
if(result.child){
|
||
|
|
this.setState({disableNetwork:true})
|
||
|
|
if(result.network)
|
||
|
|
this.setState({modalVisible:false,networks:[result.network],
|
||
|
|
network:result.network,select_network:I18n.t("YOUR_NETWORK")})
|
||
|
|
|
||
|
|
else {
|
||
|
|
Alert.alert(I18n.t('TITLE_PROBLE_COME'),"Impossible de recuperer les informations du code parrain",[{text:"Revenir",onPress:()=>this.props.navigation.pop()}])
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
console.log("need enable")
|
||
|
|
getCountryNetwork(indicatif).then((result) => {
|
||
|
|
this.reseaux = [];
|
||
|
|
let networks = result;
|
||
|
|
|
||
|
|
for(let prop in networks){
|
||
|
|
if(networks[prop]!==""){
|
||
|
|
this.reseaux.push(networks[prop]);
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
this.setState({networks:this.reseaux});
|
||
|
|
this.setState({modalVisible:false})
|
||
|
|
|
||
|
|
}, (err) => {
|
||
|
|
this.setState({modalVisible:false})
|
||
|
|
this.showErrorDialog()
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}else{
|
||
|
|
getCountryNetwork(indicatif).then((result) => {
|
||
|
|
this.reseaux = [];
|
||
|
|
let networks = result;
|
||
|
|
for(let prop in networks){
|
||
|
|
if(networks[prop]!==""){
|
||
|
|
this.reseaux.push(networks[prop]);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
this.setState({networks:this.reseaux});
|
||
|
|
this.setState({modalVisible:false})
|
||
|
|
|
||
|
|
}, (err) => {
|
||
|
|
this.setState({modalVisible:false})
|
||
|
|
this.showErrorDialog()
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
} else {
|
||
|
|
this.setState({modalDialog:false})
|
||
|
|
Alert.alert("Une erreur est survenue","Impossible de récuperer des informations du pays verifier que votre gps est activé," +
|
||
|
|
"et que vous êtes connecté à internet puis ressayer",[{text:"Recommencer",onPress:()=>{
|
||
|
|
this.setState({modalDialog:true})
|
||
|
|
this.watchLocation()
|
||
|
|
}},{text:"Annuler",onPress:()=>{this.props.navigation.popToTop()}}])
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
showErrorDialog(){
|
||
|
|
this.setState({modalDialog:false})
|
||
|
|
Alert.alert("Une erreur est survenue","Impossible de récuperer des informations du pays verifier que votre gps est activé," +
|
||
|
|
"et que vous êtes connecté à internet puis ressayer",[{text:"Recommencer",onPress:()=>{
|
||
|
|
this.watchLocation()
|
||
|
|
}},{text:"Annuler",onPress:()=>{this.props.navigation.popToTop()}}])
|
||
|
|
}
|
||
|
|
|
||
|
|
componentDidMount() {
|
||
|
|
|
||
|
|
this.mounted = true;
|
||
|
|
const {type}=this.props;
|
||
|
|
|
||
|
|
|
||
|
|
if (this.props.coordinate) return;
|
||
|
|
|
||
|
|
if (Platform.OS === 'android') {
|
||
|
|
this.requestCameraPermission();
|
||
|
|
} else {
|
||
|
|
this.watchLocation();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
async requestCameraPermission() {
|
||
|
|
try {
|
||
|
|
const granted = await PermissionsAndroid.request(
|
||
|
|
PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
|
||
|
|
{
|
||
|
|
'title': 'Cool Photo App Camera Permission',
|
||
|
|
'message': 'Cool Photo App needs access to your camera ' +
|
||
|
|
'so you can take awesome pictures.'
|
||
|
|
}
|
||
|
|
)
|
||
|
|
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
|
||
|
|
this.watchLocation();
|
||
|
|
} else {
|
||
|
|
this.setState({modalDialog:false})
|
||
|
|
Alert.alert("Echec à l'autorisation",
|
||
|
|
"L'application n'est pas autorisé à acceder à votre position veuillez verifier que votre GPS est activé et configurer en mode Haute Precision",
|
||
|
|
[{text:"Ok",onPress:()=>{
|
||
|
|
this.props.navigation.popToTop() }}])
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
this.setState({modalDialog:false})
|
||
|
|
Alert.alert("Une erreur est Survenue",
|
||
|
|
"Une erreur est survenu lors du demarrage de l'application veuillez relancer l'application",
|
||
|
|
[{text:"Ok",onPress:()=>{
|
||
|
|
BackHandler.exitApp()
|
||
|
|
}}]) }
|
||
|
|
}
|
||
|
|
|
||
|
|
async watchLocation() {
|
||
|
|
Geolocation.getCurrentPosition((position) => {
|
||
|
|
this.treatPosition(position)}, (e)=>{
|
||
|
|
this.showErrorDialog()
|
||
|
|
}, this.props.geolocationOptions);
|
||
|
|
if(!this.watchID){
|
||
|
|
Geolocation.watchPosition((position) => {this.treatPosition(position)},(e)=>{this.showErrorDialog()},this.props.geolocationOptions)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
treatPosition(position){
|
||
|
|
const myLastPosition = this.state.myPosition;
|
||
|
|
const myPosition = position.coords;
|
||
|
|
|
||
|
|
if (!isEqual(myPosition, myLastPosition)) {
|
||
|
|
getPositionInformation(myPosition).then((response)=>{
|
||
|
|
if(response.results!==undefined){
|
||
|
|
if(response.results.length>0) {
|
||
|
|
let most = response.results[0]
|
||
|
|
let {address_components, formatted_address, place_id} = most
|
||
|
|
this.setState({address: address_components, textadress: formatted_address, place: place_id})
|
||
|
|
|
||
|
|
let results=response.results;
|
||
|
|
let shortcountry;
|
||
|
|
let mcountry;
|
||
|
|
for (let i=0; i < results[0].address_components.length; i++) {
|
||
|
|
for (let j=0; j < results[0].address_components[i].types.length; j++) {
|
||
|
|
if (results[0].address_components[i].types[j] === "country") {
|
||
|
|
mcountry = results[0].address_components[i];
|
||
|
|
shortcountry=mcountry.short_name;
|
||
|
|
this.setState({shortCountry:mcountry.short_name,longCountry: mcountry.long_name})
|
||
|
|
}else if(results[0].address_components[i].types[j]==="locality"){
|
||
|
|
const name=results[0].address_components[i].short_name;
|
||
|
|
this.setState({townName:name});
|
||
|
|
getTownInformationName(name).then((result)=>{
|
||
|
|
let town=null;
|
||
|
|
if(result instanceof Array){
|
||
|
|
town=result[0];
|
||
|
|
}else
|
||
|
|
town=result;
|
||
|
|
this.setState({town:town});
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
getListCountriesActive().then((cnt)=>{
|
||
|
|
this.setState({countries:cnt})
|
||
|
|
console.debug(cnt,shortcountry);
|
||
|
|
var found=false
|
||
|
|
for (let i of cnt) {
|
||
|
|
if (i.code_country === shortcountry) {
|
||
|
|
found=true
|
||
|
|
this.setState({indicatif: i.code_dial,country:i.name})
|
||
|
|
this.getNetworks(i.code_dial);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if(!found){
|
||
|
|
Alert.alert("Impossible de recupérer vos informations","Nous n'avons pas pu recuperer les informations de votre pays veuillez contacter les administrateurs",[{text:"OK"}]);
|
||
|
|
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}).catch((e)=>{
|
||
|
|
this.showErrorDialog()
|
||
|
|
});
|
||
|
|
this.setState({ myPosition:myPosition });
|
||
|
|
if(this.mapRef!==undefined && this.mapRef!==null) {
|
||
|
|
this.mapRef.animateToCoordinate({
|
||
|
|
latitude: myPosition.latitude,
|
||
|
|
longitude: myPosition.longitude
|
||
|
|
}, 1000);
|
||
|
|
this.mapRef.animateToRegion({
|
||
|
|
latitude: myPosition.latitude,
|
||
|
|
longitude: myPosition.longitude,
|
||
|
|
latitudeDelta: 0.03,
|
||
|
|
longitudeDelta: 0.01,
|
||
|
|
}, 1000)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
componentWillUnmount() {
|
||
|
|
this.mounted = false;
|
||
|
|
// eslint-disable-next-line no-undef
|
||
|
|
if (this.watchID) Geolocation.clearWatch(this.watchID);
|
||
|
|
}
|
||
|
|
renderUserGeoAccount() {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<View style={styles.container}>
|
||
|
|
{this.prepareModal()}
|
||
|
|
<View style={{flexDirection:'row'}}>
|
||
|
|
<Icon.Button name={"keyboard-backspace"}
|
||
|
|
color={"white"}
|
||
|
|
size={24}
|
||
|
|
backgroundColor={theme.primary}
|
||
|
|
onPress={()=>this.props.navigation.pop()}
|
||
|
|
/>
|
||
|
|
<Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
<ScrollView style={styles.container}>
|
||
|
|
<View
|
||
|
|
style={{width:responsiveWidth(90),
|
||
|
|
marginTop:20,
|
||
|
|
alignSelf:'center',
|
||
|
|
borderRadius:10,
|
||
|
|
paddingLeft:20,
|
||
|
|
paddingRight:20,
|
||
|
|
backgroundColor:'white'}}
|
||
|
|
|
||
|
|
>
|
||
|
|
<Dropdown
|
||
|
|
label={I18n.t('COUNTRY_CHOICE')}
|
||
|
|
data={this.state.countries}
|
||
|
|
useNativeDriver={true}
|
||
|
|
disabled={this.state.disableNetwork}
|
||
|
|
|
||
|
|
value={this.state.country===null?"":
|
||
|
|
this.state.country}
|
||
|
|
onChangeText={(value,index,data)=>{
|
||
|
|
this.setState({country:value,indicatif:value.code_dial,network:null})
|
||
|
|
this.getNetworks(value.code_dial)
|
||
|
|
}}
|
||
|
|
valueExtractor={(value)=>{return value.name}}
|
||
|
|
labelExtractor={(value)=>{return value.name}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.numanim=comp}}>
|
||
|
|
<View style={{flexDirection:'row',flex:1}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'flag'}
|
||
|
|
value={this.state.indicatif}
|
||
|
|
enabled={false}
|
||
|
|
editable = {false}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let phonenum=text+this.state.contact!==undefined?this.state.contact:"";
|
||
|
|
this.setState({indicatif:text,phone:phonenum})}}
|
||
|
|
style={{
|
||
|
|
width:responsiveWidth(30),
|
||
|
|
height:responsiveHeight(10),
|
||
|
|
alignSelf:'center',
|
||
|
|
marginTop:responsiveHeight(2),
|
||
|
|
marginLeft:responsiveWidth(5),
|
||
|
|
marginRight:responsiveWidth(5),
|
||
|
|
borderRadius:5,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<View>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
|
||
|
|
placeholder={I18n.t('PHONE')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
ref={(comp)=>{this.num_input=comp}}
|
||
|
|
iconSize={20}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let phonenumber=text
|
||
|
|
this.setState({phone:phonenumber,contact:text})}}
|
||
|
|
style={{
|
||
|
|
|
||
|
|
marginTop:responsiveHeight(2),
|
||
|
|
marginRight:responsiveWidth(5),
|
||
|
|
|
||
|
|
width:responsiveWidth(55),
|
||
|
|
borderRadius:5,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
|
||
|
|
placeholder={I18n.t('PHONE_TRANSACTION')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
ref={(comp)=>{this.num_input=comp}}
|
||
|
|
iconSize={20}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let phonenumber=text
|
||
|
|
this.setState({phoneTransaction:phonenumber,contactTransaction:text})}}
|
||
|
|
style={{
|
||
|
|
|
||
|
|
marginTop:responsiveHeight(2),
|
||
|
|
marginRight:responsiveWidth(5),
|
||
|
|
|
||
|
|
width:responsiveWidth(55),
|
||
|
|
borderRadius:5,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</View>
|
||
|
|
</View>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp)=>{this.networkanim=comp}}>
|
||
|
|
<View
|
||
|
|
style={{width:responsiveWidth(90),
|
||
|
|
marginTop:20,
|
||
|
|
alignSelf:'center',
|
||
|
|
borderRadius:10,
|
||
|
|
paddingLeft:20,
|
||
|
|
paddingRight:20,
|
||
|
|
backgroundColor:'white'}}
|
||
|
|
|
||
|
|
>
|
||
|
|
<Button
|
||
|
|
style={{borderColor:'transparent'}}
|
||
|
|
isDisabled={this.state.disableNetwork}
|
||
|
|
onPress={()=>{
|
||
|
|
this.setState({networksinglePickerVisible:true})
|
||
|
|
}}>
|
||
|
|
<View>
|
||
|
|
<Text style={material.subheading}>{this.state.select_network}</Text>
|
||
|
|
<Text style={material.subheading}>{this.state.network?this.state.network.name:""}</Text>
|
||
|
|
</View>
|
||
|
|
</Button>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
</Animatable.View>
|
||
|
|
<Text
|
||
|
|
style={{fontSize:16,
|
||
|
|
marginTop:10,
|
||
|
|
marginLeft:responsiveWidth(6),marginRight:responsiveWidth(6),color:'white',fontWeight:'bold'}}
|
||
|
|
>{I18n.t('WAIT_LOADING_POSITION')}</Text>
|
||
|
|
<Animatable.View
|
||
|
|
ref={(comp)=>{this.mapanim=comp}}
|
||
|
|
>
|
||
|
|
<MapView
|
||
|
|
liteMode
|
||
|
|
ref={(ref) => { this.mapRef = ref }}
|
||
|
|
style={styles.map}
|
||
|
|
>
|
||
|
|
{this.state.myPosition!==undefined?
|
||
|
|
<Marker
|
||
|
|
title={I18n.t('YOUR_THERE')}
|
||
|
|
minZoomLevel={18}
|
||
|
|
coordinate={{longitude:this.state.myPosition.longitude,latitude:this.state.myPosition.latitude}}
|
||
|
|
/>:
|
||
|
|
null}
|
||
|
|
</MapView>
|
||
|
|
</Animatable.View>
|
||
|
|
<TouchableOpacity style={{flexDirection:'row',alignItems:'center'}}>
|
||
|
|
<Image
|
||
|
|
|
||
|
|
style={{width:24,height:24,
|
||
|
|
marginLeft:responsiveWidth(6)}}
|
||
|
|
source={require('./../../datas/img/userplace.png')}
|
||
|
|
/>
|
||
|
|
<Text
|
||
|
|
style={{fontSize:16,
|
||
|
|
marginTop:10,marginRight:responsiveWidth(6),color:'white',fontWeight:'bold'}}
|
||
|
|
>{this.state.textadress!==undefined?this.state.textadress:I18n.t('TAKE_MY_POSITION')}</Text>
|
||
|
|
</TouchableOpacity>
|
||
|
|
<Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
|
||
|
|
isLoading={this.state.isLoading}
|
||
|
|
onPress={()=>{this.checkUserGeolocated()}}>{I18n.t('CREATE_ACCOUNT')}</Button>
|
||
|
|
|
||
|
|
|
||
|
|
</ScrollView>
|
||
|
|
<MaterialDialog
|
||
|
|
title={'Selecionner un reseau'}
|
||
|
|
items={LONG_LIST.map((row, index) => ({ value: row, label:row }))}
|
||
|
|
visible={this.state.networksinglePickerVisible}
|
||
|
|
selectedItem={this.state.singlePickerSelectedItem}
|
||
|
|
onCancel={() => this.setState({ networksinglePickerVisible: false })}
|
||
|
|
onOk={result => {
|
||
|
|
this.setState({ networksinglePickerVisible: false });
|
||
|
|
this.setState({ singlePickerSelectedItem: result.selectedItem });
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<FlatList style={{height:responsiveHeight(40)}}
|
||
|
|
data={this.state.networks}
|
||
|
|
renderItem={({item})=>this.renderRow(item)} />
|
||
|
|
</MaterialDialog>
|
||
|
|
</View>
|
||
|
|
)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
onRowPress(rowID) {
|
||
|
|
this.setState({network:rowID})
|
||
|
|
}
|
||
|
|
renderRow = (row) => (
|
||
|
|
<TouchableOpacity key={row} onPress={() => this.onRowPress(row)}>
|
||
|
|
<View style={styles.rowContainer}>
|
||
|
|
<View style={styles.iconContainer}>
|
||
|
|
<Icon
|
||
|
|
name={this.state.network && row.name===this.state.network.name ? 'radio-button-checked' : 'radio-button-unchecked'}
|
||
|
|
color={this.state.network && row.name===this.state.network.name ?theme.accent:this.props.colorAccent}
|
||
|
|
size={24}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<Text style={material.subheading}>{row.name}</Text>
|
||
|
|
</View>
|
||
|
|
</TouchableOpacity>
|
||
|
|
);
|
||
|
|
renderUserAccount() {
|
||
|
|
return (<ScrollView style={styles.container}>
|
||
|
|
{this.prepareModal()}
|
||
|
|
<View style={{flexDirection:'row'}}>
|
||
|
|
<Icon.Button name={"keyboard-backspace"}
|
||
|
|
color={"white"}
|
||
|
|
size={24}
|
||
|
|
backgroundColor={theme.primary}
|
||
|
|
onPress={()=>this.props.navigation.pop()}
|
||
|
|
/>
|
||
|
|
<Text style={styles.bigtitle}>{I18n.t('LAST_STEP')}</Text>
|
||
|
|
|
||
|
|
</View>
|
||
|
|
<View
|
||
|
|
style={{width:responsiveWidth(90),
|
||
|
|
marginTop:20,
|
||
|
|
alignSelf:'center',
|
||
|
|
borderRadius:10,
|
||
|
|
paddingLeft:20,
|
||
|
|
paddingRight:20,
|
||
|
|
backgroundColor:'white'}}
|
||
|
|
|
||
|
|
>
|
||
|
|
<Dropdown
|
||
|
|
label={I18n.t('COUNTRY_CHOICE')}
|
||
|
|
data={this.state.countries}
|
||
|
|
useNativeDriver={true}
|
||
|
|
value={this.state.country===null?"":
|
||
|
|
this.state.country}
|
||
|
|
onChangeText={(value,index,data)=>{
|
||
|
|
this.setState({country:value,indicatif:value.code_dial,network:null})
|
||
|
|
|
||
|
|
this.getNetworks(value.code_dial)
|
||
|
|
}}
|
||
|
|
valueExtractor={(value)=>{return value}}
|
||
|
|
labelExtractor={(value)=>{return value.name}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
<Animatable.View ref={(comp)=>{this.numanim=comp}}>
|
||
|
|
<View style={{flexDirection:'row',flex:1}}>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'flag'}
|
||
|
|
value={this.state.indicatif}
|
||
|
|
editable = {false}
|
||
|
|
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
|
||
|
|
this.setState({indicatif:text})}}
|
||
|
|
style={{
|
||
|
|
width:responsiveWidth(30),
|
||
|
|
marginTop:responsiveHeight(2),
|
||
|
|
marginLeft:responsiveWidth(5),
|
||
|
|
marginRight:responsiveWidth(5),
|
||
|
|
borderRadius:5,
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
<Fumi iconClass={FontAwesomeIcon} iconName={'phone'}
|
||
|
|
label={I18n.t('PHONE_NUMBER')}
|
||
|
|
iconColor={'#f95a25'}
|
||
|
|
ref={(comp)=>{this.num_input=comp}}
|
||
|
|
iconSize={20}
|
||
|
|
onChangeText={(text)=>{
|
||
|
|
let phonenumber=text
|
||
|
|
this.setState({phone:phonenumber})}}
|
||
|
|
style={{
|
||
|
|
|
||
|
|
marginTop:responsiveHeight(2),
|
||
|
|
marginRight:responsiveWidth(5),
|
||
|
|
|
||
|
|
width:responsiveWidth(55),
|
||
|
|
borderRadius:5,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
</Fumi>
|
||
|
|
</View>
|
||
|
|
</Animatable.View>
|
||
|
|
|
||
|
|
<Animatable.View ref={(comp)=>{this.networkanim=comp}}>
|
||
|
|
<View
|
||
|
|
style={{width:responsiveWidth(90),
|
||
|
|
marginTop:20,
|
||
|
|
alignSelf:'center',
|
||
|
|
borderRadius:10,
|
||
|
|
paddingLeft:20,
|
||
|
|
paddingRight:20,
|
||
|
|
backgroundColor:'white'}}
|
||
|
|
|
||
|
|
>
|
||
|
|
<Dropdown
|
||
|
|
label={I18n.t('NETWORK_CHOICE')}
|
||
|
|
data={this.state.networks}
|
||
|
|
value={this.state.network==null?"":this.state.network}
|
||
|
|
onChangeText={(value,index,data)=>{
|
||
|
|
this.setState({network:value})}}
|
||
|
|
valueExtractor={(value)=>{return value}}
|
||
|
|
labelExtractor={(value)=>{return value.name}}
|
||
|
|
/>
|
||
|
|
</View>
|
||
|
|
</Animatable.View>
|
||
|
|
<Button style={styles.btnvalide} textStyle={styles.textbtnvalide}
|
||
|
|
isLoading={this.state.isLoading}
|
||
|
|
onPress={()=>{this._onUserCreateAccount()}}>{I18n.t('CREATE_ACCOUNT')}</Button>
|
||
|
|
|
||
|
|
</ScrollView>)
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
_onUserCreateAccount() {
|
||
|
|
let { myPosition,textaddress,place,user,network,phone,indicatif }=this.state;
|
||
|
|
this.setState({isLoading:true})
|
||
|
|
if(user!==undefined) {
|
||
|
|
if (this.checkOrShake(myPosition, this.mapanim)) {
|
||
|
|
if (this.checkOrShake(phone, this.numanim)) {
|
||
|
|
if (this.checkOrShake(network, this.networkanim)) {
|
||
|
|
var data={};
|
||
|
|
data.tag="member"
|
||
|
|
data['type']="create_user"
|
||
|
|
data['phone']=indicatif+phone;
|
||
|
|
data['network']=network;
|
||
|
|
data['town']=this.state.town;
|
||
|
|
data['latitude']=myPosition.latitude;
|
||
|
|
data['longitude']=myPosition.longitude;
|
||
|
|
for(let i in user){
|
||
|
|
data[i]=user[i];
|
||
|
|
}
|
||
|
|
console.log(data);
|
||
|
|
createUserAccount(data).then((result)=>{
|
||
|
|
console.log(data)
|
||
|
|
if(result.success!==undefined && result.success===1){
|
||
|
|
Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"),
|
||
|
|
I18n.t('ACCOUNT_CREATED_SUCCESS')
|
||
|
|
,[ {text: 'OK', onPress: () => { this.props.navigation.popToTop()
|
||
|
|
this.setState({isLoading:false})}}],{ cancelable: false })
|
||
|
|
}else{
|
||
|
|
if(result.error!==undefined){
|
||
|
|
switch(result.error){
|
||
|
|
case -3:
|
||
|
|
Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"),I18n.t('FAILED_TEXT_CONTACT_ADMIN')
|
||
|
|
,[ {text: 'OK', onPress: () =>""}],{ cancelable: false })
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
Alert.alert(I18n.t("CONNEXION_SUCCESSFUL"),result.error_msg
|
||
|
|
,[ {text: 'OK', onPress: () =>""}],{ cancelable: false })
|
||
|
|
}
|
||
|
|
this.setState({isLoading:false})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}).catch((error)=>{
|
||
|
|
this.setState({isLoading:false})
|
||
|
|
})
|
||
|
|
|
||
|
|
}else this.setState({isLoading:false})
|
||
|
|
}else this.setState({isLoading:false})
|
||
|
|
}else this.setState({isLoading:false})
|
||
|
|
}else{
|
||
|
|
this.setState({isLoading:false})
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
checkUserGeolocated() {
|
||
|
|
let { myPosition,textaddress,place,indicatif,user,network,phone,phoneTransaction }=this.state;
|
||
|
|
this.setState({isLoading:true})
|
||
|
|
if(user!==undefined) {
|
||
|
|
if (this.checkOrShake(myPosition, this.mapanim)) {
|
||
|
|
if (this.checkOrShake(phone, this.numanim)) {
|
||
|
|
if (this.checkOrShake(network, this.networkanim)) {
|
||
|
|
var data={};
|
||
|
|
data.tag="member";
|
||
|
|
data.type="create_geolocated_user";
|
||
|
|
data['phone']=indicatif+phone;
|
||
|
|
data['phone_transaction']=indicatif+phoneTransaction;
|
||
|
|
data['network']=network;
|
||
|
|
data['town']=this.state.town;
|
||
|
|
data['latitude']=myPosition.latitude;
|
||
|
|
data['longitude']=myPosition.longitude;
|
||
|
|
for(let i in user){
|
||
|
|
data[i]=user[i];
|
||
|
|
}
|
||
|
|
data['category']=user.category;
|
||
|
|
|
||
|
|
data['active']='0';
|
||
|
|
createGeolocatedAccount(data).then((result)=>{
|
||
|
|
console.log(result);
|
||
|
|
if(result.success!==undefined && result.success===1){
|
||
|
|
const message=result.category==='super'?I18n.t("HYPERVISOR_MUST_VALIDATE_SUPERVISOR")
|
||
|
|
:I18n.t("ACCOUNT_SUCCESSFULL_CREATED")
|
||
|
|
Alert.alert("",message,[{
|
||
|
|
text:"Ok",
|
||
|
|
onPress:()=>{ this.props.navigation.popToTop()
|
||
|
|
}
|
||
|
|
}])
|
||
|
|
setTimeout(()=>{
|
||
|
|
this.setState({isLoading:false})
|
||
|
|
|
||
|
|
},1000)
|
||
|
|
this.props.navigator.push({
|
||
|
|
screen:route.login
|
||
|
|
})
|
||
|
|
this.setState({isLoading:false})
|
||
|
|
}else{
|
||
|
|
|
||
|
|
/* Crashlytics.log(JSON.stringify({"type":"erreur lors de la creation","data":result}))
|
||
|
|
Answers.logCustom("error",JSON.stringify(result))*/
|
||
|
|
console.warn(result)
|
||
|
|
if(result.error!==undefined){
|
||
|
|
switch(result.error){
|
||
|
|
case -3:
|
||
|
|
Alert.alert("",I18n.t('UNABLE_TO_CREATE_ACCOUNT'),[{
|
||
|
|
text:"Ok",
|
||
|
|
onPress:()=>{ }
|
||
|
|
}])
|
||
|
|
break;
|
||
|
|
default:
|
||
|
|
if(result.error_msg)
|
||
|
|
Alert.alert("",result.error_msg,[{
|
||
|
|
text:"Ok",
|
||
|
|
onPress:()=>{ }
|
||
|
|
}])
|
||
|
|
else if(result.sql_error)
|
||
|
|
Alert.alert(I18n.t('UNABLE_TO_CREATE_ACCOUNT'),result.sql_error,[{
|
||
|
|
text:"Ok",
|
||
|
|
onPress:()=>{ }
|
||
|
|
}])
|
||
|
|
}
|
||
|
|
this.setState({isLoading:false})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}).catch((error)=>{
|
||
|
|
this.setState({isLoading:false})
|
||
|
|
})
|
||
|
|
|
||
|
|
}else this.setState({isLoading:false})
|
||
|
|
}else this.setState({isLoading:false})
|
||
|
|
}else this.setState({isLoading:false})
|
||
|
|
}else{
|
||
|
|
this.setState({isLoading:false})
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
checkOrShake(champ,view) {
|
||
|
|
let res=false;
|
||
|
|
if(champ!==undefined && champ.length>0) {
|
||
|
|
res=true;
|
||
|
|
}else if(champ!==Array && champ!==undefined){
|
||
|
|
res=true
|
||
|
|
}
|
||
|
|
else{
|
||
|
|
view.shake(800)
|
||
|
|
}
|
||
|
|
return res;
|
||
|
|
}
|
||
|
|
prepareModal() {
|
||
|
|
return (<MaterialDialog
|
||
|
|
visible={this.state.modalVisible}
|
||
|
|
title={I18n.t("LOADING_INFO")}
|
||
|
|
>
|
||
|
|
<View style={{justifyContent: 'center',alignItems:'center'}}>
|
||
|
|
<Text>{I18n.t("LOADING_DESCRIPTION_COUNTRY")}</Text>
|
||
|
|
<ProgressBarAndroid/>
|
||
|
|
</View>
|
||
|
|
</MaterialDialog>)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
const SHORT_LIST = ['List element 1', 'List element 2', 'List element 3'];
|
||
|
|
|
||
|
|
const LONG_LIST = [
|
||
|
|
'List element 1',
|
||
|
|
'List element 2',
|
||
|
|
|
||
|
|
'List element 5',
|
||
|
|
'List element 6',
|
||
|
|
'List element 7',
|
||
|
|
'List element 8',
|
||
|
|
,
|
||
|
|
];
|
||
|
|
|
||
|
|
const styles=StyleSheet.create({
|
||
|
|
rowContainer: {
|
||
|
|
height: 52,
|
||
|
|
flex: 1,
|
||
|
|
flexDirection: 'row',
|
||
|
|
justifyContent: 'flex-start',
|
||
|
|
alignItems: 'center',
|
||
|
|
},
|
||
|
|
iconContainer: {
|
||
|
|
marginRight: 16,
|
||
|
|
},
|
||
|
|
container:{
|
||
|
|
flex:1,
|
||
|
|
backgroundColor:theme.primary,
|
||
|
|
},
|
||
|
|
textbtnvalide:{
|
||
|
|
color:'white',
|
||
|
|
fontWeight:'bold'
|
||
|
|
},
|
||
|
|
bigtitle:{
|
||
|
|
color:'white',
|
||
|
|
fontSize:20,
|
||
|
|
flex:1,
|
||
|
|
fontWeight:'bold',
|
||
|
|
textAlign:'center',
|
||
|
|
margin:20,
|
||
|
|
},
|
||
|
|
subbigtitle:{
|
||
|
|
color:'white',
|
||
|
|
fontSize:17,
|
||
|
|
textAlign:'center',
|
||
|
|
margin:5,
|
||
|
|
},
|
||
|
|
map: {
|
||
|
|
height: 200,
|
||
|
|
marginRight:responsiveWidth(5),
|
||
|
|
marginLeft:responsiveWidth(5),
|
||
|
|
marginVertical: 10,
|
||
|
|
},
|
||
|
|
btnvalide:{
|
||
|
|
marginTop:20,
|
||
|
|
marginLeft:20,
|
||
|
|
marginRight:20,
|
||
|
|
borderColor:'transparent',
|
||
|
|
backgroundColor:theme.accentLight,
|
||
|
|
height:52
|
||
|
|
},
|
||
|
|
input:{
|
||
|
|
height:60,
|
||
|
|
marginTop:responsiveHeight(2),
|
||
|
|
marginLeft:responsiveWidth(5),
|
||
|
|
marginRight:responsiveWidth(5),
|
||
|
|
borderRadius:5,
|
||
|
|
}
|
||
|
|
})
|