Module dédié à une modal d’annuaire depuis laquelle nous avons la possibilité d’ajouter un nom qui sera associé au numéro, le mettre à jour et le supprimer.
É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
FormControl -> ‘@angular/forms’
Validators -> ‘@angular/forms’ :
Composant qui va faciliter la conception de formulaire sécurisé.
*ModalController -> ‘@ionic/angular’ :
Composant dont l’utilité sera de créer et d'interagir avec une modal.
*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.
Annuaire -> ‘./Annuaire’:
type spécialement créé et importée via le fichier ‘’./annuaire.ts’ , contenant une propriété “id” de type string , une propriété “name_customer” de type string et une propriété “phone_number” de type string
| Nom | Type | Utilité |
|---|---|---|
| id | Number | Id du contact |
| type | String | Type d’action à faire |
| valid | Boolean | Validation du champ name pour activer les le bouton de création / mise à jour |
| numero | String | numéro associé à l’appel |
| data | Annuaire | Données récupéré dans la base de donnée depuis le composant parent et passé en props à la modal |
| name | FormControl | Input qui contient le nom associé au numéro ou vide |
| Nom | Déclenchement | Utilité |
|---|---|---|
| setValue | Ouverture du Composant dans la méthode ionViewWillEnter. | Traite les props (valeurs) 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 | clic sur le Bouton “Fermer” | Méthode qui déclenche la fermeture de la modal et n’applique aucun changement. |
| onUpdate | clic sur le Bouton “Mettre à jour” | Méthode qui déclenche la fermeture de la modal et passe la valeur à mettre à jour à son parent, mais également le rôle afin que son parent identifie l’action comme une mise à jour. |
| onSubmit | clic sur le Bouton “Ajouter” | Méthode qui déclenche la fermeture de la modal et passe la valeur à ajouter à son parent, mais également , le rôle afin que son parent identifie l’action comme un ajout. |
| onDelete | clic sur le Bouton “Supprimer” | Méthode qui déclenche la fermeture de la modal et passe la valeur à supprimer à son parent, mais également , le rôle afin que son parent identifie l’action comme une suppression. |
| ionViewWillEnter | Ouverture du Composant | Exécute la méthode setValue |
C’est la page dédiée aux sms, c’est là où l’utilisateur peut consulter ses sms et ses conversations ainsi que d'envoyer des messages.
* 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 detail-sms en reliant la page.ts avec son template, son style et renseigner la façon dont se composant devra être appeler.
elementRef => ‘@Angular/core’
Utiliser pour récupérer la référence d’un élément HTML pour le manipuler par la suite
onInit => ‘@Angular/core’
Sert à appeler la méthode ngOnInit() pour l’initialisation du composant
VewChild => ‘@Angular/core’
Permet de récupérer des éléments HTML et d'interagir avec.
* ActivatedRoute => ‘@Angular/router’
Permet de récupérer des informations sur la route active.
* 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.
*AlertController => ‘@ionic/angular’
Ce composant sert à afficher des alertes
* 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.
* ToastController => ‘@ionic/angular’
Permet d’afficher des notifications ou des messages à l'utilisateur.
* LoadingController => ‘@ionic/angular’
Ce composant est utilisé pour afficher un loader.
| Nom | Type | Utilité |
|---|---|---|
| id | String | Stocke l’identifiant du message |
| sms | Array | tableau qui stocke les messages |
| astreinte | Array | tableau qui stocke la liste des noms des personnels d’astreinte |
| loading | Boolean | Permet d’afficher ou non le loader |
| message | String | Stock le contenu d’un message afin de l’envoyer par SMS |
| conversation | Array | Tableau qui stock la conversation |
| smsIsSend | Boolen | True si le message est bien envoyé |
| loader | Any | Stock le composant Loader lors de l’utilisation de ce dernier |
| showLoader | Boolean | Permet de savoir si le composant Loader est affiché |
| Nom | Déclenchement | Utilité |
|---|---|---|
| getSms | À l’ouverture de la page | Cette méthode sert à récupérer un message |
| getConversation | Dans la méthode getSms() | Sert à récupérer une conversation |
| sendSms | Au clic sur l'icône d’envoi d’un message | envoyer un message |
| alertMessage | Dans la méthode sendSms | Créer une alerte avec un message donné |
| showLoading | Dans la méthode sendSms | Fait apparaître un loader avec le message ‘Envoi…’ |
| onMessageAreaFocus | Quand l’utilisateur touche pour commencer à écrire son message | Scroll vers le bas lors de l’ouverture du clavier du smartphone |
| ngOninit | À l’ouverture de la page | Lancer la méthode getSms() à l’initialisation du composant detail-sms |
C’est la classe qui gère le thème de l’application (Dark ou Light).
* import implémenté dans le constructor afin de lier l’import à la Class et de s’en servir plus facilement
* DOCUMENT => ‘@Angular/common
Sert à accéder directement au DOM et les manipuler
* Injectable => ‘@Angular/core
* inject=> ‘@Angular/core
sert à rendre les dépendences de services injectables c’est à dire accessibles dans toute l’application.
*RenderFactory2 => ‘@Angular/core
Renderer2 => ‘@Angular/core
sert à manipuler directement les éléments du DOM.
| Nom | Type | Utilité |
|---|---|---|
| renderer | Renderer2 | Cible et manipule l'élément body |
| Nom | Déclenchement | Utilité |
|---|---|---|
| enableDark | À l’ouverture de l’application et au clic du bouton Sombre | Active le thème Dark |
| enableLight | Au clic du bouton Clair | Active le thème Light |
Module dédié à la page d’informations détaillée d’un appel. L’astreinte à la possibilité d’ajouter un commentaire, d’ajouter un nom d’annuaire, et d’ajouter ce nom d’annuaire + le numéro dans les contacts du téléphone.
É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’:
OnInit -> ‘@angular/core’:
Composants de Base d’angular
* ActivatedRoute -> ‘@angular/router’:
Composant Angular permettant d’obtenir des informations sur une route
* 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.
* ModalController -> ‘@ionic/angular’:
* AlertController -> ‘@ionic/angular’:
* Platform -> ‘@ionic/angular’:
* ToastController -> ‘@ionic/angular’:
Divers composants Ionic adapté à Angular pour gérer les modals , les alertes , les informations de l’appareil utilisateurs et les “toast”
AnnuaireNameModalComponent -> ‘../annuaire-name-modal/annuaire-name-modal.component’:
Composant pour la modal de modification / ajout de nom lié au numéro
* Contacts -> ‘@ionic-native/contacts/ngx’:
Contact -> ‘@ionic-native/contacts/ngx’:
ContactField -> ’@ionic-native/contacts/ngx’:
ContactName -> ‘@ionic-native/contacts/ngx’:
Composants permettants de trouver et gérer les contacts dans l’annuaire de l’appareil utilisateur
| Nom | Type | Utilité | valeur par défaut |
|---|---|---|---|
| id | String | id de l’appel | Non initialisé |
| statistic | Array | Données de l’appel récupéré depuis la base de donnée | Vide |
| astreinte | Array | Données concernant la personne d’astreinte lors de la prise de l’appel | Vide |
| numeroRappel | String | numéro ayant rappelé l’appelant | Non initialisé |
| traite | Boolean | état de l’appel | Non initialisé |
| saveInPhone | Boolean | True si le contact est dans le répertoire du tél | False |
| contactUpdate | Boolean | mise à jour du contact | False |
| updatingContact | Boolean | mise à jour en cours du contact | False |
| rappels | Array | numéros ayant rappelé l’appelant | Vide |
| textComment | String | contenu du commentaire | Vide |
| showComment | Boolean | Affiche le commentaire | False |
| showCommentTextareaBool | Boolean | Affichage de la zone de texte pour un ajout de commentaire | False |
| showCommentText | String | Value du textarea commentaire | Vide |
| numeroAppelant | String | Numéro de l’appelant | Non initialisé |
| contactPhone | Contact[] | informations du contact présent dans le téléphone | Vide |
| name | String | Nom de l’appelant | Non initialisé |
| number | String | Numéro de l’appelant | Non initialisé |
| commentaires | Array | liste des commentaires présents | Vide |
| loading | Boolean | Affichage du loader | True |
| Nom | Déclenchement | Utilité |
|---|---|---|
| ngOnInit | Ouverture de la page | Lancer la méthode getStat. |
| getStat | Ouverture de la page via la méthode ngOnInit | Méthode récupérant la statistiques de l’appel pour les afficher, puis vérifie la présence du numéro et du nom d’annuaire dans le répertoire du téléphone ( si non présent, on affiche un toogle pour l’ajout) puis retrait du loader à la fin du traitement des données. |
| getListOfCall | Ouverture de la page via la méthode getStat | Méthode récupérant les rappels faits pour cet appel. |
| showCommentTextarea | Clic sur l'icône de la partie Commentaires | Méthode faisant passer la variable “showCommentTextareaBool” à true pour afficher le textarea servant à ajouter un commentaire. |
| checkIfNumberIsInContactPhone | Ouverture de la page via la méthode getStat “ | Méthode consultant l’annuaire du téléphone afin de vérifier la présence du numéro. |
| saveContactInPhone | Toggle d’enregistrement sur la page | Méthode enregistrant le numéro ainsi que le nom associé dans le répertoire téléphonique de l’utilisateur. |
| putStatistic | Toggle d’appel terminé sur la page | Méthode permettant de changer l’état de l’appel (terminé ou pas) |
| putStatInLocalStorage | Lancement via la méthode “putStatistic” Lancement via la méthode “postCommentary” Lancement via la méthode “putCommentary” Lancement via la méthode “deleteCommentary” | Méthode enregistrant les données de l’appel dans le stockage local du téléphone |
| convertTime | Lancement dans la méthode “getStat” | Méthode de conversion de temps de secondes vers minutes et secondes |
| postCommentary | Clic sur le bouton d’envoi de commentaire | Méthode de création d’un commentaire dans la base de donnée et le stock en même temps dans le stockage local de l’appareil (pour le récupérer dans son composant parent) |
| putCommentary | Clic sur le bouton d’envoi de commentaire | Méthode de mise à jour d’un commentaire dans la base de donnée et le stock en même temps dans le stockage local de l’appareil |
| deleteCommentary | Lancement via la méthode asynchrone “canDeletedCommentary” | Supprime le commentaire associé à l’appel |
| canDeleteCommentary | Clic sur le bouton de suppression de commentaire | Confirmation avant de supprimer le commentaire |
| alertMessage | Lancement via la méthode “saveContactInPhone” Lancement via la méthode asynchrone “changeContactNameAlert” Lancement via la méthode asynchrone “createOrUpdateContactName” | Affichage d’un message après divers actions |
| changeContactNameAlert | Toggle de mise à jour de contact sur la page | Affichage d’une alerte proposant le changement d’un nom de contact dans le téléphone pour le faire correspondre à celui enregistré dans la base de donnée |
| createOrUpdateContactName | Clic sur l'icône de modification de contact Clic sur l'icône de création de contact | Ajout ou Mise à jour du nom associé au numéro de l’appelant dans la base de donnée |
Module concernant le splash screen (loader) 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
* Router -> ‘@angular/router’:
Composant gérant le routeur d’angular
| Nom | Type | Utilité | Valeur par défaut |
|---|---|---|---|
| appearBool | Boolean | faire apparaître le logo | False |
| Nom | Déclenchement | Utilité |
|---|---|---|
| ngOnInit | Chargement de la page | Ajouter le dark mode si celui ci a été ajouté précédemment, fait apparaître le splash screen (loader de l’application) puis redirige vers tab1 |
c’est une classe 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.
HttpHeaders => ‘@Angular/common/http’
Pour configurer l'en-tête d’une requête HTTP
Injectable => ‘@Angular/core
sert à rendre les dépendences de services injectables c’est à dire accessibles dans toute l’application.
| Nom | Type | Utilité |
|---|---|---|
| env | String | Stock le type de l’environnement (production ou développement) |
| baseURL | String | L’URL de base de l’API |
| apiKey | String | Clé de l’API |
| tokenAccessData | String | Stock le token obtenu après la connexion de l’utilisateur |
| headers | HttpHeaders | Stock le Header des requêtes HTTP |
| isLoggedIn | Any | True si l’utilisateur est connecté |
| droitActivation | Boolean | True si l’utilisateur a le droit d’utiliser l’application mobile |
| droitNumero | Boolean | True si l’utilisateur a le droit de modifier son numéro de téléphone |
| droitPlanning | Boolean | True si l’utilisateur a le droit de modifier son planning |
| typeStat | Boolean | |
| mainNumero | String | stock le numéro de téléphone |
| nom | String | Stock le nom de l’utilisateur |
| numeroPlanning | String | Numéro du planning |
| droitAnnuaire | Boolean | True si l’utilisateur a le droit de modifier l’annuaire |
| droitSms | Boolean | True si l’utilisateur a le droit d'accéder au SMS |
| reloadSocket | Boolean | True si il faut recharger les websocket |
| Nom | Déclenchement | Utilité |
|---|---|---|
| putEnv | A l’ouverture de l’application | Initialise les variables d’environnement |
| formatDate | Dans la méthode sendSms de la page detail-sms et dans les méthodes postCommentary et putCommentary de la page detail-statistic | Transforme la date et l’heure dans un format spécifique |
| disconnected | Quand une erreur se produit lors de la connexion au serveur socket | Déconnecte l’utilisateur |
Cette page contient la déclaration des variables globales de couleurs pour les utiliser dans les différents composants de l’application. Le contenu des variables change selon le thème choisi par l’utilisateur (Dark ou Light).