1 line
18 KiB
JSON
1 line
18 KiB
JSON
{"expireTime":9007200837974445000,"key":"gatsby-plugin-mdx-entire-payload-748476a134a99424686a25db588a303b-/ilink-world","val":{"mdast":{"type":"root","children":[{"type":"import","value":"import DefaultLayout from \"D:/PROJET/iLinkApp/iLinkAppMobile/docs/node_modules/gatsby-theme-docz/src/base/Layout.js\"","position":{"start":{"line":3,"column":1,"offset":2},"end":{"line":3,"column":117,"offset":118},"indent":[]}},{"type":"export","default":true,"value":"export default DefaultLayout","position":{"start":{"line":5,"column":1,"offset":120},"end":{"line":5,"column":29,"offset":148},"indent":[]}},{"type":"heading","depth":1,"children":[{"type":"text","value":"DrawerLateral","position":{"start":{"line":8,"column":3,"offset":154},"end":{"line":8,"column":16,"offset":167},"indent":[]}}],"position":{"start":{"line":8,"column":1,"offset":152},"end":{"line":8,"column":16,"offset":167},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Le menu latéral de l'application ou encore Drawer est matérialiser par le fichier ","position":{"start":{"line":10,"column":1,"offset":171},"end":{"line":10,"column":83,"offset":253},"indent":[]}},{"type":"link","title":null,"url":"https://dev.ilink-app.com/administrateur/iLink-Wolrd/src/branch/master/screens/optionMenu/OptionsMenu.js","children":[{"type":"text","value":"OptionsMenu.js","position":{"start":{"line":10,"column":84,"offset":254},"end":{"line":10,"column":98,"offset":268},"indent":[]}}],"position":{"start":{"line":10,"column":83,"offset":253},"end":{"line":10,"column":205,"offset":375},"indent":[]}},{"type":"text","value":".\nElle contient l'ensemble des options de menu disponibles au sein de l'application iLink World.","position":{"start":{"line":10,"column":205,"offset":375},"end":{"line":11,"column":95,"offset":472},"indent":[1]}}],"position":{"start":{"line":10,"column":1,"offset":171},"end":{"line":11,"column":95,"offset":472},"indent":[1]}},{"type":"jsx","value":"<br />","position":{"start":{"line":13,"column":1,"offset":476},"end":{"line":13,"column":7,"offset":482},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Elle distingue notamment les types d'utilisateurs, et affiche un menu en fonciton du type de comtpe de l'utilisateur connecté.","position":{"start":{"line":15,"column":1,"offset":486},"end":{"line":15,"column":127,"offset":612},"indent":[]}}],"position":{"start":{"line":15,"column":1,"offset":486},"end":{"line":15,"column":127,"offset":612},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ Des composants plus récents existent","position":{"start":{"line":17,"column":1,"offset":616},"end":{"line":17,"column":40,"offset":655},"indent":[]}}],"position":{"start":{"line":17,"column":1,"offset":616},"end":{"line":17,"column":40,"offset":655},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Il des composants plus récents, pour plus d'ergonomie et de flexibilité notamment ","position":{"start":{"line":19,"column":1,"offset":659},"end":{"line":19,"column":83,"offset":741},"indent":[]}},{"type":"link","title":null,"url":"https://reactnavigation.org/docs/drawer-based-navigation/","children":[{"type":"text","value":"Drawer-Navigation","position":{"start":{"line":19,"column":84,"offset":742},"end":{"line":19,"column":101,"offset":759},"indent":[]}}],"position":{"start":{"line":19,"column":83,"offset":741},"end":{"line":19,"column":161,"offset":819},"indent":[]}}],"position":{"start":{"line":19,"column":1,"offset":659},"end":{"line":19,"column":161,"offset":819},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Initialisation","position":{"start":{"line":21,"column":4,"offset":826},"end":{"line":21,"column":18,"offset":840},"indent":[]}}],"position":{"start":{"line":21,"column":1,"offset":823},"end":{"line":21,"column":18,"offset":840},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Après l'étape de connexion de l'utilisateur, une interface lui ai affiché en fonction du type de son compte.","position":{"start":{"line":23,"column":1,"offset":844},"end":{"line":23,"column":109,"offset":952},"indent":[]}}],"position":{"start":{"line":23,"column":1,"offset":844},"end":{"line":23,"column":109,"offset":952},"indent":[]}},{"type":"jsx","value":"<br />","position":{"start":{"line":25,"column":1,"offset":956},"end":{"line":25,"column":7,"offset":962},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Menu Utilisateur","position":{"start":{"line":27,"column":4,"offset":969},"end":{"line":27,"column":20,"offset":985},"indent":[]}}],"position":{"start":{"line":27,"column":1,"offset":966},"end":{"line":27,"column":20,"offset":985},"indent":[]}},{"type":"thematicBreak","position":{"start":{"line":29,"column":1,"offset":989},"end":{"line":29,"column":4,"offset":992},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"Dans le cas d'un compte de type 'Utilisateur', le menu par défaut lui affiché ceci par la fonction suivante:","position":{"start":{"line":31,"column":1,"offset":996},"end":{"line":31,"column":109,"offset":1104},"indent":[]}}],"position":{"start":{"line":31,"column":1,"offset":996},"end":{"line":31,"column":109,"offset":1104},"indent":[]}},{"type":"code","lang":"javascript","meta":null,"value":" getUserMenu() {\n return [\n { title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true }\n , { title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false }\n , { title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false }\n , { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]\n }","position":{"start":{"line":33,"column":1,"offset":1108},"end":{"line":41,"column":4,"offset":1573},"indent":[1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"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.","position":{"start":{"line":43,"column":1,"offset":1577},"end":{"line":43,"column":214,"offset":1790},"indent":[]}}],"position":{"start":{"line":43,"column":1,"offset":1577},"end":{"line":43,"column":214,"offset":1790},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ 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 ","position":{"start":{"line":45,"column":1,"offset":1794},"end":{"line":45,"column":163,"offset":1956},"indent":[]}},{"type":"link","title":null,"url":"/screen/configuration-screen#la-bibliothèque-react-native-i18n","children":[{"type":"text","value":"ConfigurationScreen","position":{"start":{"line":45,"column":164,"offset":1957},"end":{"line":45,"column":183,"offset":1976},"indent":[]}}],"position":{"start":{"line":45,"column":163,"offset":1956},"end":{"line":45,"column":248,"offset":2041},"indent":[]}},{"type":"text","value":".","position":{"start":{"line":45,"column":248,"offset":2041},"end":{"line":45,"column":249,"offset":2042},"indent":[]}}],"position":{"start":{"line":45,"column":1,"offset":1794},"end":{"line":45,"column":249,"offset":2042},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Menu Utilisateur Géolocalisé, Superviseur et Hyperviseur","position":{"start":{"line":47,"column":4,"offset":2049},"end":{"line":47,"column":60,"offset":2105},"indent":[]}}],"position":{"start":{"line":47,"column":1,"offset":2046},"end":{"line":47,"column":60,"offset":2105},"indent":[]}},{"type":"thematicBreak","position":{"start":{"line":49,"column":1,"offset":2109},"end":{"line":49,"column":4,"offset":2112},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"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:","position":{"start":{"line":51,"column":1,"offset":2116},"end":{"line":51,"column":151,"offset":2266},"indent":[]}}],"position":{"start":{"line":51,"column":1,"offset":2116},"end":{"line":51,"column":151,"offset":2266},"indent":[]}},{"type":"code","lang":"javascript","meta":null,"value":" getGeolocatedUserMenu() {\n return [\n { title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true }\n , { title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false }\n , { title: I18n.t('CREDIT_MANAGE'), id: 2, key: 2, icon: 'md-card', active: false }\n , { title: I18n.t('ADD_NETWORK'), id: 11, key: 11, icon: 'md-people', active: false }\n , { title: I18n.t('CHANGE_INFORMATION'), id: 13, key: 13, icon: 'md-person', active: false }\n , { title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false }\n , { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]\n }","position":{"start":{"line":53,"column":1,"offset":2270},"end":{"line":64,"column":4,"offset":3050},"indent":[1,1,1,1,1,1,1,1,1,1,1]}},{"type":"thematicBreak","position":{"start":{"line":66,"column":1,"offset":3054},"end":{"line":66,"column":4,"offset":3057},"indent":[]}},{"type":"heading","depth":2,"children":[{"type":"text","value":"Déconnexion de l'utilisateur","position":{"start":{"line":68,"column":4,"offset":3064},"end":{"line":68,"column":32,"offset":3092},"indent":[]}}],"position":{"start":{"line":68,"column":1,"offset":3061},"end":{"line":68,"column":32,"offset":3092},"indent":[]}},{"type":"paragraph","children":[{"type":"text","value":"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.\nCeci 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.","position":{"start":{"line":70,"column":1,"offset":3096},"end":{"line":71,"column":271,"offset":3534},"indent":[1]}}],"position":{"start":{"line":70,"column":1,"offset":3096},"end":{"line":71,"column":271,"offset":3534},"indent":[1]}},{"type":"code","lang":"javascript","meta":null,"value":" disconnect() {\n IlinkEmitter.emit(\"userdisconnect\");\n Navigation.setStackRoot(route.stackRoot, {\n component: {\n name: route.login,\n animated: true\n }\n })\n })","position":{"start":{"line":73,"column":1,"offset":3538},"end":{"line":83,"column":4,"offset":3795},"indent":[1,1,1,1,1,1,1,1,1,1]}},{"type":"paragraph","children":[{"type":"text","value":"⚠️ Cette manière de procéder est obsolète","position":{"start":{"line":85,"column":1,"offset":3799},"end":{"line":85,"column":42,"offset":3840},"indent":[]}}],"position":{"start":{"line":85,"column":1,"offset":3799},"end":{"line":85,"column":42,"offset":3840},"indent":[]}},{"type":"paragraph","children":[{"type":"emphasis","children":[{"type":"text","value":"Aujourd'hui la bibliothèque ","position":{"start":{"line":87,"column":2,"offset":3845},"end":{"line":87,"column":30,"offset":3873},"indent":[]}},{"type":"link","title":null,"url":"https://redux.js.org/","children":[{"type":"text","value":"redux","position":{"start":{"line":87,"column":31,"offset":3874},"end":{"line":87,"column":36,"offset":3879},"indent":[]}}],"position":{"start":{"line":87,"column":30,"offset":3873},"end":{"line":87,"column":60,"offset":3903},"indent":[]}},{"type":"text","value":" permet une meilleur gestion du state global de l'application.","position":{"start":{"line":87,"column":60,"offset":3903},"end":{"line":87,"column":122,"offset":3965},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":3844},"end":{"line":87,"column":123,"offset":3966},"indent":[]}}],"position":{"start":{"line":87,"column":1,"offset":3844},"end":{"line":87,"column":123,"offset":3966},"indent":[]}},{"type":"export","value":"export const _frontmatter = {}","position":{"start":{"line":90,"column":1,"offset":3970},"end":{"line":90,"column":31,"offset":4000},"indent":[]}}],"position":{"start":{"line":1,"column":1,"offset":0},"end":{"line":90,"column":31,"offset":4000}}},"scopeImports":[],"scopeIdentifiers":[],"rawMDXOutput":"/* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\nimport DefaultLayout from \"D:/PROJET/iLinkApp/iLinkAppMobile/docs/node_modules/gatsby-theme-docz/src/base/Layout.js\"\nexport const _frontmatter = {};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\")\n return <div {...props}/>\n};\n\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = DefaultLayout\nexport default function MDXContent({\n components,\n ...props\n}) {\n return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n <h1 {...{\n \"id\": \"drawerlateral\"\n }}>{`DrawerLateral`}</h1>\n <p>{`Le menu latéral de l'application ou encore Drawer est matérialiser par le fichier `}<a parentName=\"p\" {...{\n \"href\": \"https://dev.ilink-app.com/administrateur/iLink-Wolrd/src/branch/master/screens/optionMenu/OptionsMenu.js\"\n }}>{`OptionsMenu.js`}</a>{`.\nElle contient l'ensemble des options de menu disponibles au sein de l'application iLink World.`}</p>\n <br />\n <p>{`Elle distingue notamment les types d'utilisateurs, et affiche un menu en fonciton du type de comtpe de l'utilisateur connecté.`}</p>\n <p>{`⚠️ Des composants plus récents existent`}</p>\n <p>{`Il des composants plus récents, pour plus d'ergonomie et de flexibilité notamment `}<a parentName=\"p\" {...{\n \"href\": \"https://reactnavigation.org/docs/drawer-based-navigation/\"\n }}>{`Drawer-Navigation`}</a></p>\n <h2 {...{\n \"id\": \"initialisation\"\n }}>{`Initialisation`}</h2>\n <p>{`Après l'étape de connexion de l'utilisateur, une interface lui ai affiché en fonction du type de son compte.`}</p>\n <br />\n <h2 {...{\n \"id\": \"menu-utilisateur\"\n }}>{`Menu Utilisateur`}</h2>\n <hr></hr>\n <p>{`Dans le cas d'un compte de type 'Utilisateur', le menu par défaut lui affiché ceci par la fonction suivante:`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-javascript\"\n }}>{` getUserMenu() {\n return [\n { title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true }\n , { title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false }\n , { title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false }\n , { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]\n }\n`}</code></pre>\n <p>{`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.`}</p>\n <p>{`⚠️ 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 `}<a parentName=\"p\" {...{\n \"href\": \"/ilink-world/screen/configuration-screen#la-biblioth%C3%A8que-react-native-i18n\"\n }}>{`ConfigurationScreen`}</a>{`.`}</p>\n <h2 {...{\n \"id\": \"menu-utilisateur-géolocalisé-superviseur-et-hyperviseur\"\n }}>{`Menu Utilisateur Géolocalisé, Superviseur et Hyperviseur`}</h2>\n <hr></hr>\n <p>{`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:`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-javascript\"\n }}>{` getGeolocatedUserMenu() {\n return [\n { title: I18n.t('MAP'), id: 0, key: 0, icon: 'md-map', active: true }\n , { title: I18n.t('MY_ACCOUNT'), id: 1, key: 1, icon: 'md-person', active: false }\n , { title: I18n.t('CREDIT_MANAGE'), id: 2, key: 2, icon: 'md-card', active: false }\n , { title: I18n.t('ADD_NETWORK'), id: 11, key: 11, icon: 'md-people', active: false }\n , { title: I18n.t('CHANGE_INFORMATION'), id: 13, key: 13, icon: 'md-person', active: false }\n , { title: I18n.t('NOTIFICATIONS'), id: 3, key: 3, icon: 'md-notifications', active: false }\n , { title: I18n.t('CONFIGURATIONS'), id: 4, icon: 'md-settings', active: false }]\n }\n`}</code></pre>\n <hr></hr>\n <h2 {...{\n \"id\": \"déconnexion-de-lutilisateur\"\n }}>{`Déconnexion de l'utilisateur`}</h2>\n <p>{`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.\nCeci 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.`}</p>\n <pre><code parentName=\"pre\" {...{\n \"className\": \"language-javascript\"\n }}>{` disconnect() {\n IlinkEmitter.emit(\"userdisconnect\");\n Navigation.setStackRoot(route.stackRoot, {\n component: {\n name: route.login,\n animated: true\n }\n })\n })\n`}</code></pre>\n <p>{`⚠️ Cette manière de procéder est obsolète`}</p>\n <p><em parentName=\"p\">{`Aujourd'hui la bibliothèque `}<a parentName=\"em\" {...{\n \"href\": \"https://redux.js.org/\"\n }}>{`redux`}</a>{` permet une meilleur gestion du state global de l'application.`}</em></p>\n\n </MDXLayout>;\n}\n\n;\nMDXContent.isMDXComponent = true;"}} |