Applications client (suite)

Licence Informatique 1ère année

Jean-Marc Lecarpentier

Enseignement des technologies du Web

 

Travail personnel

Notes de cours

Exercice 1 — Générateur de devis - 2ème partie #

Attention : cet exercice est la suite de la 1ère partie et sera noté sur 10.

Cet exercice fait partie de ceux qui seront évalués. La page doit être accessible et fonctionnelle à l'URL suivante :

https://dev-LOGIN.users.info.unicaen.fr/TW2-2024/TP07/ex1/compteur.html
(en remplaçant LOGIN par votre identifiant numérique). Pensez à vérifier la validité W3C de votre page !

D'autre part, l'élément head doit contenir le code suivant :

<meta name="author" content="LOGIN" />
en remplaçant LOGIN par les identifiants des étudiant·e·s qui ont travaillé sur cette page, séparés par des virgules. (Il faut laisser name="author" tel quel, par contre !) Par exemple, si lecarp213 et 20922462 ont travaillé ensemble, ils mettent <meta name="author" content="lecarp213,20922462" /> dans le head de leur page. Ça permettra à notre script de savoir qui a travaillé avec qui.

Il est conseillé de vérifier que l'exercice a été correctement rendu en utilisant l'application evalweb.

Vous avez jusqu'au début du TP de la semaine suivante pour terminer l'exercice.

Partie 5 : Enregistrement des devis

Créer une variable globale listeDevis initialisée à une liste vide. On ajoutera dans cette liste les devis enregistrés, qui seront affichés grâce à cette liste (comme on affichait les tâches à partir de la liste listeTaches).

Pour enregistrer un devis, le formulaire (dont le code HTML est donné ci-dessous) est présent dans la page après la division d'identifiant devis.
Ce formulaire est caché par défaut avec la CSS fournie dans la page. Compléter la fonction afficheDevis pour rendre le formulaire visible quand on affiche les devis, et compléter la fonction raz pour le cacher à nouveau quand on clique sur le bouton Recommencer.

<form id="save">
    <fieldset>
        <legend>Enregistrer</legend>
        <label>Nom du client : <input name="client" value=""></label>
        <label>Intitulé : <input name="intitule" value=""></label>
        <button>Enregistrer</button>
    </fieldset>
</form>
    
Formulaire d'enregistrement d'un devis

Dans la fonction qui initialise la page (init()), faire que ce formulaire capte le submit et que cela appelle la fonction enregistrerDevis, qui devra commencer par bloquer l'envoi du formulaire (event.preventDefault()).

On enregistrera un devis sous la forme d'un objet avec la structure suivante :

{
    "client": client,
    "intitule": intitule,
    "devis": listeTaches
}

listeTaches est la liste des tâches telle que définie dans la 1ère partie.

Compléter la fonction enregistrerDevis pour ajouter le devis à enregistrer à listeDevis et appeler une fonction afficheListeDevis(liste) qui affichera les devis enregistrés dans listeDevis (partie suivante).

Partie 6 : Affichage des devis

La page HTML contient à la fin une division d'identifiant mes-devis avec un titre de niveau 2, qui servira à afficher les devis enregistrés.

Écrire le reste de la fonction afficheListeDevis(liste) qui prend en argument une liste de devis et qui :

  • vide la division d'identifiant mes-devis sauf le titre de niveau 2
  • affiche les devis enregistrés (on récrée la liste entière)
Affichage des devis enregistrés
Affichage des devis enregistrés

Partie 7 : Enregistrement en stockage local

Pour l'instant les devis sont enregistrés uniquement en mémoire vive. Si vous rechargez votre page, aucun devis enregistré ne s'affiche. On va donc maintenant gérer la persistence de ces données.

Le stockage local ne peut enregistrer que des données scalaires, on va donc avoir besoin de sérialiser les informations à enregistrer, avc JSON.stringify.

Compléter la fonction enregistrerDevis pour que celle-ci enregistre dans le localStorage une clé liste-devis qui contiendra la sérialisation du tableau Javascript listeDevis.

Attention à bien respecter la clé liste-devis.

Vérifier avec les outils de console si vous avez bien les données dans le localStorage :

Données enregistrées
Données enregistrées

Les données sont bien enregistrées, mais si vous rechargez votre page, aucun devis enregistré ne s'affiche.

Il faut donc maintenant que, au chargement de la page, la liste des devis enregistrés dans le localStorage soit chargée en mémoire dans le tableau Javascript listeDevis et que l'affichage des devis soit fait.

Écrire la fonction initStorage (sans argument), qui regarde si le localStorage contient une clé liste-devis. Si oui, elle prend les données, les désérialise, initialise le tableau Javascript listeDevis et appelle la fonction qui affiche les devis.

Pour terminer, appeler initStorage au chargement de la page (dans la fonction init).

Normalement, on doit maintenant avoir les devis enregistrés qui s'affichent à nouveau lorsqu'on recharge la page.

Partie 8 : Suppression d'un enregistrement

Attention un élément button est par défaut un bouton d'envoi de formulaire (ce qu'on ne veut pas dans cette partie et la suivante).
Pour avoir un bouton sans action définie, il faut lui mettre le type button, ce qui donne le HTML suivant :
<button type="button">un bouton qui ne fait rien</button>.

Compléter la fonction d'affichage de la liste des devis pour avoir un bouton de suppression d'un devis et créer la fonction supprimeDevis (appelée quand on clique sur le bouton) et qui supprime le devis du tableau Javascript listeDevis puis enregistre en localStorage la nouvelle version de listeDevis, et enfin rafraichit l'affichage des devis enregistrés (il suffit de rappeler la fonction afficheListeDevis).
Pour supprimer un élément du tableau, utiliser splice).

Indication : pour facilement savoir quel devis supprimer du tableau listeDevis, on pourra ajouter un attribut data-* au bouton de suppression.

Bouton de suppression d'un devis
Bouton de suppression d'un devis

Partie 9 : Export HTML d'un devis enregistré

On veut pouvoir réaliser l'export d'un devis enregistré. Cet expoirt sera au format HTML, comme sur l'exemple ci-dessous.

Bouton d'export
Bouton export
Enregistrement du fichier
Enregistrement du fichier
Fichier HTML exporté
Fichier HTML exporté

Compléter la fonction d'affichage des devis pour avoir un bouton d'export pour chaque devis enregistré.

Créer la fonction exportHtml qui sera appelée au clic sur le bouton. Cette fonction doit :

  1. créer le code HTML au format texte (et non DOM) de la page d'export
  2. créer un Blob et un object URL associé
  3. créer un lien avec l'URL créée en 2°
  4. activer le lien (cliquer dessus automatiquement, ce qui déclenche le téléchargement)
  5. supprimer ensuite le lien créé

Indications :