Applications client

Format des données

Les fichiers categories.js et prix.js fournissent la liste des catégories et tâches de chaque catégorie.

Chaque fichier contient les données dans un objet JavaScript, respectivement avec les variables categories et taches.

Une catégorie est représentée par un objet qui contient son intitulé et un identifiant :

{
    "categorie": "Démolition",
    "id": "cat_2487"
}

Chaque tâche est définie par un objet contenant son identifiant, l'identifiant de la catégorie auquel il appartient, son intitule et son prix, par exemple :

{
    "id": "item_95895693",
    "categorie": "cat_6591",
    "intitule": "Plombier (\/h)",
    "prix": 70
}

Les caractères accentués ont été encodés en UTF-8 par le script d'export en JSON.

Partie 1 : chargement des catégories

Télécharger l'archive de l'exercice et l'extraire.

Le formulaire de choix d'une tâche contient 2 éléments fieldset. Au chargement de la page, le premier (à gauche) doit être rempli avec les catégories qui sont fournies par la liste contenue dans la variable categories.

Écrire la fonction afficheCategories() qui affiche la liste des catégories. Pour pouvoir ensuite afficher la liste des tâches correspondantes, il faudra avoir l'identifiant de sa catégorie. Ajouter à chaque item un attribut data-categorie-id en utilisant la propriété dataset des éléments.
Rappel et application du cours : chaque objet de type élément possède une propriété dataset qui fonctionne un peu comme on a utilisé les styles. Si par exemple la variable leLi est le noeud <li>, on peut écrire :
leLi.dataset.categorieId pour gérer l'attribut data-categorie-id
Noter que le navigateur fait automatiquement la correspondance entre le JS leLi.dataset.categorieId et le HTML <li data-categorie-id="..."> (comme pour les styles si on écrivait leLi.style.backgroundColor = 'red' qui passe du camelCase à background-color).

Chaque item de la liste doit capter le clic et appeler la fonction makeSelectTaches. Pour commencer, cette fonction fera simplement un console.log de l'identifiant de la catégorie cliquée (penser à utiliser event.currentTarget).

Partie 2 : chargement des tâches

Compléter la fonction makeSelectTaches, qui va remplir l'élément select d'identifiant select-taches. Il faut donc y ajouter des éléments <option> avec pour attribut value l'identifiant de la tâche.
Voir la documentation sur <select>

Indication : pour avoir les tâches de la catégorie, il faut prendre tous les éléments de la liste taches qui correspondent à l'identifiant de la catégorie. Pour cela, on pourra utiliser la méthode filter des tableaux.

Attention : penser à enlever les tâches déjà présentes dans le select avant d'y ajouter celles de la catégorie cliquée. Sinon les tâches continuent de s'ajouter au select quand on clique sur des catégories. Attention, il faut en revanche conserver le premier élément option.

Ajouter le capteur d'évènement submit au formulaire (au chargement de la page) et créer la fonction ajouterTache qui commence par bloquer la soumission du formulaire et fait un console.log de l'identifiant de la tâche à ajouter.

Partie 3 : générateur

Pour pouvoir ajouter plusieurs tâches à un devis, on va utiliser une liste qui garde en mémoire les tâches ajoutées ainsi que la quantité et le taux de TVA à y appliquer.

Préliminaire : pour avoir les valeurs saisies dans le formulaire, un TP précédent avait utilisé des attributs id pour facilement accéder à l'élément et la valeur saisie.
Ce n'est pas nécessaire. Quand on manipule l'objet JS qui correspond au formulaire, on peut alors accéder à tous les champs du formulaire via leur attribut name. Par exemple ici pour la quantité, on peut faire :
document.getElementById("selection").quantite
puis avoir sa propriété value.

Créer une variable globale listeTaches initialisée à une liste vide.

Compléter la fonction ajouterTache pour :

• ajouter à la listeTaches un élément sous la forme d'un objet du type { "tache": tache, "quantite": quantite, "tauxTva": tauxTva }.
• appeler une fonction afficheDevis(liste) qui parcourt la liste donnée en argument (ici listeTaches) et recrée le tableau d'affichage du devis comme sur le modèle ci-dessous. La première et dernière ligne contiennent des éléments th, et la CSS incluse dans la page met le tableau en forme comme sur le modèle.
  La cellule "Total" de la dernière ligne doit avoir un attribut colspan pour s'étaler sur 3 colonnes.
  On pourra éventuellement réutiliser les fonctions createTh et createTd du TP 4
  Indication : pour afficher le tableau, commencer par vider la division d'identifiant devis et refaire le tableau en entier à chaque affichage.

Indication : pour retrouver la tâche sélectionnée dans la liste complète, on peut rechercher dans la liste en la parcourant avec un for, mais on peut aussi utiliser la méthode find() des tableaux.

Indication : pour éviter d'avoir trop de décimales dans les valeurs calculées pour la TVA, utiliser la méthode toFixed() avec 2 chiffres après la virgule.

Partie 4

Il faut pouvoir commencer un nouveau devis sans avoir à recharger la page pour tout réinitialiser.

Ajouter un capteur de clic au bouton d'identifiant effacer au chargement de la page. Au clic cela doit appeler la fonction raz.

Écrire la fonction raz qui réinitialise la liste listeTaches, vide la division d'affichage du devis et réinitialise le formulaire d'identifiant selection (on pourra utiliser la méthode reset() de l'objet HTMLFormElement).