Skip to content

Instantly share code, notes, and snippets.

@csemaan

csemaan/nestor.js

Created January 21, 2016 15:35
Show Gist options
  • Save csemaan/d715ce37fce51fe32749 to your computer and use it in GitHub Desktop.
Save csemaan/d715ce37fce51fe32749 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Camille Semaan created this gist Jan 21, 2016.
    355 changes: 355 additions & 0 deletions nestor.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,355 @@
    // Mettre tout le code dans un espace de nommage anonyme
    // (Namespace)
    (function() {
    // Attendre l'événement "document ready"
    $(function() {
    /*
    A) Gestionnaires d'événements directs
    */
    // L'utilisateur saisit la touche "Enter" ou "Return" dans le formulaire de connexion
    $("#pb_login_frm input").on("keyup", function(e) {
    // L'événement keyup reçoit la clé clavier qui l'a déclenché dans la propriété "which".
    // Le code ASCII de la touche "Enter/Return" est 13
    if(e.which == 13) {
    // On déclenche alors le clic sur le bouton du formulaire.
    $("#pb_login_btn").trigger("click");
    }
    });

    // Ouvrir une connexion
    $("#pb_login_btn").on("click", connexion);

    // Gérer ce qui se passe au chargement initial de la page
    $(window).on("load", chargementInitial);

    // Fermer la connexion
    $("#pb_logout_btn").on("click", deconnexion);

    // Afficher le formulaire d'inscription (nouveau compte)
    $(".inscription-btn").on("click", function() {
    // Rappel : show() et hide() (et slideUp et slideDown) ne sont pas optimales : préférer l'utilisation
    // de classes CSS avec la prop display.
    $(".nestor-formulaires-utilisateur").slideUp('fast');
    $("#nestor_nouvel_utilisateur").slideDown('fast');
    });

    // Cacher le formulaire-utilisateur présentement affiché et afficher
    // le formulaire de connexion
    $(".identifiez-vous-btn").on("click", function() {
    // Vider les formulaires...
    $(".nestor-formulaires-utilisateur form").each(function(pos,elt) {elt.reset();});
    // ... et cacher les messages d'erreurs
    $(".nestor-formulaires-utilisateur .errormsg").hide();
    $(".nestor-formulaires-utilisateur").slideUp('fast');
    $("#pb_login_frm").slideDown('fast');
    });

    // Inscription nouvel utilisateur
    $("#nestor_inscription_btn").on("click", inscription);

    // Afficher le formulaire d'ajout/modification de contact
    $("#pb_new_btn").on("click", function() {
    // Commencer par réinitialiser le formulaire :
    // Effacer toutes les lignes de saisies de numéro de tel sauf la première
    $("#pb_new_frm .row.phone").not(":last").remove();
    // Réinitialiser les éléments du formulaire à leurs valeurs originales
    document.querySelector("#pb_new_frm form").reset();
    // ou, avec jQuery (moins efficace) :
    // $("#pb_new_frm form").get(0).reset();
    // Montrer le bouton - "fermer"
    $("#pb_cancel_btn").show();
    // Cacher le bouton + "ouvrir"
    $(this).hide();
    // Remettre la valeur de l'élément caché représentant l'identifiant du contact à 0
    $("#pb_cid").val("0");
    // Et enfin, dévoiler le formulaire
    $("#pb_new_frm").slideDown(300);
    });

    // Cacher (et surtout re-initialiser !) le formulaire d'ajout/modification
    // de contact
    $("#pb_cancel_btn").on("click", function() {
    // console.log("L'objet jQuery correspondant au formulaire : "
    // , $("#pb_new_frm form"));
    // console.log("L'objet DOM correspondant au formulaire : "
    // , $("#pb_new_frm form").get(0));
    $("#pb_new_frm").hide();
    $(this).hide();
    $("#pb_new_btn").show();
    });

    $("#pb_addphone_btn").on("click", function() {
    var ligne = $("#pb_new_frm .row.phone").last().clone();
    $("input", ligne).val("");
    $("#pb_new_frm .row.phone").last().after(ligne);
    });

    // Sauvegarder (ajouter ou modifier) un contact
    $("#pb_save_btn").on("click", sauvegarderContact);

    /*
    B) Gestionnaires d'événements *** délégués *** (ou indirects)
    */
    // Surligner un contact sélectionné
    $("#pb_main").on("click", "article", function() {
    $("#pb_main article").removeClass("selected");
    $(this).addClass("selected");
    });

    // Supprimer un contact
    $("#pb_main").on("click", ".delete_btn", supprimerContact);

    // Modifier un contact
    $("#pb_main").on("click", ".edit_btn", modifierContact);
    });

    /**
    * Méthode utilitaire pour analyser une chaîne de paramètres URL (QueryString)
    * @param String Chaîne de paramètres URL
    * @return Object Objet JavaScript contenant les paramètres URL
    */
    function decortiquerParams(params) {
    var pNomValeur = [];
    var pObj = {};
    var pTab = params.substr(1).split("&");
    for (var i = 0; i < pTab.length; i++) {
    pNomValeur = pTab[i].split("=");
    pObj[pNomValeur[0]] = (pNomValeur[1])?pNomValeur[1]:'';
    // Cette méthode aurait besoin d'améliorations importantes
    // pour prendre en charge l'encodage URL des paramètres.
    }
    return pObj;
    }

    // Gérer le chargement initial de la page
    function chargementInitial() {
    // Tout d'abord, capturer les paramètres dans l'URL
    var params = decortiquerParams(window.location.search);

    // L'utilisateur a suivit le lien qui lui a été envoyé dans le courriel de
    // confirmation du compte
    if(params.cc) {
    confirmerCompte(params);
    }
    // L'utilisateur a suivit le lien qui lui a été envoyé dans le courriel
    // de demande réinitialisation du mot de passe.
    else if(params.rmdp) {
    // Laissé aux étudiants pour le TP #2
    // demandeChangementMdp(params);
    }
    // Sinon, on fait la requête habituelle, c'est à dire vérifier si le visiteur
    // est déjà connecté...
    else {
    verifierConnexion();
    }
    }

    // S'inscrire comme nouveau utilisateur
    function inscription() {
    var $form = $(this).closest("form");
    $.ajax({
    url: "pilote.php?route=utilisateur/ajouter",
    method: "POST",
    data: $form.serialize(),
    success: function(reponse) {
    console.log(reponse);
    if(reponse[0]) {
    $form.hide();
    // Insérer l'adresse de courriel dans le texte du message de confirmation
    $(".message-inscription-courriel").text($form.find("#nestor_inscription_courriel").val());
    // Afficher le message indiquant à l'utilisateur que le message de confirmation a été envoyé par courriel.
    $(".message-inscription").show();
    }
    else {
    $form.find(".errormsg").show();
    }
    }
    });
    }

    // Confirmer le compte utilisateur
    function confirmerCompte(paramObj) {
    $.ajax({
    url: 'pilote.php?route=utilisateur/confirmer',
    method: 'POST',
    data: paramObj,
    success: function(reponse) {
    // Ceci est important pour supprimer les paramètres de requête URL
    window.history.replaceState("", "", "index.html");
    if(reponse) {
    // Afficher un message informant l'utilisateur que son compte est maintenant actif.
    // Évidement, il faut afficher ce message dans l'interface de l'application
    // et non pas dans la console comme on fait ici pour débogage uniquement
    console.log("Le compte est maintenant activé.");
    }
    else {
    // Afficher un message informant l'utilisateur que la confirmation du courriel a échoué
    // Évidement, il faut afficher ce message dans l'interface de l'application
    // et non pas dans la console comme on fait ici pour débogage uniquement
    console.log("Problème de confirmation du courriel. Le compte n'est pas activé.");
    }
    }
    });
    }

    // Ouvrir une connexion à Nestor
    function connexion() {
    $.ajax({
    url: 'pilote.php?route=utilisateur/connecter',
    method: 'POST',
    data: $(this).closest("form").serialize(),
    success: function(reponse, statut, objetXhrOriginal) {
    // Vider le champ Mot de passe
    $("#pb_pwd").val("");
    if(reponse) {
    // Afficher l'interface du bottin
    listeContacts();
    basculeIUConnexion();
    }
    else {
    // Mauvaise connexion
    $(".errormsg").show();
    }
    }
    });
    }

    // Ouvrir une connexion à Nestor
    function verifierConnexion() {
    $.ajax({
    url: 'pilote.php?route=utilisateur/verifier',
    method: 'GET',
    success: function(reponse) {
    if(reponse) {
    listeContacts();
    basculeIUConnexion();
    }
    }
    });
    }

    // Quitter la session.
    function deconnexion() {
    $.ajax({
    url: 'pilote.php?route=utilisateur/deconnecter',
    method: 'GET',
    success: function(reponse) {
    if(reponse) {
    // Raffraîchir la page pour garantir la réinitialisation JS complète de la page
    window.location.reload();
    }
    }
    });
    }

    // Bascule l'affichage des éléments d'interface selon l'état connecté/déconnecté
    function basculeIUConnexion() {
    $("#pb_logout").toggle();
    $("#pb_login_frm").toggle();
    $("#pb_filter").toggle();
    $("#pb_main").toggle();
    }

    // Vider la liste des contacts
    function initialiserAffichageContacts() {
    $("#pb_main article").not(".templ_contact").remove();
    }

    // Afficher la liste des contacts d'un utilisateur
    function listeContacts() {
    initialiserAffichageContacts();
    $.ajax({
    url: "pilote.php?route=contact/lire",
    method: "GET",
    success: function(reponse) {
    // Afficher les contacts
    if(reponse) {
    var contactDom, telephones, telDom;
    for(var i=0; i<reponse.length; i++) {
    contactDom = $(".templ_contact").clone()
    .removeClass("templ_contact");
    contactDom.data("cid", reponse[i].id);
    contactDom.data("cprenom", reponse[i].prenom);
    contactDom.data("cnom", reponse[i].nom);
    $(".name_listview", contactDom).text(reponse[i].prenom + " "
    + reponse[i].nom);
    // Maintenant parcourir le tableau "telephones" associé à ce contact
    // et cloner (et remplir) un LI pour chaque numéro de téléphone
    // puis insérer ce LI dans le UL du contact.
    telephones = reponse[i].tels;
    for(var j=0; j<telephones.length; j++) {
    telDom = $(".templ_phone", contactDom).clone().removeClass("templ_phone");
    $(".type_listview", telDom).text(telephones[j].type);
    $(".number_listview", telDom).text(telephones[j].numero);
    $(".extension_listview", telDom).text(telephones[j].poste);
    $(".phone_listview", contactDom).append(telDom);
    }
    // Finalement, insérer le contact ainsi rempli dans le DOM à
    // l'emplacement adéquat.
    $("#list_footer").before(contactDom);
    }
    }
    else {
    console.log("Erreur de BD.");
    }
    }
    });
    }

    // Supprimer un contact de la liste des contacts de L,utilisateur connecté
    function supprimerContact() {
    var $articleASupprimer = $(this).closest("article");
    $.ajax({
    url: "pilote.php?route=contact/supprimer",
    method: "POST",
    data: {idContact: $articleASupprimer.data("cid")},
    success: function(reponse) {
    if(reponse) {
    $articleASupprimer.remove();
    }
    }
    });
    }

    // Ouvre et rempli le formulaire de contact avec les détails du contact à modifier
    function modifierContact() {
    // Déclaration des variables
    var $liCourant, $article, $lesTels, $dernierTel;
    // Cherche l'article le plus proche
    $article = $(this).closest("article");
    // Clic sur le bouton qui ouvre le formulaire de contact
    $("#pb_new_btn").trigger("click");
    $("input#pb_cid").val($article.data("cid"));
    $("input#pb_firstname").val($article.data("cprenom"));
    $("input#pb_lastname").val($article.data("cnom"));
    $lesTels = $article.find(".phone_listview li").not(".templ_phone");
    $lesTels.each(function(position, element) {
    $liCourant = $(this);
    if(position > 0) {
    $("#pb_addphone_btn").trigger("click");
    }
    $dernierTel = $("#pb_new_frm .row.phone").last();
    $dernierTel.find("input.number").val($liCourant
    .find(".number_listview").text());
    $dernierTel.find("input.extension").val($liCourant
    .find(".extension_listview").text());
    $dernierTel.find("select.type").val($liCourant
    .find(".type_listview").text());
    });
    }

    // Envoie le contenu des éléments du formulaire de contact par la méthode POST
    function sauvegarderContact() {
    $.ajax({
    url: "pilote.php?route=contact/sauvegarder",
    method: "POST",
    data: $(this).closest("form").serialize(),
    success: function(reponse) {
    if(reponse) {
    $("#pb_cancel_btn").trigger("click");
    listeContacts();
    }
    }
    });
    }
    })();