Composant parent de tous les autres composants de l’application
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
Component -> ‘@angular/core’:
Composant d’angular qui va créer le component tab1 en reliant la page.ts avec son template, son style et renseigner la façon dont se component devra être appeler.
* VariablesGlobales -> ‘../VariablesGlobales’:
Class que l’on peut appeler partout sur l’application pour se servir de variables dont les valeurs ne changeront pas peu importe l’endroit ou nous nous trouvons. Nous avons également la possibilité de modifier ses variables.
* ThemeService =>.’./service/theme.service’
C'est le service qui gère et modifie le thème (Dark ou Light).
StatusBar -> ‘@capacitor/status-bar’:
BackgroundColorOptions -> ‘@capacitor/status-bar’:
Style -> ‘@capacitor/status-bar’:
Gère l’apparence et le style de la barre d'état.
| Nom | Déclenchement | Utilité |
|---|---|---|
| initialiseApp | A l’ouverture de l’application | Initialise le thème et lance la méthode setStatusBar |
| setStatusBar | A l’ouverture de l’application | Modifie la couleur de la barre d'état |
NgModule -> ‘@angular/core’:
Injecteur et Compilateur d’Angular
PreloadAllModules -> ‘@angular/router:
Utilisé pour le préchargement des modules nécessaires pour l’application.
RouterModule -> ‘@angular/router:
Composant permettant de gérer le routeur d’angular
Routes -> ‘@angular/router:
Composant permettant d'interagir avec les routes de l’application
| Path | Import / redirect |
|---|---|
| / | import (‘./tabs/tabs.module’) |
| /splash | import('./splash/splash.module') |
| /detail-statistic/:id | import (./detail-statistic/detail-statistic.module)
|
| /detail-sms/:id | import('./detail-sms/detail-sms.module')
|
Module gérant le routeur TAB de l’application
Élément importé -> path de l’import :
Qu’est-ce que cet import ?
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
Component -> ‘@angular/core’:
Composants de Base d’angular
* Router => ‘@Angular/router’
Ce composant permet d'interagir avec le routeur.
NgModule -> ‘@angular/core’:
Injecteur et Compilateur d’Angular
RouterModule -> ‘@angular/router:
Composant permettant de gérer le routing de l’application
Routes -> ‘@angular/router’:
Composant permettant d’interagir avec les routes de l’application
TabsPage -> ‘./tabs.page’:
Import de la page.ts
| Path | Import / redirect |
|---|---|
| /tabs/tab1 | import(‘../tab1/tab1.module’) |
| /tabs/tab2 | import(‘../tab2/tab2.module’) |
| /tabs/tab3 | import(‘../tab3/tab3.module’) |
| /tabs/tab4 | import(‘../tab4/tab4.module’) |
| /tabs/tab5 | import(‘../tab5/tab5.module’) |
| / | redirectTo: ‘/tabs/tab1’ |
Tab1 est la page sur laquelle on arrive à l’ouverture de l’application,
la connexion se gère sur cette page. Une fois connecté, nous avons accès à la liste des appels entrant, sortant et manqués du numéro d’astreinte. Nous avons également la possibilité au clic de l’un de ses derniers d’effectuer un rappel du numéro cliqué (appelé via le numéro d’astreinte), mais également d’avoir accès au clic d’un bouton au détail d’un appel.
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
Component => ‘@Angular/core’
Composant d’angular qui va créer le component tab1 en reliant la page.ts avec son template, son style et renseigner la façon dont se component devra être appeler.
VewChild => ‘@Angular/core’
Permet de récupérer des éléments HTML et d'interagir avec.
*IonInfiniteScroll => ‘@ionic/angular’
Le composant Infinite Scroll appelle une action donnée lorsque l’utilisateur arrive en bas de page.
*AlertController => ‘@ionic/angular’
Ce composant sert à afficher des alertes.
IonContent =>.’@ionic/angular’
Ce composant fournit une zone de contenu et contient également quelques méthodes utiles afin de contrôler la zone de défilement
* PlatForm => ‘@ionic/angular’
Le service Platform est utilisé afin d’obtenir des informations sur l’appareil de l’utilisateur : Son système(iOS, Android, etc.) et son type(Desktop, Tablet ou Smartphone).
Ce qui permet de gérer les comptabilités entre les différents types d’appareils.
. * LoadingController => ‘@ionic/angular’
Ce composant est utilisé pour afficher un loader.
* HttpClient => ‘@Angular/common/http’
Ce composant sert à effectuer des requêtes HTTP.
* VariablesGlobales => ‘../VariablesGlobales’
Class avec une portée publique et globale que l’on peut l’appeler n’importe où dans l’application afin d’utiliser ses variables et ses méthodes.
*CallNumber => ‘@ionic-native/call-number/ngx’
Sert à appeler un numéro.
* Router => ‘@Angular/router’
Ce composant permet d'interagir avec le routeur.
* ActivatedRoute => ‘@Angular/router’
Permet de récupérer des informations sur la route active.
ParsePhoneNumber => ‘libphonenumber-js’
Méthode qui sert à vérifier si un numéro de téléphone est valide selon un pays donné.
CountryCode => ‘libphonenumber-js’
Typage ISO 3166 (FR, BE, IR, IT, etc…)
* ToastController => ‘@ionic/angular’
Permet d’afficher des notifications ou des messages à l'utilisateur.
* ThemeService =>.’./service/theme.service’
C'est le service qui gère et modifie le thème (Dark ou Light).
FindflagurlByIso2Code => ‘country-flags-svg’
Renvoie le lien SVG du drapeau officiel d'un pays spécifié
* Contact, ContactField, ContactName => ‘@ionic-native/contacts/ngx’
Permet d’accéder et d'interagir avec les contacts enregistrés sur l’appareil de l’utilisateur.
| Nom | Type | Utilité |
|---|---|---|
| login | String | identifiant de connexion |
| password | String | mot de passe de connexion |
| loading | Boolean | Permet d’afficher ou non le loader |
| userId | String | identifiant de l’utilisateur |
| day | Objet | Récupère le jour de la date actuelle |
| statistique | Array | Tableau qui stocke les statistiques des appels |
| debutSearch | String | stocke le début de la recherche donné par la méthode search() |
| finSearch | String | stocke la fin de la recherche donné par la méthode search() |
| disconnected | Any | indique si l’utilisateur est déconnecté |
| disconnectedMessage | Boolean | Permet d’afficher ou non un message lors d’une déconnexion |
| loginErrorMessage | String | Stocke le message à afficher lorsqu'il y a une erreur de connexion |
| page | Number | Numéro à passer dans la méthode getStat afin d’obtenir les résultats par pagination |
| pageEmis | Number | Numéro à passer dans la méthode outGoingCall afin d’obtenir les résultats par pagination |
| pageManques | Number | Numéro à passer dans la méthode notHandledCall afin d’obtenir les résultats par pagination |
| noResult | Boolean | Égale true lorsqu’il n’y a pas d’appel reçu |
| outGoingNoResult | Boolean | Égale true lorsqu’il n’y a pas d’appel sortant |
| NotHandledNoResult | Boolean | Égale true lorsqu’il n’y a pas d’appel manqués |
| nom | String | stock le nom de l’astreinte |
| outGoingCall | Array | Tableau qui stock les appels émis |
| notHandledCall | Array | Tableau qui stock les appels manqués |
| callVue | Number | Permet de se situer entre les vues : appels reçu, appels émis et appels manqués |
| tous | Boolean | Égale à true lorsque le segment appel reçu est activé |
| conn | Any | Objet WebSocket relié au serveur |
| emis | Boolean | Égale à true lorsque le segment appel émis est activé |
| manques | Boolean | Égale à true lorsque le segment appel manqués est activé |
| firstConnexion | Boolean | True si l’utilisateur se connecte pour la première fois |
| registerPhoneView | Boolean | Permet d’afficher la vue qui permettra à l’utilisateur d’enregistrer son numéro de téléphone lors d’une première connexion |
| telNumber | String | Stock le numéro de téléphone qui a été saisie lors de la connexion |
| checkBool | Number | Statut du numéro qui a été saisi lors de la première connexion. Vaut 1 si non valide et 2 si valide. Et affiche un message en conséquence. |
| country | Array | Stock la liste des destinations autorisées sur le compte Planitel. |
| countrycode | CountryCode | Indicatif du pays de l’utilisateur |
| countryBool | Boolean | Affiche ou non le système de sélection de pays |
| memoriseId | Boolean | Si true, mémorise les identifiants de connexion |
| idStat | String | Stock l’id de la statistique cliqué pour permettre le rappel |
| selectedCurrency | String | Le pays sélectionné par l’utilisateur |
| selectedFlag | String | Le drapeau du pays sélectionné par l’utilisateur |
| pageLoad | Boolean | Égale true lorsque la page TAB1 est active |
| showBtnToTop | Boolean | Affiche le bouton pour remonter en haut de la page |
| reloadSocket | Boolean | True si il faut recharger les websocket |
| loader | Any | Stock le composant Loader lors de l’utilisation de ce dernier |
| showLoader | Boolean | Permet de savoir si le composant Loader est affiché |
| callAskIsSend | Boolean | True si une demande d’appel à été effectué |
| Nom | Déclenchement | Utilité |
|---|---|---|
| connexion | clic sur le Bouton Connexion | Permet de se connecter à l’application |
| addPlanitelContact | Lors de la première connexion | Enregistrer le numéro de téléphone qu’il faut appeler pour une procédure de rappel dans les contacts du téléphone s’il n’existe pas |
| connSocket | Lors d’une connexion | Permet de se connecter au serveur sockets |
| ShowLoading | Dans la méthode call() | Fait apparaître un loader avec le message ‘Demande d’appel…’ |
| nativeBackground | À l’ouverture de l’application | Permet de savoir si l’application est mise en arrière plan ou non |
| doRefresh | Quand l’utilisateur tire la page vers le bas | Rafraîchit la page |
| setUser | À l’ouverture de la page et après la connexion | Récupère les information de l’utilisateur depuis le localstorage afin de les stocker dans les variables globales |
| getNumero | À l’ouverture de la page et quand on fait appel à la méthode getStat() | Récupère le numéro de téléphone principale renseigné sur le serveur Planitel |
| savePhoneNumber | Après validation d’un formulaire | Enregistrer le numéro de téléphone de l’utilisateur dans le localStorage et rafraichit la page |
skipForRegisterNewPhone |
Au clic du bouton pour passer le formulaire d’enregistrement du numéro de téléphone de l’utilisateur dans le localstorage |
ne pas enregistrer le numéro de téléphone dans local Storage |
| validatePhoneNumber | Après validation d’un formulaire | Méthode qui vérifie si le numéro de téléphone saisi par l’utilisateur est valide en faisant appel à la méthode isValid() et stocke le numéro avec le pays dans localstorage. |
| segmentChanged | Au click du segment reçus, émis ou manqués | Affiche la vue de la liste des appels selon la segment choisi (reçu, émis ou manqué) |
| getCountry | À l’ouverture de la page et lorsque l’utilisateur est connecté pour la première fois | Récupérer les information d’un pays à partir du pays choisi |
| loadcurrency | Lors d’une première connexion | Permet de créer le select avec un nombre de pays donnée |
| updateFlag | Quand l’utilisateur sélectionne un pays | Met à jour le drapeau en faisant appel à la méthode findFlagUrlByIso2Code () selon le code du pays choisi |
| reloadData | Dans la méthode ActivatedRoute.url.subscribe() | Rafraîchit les données de la page (statistiques, appels émis, appels manqués) |
| getStat | Lorsqu'on fait appel à la méthode search() | Récupère les données des statistique des appels reçus |
| getOutgoingCall | Lorsqu'on fait appel à la méthode search() | Récupère les données des statistique des appels émis |
| search | Après la connexion | Définit un créneau entre la date d’aujourd’hui et le 1er du mois précédent et met à jour les variables debutSearch et finSearch |
| getNotHandledCall | Lorsqu'on fait appel à la méthode search() | Récupère les données des statistique des appels manqués |
| ifStatHasBeenUpdated | Dans la méthode ActivatedRoute.url.subscribe() | Vérifie si une statistique a été mise à jour |
loadData | Quand l’utilisateur arrive en bas de la page avec l’infinite scroll | Appel la page suivante des appels reçu |
| loadDataManque | Quand l’utilisateur arrive en bas de la page avec l’infinite scroll | Appel la page suivante des appels manqués |
| loadDataEmis | Quand l’utilisateur arrive en bas de la page et ilya encore des données à afficher | Appel la page suivante des appels émis |
| alllCallVue | Dans la methode segmentChanged()
| Affiche la vue des appel recus |
| outGoingCallVue | Dans la methode segmentChanged() | Affiche la vue des appel émis |
| notHandledCallVue | Dans la methode segmentChanged() | Affiche la vue des appel manqués |
| call | Dans la méthode openToastForCall()
| Méthode de rappel d’une statistique |
| alertMessage | Dans la méthode Call() | Créer une Alerte |
| openToastForCall | Au click sur le numéro d’appel reçu ou manqué | Ouvrir la notification en bas de la page pour confirmer l’appel d’un numéro sur Android, sur IOS la notification s’ouvre nativement. Puis exécute la méthode call() |
| presentToastWithOptions | Dans la méthode Call() | Créer la Toast de notification qui sert à rappeler un numéro sur Android |
| scrolling | Lorsque l’utilisateur scroll | Exécute la méthode detectScrollY() |
| detectScrollY | Dans la méthode scrolling() | Affiche/Cache le bouton pour revenir en haut de page selon l’endroit où l'utilisateur se trouve |
| GoTop | Au clic sur l'icône en bas de la page | Remonte en haut de la page |
| ngOnInit | À l’ouverture de la page | Lancer toutes les méthodes nécessaires à l’initialisation du composant tab1. Vérifie si l’utilisateur est connecté, s'il s’agit d’une première connexion. Si pas connecté affiche la vue de connexion ou de première connexion, sinon lance les méthode pour récupérer les statistiques, se connecte au serveur Socket |
Module gérant le calendrier d’astreinte de l’application.
Élément importé -> path de l’import :
Qu’est-ce que cet import ?
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
Component -> ‘@angular/core’:
Composants de Base d’angular
OnInit -> ‘@angular/core’:
Composant permettant la méthode onInit
ViewChild -> ‘@angular/core’:
Composant permettant la gestion des vues avec angular
CalendarOptions-> ‘@fullcalendar/angular’:
FullCalendarComponent-> ‘@fullcalendar/angular’:
* HttpClient -> ‘@angular/common/http’:
Composant créant un client HTTP pour divers requêtes
* VariablesGlobales -> ‘../VariablesGlobales’:
Class que l’on peut appeler partout sur l’application pour se servir de variables dont les valeurs ne changeront pas peu importe l’endroit ou nous nous trouvons. Nous avons également la possibilité de modifier ses variables.
* ActionSheetController-> ‘@ionic/angular’:
Composant permettant l’ouverture d’un dialogue sur l’appareil utilisateur pouvant contenir divers options
* Platform -> ‘@ionic/angular’:
Composant permettant de récupérer des informations sur l’appareil utilisateur
| Nom | Type | Utilité | Valeur par défaut |
|---|---|---|---|
| modalBool | Boolean | Gestion de l’ouverture / fermeture de la modal | False |
| calendarEvents | Array | Stockage des événements enregistré sur la période donnée | Vide |
| calendarOptions | CalendarOptions | Stockage de divers options lié au calendrier | Non Initialisé |
| clickCount | Number | compteur de click | Non Initialisé |
| deleteId | String | Id de l'événement à supprimer | Non Initialisé
|
| calendar | any | Stock l’instance du calendrier FullCalendar | Non Initialisé |
| initialized | Boolean | état d'initialisation de la page | False |
| nom | String | Nom de l’utilisateur | Non Initialisé |
| viewName | String | Titre à afficher sur la vue (Du calendrier) | Non Initialisé |
| viewportHeight | Number | hauteur du viewport Utilisateur | Non Initialisé |
| Nom | Déclenchement | Utilité |
|---|---|---|
| formatDate | Lancement via la méthode “handleDateClick” Lancement via la méthode “updatePeriode” | Reformater la date pour permettre un enregistrement correct |
| handleDateClick | Lancement via la méthode “ionViewWillEnter” | récupérations des événements sur le calendrier pour une période donnée |
| updatePeriode | Lancement via la méthode “ionViewWillEnter” | Changer la période du calendrier actuellement afficher |
| doubleClick | Lancement via la méthode “ionViewWillEnter” | Gestion du double clic pour ouvrir la sélection |
| deletePeriode | Lancement via la méthode “presentActionSheet” | Suppression d’une période d’astreinte donnée |
| presentActionSheet | Lancement via la méthode “doubleClick” | Gestion de la modal s’ouvrant pour les actions associés à une astreinte |
| getData | Lancement via la méthode “ionViewWillEnter” | Récupération des données sur une période donnée |
| closeModal | Clic sur le bouton de fermeture | Fermeture de la modal |
| setUser | Lancement via la méthode “ngOnInit” | Mettre à jour l’utilisateur dans le localstorage |
| doRefresh | Lancement via un appuie maintenu glissé vers le bas sur la page | Recharge la page |
| getTitleView | Lancement via la méthode “ionViewWillEnter” Lancement via la méthode “ionViewDidEnter” | Récupération du titre de la vue pour adapter selon ce que voit l’utilisateur |
| removeBgDayGridMonthEvents | Lancement via la méthode “ionViewDidEnter” Lancement via la méthode “ionViewWillEnter” | Adapte le style visuel du calendrier selon le viewport de l’appareil utilisateur |
| changeEventDisplay | Lancement via la méthode “getData” Lancement via la méthode “ionViewWillEnter” | Gestion de la navigation dans les différents types d’affichages du calendrier ( Mois , Jour , Liste) |
| ngOnInit | Lancement à l’initialisation de la page | Effectuer des actions lors du chargement de la page |
| ionViewDidEnter | Lancement après le chargement de la page | Effectuer des actions après le chargements de la page |
| ionViewWillEnter | Lancement au chargement de la page | Effectuer des actions avant le chargement de la page |
C’est la page des paramètres. L’utilisateur peut gérer ses numéros actifs (modifier, supprimer ou ajouter), choisir le thème de l’application (dark ou light) et éventuellement se déconnecter de l’application.
Les imports
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
Component => ‘@Angular/core’
Composant d’angular qui va créer le component tab3 en reliant la page.ts avec son template, son style et renseigner la façon dont se component devra être appeler.
* HttpClient => ‘@Angular/common/http’
Ce composant sert à effectuer des requêtes HTTP.
* VariablesGlobales => ‘../VariablesGlobales’
Class avec une portée publique et globale que l’on peut l’appeler n’importe où dans l’application afin d’utiliser ses variables et ses méthodes.
* ThemeService =>.’./service/theme.service’
C'est le service qui gère et modifie le thème (Dark ou Light).
ParsePhoneNumber => ‘libphonenumber-js’
Méthode qui sert à vérifier si un numéro de téléphone est valide selon un pays donné.
getCountries => ‘libphonenumber-js’
Méthode qui sert à récupérer la liste des pays
CountryCode => ‘libphonenumber-js’
Typage ISO 3166 (FR, BE, IR, IT, etc…)
* ActionSheetControllerr=>‘@ionic/angular’
Ce composant ouvre une boîte de dialogue qui permet à l'utilisateur de choisir d'exécuter une ou plusieurs actions
*AlertController => ‘@ionic/angular’
Ce composant sert à afficher des alertes.
*ModalController => ‘@ionic/angular’
Ce composant permet de créer et d'interagir avec une modal
ActifNumberModalComponent => '../actif-number-modal/actif-number-modal.component'
Permet d’ouvrir la modal actif number, de lui passer des props et de récupérer ses valeurs de retour
| Nom | Type | Utilité |
|---|---|---|
| modalBool | Boolean | Égale true lorsque la modal est ouverte et false lorsqu’elle est fermé |
| loading | Boolean | true si le loader est affiché |
| nom | string | Stocke le nom de l’utilisateur |
| telephones | Array | stocke les numéros de téléphone actifs ajoutés par l’utilisateur |
| dark | Boolean | Vérifier si le thème est dark ou non |
| telNumber | String | Stocke le numéro de téléphone actif ajouté |
| checkBool | Boolean | Vérifier si le numéro de téléphone est valide ou non(true si le numéro est valide et false si non valide) |
| successMsgUpdateNum | Boolean | True si la mise à jour de numéro de téléphone est effectuée avec succès et false si non |
| country | Array | Stocke la liste des pays |
| Countrycode | CountryCode | Indicatif du pays de l’utilisateur |
| countryBool | Boolean | Affiche ou non le système de sélection de pays |
| deleteNumberId | String | Stocke le numéro de téléphone à supprimer |
| deleteMsg | Boolean | Stocke le message de confirmation de suppression du numéro de telephone |
| Nom | Déclenchement | Utilité |
|---|---|---|
| closeModal | Au clic du bouton fermer | Ferme une modal |
| openModal | Ouvre une modal | |
| getNumero | À l’ouverture de la page | Cette méthode sert à récupérer le numéro actif |
| checkActifNumero | Dans la méthode getNuméro() | Vérifier si le numéro est actif ou non |
| updateNumero | Dans la méthode openActifNumberModal() et la méthode presentActionSheet() | Mettre à jour un numéro |
| SetUser | Dans l’ouverture de la page | Récupère les information de l’utilisateur depuis le localstorage afin de les stocker dans les variables globales |
| logout | Au click sur le bouton déconnexion | sert à se déconnecter de l’application en vidant le localstorage des informations de l’utilisateur. |
| enableDark | Au click sur sombre quand le theme light est activé | C’est une méthode récursive qui sert à changer le thème a Dark |
| enableLight | Au click sur clair quand le theme dark est activé | C’est une méthode récursive qui sert à changer le thème a Light |
| checkIfDark | À l’ouverture de la page et dans les méthodes enableDark et enableLight | Sert à vérifier si le thème Dark est activé |
| openActifNumberModal | Au clic d’un numero actif ou au clic du bouton ajouter un numero | Cette méthode sert à ouvrir la modal correspond a l’ajout ou à la modification d’un numéro actif |
| getCountry | À l’ouverture de la page | Récupérer les information d’un pays à partir du pays |
| doRefresh | Quand l’utilisateur tire la page vers le bas | Rafraîchit la page |
| presentActionSheet | Dans la méthode deleteNumber() | Lance la boîte de dialogue pour l’action de suppression d’un numéro actif |
| ngOnInit | À l’ouverture de la page | Lance toutes les méthodes nécessaires à l’initialisation du composant tab3 |
Module gérant la partie sms de l’application
Élément importé -> path de l’import :
Qu’est-ce que cet import ?
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
Component -> ‘@angular/core’:
Composants de Base d’angular
ViewChild -> ‘@angular/core’:
Composant permettant la gestion des vues avec angular
* HttpClient -> ‘@angular/common/http’:
Composant créant un client HTTP pour divers requêtes
* VariablesGlobales -> ‘../VariablesGlobales’:
Class que l’on peut appeler partout sur l’application pour se servir de variables dont les valeurs ne changeront pas peu importe l’endroit ou nous nous trouvons. Nous avons également la possibilité de modifier ses variables.
* ActionSheetController-> ‘@ionic/angular’:
Composant permettant l’ouverture d’un dialogue sur l’appareil utilisateur pouvant contenir divers options
IonContent-> ‘@ionic/angular’:
Gestion de contenu d’ionic
| Nom | Type | Utilité | Valeur par défaut |
|---|---|---|---|
| loading | Boolean | True si le loader est visible | True |
| pageReceive | Number | Numéro de la page pour les sms reçus | 1 |
| pageSend | Number | Numéro de la page pour les sms envoyés | 1 |
| day | Number | Date | New Date().getDate() |
| smsListReceive | Array | Liste des sms reçus | Vide |
| smsListSend | Array | Liste des sms envoyé | Vide |
| debutSearch | String | Date de début pour la récupération de sms | Non initialisé |
| finSearch | String | Date de fin pour la récupération de sms | Non initialisé |
| noResult | Boolean | Gestion d’absence de résultat | False |
| noResultOnReceive | Boolean | Gestion d’absence de résultat | False |
| emis | Boolean | Gestion du type dernier sms de la conversation | False |
| receive | Boolean | Gestion du type dernier sms de la conversation | True |
| smsView | Number | Type de bouton à afficher | 1 |
| showBtnToTop | Boolean | Apparition du bouton de remonter en haut de page | False |
| Nom | Déclenchement | Utilité |
|---|---|---|
| logout | Non trouvé ? non utilisé ? | Déconnecte l’utilisateur |
| doRefresh | Lancement via un appuie maintenu glissé vers le bas sur la page | Recharge la page |
| getSmsReceive | Déclenchement via les méthodes “search” et “loadDataReceive” | Récupération des sms reçu |
| getSmsSend | déclenchement via la méthode loadDataEmis | Récupération des sms envoyés |
| loadDataReceive | Arrivé en bas de page | Charge la suite des sms reçus |
| loadDataEmis | Arrivé en bas de page | Charge la suite des sms envoyé |
| receiveView | Déclenchement via la méthode “segmentChanged” | Changement de valeur quand le dernier sms de la conversation est un sms reçu |
| emisView | Déclenchement via la méthode “segmentChanged” | Changement de valeur quand le dernier sms de la conversation est un sms envoyé |
| segmentChanged | Chargement de la page ? | Méthode permettant de modifier l'icône d’informations pour chaque conversation en fonction du dernier sms reçus |
| search | Lancement via la méthode ngOnInit | Initialiser les dates de début et de fin et lancer la méthode de récupération des SMS |
| scrolling | Au scroll | Éxecute detectScrollY |
| ifAnAstreinteHasSendAResponse | Non utilisé ? | détection d’une réponse de la part de la personne d’astreinte ? |
| detectScrollY | Lancement via la méthode “scrolling” | Affiche ou non le bouton pour retourner en haut de la page selon l’endroit où l'on se situe |
| goTop | Clic sur le bouton de remonté | Remonte en haut de la page |
| ngOnInit | Lancement à l’initialisation de la page | Lancer la méthode “search” |
C’est la page qui affiche le dialpad afin que l’utilisateur compose un numéro pour l’appeler via Planitel.
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
Component => ‘@Angular/core’
Composant d’angular qui va créer le component tab5 en reliant la page.ts avec son template, son style et renseigner la façon dont se component devra être appeler.
VewChild => ‘@Angular/core’
Permet de récupérer des éléments HTML et d'interagir avec.
*IonInfiniteScroll => ‘@ionic/angular’
Le composant Infinite Scroll appelle une action donnée lorsque l’utilisateur arrive en bas de page.
*AlertController => ‘@ionic/angular’
Ce composant sert à afficher des alertes.
*NavController => ‘@ionic/angular’
Composant qui facilite l'interaction avec la navigation
* PlatForm => ‘@ionic/angular’
Le service Platform est utilisé afin d’obtenir des informations sur l’appareil de l’utilisateur : Son système(iOS, Android, etc.) et son type(Desktop, Tablet ou Smartphone). Ce qui permet de gérer les comptabilités entre les différents types d’appareils.
* LoadingController => ‘@ionic/angular’
Ce composant est utilisé pour afficher un loader.
* HttpClient => ‘@Angular/common/http’
Ce composant sert à effectuer des requêtes HTTP.
* VariablesGlobales => ‘../VariablesGlobales’
Class avec une portée publique et globale que l’on peut l’appeler n’importe où dans l’application afin d’utiliser ses variables et ses méthodes.
*CallNumber => ‘@ionic-native/call-number/ngx’
Permet d’appeler un numéro.
* Router => ‘@Angular/router’
Ce composant permet d'interagir avec le routeur.
* ActivatedRoute => ‘@Angular/router’
Permet de récupérer des informations sur la route active.
* ToastController => ‘@ionic/angular’
Permet d’afficher des notifications ou des messages à l'utilisateur.
| Nom | Type | Utilité |
|---|---|---|
| idStat | Any | Stock l’id de la statistique |
| toggleDialPadBool | Boolean | Égale à true lorsque on clique sur l'icône ‘Call’ |
| composerNumber | String | Stocke le numéro composé |
| composeNumberAreaBool | Boolean | Égale à true lorsque l’utilisateur commence à composer un numéro |
| loader | Any | Stock le composant Loader lors de l’utilisation de ce dernier |
| showLoader | Boolean | Permet de savoir si le composant Loader est affiché |
| callAskIsSend | Boolean | True si une demande d’appel à été effectué |
| Nom | Déclenchement | Utilité |
|---|---|---|
| call | Dans la méthode presentToastWithOptions() | Permet d’effectuer un appel |
| alertMessage | Dans la méthode Call() et la méthode toggle DialPad() | Sert à créer une alerte |
| openToastForCall | ||
| presentToastWithOptions | Dans la méthode openToastForCall | Créer la Toast de notification qui sert à rappeler un numéro sur Android |
| showLoading | Dans la méthode toggleDialPad | Fait apparaître un loader avec le message ‘Demande d’appel…’ |
| toggleDialPad | Au clic sur l'icône de téléphone | lance l’appel |
| composeNumberForCall | Au click sur les touches du clavier | Cette méthode sert à composer le numéro à appeler |
| ngOnInit | À l’ouverture de la page | initialise la page Tab5 |
C’est la modal dédiée aux numéros actifs avec la possibilité de modifier, supprimer ou ajouter un numéro.
On fait l’import de cette modal dans TAB3.
Les imports
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
Component => ‘@Angular/core’
Composant d’angular qui va créer le component tab1 en reliant la page.ts avec son template, son style et renseigner la façon dont se component devra être appeler.
Input => ‘@Angular/core’
Composant facilitant l’implémentation d’input.
FormControl=> ‘@Angular/forms
Sert à créer des formulaires
Validators=> ‘@Angular/forms
sert à valider et sécuriser les données envoyées par les formulaires
*ModalController => ‘@ionic/angular’
Ce composant permet de créer et d'interagir avec une modal
* VariablesGlobales => ‘../VariablesGlobales’
Class avec une portée publique et globale que l’on peut l’appeler n’importe où dans l’application afin d’utiliser ses variables et ses méthodes.
| Nom | Type | Utilité |
|---|---|---|
| numero | String | Stock le numéro de téléphone |
| sonnerie | String | Stock le temps de sonnerie |
| etoile | Boolean | True si l’utilisateur souhaite confirmer la prise d’appel avec ce numéro |
| id | Number | Stock l’identifiant du numéro téléphone actif |
| type | String | Stock le type de l'opération (modification d’un numéro actif ou l’ajout d’un nouveau) |
| numberInput | FormControl | input qui contient le numéro de téléphone |
| sonnerieTimeInput | FormControl | input qui contient le temps de la sonnerie en seconde |
| etoileInput | FormControl | input qui contient l’option que choisit l’utilisateur (active ou désactive) |
| Nom | Déclenchement | Utilité |
|---|---|---|
| setValue | Dans la méthode ionViewwillEnter | Traite les props qui lui ont été passées afin d’identifier l’objet de l’ouverture de la modal (Ajout ou Modification) et d’agir en conséquence. |
| dismissModal | Au click sur le bouton Fermer | Méthode qui sert à fermer la modal |
| onUpdate | Au click sur le bouton Valider | Méthode qui déclenche la fermeture de la modal et passe les valeurs à mettre à jour à son parent,. |
| onSubmit | Au click sur le bouton Ajouter | Méthode qui déclenche la fermeture de la modal et passe les valeurs à ajouter à son parent, |
| onDelete | Au click sur le bouton Supprimer | Méthode qui déclenche la fermeture de la modal et passe la valeur à supprimer à son parent, |
| ionViewwillEnter | Ouverture du Composant | Faire appel à la méthode setValue |