Subversion Repositories eFlore/Applications.cel

function UtilsApa() {
        // this.infosUtilisateur = null;
        this.langue = $( 'body' ).data( 'lang' );
        this.urlRacine = window.location.origin;
        // système de traduction minimaliste
        this.msgs = {
                fr: {
                        'arbre'                             : 'Arbre',
                        'dupliquer'                         : 'Dupliquer',
                        'saisir-plantes'                    : 'Saisir les plantes',
                        'saisir-lichens'                    : 'Saisir les lichens',
                        'format-non-supporte'               : 'Le format de fichier n\'est pas supporté, les formats acceptés sont',
                        'image-deja-chargee'                : 'Cette image a déjà été utilisée',
                        'date-incomplete'                   : 'Format : jj/mm/aaaa.',
                        'observations-transmises'           : 'observations transmises',
                        'supprimer-observation-liste'       : 'Supprimer cette observation de la liste à transmettre',
                        'milieu'                            : 'Milieu',
                        'commentaires'                      : 'Commentaires',
                        'non-lie-au-ref'                    : 'non lié au référentiel',
                        'obs-le'                            : 'le',
                        'non-connexion'                     : 'Veuillez entrer votre login et votre mot de passe',
                        'obs-numero'                        : 'Observation n°',
                        'erreur'                            : 'Erreur',
                        'erreur-inconnue'                   : 'Erreur inconnue',
                        'erreur-image'                      : 'Erreur lors du chargement des images',
                        'erreur-ajax'                       : 'Erreur Ajax',
                        'erreur-chargement'                 : 'Erreur lors du chargement de l\'observation',
                        'erreur-chargement-obs-utilisateur' : 'Erreur lors du chargement des observations de cet utilisateur',
                        'erreur-formulaire'                 : 'Erreur: impossible de charger le formulaire',
                        'lieu-obs'                          : 'observé à',
                        'lieu-dit'                          : 'Lieu-dit',
                        'station'                           : 'Station',
                        'date-rue'                          : 'Un releve existe dejà à cette date pour cette rue.',
                        'rechargement-page'                 : 'Êtes vous sûr de vouloir quiter la page?\nLes observations saisies mais non transmises seront perdues.'
                },
                en: {
                        'arbre'                             : 'Tree',
                        'dupliquer'                         : 'Duplicate',
                        'saisir-plantes'                    : 'Enter the plants',
                        'saisir-lichens'                    : 'Enter the lichens',
                        'format-non-supporte'               : 'The file format is not supported, the accepted formats are',
                        'image-deja-chargee'                : 'This image has already been used',
                        'date-incomplete'                   : 'Format: dd/mm/yyyy.',
                        'observations-transmises'           : 'observations transmitted',
                        'supprimer-observation-liste'       : 'Delete this observation from the list to be transmitted',
                        'milieu'                            : 'Environment',
                        'commentaires'                      : 'Comments',
                        'non-lie-au-ref'                    : 'unrelated to the referencial ',
                        'obs-le'                            : 'the',
                        'non-connexion'                     : 'Please enter your login and password',
                        'obs-numero'                        : 'Observation number ',
                        'erreur'                            : 'Error',
                        'erreur-inconnue'                   : 'Unknown error',
                        'erreur-image'                      : 'Error loading the images',
                        'erreur-ajax'                       : 'Ajax Error',
                        'erreur-chargement'                 : 'Error loading the observation',
                        'erreur-chargement-obs-utilisateur' : 'Error loading this user\'s observations',
                        'erreur-formulaire'                 : 'Error: couldn\'t load form',
                        'lieu-obs'                          : 'observed at',
                        'lieu-dit'                          : 'Locality',
                        'station'                           : 'Place',
                        'date-rue'                          : 'A record already exists on this date for this street',
                        'rechargement-page'                 : 'Are you sure you want to leave the page?\nAll untransmitted observations will be lost.'
                }
        };
}


UtilsApa.prototype.chargerForm = function( nomSquelette, apaFormObj ) {
        const lthis = this;
        var urlSqueletteArbres = this.urlRacine + '/widget:cel:apa?squelette=' + nomSquelette;

        $.ajax({
                url: urlSqueletteArbres,
                type: 'get',
                success: function( squelette ) {
                        if ( lthis.valOk( squelette ) ) {
                                apaFormObj.chargerSquelette( squelette, nomSquelette );
                        }
                },
                error: function() {
                        $( '#charger-form' ).html( lthis.msgTraduction( 'erreur-formulaire' ) );
                }
        });
};

UtilsApa.prototype.chargerFormPlantesOuLichens = function( squelette, nomSquelette ) {
        if ( this.valOk( $( '#releve-data' ).val() ) ) {
                $( '#charger-form' ).html( squelette );
                const releveDatas = $.parseJSON( $( '#releve-data' ).val() );
                const nbArbres    = releveDatas.length -1;

                for ( var i = 1; i <= nbArbres ; i++ ) {
                        $( '#choisir-arbre' ).append(
                                '<option value="' + i + '">'+
                                        this.msgTraduction( 'arbre' ) + ' ' + i +
                                '</option>'
                        );
                }
        }
};

/**
 * Stocke en Json les valeurs du relevé dans en value d'un input hidden
 */
UtilsApa.prototype.formaterReleveData = function( releveDatas ) {
        var releve  = [],
                obs  = releveDatas.obs,
                obsE = releveDatas.obsE;

        releve[0] = {
                utilisateur        : obs.ce_utilisateur,
                date               : obs.date_observation,
                rue                : obsE.rue,
                'commune-nom'      : obs.zone_geo,
                'commune-insee'    : obs.ce_zone_geo,
                pays               : obs.pays,
                latitude           : obs.latitude,
                longitude          : obs.longitude,
                altitude           : obs.altitude,
                'zone-pietonne'    : obsE['zone-pietonne'],
                'pres-lampadaires' : obsE['pres-lampadaires'],
                commentaires       : obs.commentaire
        };
        return releve;
};

/**
 * Stocke en Json les valeurs d'une obs
 */
UtilsApa.prototype.formaterArbreData = function( arbresDatas ) {
        var retour = {},
                obs          = arbresDatas.obs,
                obsE         = arbresDatas.obsE,
                miniatureImg = [];
        if( this.valOk( obs['miniature-img'] ) ) {
                miniatureImg = obs['miniature-img'];
        } else if ( this.valOk( obsE['miniature-img'] ) ) {
                miniatureImg = $.parseJSON( obsE['miniature-img'] );
        }

        retour = {
                'date_rue_commune'      : obs.date_observation + obsE.rue + obs.zone_geo,
                'num-arbre'             : obsE.num_arbre,
                'id_observation'        : obs.id_observation,
                'taxon'                 : {
                        'numNomSel' : obs.nom_sel_nn,
                        'value'     : obs.nom_sel,
                        'nomRet'    : obs.nom_ret,
                        'numNomRet' : obs.nom_ret_nn,
                        'nt'        : obs.nt,
                        'famille'   : obs.famille,
                },
                'miniature-img'         : miniatureImg,
                'referentiel'           : obs.nom_referentiel,
                'certitude'             : obs.certitude,
                'rue-arbres'            : obsE['rue-arbres'],
                'latitude-arbres'       : obsE['latitude-arbres'],
                'longitude-arbres'      : obsE['longitude-arbres'],
                'altitude-arbres'       : obsE['altitude-arbres'],
                'circonference'         : obsE.circonference,
                'surface-pied'          : obsE['surface-pied'],
                'equipement-pied-arbre' : obsE['equipement-pied-arbre'],
                'tassement'             : obsE.tassement,
                'dejections'            : obsE.dejections,
                'face-ombre'            : obsE['face-ombre'],
                'com-arbres'            : obsE['com-arbres']
        };
        return retour;
};

UtilsApa.prototype.fournirDate = function( dateObs ) {
        if ( /^[0-9]{2}\/[0-9]{2}\/[0-9]{4}$/.test( dateObs ) ) {
                return dateObs;
        } else if ( /^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test( dateObs ) ) {
                var dateArray = dateObs.split( '-' );
                return dateArray[2] + '/' + dateArray[1] + '/' + dateArray[0]
        } else {
                console.log( 'erreur date : ' + dateObs )
        }
};

/**
 * Si la langue est définie dans this.langue, et si des messages sont définis
 * dans this.msgs, tente de trouver le message dont la clé est [cle] dans la
 * langue en cours. S'il n'est pas trouvé, retourne la version française (par
 * défaut); si celle-ci n'exite pas, retourne "N/A".
 */
UtilsApa.prototype.msgTraduction = function( cle ) {
        var msg = 'N/A';

        if ( this.msgs ) {
                if ( this.langue in this.msgs && cle in this.msgs[this.langue] ) {
                        msg = this.msgs[this.langue][cle];
                } else if ( cle in this.msgs['fr'] ) {
                        msg = this.msgs['fr'][cle];
                }
        }
        return msg;
};

/**
* Permet à la fois de vérifier qu'une valeur ou objet existe et n'est pas vide
* et de comparer à une autre valeur :
* Vérifie qu'une variable ou objet n'est pas : vide, null, undefined, NaN
* Si comparer est défini on le compare à valeur en fonction de sensComparaison
* Un booléen est une variable valide : on retourne true
* @param { string || number || object || undefined } valeur
* @param { boolean } sensComparaison : true = rechercher, false = refuser
* @param { string || number || object || undefined || boolean } comparer :valeur à comparer
* @returns {boolean}
*/
UtilsApa.prototype.valOk = function( valeur, sensComparaison = true, comparer = undefined ) {
        var retour = true;
        if ( 'boolean' !== typeof valeur ) {
                switch( typeof valeur ) {
                        case 'string' :
                                retour = ( '' !== valeur );
                         break;
                        case 'number' :
                                        retour = ( NaN !== valeur );
                                break;
                        case 'object' :
                                        retour = ( null !== valeur && undefined !== valeur && !$.isEmptyObject( valeur ) );
                                        if (  null !== valeur && undefined !== valeur.length ) {
                                                retour = ( retour  && 0 < valeur.length );
                                        }
                                break;
                        case 'undefined' :
                        default :
                                retour = false;
                }
                if ( retour && comparer !== undefined ) {
                        var resultComparaison = ( comparer === valeur );
                        retour = ( sensComparaison ) ? resultComparaison : !resultComparaison ;
                }

                return retour;
        } else {
                // Un booléen est une valeur valable
                return true;
        }
}

// Lib hors objet

/*************************************
 *  Fonctions de Style et Affichage  *
 *      des éléments "spéciaux"      *
 *************************************/

// Logique d'affichage pour le input type=file
function inputFile() {
  // Initialisation des variables
  var $fileInput  = $( '.input-file' ),
      $button     = $( '.label-file' );
  // Action lorsque la "barre d'espace" ou "Entrée" est pressée
  $( '#charger-form' ).on( 'keydown', '.label-file', function( event ) {
    if ( event.keyCode == 13 || event.keyCode == 32 ) {
      $( '#' + $( this ).attr( 'for' ) + '.input-file' ).click();
    }
  });
}

// Style et affichage des list-checkboxes
function inputListCheckbox() {
  // On écoute le click sur une list-checkbox ('.selectBox')
  // à tout moment de son insertion dans le dom
  // _ S'assurer de bien viser la bonne list-checkbox
  // _ Au click sur un autre champ remballer la list-checkbox
  $( document ).click( function( event ) {
    var target = event.target;

    if ( !$( target ).is( '.overSelect' ) && 0 === $( target ).closest( '.checkboxes' ).length ) {
      $( '.checkboxes' ).each( function () {
        $( this ).addClass( 'hidden' );
      });
      $( '.selectBox select.focus', '#zone-appli' ).each( function() {
        $( this ).removeClass( 'focus' );
      });
    }
  });
  $( '#zone-appli' ).on( 'click' , '.selectBox' , function() {
    // afficher/cacher le volet des checkboxes et focus
    $( this ).next().toggleClass( 'hidden' );
    $( this ).find( 'select' ).toggleClass( 'focus' );

    // Cacher le volet des autres checkboxes et retirer leur focus
    var $checkboxes = $( this ).next(),
        count = $( '.checkboxes' ).length;

    for ( var i = 0; i < count; i++ ) {
      if ( $( '.checkboxes' )[i] !== $checkboxes[0] && !$checkboxes.hasClass( 'hidden' ) ) {
        var $otherListCheckboxes = $( '.checkboxes' )[i];
        if ( !$otherListCheckboxes.classList.contains( 'hidden' ) ) {
          $otherListCheckboxes.classList.add( 'hidden' );
        }
        if( $otherListCheckboxes.previousElementSibling.firstElementChild.classList.contains( 'focus' ) ) {
          $otherListCheckboxes.previousElementSibling.firstElementChild.classList.remove( 'focus' );
        }
      }
    }
  });
}

// Style et affichage des input type="range"
function inputRangeDisplayNumber() {
  $( 'input[type="range"]','#charger-form' ).each( function() {
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
  });
  $( '#top' ).on( 'input' , 'input[type="range"]' , function () {
    $( this ).siblings( '.range-live-value' ).text( $( this ).val() );
  });
  $( '#top' ).on( 'click', '#ajouter-obs', function() {
    $( '.range-live-value' ).each( function() {
      var $this = $( this );
      $this.text( '' );
    });
  });
}

// Activation/Desactivation et contenu de la modale Bootstrap
// https://getbootstrap.com/docs/3.3/javascript/#modals
function newFieldsHelpModal() {
  $( '#zone-appli' ).on( 'click' , '.help-button' , function ( event ) {
    var thisFieldKey = $( this ).data( 'key' ),
        fileMimeType = $( this ).data( 'mime-type' );

    // Titre
    $( '#help-modal-label' ).text( 'Aide pour : ' +  $( this ).data( 'name' ) );
    if( fileMimeType.match( 'image' ) ) {
      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
      // var extention = 'jpg';
      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + thisFieldKey + '.' + extention + '" style="max-width:100%" alt="' + thisFieldKey + '" />' );
    }
    // Sortie avec la touche escape
    $( '#help-modal' ).modal( { keyboard : true } );
    // Affichage
    $( '#help-modal' ).modal({ show: true });
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
    // Message dans la doc de bootstrap :
    // Due to how HTML5 defines its semantics,
    // the autofocus HTML attribute has no effect in Bootstrap modals.
    // To achieve the same effect, use some custom JavaScript
    $( '#help-modal' ).on( 'shown.bs.modal' , function () {
      $( '#myInput' ).trigger( 'focus' );
    })
    // Réinitialisation
    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
      $( '#help-modal-label' ).text();
      $( '#print_content' ).empty();
    })
  });
}

// Activation/Desactivation et contenu de la modale Bootstrap
// https://getbootstrap.com/docs/3.3/javascript/#modals
function projetHelpModale() {
  $( '#top' ).on ( 'click', '#info-button', function ( event ) {
    var fileMimeType = $( this ).data( 'mime-info' );

    // Titre
    $( '#help-modal-label' ).text( 'Aide du projet : ' +  $( '#titre-projet' ).text() );
    if( fileMimeType.match( 'image' ) ) {
      var extention = fileMimeType.replace( /(?:imag)?e\/?/g , '' );
      $( '#print_content' ).append( '<img src="' + CHEMIN_FICHIERS + 'info.' + extention + '" style="max-width:100%" alt="info projet" />' );
    }
    // Sortie avec la touche escape
    $( '#help-modal' ).modal( { keyboard : true } );
    // Affichage
    $( '#help-modal' ).modal({ show: true });
    // Remplacer l'autofocus qui ne fonctionne plus en HTML5
    // Message dans la doc de bootstrap :
    // Due to how HTML5 defines its semantics,
    // the autofocus HTML attribute has no effect in Bootstrap modals.
    // To achieve the same effect, use some custom JavaScript
    $( '#help-modal' ).on( 'shown.bs.modal' , function () {
      $( '#myInput' ).trigger( 'focus' );
    })
    // Réinitialisation
    $( '#help-modal' ).on( 'hidden.bs.modal' , function () {
      $( '#help-modal-label' ).text();
      $( '#print_content' ).empty();
    });

  });
}

// Faire apparaitre un champ text "Autre"
function onOtherOption() {
  const PREFIX = 'collect-other-';

  // Ajouter un champ texte pour "Autre"
  function optionAdd( otherId, $target, element, dataName ) {
    $target.after(
      '<div class="control-group">'+
        '<label'+
          ' for="' + otherId + '"'+
          ' class="' + otherId + '"'+
        '>'+
          'Autre option :'+
        '</label>'+
        '<input'+
          ' type="text"'+
          ' id="' + otherId + '"'+
          ' name="' + otherId + '"'+
          ' class="collect-other form-control"'+
          ' data-name="' + dataName + '"'+
          ' data-element="' + element + '"'+
        '>'+
      '</div>'
    );
    $( '#' + otherId ).focus();
  }

  // Supprimer un champ texte pour "Autre"
  function optionRemove( otherId ) {
    $( '.' + otherId + ', #' + otherId ).remove();
  }

  $( '.other', '#form-arbre' ).each( function() {
    if( $( this ).hasClass( 'is-select' ) ) {
      var dataName = $( this ).data( 'name' ),
          otherId  = PREFIX + dataName;

      // Insertion du champ "Autre" après les boutons
      optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName );
    } else if ( $( this ).is( ':checked' ) ) {
      var dataName = $( this ).data( 'name' ),
          otherId  = PREFIX + dataName,
          element = $( this ).data( 'element' );
      // Insertion du champ "Autre" après les boutons
      optionAdd( otherId, $( this ).parent( 'label' ), element, dataName );
    }
  });

  $( '#charger-form' ).on( 'change', '.select', function () {
    var dataName = $( this ).data( 'name' ),
        otherId  = PREFIX + dataName;

    if( 'other' === $( this ).val() ) {
        // Insertion du champ "Autre" après les boutons
        optionAdd( otherId, $( this ).parent( '.add-field-select' ), 'select', dataName );
      } else {
        // Suppression du champ autre
        optionRemove( otherId );
        $( this ).find( '.other' ).val( 'other' );
      }
  });

  $( '#charger-form' ).on( 'change', 'input[type=radio]', function () {
    var dataName = $( this ).data( 'name' ),
        otherId  = PREFIX + dataName;

    if( 'other' === $( this ).val() ) {
      // Insertion du champ "Autre" après les boutons
      optionAdd( otherId, $( this ).parent( 'label' ), 'radio', dataName );
    } else {
      // Suppression du champ autre
      optionRemove( otherId );
      $( this ).closest( '.radio' ).find( '.other' ).val( 'other' );
    }
  });

  $( '#charger-form' ).on( 'click', '.list-checkbox .other,.checkbox .other', function () {
    var dataName = $( this ).data( 'name' ),
        otherId  = PREFIX + dataName,
        element = $( this ).data( 'element' );

    if( $( this ).is( ':checked' ) ) {
        // Insertion du champ "Autre" après les boutons
        optionAdd( otherId, $( this ).parent( 'label' ), element, dataName );
      } else {
        // Suppression du champ autre
        optionRemove( otherId );
        $( this ).val( 'other' );
      }
  });
}

function collectOtherOption() {
  $( '#charger-form' ).on( 'change', '.collect-other', function () {
    var otherIdSuffix = $( this ).data( 'name' ).replace( '[]', '' );
    var element = $( this ).data( 'element' );

    if ( '' === $( this ).val() ){
      if ( 'select' === element ) {
        $( '#' + otherIdSuffix ).find( '.other' ).prop( 'selected', false ).val( 'other' );
      } else {
        $( '#other-' + otherIdSuffix ).prop( 'checked', false ).val( 'other' );
      }
      $( 'label.collect-other-' + otherIdSuffix ).remove();
      $( this ).remove();
    } else {
      if ( 'select' === element ) {
        $( '#' +  otherIdSuffix ).find( '.other' ).val( $( this ).val() );
        $( '#' +  otherIdSuffix ).val( $( this ).val() );
        $( '#' +  otherIdSuffix + ' option').not( '.other' ).prop( 'selected', false );
        $( '#' +  otherIdSuffix ).find( '.other' ).prop( 'selected', true );
      } else {
        if ( 'radio' === element ) {
          $( 'input[name=' + otherIdSuffix + ']' ).not( '#other-' + otherIdSuffix ).prop( 'checked', false );
        }
        $( '#other-' + otherIdSuffix ).val( $( this ).val() );
        $( '#other-' + otherIdSuffix ).prop( 'checked', true );
      }
    }
  });
}

/***************************
 *  Lancement des scripts  *
 ***************************/
const CHEMIN_FICHIERS = $( '#zone-appli' ).data('url-fichiers');

jQuery( document ).ready( function() {
  // Modale "aide" du projet
  projetHelpModale();
  // Affichage input file
  inputFile();
  // Affichage des List-checkbox
  inputListCheckbox();
  // Affichage des Range
  inputRangeDisplayNumber()
  // Modale "aide"
  newFieldsHelpModal();
  // Ajout/suppression d'un champ texte "Autre"
  onOtherOption();
  // Récupérer les données entrées dans "Autre"
  collectOtherOption();
});