# Frontend du configurateur InterCOM

## Cas d'utilisation du configurateur

![cas_utilisation](/assets/images/diag_cas_utilisation.png)

Un rôle est défini pour l'utilisation du configurateur InterCOM :
* Le rôle nommé **"utilisateur"** : Ce rôle permet à une personne de mener le processus de configuration.

### Scénario 1: Changer le mot de passe
**Nom**: Changer le mot de passe.<br>
**Acteur**: Utilisateur.<br>
**Données d'entrée**: Ancien mot de passe.<br>
 Le cas d'utilisation commence lorsque l'utilisateur s'est authentifié sur l'application et qu'il clique sur le boutton "Compte".<br>
**Scénario principal**:<br>
1. Le configurateur affiche la page de changement du mot de passe.
2. L'utilisateur renseigne le mot de passe actuel.
3. L'utilisateur renseigne le nouveau mot de passe suivant un pattern
4. L'utilisateur renseigne la confirmation du nouveau mot de passe.
5. L'utilisateur clique sur le bouton "mise à jour".
6. Le configurateur confirme le bon enregistrement du mot de passe en base de données.
7. Fin du scénario.

**Scénario d'erreur: le mot de passe actuel est incorrect**
5a. Le configurateur renseigne l'erreur à l'utilisateur. Retour à l'étape 2.

**Scénario d'erreur: le nouveau mot de passe ne suit pas le pattern**
3a. Le configurateur renseigne l'erreur à l'utilisateur. Retour à l'étape 3.

**Scénario d'erreur: la confirmation du nouveau mot de passe est différent du nouveau mot de passe**
4a. Le configurateur renseigne l'erreur à l'utilisateur. Retour à l'étape 4.

**Scénario d'erreur: erreur d'enregistremeent du nouveau mot de passe dans le base de données**
5a. Le configurateur renseigne l'erreur à l'utilisateur. Retour à l'étape 5.

### Scénario 2: Parametrer le module GSM
**Nom**: Parametrer le module GSM.<br>
**Acteur**: Utilisateur.<br>
**Données d'entrée**: .<br>
Le cas d'utilisation commence lorsque l'utilisateur s'est authentifié sur l'application et qu'il clique sur le boutton "Parametres".<br>
**Scénarion principal**:<br>
1. Le configurateur demande les paramètres à la base de données.
2. Le configurateur affiche la page de paramètres avec les champs remplis par ceux de la base de données.
3. L'utilisateur renseigne les champs à modifier suivant leurs patterns.
4. L'utilisateur clique sur le bouton "mise à jour".
5. Fin du scénario.

**Scénario d'erreur: erreur de récupération des paramètres de la base de données**
1a. Le configurateur renseigne l'erreur à l'utilisateur.
1b. Déclenchement du scénario : Déconnexion.
1c. Fin du scénario : Déconnexion
1d. Retour à l'étape 5.

**Scénario d'erreur: le champ renseigné ne correspond pas à son pattern**
3a. Le configurateur renseigne l'erreur à l'utilisateur. Retour à l'étape 3.

**Scénario d'erreur: erreur d'enregistremeent des nouveaux paramètres dans le base de données**
4a. Le configurateur renseigne l'erreur à l'utilisateur. Retour à l'étape 4.

### Scénario 3: Gérer les horaires d'utilisation du module GSM
**Nom**: Gérer les horaires d'utilisation du module GSM.<br>
**Acteur**: Utilisateur.<br>
**Données d'entrée**: .<br>
Le cas d'utilisation commence lorsque l'utilisateur s'est authentifié sur l'application et qu'il clique sur le boutton "Horaires".<br>
**Scénarion principal**:<br>
1. Le configurateur demande les horaires à la base de données.
2. Le configurateur affiche la page horaires avec les cellules remplis par ceux de la base de données.
3. L'utilisateur modifie les cellules souhaitées.
4. L'utilisateur clique sur le bouton "mise à jour".
5. Fin du scénario.

**Scénario d'erreur: erreur de récupération des paramètres de la base de données**
1a. Le configurateur renseigne l'erreur à l'utilisateur.
1b. Déclenchement du scénario : Déconnexion.
1c. Fin du scénario : Déconnexion
1d. Retour à l'étape 5.

**Scénario d'erreur: erreur d'enregistremeent des nouveaux horaires dans le base de données**
4a. Le configurateur renseigne l'erreur à l'utilisateur. Retour à l'étape 4.

### Scénario 4: Afficher les informations GSM
**Nom**: Afficher les informations GSM.<br>
**Acteur**: Utilisateur.<br>
**Données d'entrée**: .<br>
Le cas d'utilisation commence lorsque l'utilisateur s'est authentifié sur l'application et qu'il clique sur le boutton "Infos".<br>
**Scénarion principal**:<br>
1. Le configurateur demande les informations à la base de données.
2. Le configurateur affiche les informations sur la page "informations".
3. Fin du scénario.

**Scénario d'erreur: erreur de récupération des paramètres de la base de données**
1a. Le configurateur renseigne l'erreur à l'utilisateur.
1b. Déclenchement du scénario : Déconnexion.
1c. Fin du scénario : Déconnexion
1d. Retour à l'étape 3.

### Scénario 5: Visualiser les logs
**Nom**: Visualiser les logs.<br>
**Acteur**: Utilisateur.<br>
**Données d'entrée**: .<br>
Le cas d'utilisation commence lorsque l'utilisateur s'est authentifié sur l'application et qu'il clique sur le boutton "Log".<br>
**Scénarion principal**:<br>
1. Le configurateur demande les logs au système.
2. Le configurateur affiche les logs sur la page "logs".
8. Fin du scénario.

### Scénario 6: S'authentifier
**Nom**: S'authentifier sur l'application.<br>
**Acteur**: Utilisateur.<br>
**Données d'entrée**: .<br>
Le cas d'utilisation commence lorsque l'utilisateur ouvre l'application configurateur InterCOM.<br>
**Scénarion principal**:<br>
1. Le configurateur demande de fournir l'identifiant et le mot de passe de l'utilisateur.
2. L'utilisateur entre l'identifiant et son mot de passe.
3. Fin du scénario.

**Scénario d'erreur: Le mot de passe est incorrect**<br>
2a. Le configurateur indique que le couple/identifiant est incorrect. Retour à l'étape 1.<br>

### Scénario 7: Déconnexion
**Nom**: Déconnexion de l'utilisateur.<br>
**Acteur**: Utilisateur.<br>
**Données d'entrée**: .<br>
Le cas d'utilisation commence lorsque l'utilisateur clique sur le bouton "déconnecter".<br>
**Scénarion principal**:<br>
1. Déclenchement du scénario "s'authentifier".
2. Fin du scénario "s'authenrifier".
8. Fin du scénario.

## Architecture générale

![archi_general](/assets/images/archi_general.png)

## Frontend Angular

Angular est un Framework, open-source, basé sur TypeScript et co-dirigé par l’équipe du projet « Angular » de Google.
Angular permet la création d’applications Web et plus particulièrement de ce qu’on appelle des « Single Page Applications ».
Des applications web accessibles via une page web unique qui permet de fluidifier l’expérience utilisateur et d’éviter les chargements de pages à chaque nouvelle action.

![archi_frontend_angular](/assets/images/frontend_arch_angular.png)

# KineFrontend

This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.2.5.
