738 lines
19 KiB
JavaScript
Executable File
738 lines
19 KiB
JavaScript
Executable File
/**
|
|
* Sample React Native App
|
|
* https://github.com/facebook/react-native
|
|
*
|
|
* @format
|
|
* @flow
|
|
*/
|
|
|
|
import React, {Component} from 'react';
|
|
import {
|
|
Platform,
|
|
StyleSheet,
|
|
Alert,
|
|
FlatList,
|
|
Text,
|
|
View,
|
|
TouchableOpacity,
|
|
Linking,
|
|
} from 'react-native';
|
|
import ActionButton from 'react-native-action-button';
|
|
import Icon from 'react-native-vector-icons/Ionicons';
|
|
import {
|
|
responsiveFontSize,
|
|
responsiveHeight,
|
|
responsiveWidth,
|
|
} from 'react-native-responsive-dimensions';
|
|
import HeaderMenu from './HeaderMenu';
|
|
import {
|
|
historiques as histo,
|
|
first,
|
|
useraccount,
|
|
notification,
|
|
configurations,
|
|
} from './../../route.json';
|
|
import {primary, primaryDarkAdvanced} from './../../utils/theme.json';
|
|
import {readUser, disconnect} from './../../webservice/AuthApi';
|
|
import I18n from 'react-native-i18n';
|
|
const route = require('./../../route.json');
|
|
require('./../../utils/Translations');
|
|
var DBEvents = require('react-native-db-models').DBEvents;
|
|
type Props = {};
|
|
let theme = require('./../../utils/theme.json');
|
|
import Button from 'apsl-react-native-button';
|
|
import {IlinkEmitter} from './../../utils/events';;
|
|
import {DrawerItems, SafeAreaView} from 'react-navigation';
|
|
import RNDeviceInformation from 'fm-react-native-device-info';;
|
|
import AppContainer, {AppNavigator} from '../../App';
|
|
import Configuration from '../../webservice/persistences/Configuration';
|
|
|
|
export default class OptionsMenu extends Component<Props> {
|
|
static navigatorStyle = {
|
|
statusBarColor: primaryDarkAdvanced,
|
|
};
|
|
commandeListe;
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = this.initState();
|
|
IlinkEmitter.on('menuLink', this.onMenuNavigationEvent.bind(this));;
|
|
IlinkEmitter.on('userconnect', this.onUserConnect.bind(this));;
|
|
IlinkEmitter.on('userdisconnect', this.hideSideMenu.bind(this));;
|
|
IlinkEmitter.on('langueChange', this.updateLangue.bind(this));;
|
|
this.configuration = new Configuration();
|
|
}
|
|
|
|
retrieveAndroidInformation() {
|
|
this.configuration
|
|
._getData()
|
|
.then(lang => {
|
|
if (lang) {
|
|
I18n.locale = lang;;
|
|
readUser().then(result => {
|
|
setTimeout(() => {
|
|
this.updateUser(result);
|
|
}, 3000);;
|
|
});;
|
|
} else {
|
|
RNDeviceInformation.getDeviceCountryCode().then(code => {
|
|
I18n.locale = code.toLowerCase();;
|
|
readUser()
|
|
.then(result => {
|
|
setTimeout(() => {
|
|
this.updateUser(result);
|
|
}, 3000);;
|
|
})
|
|
.catch(e => {
|
|
this.props.navigation.navigate('Auth');;
|
|
});
|
|
});;
|
|
}
|
|
})
|
|
.catch(e => {
|
|
RNDeviceInformation.getDeviceCountryCode().then(code => {
|
|
I18n.locale = code.toLowerCase();;
|
|
readUser()
|
|
.then(result => {
|
|
setTimeout(() => {
|
|
this.updateUser(result);
|
|
}, 3000);;
|
|
})
|
|
.catch(e => {
|
|
this.props.navigation.navigate('Auth');;
|
|
});
|
|
});
|
|
});;
|
|
|
|
return '';;
|
|
}
|
|
componentDidMount() {
|
|
const items = this.props.navigation.router.childRouters.sta.childRouters;
|
|
// items.filter((item)=>item.)
|
|
this.setState({items: items});;
|
|
this.retrieveAndroidInformation();
|
|
}
|
|
updateLangue() {
|
|
this.setState({lang: 'change'});;
|
|
this.forceUpdate();;
|
|
}
|
|
componentWillUnmount() {}
|
|
onMenuNavigationEvent(menuOption) {
|
|
/* Navigation.mergeOptions(this.props.componentId,{
|
|
sideMenu: {
|
|
left: {
|
|
visible: false,
|
|
}
|
|
}
|
|
})
|
|
switch (menuOption){
|
|
case "home":{
|
|
this.setState({currentId:0})
|
|
}
|
|
break;
|
|
case "userInfo":{
|
|
this.setState({currentId:1})
|
|
}
|
|
}*/
|
|
}
|
|
onUserConnect() {
|
|
readUser().then(user => {
|
|
if (user !== null && user !== undefined) {
|
|
this.updateUser(user);
|
|
}
|
|
});
|
|
}
|
|
onNavigatorEvent(event) {}
|
|
hideSideMenu() {
|
|
/* Navigation.mergeOptions("drawer", {
|
|
sideMenu: {
|
|
left: {
|
|
visible: false,
|
|
enabled:false
|
|
}
|
|
}
|
|
});*/
|
|
}
|
|
initState() {
|
|
return {
|
|
user: null,
|
|
menu: [],
|
|
currentId: 0,
|
|
};;
|
|
}
|
|
getGeolocatedUserMenu() {
|
|
return [
|
|
{title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true},
|
|
{
|
|
title: I18n.t('MY_ACCOUNT'),
|
|
id: 1,
|
|
key: 1,
|
|
icon: 'md-person',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('CREDIT_MANAGE'),
|
|
id: 2,
|
|
key: 2,
|
|
icon: 'md-card',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('ADD_NETWORK'),
|
|
id: 11,
|
|
key: 11,
|
|
icon: 'md-people',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('CHANGE_INFORMATION'),
|
|
id: 13,
|
|
key: 13,
|
|
icon: 'md-person',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('NOTIFICATIONS'),
|
|
id: 3,
|
|
key: 3,
|
|
icon: 'md-notifications',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('CONFIGURATIONS'),
|
|
id: 4,
|
|
icon: 'md-settings',
|
|
active: false,;
|
|
},
|
|
];
|
|
}
|
|
getSuperUserMenu() {
|
|
return [
|
|
{title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true},
|
|
{
|
|
title: I18n.t('MY_ACCOUNT'),
|
|
id: 1,
|
|
key: 1,
|
|
icon: 'md-person',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('CREDIT_MANAGE'),
|
|
id: 2,
|
|
key: 2,
|
|
icon: 'md-card',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('GROUP_MANAGE'),
|
|
id: 5,
|
|
key: 5,
|
|
icon: 'md-people',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('NOTIFICATIONS'),
|
|
id: 3,
|
|
key: 3,
|
|
icon: 'md-notifications',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('CONFIGURATIONS'),
|
|
id: 4,
|
|
icon: 'md-settings',
|
|
active: false,
|
|
},
|
|
];
|
|
}
|
|
getHyperUsermenu() {
|
|
return [
|
|
{title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true},
|
|
{
|
|
title: I18n.t('MY_ACCOUNT'),
|
|
id: 1,
|
|
key: 1,
|
|
icon: 'md-person',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('CREDIT_MANAGE'),
|
|
id: 2,
|
|
key: 2,
|
|
icon: 'md-card',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('GROUP_MANAGE'),
|
|
id: 5,
|
|
key: 5,
|
|
icon: 'md-people',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('NOTIFICATIONS'),
|
|
id: 3,
|
|
key: 3,
|
|
icon: 'md-notifications',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('CONFIGURATIONS'),
|
|
id: 4,
|
|
icon: 'md-settings',
|
|
active: false,;
|
|
},
|
|
];
|
|
}
|
|
updateUser(user) {
|
|
let menu = [];
|
|
if (user !== undefined) {
|
|
/* Navigation.mergeOptions("drawer", {
|
|
sideMenu: {
|
|
left: {
|
|
visible: false,
|
|
enabled:true
|
|
}
|
|
}
|
|
});*/
|
|
if (user.category !== undefined) {
|
|
switch (user.category) {
|
|
case 'geolocated':
|
|
menu = this.getGeolocatedUserMenu();
|
|
break;
|
|
case 'super':
|
|
menu = this.getSuperUserMenu();
|
|
break;
|
|
case 'hyper':
|
|
menu = this.getHyperUsermenu();
|
|
break;
|
|
}
|
|
} else {
|
|
menu = this.getUserMenu();
|
|
}
|
|
}
|
|
|
|
this.setState({user: user, menu: menu});
|
|
}
|
|
getUserMenu() {
|
|
return [
|
|
{title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true},
|
|
{
|
|
title: I18n.t('MY_ACCOUNT'),
|
|
id: 1,
|
|
key: 1,
|
|
icon: 'md-person',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('NOTIFICATIONS'),
|
|
id: 3,
|
|
key: 3,
|
|
icon: 'md-notifications',
|
|
active: false,
|
|
},
|
|
{
|
|
title: I18n.t('CONFIGURATIONS'),
|
|
id: 4,
|
|
icon: 'md-settings',
|
|
active: false,
|
|
},
|
|
];
|
|
}
|
|
_renderItem = item => {
|
|
if (
|
|
item === 'creditrequest' ||
|
|
item === 'historyItemDetails' ||
|
|
item === 'filter' ||
|
|
item === 'networks' ||
|
|
item === 'createIdentification'
|
|
) {
|
|
return null;;
|
|
} else {
|
|
const color = this.state.currentId === item.id ? theme.accent : 'grey';;
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
this.props.navigation.toggleDrawer();
|
|
this.setState({currentId: item.id});;
|
|
this.props.navigation.navigate(item);;
|
|
}}>
|
|
<View style={items.content}>
|
|
<Icon name={this.getIcon(item)} size={32} />
|
|
<Text
|
|
style={{
|
|
marginLeft: 20,
|
|
fontSize: 16,
|
|
}}>
|
|
{this.getNameItems(item)}
|
|
</Text>
|
|
</View>
|
|
</TouchableOpacity>;
|
|
);
|
|
}
|
|
};
|
|
_onPress = item => {
|
|
this.setState({currentId: item.id});;
|
|
let current = this.state.menu.filter(item => {
|
|
return item.active;
|
|
})[0];;
|
|
current.active = false;
|
|
item.active = true;
|
|
let newMenu = [];
|
|
this.state.menu.forEach(function (it) {
|
|
if (it.id === current.id) newMenu.push(current);;
|
|
else if (it.id === item.id) newMenu.push(item);;
|
|
else newMenu.push(it);;
|
|
});;
|
|
this.setState({menu: newMenu});;
|
|
/* switch(item.id){
|
|
case 2:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name: histo,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text: I18n.t('CREDIT_MANAGE')
|
|
}
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 0:
|
|
Navigation.popToRoot(route.stackRoot)
|
|
IlinkEmitter.emit("menuLink","home");
|
|
break;
|
|
case 1:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:useraccount,
|
|
},
|
|
options: {
|
|
sideMenu:{
|
|
visibility:false
|
|
},
|
|
topBar: {
|
|
title: {
|
|
text:I18n.t('MY_ACCOUNT')
|
|
},
|
|
hideOnScroll: true,
|
|
|
|
}
|
|
}
|
|
});
|
|
IlinkEmitter.emit("menuLink","userInfo");
|
|
break;
|
|
case 3:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:notification,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text:I18n.t('NOTIFICATION')
|
|
|
|
}
|
|
}
|
|
}
|
|
});
|
|
IlinkEmitter.emit("menuLink","notification");
|
|
|
|
break;
|
|
case 4:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:configurations,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text:I18n.t('CONFIGURATIONS')
|
|
|
|
}
|
|
}
|
|
}
|
|
});
|
|
IlinkEmitter.emit("menuLink","config");
|
|
break;
|
|
case 5:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.superviseurgroup,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
title: {
|
|
text:I18n.t('GROUP_MANAGE')
|
|
|
|
}
|
|
}
|
|
}
|
|
});
|
|
IlinkEmitter.emit("menuLink","manage_group");
|
|
|
|
break;
|
|
case 7: Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.credrequester,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
visible:false
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 11:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.addNetwork,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
visible:false
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 12:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.generateNetwork,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
visible:false
|
|
}
|
|
}
|
|
});
|
|
break;
|
|
case 13:
|
|
Navigation.push(route.stackRoot,{
|
|
component: {
|
|
name:route.updateinfo,
|
|
},
|
|
options: {
|
|
topBar: {
|
|
visible:false
|
|
}
|
|
}
|
|
});
|
|
};
|
|
Navigation.mergeOptions(this.props.componentId,{
|
|
sideMenu: {
|
|
left: {
|
|
visible: false,
|
|
}
|
|
}
|
|
})
|
|
*/
|
|
};
|
|
getNameItems(item) {
|
|
let icon = item;;
|
|
switch (item) {
|
|
case 'home':
|
|
icon = I18n.t('MAP');;
|
|
break;;
|
|
case 'useraccount':
|
|
icon = I18n.t('MY_ACCOUNT');;
|
|
break;;
|
|
case 'Historique':
|
|
icon = I18n.t('CREDIT_MANAGE');;
|
|
break;;
|
|
case 'superviseurgroup':
|
|
icon = I18n.t('GROUP_MANAGE');;
|
|
break;;
|
|
case 'updateinformation':
|
|
icon = I18n.t('CHANGE_INFORMATION');;
|
|
break;;
|
|
case 'notificationview':
|
|
icon = I18n.t('NOTIFICATIONS');;
|
|
break;;
|
|
case 'configuration':
|
|
icon = I18n.t('CONFIGURATIONS');;
|
|
break;;
|
|
case 'addNetwork':
|
|
icon = I18n.t('ADD_NETWORK');;
|
|
break;;
|
|
case 'about':
|
|
icon = I18n.t('ABOUT_');;
|
|
|
|
|
|
}
|
|
return icon;
|
|
}
|
|
getIcon(item) {
|
|
let icon = 'md-map';;
|
|
switch (item) {
|
|
case 'home':
|
|
icon = 'md-map';;
|
|
break;;
|
|
case 'useraccount':
|
|
icon = 'md-person';;
|
|
break;;
|
|
case 'Historique':
|
|
icon = 'md-card';;
|
|
break;;
|
|
case 'superviseurgroup':
|
|
icon = 'md-people';;
|
|
break;;
|
|
case 'notificationview':
|
|
icon = 'md-notifications';
|
|
break;;
|
|
case 'updateinformation':
|
|
icon = 'md-people';;
|
|
break;;
|
|
case 'configuration':
|
|
icon = 'md-settings';;
|
|
break;
|
|
case 'addNetwork':
|
|
icon = 'md-people';;
|
|
break;;
|
|
case 'about':
|
|
icon = 'md-contacts';
|
|
break;
|
|
}
|
|
return icon;
|
|
}
|
|
render() {
|
|
var name = this.state.user ? this.state.user.firstname : '';
|
|
const surname = this.state.user ? this.state.user.lastname : '';
|
|
if (!this.state.lang && this.state.lang !== 'change')
|
|
{return (
|
|
<View style={styles.container}>
|
|
<View
|
|
style={styles.headercontent}
|
|
>
|
|
<Text style={styles.headerTitle}>{name}</Text>
|
|
<Text style={styles.headerTitle}>{surname}</Text>
|
|
<Text style={styles.headerPhone}>{this.state.user ? "" + this.state.user.phone : ""}</Text>
|
|
</View>
|
|
<SafeAreaView style={{
|
|
flex: 1,
|
|
}} forceInset={{ top: 'always', horizontal: 'never' }}>
|
|
{
|
|
this.state.items && Object.keys(this.state.items).map((item, key) => {
|
|
return this._renderItem(item)
|
|
})
|
|
}
|
|
</SafeAreaView>
|
|
<Button
|
|
textStyle={styles.btntext}
|
|
style={styles.btnDeconnect}
|
|
onPress={() => this.userDeconnect()}
|
|
>{I18n.t('DISCONNEXION')}</Button>
|
|
</View>
|
|
)};
|
|
else {
|
|
setTimeout(() => this.setState({lang: ''}), 500);;
|
|
return <View />;;
|
|
}
|
|
}
|
|
userDeconnect() {
|
|
Alert.alert(
|
|
I18n.t('DISCONNEXION'),
|
|
I18n.t('DISCONNEXION_TEXT'),
|
|
[
|
|
{},
|
|
{
|
|
text: I18n.t('NO'),
|
|
onPress: () => console.log('Cancel Pressed'),
|
|
style: 'cancel',
|
|
},
|
|
{
|
|
text: I18n.t('YES'),
|
|
onPress: () => {
|
|
disconnect().then(() => {
|
|
IlinkEmitter.emit('userdisconnect');
|
|
this.props.navigation.navigate('Auth');;
|
|
});;
|
|
},,
|
|
},
|
|
],
|
|
{cancelable: false},
|
|
);;
|
|
}
|
|
watchUser() {
|
|
readUser().then(user => {
|
|
if (user !== null && user !== undefined) {
|
|
this.updateUser(user);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
const items = StyleSheet.create({
|
|
content: {
|
|
width: responsiveWidth(100),
|
|
height: 50,
|
|
paddingLeft: 20,
|
|
flexDirection: 'row',
|
|
alignItems: 'center',,
|
|
},
|
|
itemText: {
|
|
color: '#000000',
|
|
marginLeft: 20,
|
|
fontSize: responsiveFontSize(2),
|
|
},,
|
|
});
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
backgroundColor: 'white',
|
|
},
|
|
btnDeconnect: {
|
|
borderColor: 'transparent',
|
|
marginLeft: 20,
|
|
marginRight: 20,
|
|
backgroundColor: theme.accent,,
|
|
},
|
|
btntext: {
|
|
color: 'white',
|
|
fontSize: 17,
|
|
fontWeight: 'bold',,
|
|
},
|
|
headerTitle: {
|
|
fontSize: 14,
|
|
marginBottom: 5,
|
|
color: 'white',
|
|
fontWeight: 'bold',
|
|
},
|
|
headerPhone: {
|
|
fontSize: 12,
|
|
marginBottom: 20,
|
|
color: 'white',
|
|
justifyContent: 'flex-end',
|
|
},
|
|
listMenu: {
|
|
paddingTop: 15,
|
|
},
|
|
headercontent: {
|
|
height: responsiveHeight(30),
|
|
backgroundColor: primary,
|
|
justifyContent: 'flex-end',
|
|
alignItems: 'flex-start',
|
|
paddingLeft: 20,
|
|
},
|
|
backgroundd_drawer: {
|
|
backgroundColor: '#000',
|
|
},
|
|
listbackground: {},
|
|
actionButtonIcon: {
|
|
fontSize: 20,
|
|
height: 22,
|
|
color: 'white',
|
|
},
|
|
welcome: {
|
|
fontSize: 20,
|
|
textAlign: 'center',
|
|
margin: 10,
|
|
},
|
|
instructions: {
|
|
textAlign: 'center',
|
|
color: '#333333',
|
|
marginBottom: 5,
|
|
},
|
|
});
|