NxTIC/js/includes/input-phone-matrice.js

/* [0] Constructeur -> définit le conteneur et le bouton d'ajout
=========================================================*/
function inputPhoneMatrice(container){
    this.container  = container;
}

/* [1] Attributs
=========================================================*/
inputPhoneMatrice.prototype = {
    container: this.container // Conteneur de la matrice
};


/* [2] Gestion de l'enregistrement de la matrice
=========================================================*/
inputPhoneMatrice.prototype.fieldsToStorage = function(){
    console.log('MATRICE: FIELDS TO STORAGE');


    // {1} On initialise notre deflater pour récupérer les valeurs //
    var deflater = new FormDeflater(this.container, ['input'], ['data-name']);

    // {2} On extrait les données //
    var deflated = deflater.deflate();
    // On crée le hash
    var deflatedHash = crc32(JSON.stringify(deflated));


    // console.log(deflated);

    /* (3) On crée l'objet et on le remplit avec les relations */
    var obj = {};

    for( var i in deflated )

        // {1} Si c'est un tableau de sujets //
        if( deflated[i] instanceof Array ){

            // Pour chacune des différentes relations, on ajoute si TRUE
            for( var a in deflated[i] ){
                if( obj[i] == null )
                    obj[i] = [];

                obj[i].push( parseInt(deflated[i][a]) );
            }

        // {2} Si il n'y a qu'un sujet //
        }else if( deflated[i] !== null ){
            if( obj[i] == null )
                obj[i] = [];

            obj[i].push( parseInt(deflated[i]) );
        }

    lsi.set( 'matrice', 0, obj );
    // Objet de la forme
    //
    // idA: [idV, idW],     # A connait V et W (et réciproquement)
    // idB: [idX, idY],     # B connait X et Y (et réciproquement)
    // ...
    //
};











/* [4] Gestion de l'affichage depuis le 'localStorage'
=========================================================*/
inputPhoneMatrice.prototype.storageToFields = function(){
    console.log('MATRICE: STORAGE TO FIELDS');

    /* (1) On récupère la liste des contacts à mettre dans la matrice */
    // On récupère les fiches
    var ficheData = lsi.export('fiches');

    // On récupère les données de la matrice
    var matriceData = lsi.get('matrice', 0);

    // On récupère les contacts pour afficher les noms/prénoms
    var contactData = lsi.export('contacts');

    // Contiendra les UID des contacts à mettre dans la matrice
    var contacts = [];

    // Pour chaque fiche, on ajoute l'uid du contact s'il n'est pas déja ajouté
    for( var f in ficheData )
        if( contacts.indexOf( ficheData[f].contact ) == -1 )
            contacts.push( ficheData[f].contact );


    /* (2) On construit le HTML de la matrice */
    // Contiendra le HTML
    var matrice_html = "<table class='line'>";

    // {1} Pour chaque ligne //
    for( var A = 0 ; A < contacts.length ; A++ ){
        var conA = contactData[A];


        matrice_html += '<tr>';

        if( A > 0 ){ // Noms sur la première ligne (abscisses)
            matrice_html += '<td style="text-align: right;">';
                matrice_html += conA.firstname+' '+conA.lastname
                matrice_html += (conA.username.length>0) ? ' ('+conA.username+')' : '';
            matrice_html += '</td>';
        }else // Sinon,
            matrice_html += '<td></td>';

        // {2} Pour chaque case //
        for( var B = 0 ; B < contacts.length ; B++ ){ if( B < contacts.length-1 ){
            var conB = contactData[B];

            // {3} Première colonne -> Intitulé des ordonnées //
            if( A == 0 ){
                matrice_html += '<td>';
                    matrice_html += '<span style="writing-mode: vertical-lr; text-align: right;">';
                        matrice_html += conB.firstname+' '+conB.lastname;
                        matrice_html += (conB.username.length>0) ? ' ('+conB.username+')' : '';
                    matrice_html += '</span>';

            // {4} Valeurs des relations (boutons) //
            }else if( B < A ){
                matrice_html += "<td>";
                    matrice_html += "<input type='checkbox' name='matrice_"+conA.uid+"_"+conB.uid+"' data-name='"+conA.uid+"' value='"+conB.uid+"' id='matrice_"+conA.uid+"_"+conB.uid+"'";
                    // Si la relation existe, on active le bouton
                    if( matriceData[A] != null && matriceData[A].indexOf(B) > -1 )
                        matrice_html += " checked";
                    matrice_html += " >";
                    matrice_html += "<label for='matrice_"+conA.uid+"_"+conB.uid+"'></label>";

            // {5} Cases vides (moitié supérieure droite) //
            }else
                matrice_html += "<td class='hidden'>";

            matrice_html += '</td>';
        }}

        matrice_html += '</tr>';
    }
    matrice_html += '</table>';


    /* (3) On affiche la matrice */
    this.container.innerHTML = matrice_html;

};



/* [9] Point d'amorçage de la gestion des contacts
=========================================================*/
inputPhoneMatrice.prototype.attach = function(){
    console.log('MATRICE: ATTACH');

    /* (1) On initialise le jeu de données */
    lsi.createDataset('matrice');

    /* (2) On charge les mini fiches depuis la mémoire ('localStorage') */
    this.storageToFields();

    /* (3) On enregistre la matrice à chaque modification */
    var ptr = this;
    this.container.addEventListener('click', function(e){
        ptr.fieldsToStorage();
        ptr.storageToFields();
    }, false);
};