Skip to content

Instantly share code, notes, and snippets.

@csemaan

csemaan/nestor.js

Created January 21, 2016 15:35
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save csemaan/d715ce37fce51fe32749 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save csemaan/d715ce37fce51fe32749 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
nestor.js
// 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();
}
}
});
}
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment