582 lines
21 KiB
JavaScript
582 lines
21 KiB
JavaScript
/**
|
|
* 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,
|
|
},
|
|
});
|