/* [0] Constructeur -> définit le conteneur et le bouton d'ajout =========================================================*/ function inputPhoneMini(container, navContainer){ this.container = container; this.nav_container = navContainer; } /* [1] Attributs =========================================================*/ inputPhoneMini.prototype = { container: this.container, // Conteneur des mini fiches relation nav_container: this.nav_container, // Conteneur de la navigation entre les fiches selected: 0 // UID de la MINI fiche sélectionnée }; /* [2] Gestion de l'enregistrement des formulaires mini fiches relation =========================================================*/ inputPhoneMini.prototype.fieldsToStorage = function(){ console.log('MINI FICHE: FIELDS TO STORAGE'); // {1} Pour chaque formulaire de contact présent // var existingMiniFiches = $$('article.mini-relation-panel .mini-fiche-relation'); for( var i = 0 ; i < existingMiniFiches.length ; i++ ){ // {2} On initialise notre deflater pour récupérer les valeurs // var deflater = new FormDeflater(existingMiniFiches[i], ['input', 'select'], ['data-name']); // {3} On enregistre ce contact si le numéro n'est pas vide et soit pseudo/prénom/nom // var deflated = deflater.deflate(); // TODO: Condition pour que le formulaire soit valide var validForm = true; // Si le formulaire n'est pas valide, on ne l'enregistre pas if( !validForm ) continue; // {4} On récupère les données du LSI si elles existent // var existingData = lsi.get('mini-fiches', 'form'+deflated.uid.value); // Si n'existe pas, on initialise if( existingData === false ){ existingData.username = 'inconnu'; existingData.firstname = 'inconnu'; existingData.lastname = 'inconnu'; } // {5} On récupère et met en forme les valeurs du deflater // var obj = { uid: deflated.uid.value, firstname: existingData.firstname, lastname: existingData.lastname, username: existingData.username, sexe: [ deflated.sexe[0].status, // VRAI SI HOMME deflated.sexe[1].status // VRAI SI FEMME ], age: deflated.age.value, job: deflated.job.value, loc: [ deflated.loc[0].status, // VRAI si choix 1 deflated.loc[1].status, // VRAI si choix 2 deflated.loc[2].status, // VRAI si choix 3 deflated.loc[3].status // VRAI si choix 4 ] }; // {6} On enregistre les données dans le 'localStorage' // lsi.set('mini-fiches', 'form'+obj.uid, obj); } // {7} On met à jour le rendu // this.storageToFields(); }; /* [3] Gestion de l'ajout physique d'un nouveau contact =========================================================*/ /* * * @objectData Objet contenant les informations nécessaires à l'affichage * */ inputPhoneMini.prototype.add = function(objectData){ console.log('MINI FICHE: ADD'); // Si pas d'UID, on retourne une erreur if( objectData.uid == null ) return false; /* (0) Gestion du formattage des valeur */ objectData.firstname = (objectData.firstname != null) ? objectData.firstname : ''; objectData.lastname = (objectData.lastname != null) ? objectData.lastname : ''; objectData.username = (objectData.username != null) ? objectData.username : ''; objectData.age = (objectData.age != null) ? objectData.age : ''; objectData.sexe = (objectData.sexe != null) ? objectData.sexe : [true, false]; objectData.job = (objectData.job != null) ? objectData.job : '.'; objectData.loc = (objectData.loc != null) ? objectData.loc : [true, false, false, false]; // console.log(objectData); // {1} Création physique // this.container.innerHTML += miniFicheBuilder.build({ firstname: objectData.firstname, lastname: objectData.lastname, username: objectData.username, uid: objectData.uid, age: objectData.age, sexea: objectData.sexe[0] ? 'true' : 'false', sexeb: objectData.sexe[1] ? 'true' : 'false', // job: objectData.job, loca: objectData.loc[0] ? 'true' : 'false', locb: objectData.loc[1] ? 'true' : 'false', locc: objectData.loc[2] ? 'true' : 'false', locd: objectData.loc[3] ? 'true' : 'false' }); /* (2) On sélectionne la valeur dans le select (manuellement) */ var createdSelect = $('[data-name="uid"][value="'+objectData.uid+'"] ~ h5>span>select'); console.log(createdSelect); createdSelect.value = objectData.job; }; /* [4] Gestion de l'affichage depuis le 'localStorage' =========================================================*/ inputPhoneMini.prototype.storageToFields = function(){ console.log('MINI FICHE: STORAGE TO FIELDS'); // {1} Pour chaque contact du 'localStorage' // var existingMiniFiches = lsi.keys('mini-fiches'); // On réinitialise le HTML this.container.innerHTML = ''; // On récupère les UIDS var UIDs = []; for( var i = 0 ; i < existingMiniFiches.length ; i++ ){ // {2} On récupère les informations du contact // var ficheData = lsi.get('mini-fiches', existingMiniFiches[i]); // {3} On ajoute un contact à la liste // this.add({ uid: ficheData.uid, firstname: ficheData.firstname, lastname: ficheData.lastname, username: ficheData.username, age: ficheData.age, sexe: ficheData.sexe, job: ficheData.job, loc: ficheData.loc }); UIDs.push(ficheData.uid); } // {4} On met à jour la navigation // this.updateNavBar(UIDs); }; /* [5] Synchronisation des CONTACT vers les MINI fiches =========================================================*/ inputPhoneMini.prototype.sync = function(){ /* (1) On récupère les clés de tous les CONTACTS */ var contactUIDs = lsi.keys('contacts'); /* (2) Pour chaque CONTACT, on met à jour/crée la MINI fiche associée */ for( var i = 0 ; i < contactUIDs.length ; i++ ){ /* (3) On récupère les informations du CONTACT */ var contactData = lsi.get('contacts', contactUIDs[i]); /* (4) On récupère les informations de la MINI (si elle existe) */ var miniData = lsi.get('mini-fiches', contactUIDs[i]); /* (5) Cas 1 : la MINI fiche n'exise pas */ if( miniData == null ){ // On crée la MINI fiche lsi.set('mini-fiches', contactUIDs[i], { uid: contactData.uid, firstname: contactData.firstname, lastname: contactData.lastname, username: contactData.username, sexe: [true, false], // valeur par défaut age: '', // valeur par défaut job: '.', // valeur par défaut loc: [true, false, false, false] // valeur par défaut }); /* (6) Cas 2 : la MINI fiche existe déja */ }else{ // On modifie la MINI fiche miniData.firstname = contactData.firstname; miniData.lastname = contactData.lastname; miniData.username = contactData.username; // On met à jour la MINI fiche lsi.set('mini-fiches', contactUIDs[i], miniData); } } }; /* [6] Gestion de la visibilité des MINI fiches (pages) =========================================================*/ inputPhoneMini.prototype.show = function(){ /* (1) On récupère toutes les MINI fiches visibles */ var visible = $$('article.mini-relation-panel .mini-fiche-relation.active'); for( var i = 0 ; i < visible.length ; i++ ) visible[i].remClass('active'); /* (2) On affiche la fiche associée */ this.container.children[this.selected].addClass('active'); }; /* [7] Gestion de la navigation entre les fiches =========================================================*/ inputPhoneMini.prototype.nav = function(element){ /* (1) On vérifie que l'élément contient un nombre */ if( isNaN(element.innerHTML) ) return false; /* (2) On désactive tous les éléments actifs */ var activeElements = $$('#nav-mini > span.active'); for( var i = 0 ; i < activeElements.length ; i++ ) activeElements[i].remClass('active'); /* (3) On active l'élément courant */ element.addClass('active'); this.selected = parseInt(element.innerHTML) - 1; /* (4) On affiche la MINI fiche associée */ this.show(); }; /* [8] Mise à jour de la navigation =========================================================*/ inputPhoneMini.prototype.updateNavBar = function(uid_list){ /* (1) On vide la nav bar */ this.nav_container.innerHTML = ''; /* (2) On la re-remplit avec toutes les données */ for( var i = 0 ; i < uid_list.length ; i++ ){ // On rajoute 1 pour la lisibilité var realIndex = parseInt(uid_list[i]) + 1; this.nav_container.innerHTML += ''+realIndex+''; } /* (3) On séléctionne par défaut */ this.nav( this.nav_container.children[this.selected] ); }; /* [9] Point d'amorçage de la gestion des contacts =========================================================*/ inputPhoneMini.prototype.attach = function(){ console.log('MINI FICHE: ATTACH'); /* (1) On initialise le jeu de données */ lsi.createDataset('mini-fiches'); /* (2) On charge les mini fiches depuis la mémoire ('localStorage') */ this.storageToFields(); /* (3) On attache la barre de navigation à une fonction */ var ptr = this; this.nav_container.addEventListener('click', function(e){ ptr.nav(e.target); }, false); };