236 lines
7.7 KiB
JavaScript
236 lines
7.7 KiB
JavaScript
/* [0] Constructeur -> définit le conteneur et le bouton d'ajout
|
|
=========================================================*/
|
|
function inputPhoneContact(container, navContainer){
|
|
this.container = container;
|
|
this.nav_container = navContainer;
|
|
}
|
|
|
|
/* [1] Attributs
|
|
=========================================================*/
|
|
inputPhoneContact.prototype = {
|
|
container: this.container, // Conteneur des formulaires de contact
|
|
nav_container: this.nav_container, // Conteneur de la navigation entre les formulaires
|
|
selected: 1, // UID du permier des contacts sélectionnés (10 par 10)
|
|
handler: null // Fonction pour l'enregistrement et la synchronisation des données
|
|
};
|
|
|
|
|
|
/* [2] Gestion de l'enregistrement des formulaires de contact
|
|
=========================================================*/
|
|
inputPhoneContact.prototype.fieldsToStorage = function(){
|
|
console.log('CONTACTS: FIELDS TO STORAGE');
|
|
|
|
// {1} Pour chaque formulaire de contact présent //
|
|
var visibleContacts = $$('article.contact-panel .new-contact');
|
|
for( var i = 0 ; i < visibleContacts.length ; i++ ){
|
|
|
|
// {2} On initialise notre deflater pour récupérer les valeurs //
|
|
var deflater = new FormDeflater(visibleContacts[i], ['input'], ['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();
|
|
|
|
// Le numéro n'est pas vide
|
|
var validForm = deflated.number.value.length > 0;
|
|
// ET le pseudo et/ou le prénom et/ou le nom n'est pas vide
|
|
validForm = validForm && deflated.username.value.length+deflated.firstname.value.length+deflated.lastname.value.length > 0;
|
|
|
|
// Si le formulaire n'est pas valide, on ne l'enregistre pas
|
|
if( !validForm ) continue;
|
|
|
|
// {4} On récupère et met en forme les valeurs du deflater //
|
|
var obj = {
|
|
uid: parseInt(deflated.uid.value),
|
|
number: deflated.number.value,
|
|
username: deflated.username.value,
|
|
firstname: deflated.firstname.value,
|
|
lastname: deflated.lastname.value,
|
|
|
|
call: parseInt(deflated.call.value),
|
|
sms: parseInt(deflated.sms.value),
|
|
|
|
countcall: parseInt(deflated.countcall.value),
|
|
countsms: parseInt(deflated.countsms.value)
|
|
};
|
|
|
|
/* (5) On calcule et ajoute le hash des données */
|
|
obj.hash = crc32( JSON.stringify(obj) );
|
|
|
|
// {6} On enregistre les données dans le 'localStorage' //
|
|
lsi.set('contacts', parseInt(deflated.uid.value), obj);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [3] Gestion de l'ajout physique d'un nouveau contact
|
|
=========================================================*/
|
|
/*
|
|
*
|
|
* @objectData<Object> Objet contenant les informations nécessaires à l'affichage
|
|
*
|
|
*/
|
|
inputPhoneContact.prototype.add = function(objectData){
|
|
console.log('CONTACTS: ADD');
|
|
|
|
// Si pas d'uid, on quitte
|
|
if( objectData.uid == null || isNaN('number') )
|
|
return false
|
|
|
|
// {0} On formatte l'object //
|
|
objectData.number = (objectData.number != null) ? objectData.number : '';
|
|
objectData.username = (objectData.username != null) ? objectData.username : '';
|
|
objectData.firstname = (objectData.firstname != null) ? objectData.firstname : '';
|
|
objectData.lastname = (objectData.lastname != null) ? objectData.lastname : '';
|
|
objectData.call = (objectData.call != null) ? objectData.call : -1;
|
|
objectData.sms = (objectData.sms != null) ? objectData.sms : -1;
|
|
objectData.countcall = (objectData.countcall != null) ? objectData.countcall : 0;
|
|
objectData.countsms = (objectData.countsms != null) ? objectData.countsms : 0;
|
|
|
|
|
|
// {1} On ajoute le HTML //
|
|
this.container.innerHTML += contactBuilder.build(objectData);
|
|
|
|
// {2} On attache les évènements sur les formulaires //
|
|
var contactForms = $$('article.contact-panel .new-contact');
|
|
|
|
// On met à jour les listener (remove, puis add)
|
|
var ptr = this;
|
|
for( var i = 0 ; i < contactForms.length ; i++ ){
|
|
contactForms[i].removeEventListener('click', function(e){ ptr.nav(e.target); ptr.handler(e.target); }, false);
|
|
contactForms[i].addEventListener('click', function(e){ ptr.nav(e.target); ptr.handler(e.target); }, false);
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [4] Gestion de l'affichage depuis le 'localStorage'
|
|
=========================================================*/
|
|
inputPhoneContact.prototype.storageToFields = function(){
|
|
console.log('CONTACTS: STORAGE TO FIELDS');
|
|
|
|
// {1} Pour chaque contact du 'localStorage' //
|
|
var contactKeys = lsi.keys('contacts');
|
|
|
|
// On réinitialise le HTML
|
|
this.container.innerHTML = '';
|
|
|
|
// {2} On ajoute chaque contact (parmi les séléctionnés) à la liste //
|
|
var min = this.selected; // On affiche du contact sélectionné
|
|
var max = this.selected+10; // On s'arrête à 10 contacs
|
|
|
|
for( var i = min ; i < max && i < contactKeys.length ; i++ )
|
|
this.add( lsi.get('contacts', contactKeys[i]) );
|
|
|
|
|
|
// On ajoute un champ de plus à remplir si c'est la dernière page
|
|
if( max >= contactKeys.length )
|
|
this.add({uid: contactKeys.length, number:'', firstname:'', lastname:'', username:'', call:-1, sms:-1, countcall: 0, countsms: 0});
|
|
|
|
/* (3) On met à jour la barre de navigation */
|
|
this.updateNavBar();
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [6] Gestion de la navigation entre les formulaires (10 par 10)
|
|
=========================================================*/
|
|
inputPhoneContact.prototype.nav = function(element){
|
|
/* (1) On vérifie que l'élément contient un nombre et existe */
|
|
if( typeof element == 'undefined' )
|
|
return false;
|
|
|
|
if( isNaN(element.getData('n')) || element.parentNode.id != 'nav-contact' )
|
|
return false;
|
|
|
|
/* (2) On désactive tous les éléments actifs */
|
|
var activeElements = $$('#nav-contact > 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.getData('n'));
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [7] Mise à jour de la navigation
|
|
=========================================================*/
|
|
inputPhoneContact.prototype.updateNavBar = function(){
|
|
var contactKeys = lsi.keys('contacts');
|
|
var len = contactKeys.length;
|
|
|
|
|
|
/* (1) On vérifie si la barre de navigation est à jour */
|
|
var navBarUpToDate = this.nav_container.children.length == len;
|
|
|
|
|
|
/* (2) On vide et remplit la barre de nav, si elle n'est pas à jour */
|
|
if( !navBarUpToDate ){
|
|
this.nav_container.innerHTML = '';
|
|
|
|
for( var i = 0 ; i < len ; i+=10 )
|
|
this.nav_container.innerHTML += '<span data-n="'+i+'">'+ (1+i/10) +'</span>';
|
|
}
|
|
|
|
|
|
/* (4) On séléctionne par défaut la dernière MINI fiche sélectionnée */
|
|
this.nav( this.nav_container.children[this.selected-1] );
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* [5] Point d'amorçage de la gestion des contacts
|
|
=========================================================*/
|
|
inputPhoneContact.prototype.attach = function(handler){
|
|
console.log('CONTACTS: ATTACH');
|
|
|
|
/* (1) On initialise le jeu de données */
|
|
lsi.createDataset('contacts');
|
|
|
|
/* (2) On charge les contacts depuis la mémoire ('localStorage') */
|
|
this.storageToFields();
|
|
|
|
/* (3) On enregistre le handler */
|
|
this.handler = handler;
|
|
|
|
/* (4) On attache l'évènement sur le conteneur de navigation */
|
|
var ptr = this;
|
|
this.nav_container.addEventListener('click', function(e){
|
|
// 1. On gère la navigation
|
|
ptr.nav(e.target);
|
|
|
|
// 2. On gere le chargement dynamique
|
|
ptr.handler(e.target);
|
|
}, false);
|
|
|
|
};
|