DrawerLateral
Le menu latéral de l'application ou encore Drawer est matérialiser par le fichier OptionsMenu.js. Elle contient l'ensemble des options de menu disponibles au sein de l'application iLink World.
Elle distingue notamment les types d'utilisateurs, et affiche un menu en fonciton du type de comtpe de l'utilisateur connecté.
⚠️ Des composants plus récents existent
Il des composants plus récents, pour plus d'ergonomie et de flexibilité notamment Drawer-Navigation
Initialisation
Après l'étape de connexion de l'utilisateur, une interface lui ai affiché en fonction du type de son compte.
Menu Utilisateur
Dans le cas d'un compte de type 'Utilisateur', le menu par défaut lui affiché ceci par la fonction suivante:
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 }]}
qui renvoie les quatres principaux menus dédiés à un utilisateur. Les clés 'icon' et 'active' permettent respectivement d'afficher l'icône associé au menu et de le rendre actif si l'on est bien positionné sur lui.
⚠️ NB: la fonction I18n permet d'effectuer la traduction du texte en se basant sur une clé auquel correspond un texte. Celà est abordé plus en détail dans la vue ConfigurationScreen.
Menu Utilisateur Géolocalisé, Superviseur et Hyperviseur
Dans le cas d'un compte de type 'Utilisateur Géolocalisé', 'Superviseur' et 'Hyperviseur', des options supplémentaires sont affichés ainsi qu'il suit:
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 }]}
Déconnexion de l'utilisateur
Le menu Déconnexion permet à un utilisateur connecté de déconnecter son compte et par la même occasion d'être redigiré vers l'interface de connexion de l'application. Ceci se fait premièrement par l'affichage d'une boîte de dialogue demandant à l'utilisateur de confirmer sa déconnexion, une fois que celà est fait un évenement est dispatché au sein de l'application ce qui permet au fonction qui écoute cette évenement de se déclencher.
disconnect() {IlinkEmitter.emit("userdisconnect");Navigation.setStackRoot(route.stackRoot, {component: {name: route.login,animated: true}})})
⚠️ Cette manière de procéder est obsolète
Aujourd'hui la bibliothèque redux permet une meilleur gestion du state global de l'application.