NxTIC/view/js/input.js

// STRUCTURE DU localStorage
// subject  -> contient les données du sujet
// contacts -> contient les données de tous les contacts
// fiches   -> contient les données de toutes les fiches




/* (3) Fonction qui met à jour un élément et son listener */
function updateListener(element, eventType, handler){
    element.removeEventListener(eventType, handler);
    element.addEventListener(eventType, handler);
}


















/* [1] Initialisation des utilitaires
=========================================================*/
/* (1) Instanciation de inputChecker */
var ic = new inputChecker();

/* (2) Paramètres de FormDeflater */
var FormDeflaterP = { tags: ['input'], attr: ['data-name'] };

















/* [2] Indexation des inputs + Containers
=========================================================*/
/* (1) Input de type fichier pour l'import */
var importCallLog = $('input#call_log-import[type="file"]');

/* (2) Bouton d'ajout de contact */
var addContact = $('h4.add-contact');
/* (3) Conteneur des formulaires de contact */
var contactContainer = $('article.contact-panel');

/* (4) Conteneur des MINI fiches relation */
var miniFicheContainer = $('article.mini-relation-panel');

/* (5) Conteneur des fiches relation */
var ficheContainer = $('article.relation-panel');

















/* [3] Gestion des formulaires du sujet
=========================================================*/
/* (0) Les input du formulaire du sujet */
var subjectInput = {
    number:    $('article.subject-panel [data-name="number"]'),
    username:  $('article.subject-panel [data-name="username"]'),
    firstname: $('article.subject-panel [data-name="firstname"]'),
    lastname:  $('article.subject-panel [data-name="lastname"]'),

    store:     $('article.subject-panel [data-name="submit"]')
};

/* (1) Gestion de l'enregistrement du sujet en local ('localStorage') */
lsi.createDataset('subject');
function storeSubject(){
    console.log('storing subject');

    // {1} Vérification des champs //
    // Le numéro n'est pas vide
    var validForm = subjectInput.number.value.length > 0;
    // ET le pseudo et/ou le prénom et/ou le nom n'est pas vide
    validForm = validForm && subjectInput.username.value.length+subjectInput.firstname.value.length+subjectInput.lastname.value.length > 0;

    // Si le formulaire n'est pas valide, on ne l'enregistre pas
    if( !validForm ) return false;

    // {2} On récupère et met en forme les valeurs du deflater //
    var obj = {
        number:    subjectInput.number.value,
        username:  subjectInput.username.value,
        firstname: subjectInput.firstname.value,
        lastname:  subjectInput.lastname.value
    };

    // {3} On enregistre les données dans le 'localStorage' //
    lsi.set('subject', 'form', obj);

}

/* (2) Gestion de l'affichage (et mise à jour) du sujet (depuis 'localStorage') */
function restoreSubject(){
    // {1} On récupère les informations du sujet //
    var subjectData = lsi.get('subject', 'form');

    if( subjectData == null ) return;

    // {2} On restore les valeurs //
    subjectInput.number.value    = subjectData.number;
    subjectInput.username.value  = subjectData.username;
    subjectInput.firstname.value = subjectData.firstname;
    subjectInput.lastname.value  = subjectData.lastname;
}restoreSubject();


/* (n) On attache l'évènement d'enregistrement du formulaire du sujet */
subjectInput.store.addEventListener('click', storeSubject, false);










var contactManager;




/* [4] Gestion des formulaires de contact
=========================================================*/
include('/js/includes/input-phone-contact.js', function(){
    /* (1) On crée une instance du gestionnaire des CONTACTS */
    contactManager = new inputPhoneContact(
        contactContainer,
        addContact
    );

    /* (2) On le démarre */
    contactManager.attach();
});










/* (1) Gestion de l'enregistrement des contacts en local ('localStorage') */
// lsi.createDataset('contacts');
// function storeContacts(){
//     console.log('STORING ALL CONTACTS');
//
//     // {1} Pour chaque formulaire de contact présent //
//     var existingContacts = $$('article.contact-panel .new-contact');
//     for( var i = 0 ; i < existingContacts.length ; i++ ){
//
//         // {2} On récupère les informations relatives à l'élément courant //
//         var indexInParent = existingContacts[i].parentNode.children.indexOf(existingContacts[i]);
//
//         // {3} On initialise notre deflater pour récupérer les valeurs //
//         var deflater = new FormDeflater(existingContacts[i], ['input'], ['data-name']);
//
//         // {4} 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;
//
//         // {5} On récupère et met en forme les valeurs du deflater //
//         var obj = {
//             number:    deflated.number.value,
//             username:  deflated.username.value,
//             firstname: deflated.firstname.value,
//             lastname:  deflated.lastname.value
//         };
//
//         // {6} On enregistre les données dans le 'localStorage' //
//         lsi.set('contacts', 'form'+indexInParent, obj);
//
//
//
//         // {7} On enregistre les données des MINI fiches associées //
//         var associatedMiniFiche = lsi.get('mini-fiches', 'form'+indexInParent);
//
//         // Si n'existe pas, on la crée
//         if( associatedMiniFiche === false ){
//             lsi.set('mini-fiches', 'form'+indexInParent, {
//                 uid:       indexInParent,
//                 firstname: obj.firstname,
//                 lastname:  obj.lastname,
//                 username:  obj.username,
//                 age:       '',
//                 sexe:      [true, false],
//                 job:       '.',
//                 location:  [true, false, false, false]
//             });
//
//         // Sinon, on met à jour
//         }else{
//
//             associatedMiniFiche.firstname = obj.firstname;
//             associatedMiniFiche.lastname  = obj.lastname;
//             associatedMiniFiche.username  = obj.username;
//
//             lsi.set('mini-fiches', 'form'+indexInParent, associatedMiniFiche);
//         }
//
//     }
//
//     // {8} On met à jour les mini-fiches //
//     storeMiniFiches();
//
//
//     // {9} On met à jour le rendu des contacts//
//     restoreContacts();
// }
//
//
// /* (2) Fonction pour l'ajout d'un contact */
// function addNewContact(number, username, firstname, lastname){
//     // {1} On ajoute le HTML //
//     contactContainer.innerHTML += contactBuilder.build({
//         number:    (typeof number    != 'string') ? '' : number,
//         username:  (typeof username  != 'string') ? '' : username,
//         firstname: (typeof firstname != 'string') ? '' : firstname,
//         lastname:  (typeof lastname  != 'string') ? '' : lastname
//     });
//
//     // {2} On attache les évènements sur les boutons 'Enregistrer' //
//     var contactSubmits = $$('article.contact-panel .new-contact input[type="submit"]');
//     for( var i = 0 ; i < contactSubmits.length ; i++ )
//         updateListener(contactSubmits[i], 'click', storeContacts);
//
// }
//
//
// /* (3) Gestion de l'affichage (et mise à jour) des contacts (depuis 'localStorage') */
// function restoreContacts(){
//     // {1} Pour chaque contact du 'localStorage' //
//     var existingContacts = lsi.keys('contacts');
//
//     // On réinitialise le HTML
//     contactContainer.innerHTML = '';
//
//     for( var i = 0 ; i < existingContacts.length ; i++ ){
//         // {2} On récupère les informations du contact //
//         var contactData = lsi.get('contacts', existingContacts[i]);
//
//         // {3} On ajoute un contact à la liste //
//         addNewContact(
//             contactData.number,
//             contactData.username,
//             contactData.firstname,
//             contactData.lastname
//         );
//
//     }
//
//     addNewContact('', '', '', '');
//
//     // {4} On met à jour les MINI fiches //
//     storeMiniFiches();
//
// }
//
//
// /* (n) On attache l'évènement d'ajout d'un formulaire de contact */
// addContact.addEventListener('click', storeContacts, false);


















/* [5] Gestion des MINI fiches relation
=========================================================*/
/* (1) Gestion de l'enregistrement des contacts en local ('localStorage') */
lsi.createDataset('mini-fiches');
function storeMiniFiches(){
    console.log('STORING ALL MINI-FICHES');

    // {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);
        console.log('deflated');
        console.log(deflated);
        // 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,
            location: [
                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 //
    restoreMiniFiches();
}



/* (2) Fonction pour l'ajout d'un contact */
function addNewMiniFiche(firstname, lastname, username, uid, age, sexe, job, location){
    // {1} Création physique //
    miniFicheContainer.innerHTML += miniFicheBuilder.build({
        firstname: firstname,
        lastname:  lastname,
        username:  username,
        uid:       uid,
        age:       '',
        sexe_A:    sexe[0] ? 'true' : 'false',
        sexe_B:    sexe[1] ? 'true' : 'false',
        job: job,
        loc_A:     location[0] ? 'true' : 'false',
        loc_B:     location[1] ? 'true' : 'false',
        loc_C:     location[2] ? 'true' : 'false',
        loc_D:     location[3] ? 'true' : 'false'
    });

}


/* (3) Gestion de l'affichage (et mise à jour) des contacts (depuis 'localStorage') */
function restoreMiniFiches(){
    // {1} Pour chaque contact du 'localStorage' //
    var existingMiniFiches = lsi.keys('mini-fiches');

    // On réinitialise le HTML
    miniFicheContainer.innerHTML = '';

    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 //
        addNewMiniFiche(
            ficheData.firstname,
            ficheData.lastname,
            ficheData.username,
            ficheData.uid,
            ficheData.age,
            ficheData.sexe,
            ficheData.job,
            ficheData.location
        );
    }

}restoreMiniFiches();



// TODO : Gestion des MINI fiches relation en fonction des contacts
/* (1) Fonction pour l'ajout d'une MINI fiche relation */


// On ajoute la première
// addNewFiche();

// Puis on attache l'évènement pour en ajouter d'autres manuellement
// addContact.addEventListener('click', addNewFiche, false);















/* [5] Gestion des deflaters (formulaires) de contact
=========================================================*/

















/* [6] Gestion de l'import du fichier
=========================================================*/
importCallLog.addEventListener('change', function(e){
    /* (1) On rédige la requête */
    var uploadRequest = {
        path: 'upload/call_log',
        file: importCallLog.files[0]
    };

    /* (2) On effectue l'upload (import) */
    api.send(uploadRequest, function(response){
        console.log( response );
        // Si tout est bon, on met l'input en bleu
        if( response.ModuleError == 0 )
            importCallLog.addClass('active');

        // TODO: Gestion de l'ajout des fiches relation
    });

}, false);







// var number = $('input.number[type="text"]');
// ic.append(number, format_number, '06 06 06 06 06');
// // format_number -> format pour les numéros de téléphones
//
// number.addEventListener('keyup', function(e){
//     ic.correct(number, false);
// }, false);