book.js

"use strict";

function creationTableauContacts() {
    // identifiant du tableau
    let id_tableau = document.querySelector("#liste");

    // identifiant du premier éléments du tableau (l'entête)
    let id_entete = id_tableau.firstElementChild;

    // tant qu'il y a un éléments après l'entête, on le supprimer
    while (id_entete.nextElementSibling != null) {
        id_entete.nextElementSibling.remove();
    }

    // création d'une liste pour les infos de l'address-book
    let liste_infos = ["nom","pseudo","prenom"];

    for (let book in initAddressBook) {
        // création d'une ligne de tableau
        let ligne_cellule_tableau = document.createElement("tr");

        // création d'un identifiant lié à l'address-book
        ligne_cellule_tableau.dataset.id = book;

        // ajout d'un event à la ligne du tableau
        ligne_cellule_tableau.addEventListener("click",detailsContact);

        // Boucle pour pour prendre chaque info de liste_infos et la chercher dans l'address-book
        for (let i=0;i<liste_infos.length;i++) {
            // création d'une cellule de tableau
            let cellule_tableau = document.createElement("td");
            // création d'un texte dns la cellule de tableau
            cellule_tableau.textContent = initAddressBook[book][liste_infos[i]];

            // ajout de la cellule dans la ligne de tableau
            ligne_cellule_tableau.appendChild(cellule_tableau);
            // ajout de la ligne de tableau dans le tableau
            id_tableau.appendChild(ligne_cellule_tableau);
        }
    }

    // identifiant du bouton "Ajouter un contact"
    let id_bouton_ajouter_contact = document.querySelector("#ajouter");

    // ajout d'un event au bouton "Ajouter un contact"
    id_bouton_ajouter_contact.addEventListener("click", creationContact);
    
}

function detailsContact(event) {

    // nettoyage de la section
    nettoyer();

    // identifiant de l'event
    let id_event = event.currentTarget;

    // identifiant de la section détails
    let details_contact = document.querySelector("#details");

    // info ligne de tableau
    let info_id = id_event.dataset.id;

    for (let book in initAddressBook) {
        // si l'identifiant de la ligne de tableau est égale à la clé de l'adess-book alors...
        if (info_id==book) {

            // création d'un titre de niveau 2
            let titreNv2 = document.createElement("h2");
            // ajout du nom et du prénom dans le titre de niveau 2
            titreNv2.textContent = `${initAddressBook[book]["nom"]+" "+initAddressBook[book]["prenom"]}`;
            // ajout du titre de niveau 2  dans la section détails
            details_contact.appendChild(titreNv2);

            // création d'un titre de niveau 3
            let titreNv3 = document.createElement("h3");
            // ajout du pseudo dans le titre de niveau 3
            titreNv3.textContent = `${"Pseudo :"+" "+initAddressBook[book]["pseudo"]}`;
            // ajout du titre de niveau 3 dans la section détails
            details_contact.appendChild(titreNv3);

            // création d'un lien
            let lien = document.createElement("a");
            // ajout d'un lien et d'un email dans le lien
            lien.setAttribute("href",`${"mailto:"+initAddressBook[book]["email"]}`);
            lien.textContent = initAddressBook[book]["email"];
            // ajout du lien dans la section détails
            details_contact.appendChild(lien);

            // création d'un paragraphe
            let para_1 = document.createElement("p");
            // ajout du numéro de téléphone dans le paragraphe
            para_1.textContent = initAddressBook[book]["telephone"];
            // ajout du paragraphe dans la section détails
            details_contact.appendChild(para_1);

            // création d'un paragraphe
            let para_2 = document.createElement("p");
            // manipulation et ajout de la date dans le paragraphe
            let date = new Date(initAddressBook[book]["date"]);
            let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            let date_française = date.toLocaleDateString('fr-FR',options);
            para_2.textContent = `${"Contact créé le "+date_française}`;
            // ajout du paragraphe dans la section détails
            details_contact.appendChild(para_2);

            // création d'un paragraphe
            let para_3 = document.createElement("p");
            // ajout de l'identifiant dans le paragraphe
            para_3.textContent = `${"Identifiant interne : "+info_id}`;
            // ajout de l'identifiant dans la section détails
            details_contact.appendChild(para_3);

            // création d'un bouton modifier
            let bouton_modifier = document.createElement('button');
            bouton_modifier.textContent = "Modifier";
            bouton_modifier.dataset.id = book;
            bouton_modifier.style.margin = "10px";
            // ajout d'un event
            bouton_modifier.addEventListener("click",modifier);
            // ajout du bouton dans la section détails
            details_contact.appendChild(bouton_modifier);

            // création d'un bouton supprimer
            let bouton_supprimer = document.createElement('button');
            bouton_supprimer.textContent = "Supprimer";
            bouton_supprimer.dataset.id = book;
            bouton_supprimer.style.margin = "10px";
            // ajout d'un event
            bouton_supprimer.addEventListener("click",supprimer);
            // ajout du bouton dans la section détails
            details_contact.appendChild(bouton_supprimer);
        }
    }
}

function nettoyer() {
    // identifiant de la section détails
    let details_contact = document.querySelector("#details");

    // liste des enfants de la section détails
    let enfants = details_contact.childNodes;

    // supprimer le premier enfant jusqu'à qu'il n'y en ai plus
    while (enfants.length!=0) {
        enfants[0].remove();
    }

}

function supprimer (event) {
    // identifiant de l'event
    let id_event = event.currentTarget;

    // on récupère l'id (data) du bouton qui est liée à l'adress book
    let data_book = id_event.dataset.id;

    // on récupère le nom, le pseudo et le prénom de la personne dans l'address-book
    let nom = initAddressBook[data_book]["nom"];
    let pseudo = initAddressBook[data_book]["pseudo"];
    let prenom = initAddressBook[data_book]["prenom"];

    // on utilise un confirm() pour demander si on veut supprimer la personne ou pas
    let confirmation = confirm(`Supprimer ${nom} "${pseudo}" ${prenom} ?`);

    // si on veut supprimer la personne alors...
    if (confirmation==true) {    

        // suppression de sa clé et de ses valeurs dans l'adress book
        delete initAddressBook[data_book];

        // recherche dans le tableau si le data-id correspond à celui du bouton
        // si c'est le cas alors on supprime la ligne du tableau correspondante
        let data_id_ligne_tableau = document.querySelectorAll("tr");
        for (let i=0;i<data_id_ligne_tableau.length;i++) {
            if (data_id_ligne_tableau[i].dataset.id == data_book) {
                // suppression de la ligne dans le tableau
                data_id_ligne_tableau[i].remove();
                
                // sauvegarde dans une variable de l'address-book en format JSON
                let initAddressBookFormatTexte = JSON.stringify(initAddressBook);
                // enregistrement des données
                localStorage.setItem("adresses",initAddressBookFormatTexte);
            }
        }

        // on vide la section
        nettoyer();
    }
}

function modifier (event) {
    // identifiant du formulaire "invisible"
    let formulaire = document.querySelector('#no-show > form');

    // identifiant de la section détails
    let details_contact = document.querySelector("#details");

    // clonage du formulaire "invisible"
    let clone_formulaire = formulaire.cloneNode(true);
    // ajout d'un identifiant au formulaire clone
    clone_formulaire.setAttribute("id","clone-formulaire-modifier");

    // on prend la liste des éléments inputs dans le formulaire clone
    let liste_labels = clone_formulaire.elements;
    // ajout d'un event au bouton enregistrer du formulaire clone
    liste_labels["go"].addEventListener("click",modifierFormulaire);

    // data-id du bouton "modifier"
    let id_event = event.currentTarget;
    let data_id_bouton_modifier = id_event.dataset.id;

    // on enleve l'event à la fonction pour éviter d'afficher plusieurs fois le clone du formulaire
    id_event.removeEventListener("click",modifier);

    // ajouter dans les inputs "texte" les infos du contact
    liste_labels["nom"].value = initAddressBook[data_id_bouton_modifier]["nom"];
    liste_labels["prenom"].value = initAddressBook[data_id_bouton_modifier]["prenom"];
    liste_labels["pseudo"].value = initAddressBook[data_id_bouton_modifier]["pseudo"];
    liste_labels["email"].value = initAddressBook[data_id_bouton_modifier]["email"];
    liste_labels["telephone"].value = initAddressBook[data_id_bouton_modifier]["telephone"];

    // ajout du data-id au bouton enregistrer
    liste_labels["go"].dataset.id = data_id_bouton_modifier; 

    // ajout du formulaire clone à la section
    details_contact.appendChild(clone_formulaire);
}

function modifierFormulaire(event) {
    // désactivation du bouton "Enregistrer"
    event.preventDefault();

    // identifiant du formulaire clone
    let id_formulaire = document.querySelector("#clone-formulaire-modifier");

    // on prend la liste des éléments inputs dans le formulaire clone
    let liste_labels = id_formulaire.elements;

    // on prend le texte présent dans chaque input "texte"
    let texte_nom = liste_labels["nom"].value;
    let texte_prenom = liste_labels["prenom"].value;
    let texte_pseudo = liste_labels["pseudo"].value;
    let texte_email = liste_labels["email"].value;
    let texte_telephone = liste_labels["telephone"].value;

    // on récupère le data-id du bouton enregistrer
    let data_id_bouton_enregistrer = liste_labels["go"].dataset.id;

    // on accède à l'objet dans l'adress-book lié au data-id du bouton enregistrer
    let adresse = initAddressBook[data_id_bouton_enregistrer];

    // on remplace les infos dans l'adress-book par celles saisies dans le formulaire clone
    adresse["nom"] = texte_nom;
    adresse["prenom"] = texte_prenom;
    adresse["pseudo"] = texte_pseudo;
    adresse["email"] = texte_email;
    adresse["telephone"] = texte_telephone;

    // on met à jour la section détails pour afficher les nouvelles infos
    detailsContact(event);

    // on met à jour la le tableau de contacts pour afficher les nouvelles infos
    creationTableauContacts();

    // sauvegarde dans une variable de l'address-book en format JSON
    let initAddressBookFormatTexte = JSON.stringify(initAddressBook);
    // enregistrement des données
    localStorage.setItem("adresses",initAddressBookFormatTexte);

}

function creationContact (event) {
    // identifiant du bouton "Ajouter un contact"
    let id_contact = event.currentTarget;

    // on enleve l'event à la fonction pour éviter d'afficher plusieurs fois le clone du formulaire
    id_contact.removeEventListener("click", creationContact);

    // identifiant de la division appartenant au bouton "Ajouter un contact"
    let id_division_contact = id_contact.parentNode;

    // identifiant du formulaire "invisible"
    let formulaire = document.querySelector('#no-show > form');

    // clonage du formulaire "invisible"
    let clone_formulaire = formulaire.cloneNode(true);
    // ajout d'un identifiant au formulaire clone
    clone_formulaire.setAttribute("id","clone-formulaire-creation");

    // ajout du formulaire clone à la division
    id_division_contact.appendChild(clone_formulaire);

    // on prend la liste des éléments inputs dans le formulaire clone
    let liste_elements_clone_formulaire = clone_formulaire.elements;

    // identifiant du bouton "Enregistrer"
    let id_bouton_enregistrer = liste_elements_clone_formulaire["go"];

    // ajout d'un event au bouton "Enregistrer"
    id_bouton_enregistrer.addEventListener("click", enregistrerNouveauContact);
}

function enregistrerNouveauContact (event) {
    // désactivation du bouton "Enregistrer"
    event.preventDefault();

    // création d'une cle aléatoirement
    let cle_interne = chance.guid();

    // date correspondant au moment où le contact est créé
    let aujourdhui = new Date();

    // jour d'aujourd'hui
    let jour = aujourdhui.getDate();
    // mois d'aujourd'hui
    let mois = aujourdhui.getMonth()+1;
    // annee d'aujourd'hui
    let annee = aujourdhui.getFullYear();

    // concaténation de la date en format annee-mois-jour (slice() --> dans ce cas permet de mettre un zéro si besoin)
    let date = annee+"-"+('0'+mois).slice(-2)+"-"+('0'+jour).slice(-2);

    // on récupère le formulaire clone
    let id_formulaire = document.querySelector("#clone-formulaire-creation");

    // on prend la liste des éléments inputs dans le formulaire clone
    let liste_labels = id_formulaire.elements;

    // on prend le texte présent dans chaque input "texte"
    let texte_nom = liste_labels["nom"].value;
    let texte_prenom = liste_labels["prenom"].value;
    let texte_pseudo = liste_labels["pseudo"].value;
    let texte_email = liste_labels["email"].value;
    let texte_telephone = liste_labels["telephone"].value;

    // on crée un nouveau contact dans l'address-book
    initAddressBook[cle_interne] = {"nom" : texte_nom,
                                    "prenom" : texte_prenom,
                                    "pseudo" : texte_pseudo,
                                    "email" : texte_email,
                                    "telephone" : texte_telephone,
                                    "date" : date };

    // suppression du formulaire clone
    id_formulaire.remove();

    // on met à jour le tableau de contacts pour afficher les nouvelles informations
    creationTableauContacts();

    // sauvegarde dans une variable de l'address-book en format JSON
    let initAddressBookFormatTexte = JSON.stringify(initAddressBook);
    // enregistrement des données
    localStorage.setItem("adresses",initAddressBookFormatTexte);

}

function trieNoms (event) {
    // liste des cles de l'adress-book
    let liste_cles = Object.keys(initAddressBook);

    // triage de la liste de cles dans l'odre alphabétique
    liste_cles.sort(function (a,b) {
        return initAddressBook[a].nom.localeCompare(initAddressBook[b].nom);
    });

    // on fait un clone pour accueillir l'initAddressBook dans l'ordre
    let clone_book = {};

    for (let i=0;i<liste_cles.length;i++) {
        clone_book[liste_cles[i]] = initAddressBook[liste_cles[i]];
    }

    // on écrase initAddressBook et on le remplace par le book qui est dans l'ordre
    initAddressBook = clone_book;

    // on met à jour le tableau de contacts pour afficher les nouvelles informations
    creationTableauContacts();

    // sauvegarde dans une variable de l'address-book en format JSON
    let initAddressBookFormatTexte = JSON.stringify(initAddressBook);
    // enregistrement des données
    localStorage.setItem("adresses",initAddressBookFormatTexte);

}

// si le localStorage "adresses" n'est pas vide alors...
if (localStorage.getItem('adresses')!=null) {
    // on écrase ce qu'il y a dans initAddressBook pour le remplacer par ce qu'il y a dans le localStorage (à l'emplacement "adresses" bien sûr)
    initAddressBook = JSON.parse(localStorage.getItem('adresses'));
};

// on prend l'identifiant du <th> "nom"
let id_categorie_nom = document.querySelector("#nom");
// on lui ajoute un event "click"
id_categorie_nom.addEventListener("click", trieNoms);

// on créer le tableau de contacts
creationTableauContacts();