| New file |
|---|
| 0,0 → 1,1018 |
|---|
| import {WidgetsSaisiesASL} from './WidgetsSaisiesASL.js'; |
| import {valOk} from './Utils.js'; |
| |
| /** |
| * Constructeur ReleveASL par défaut |
| * S'applique au squelette apaforms.tpl.html |
| * Qui se charge dans apa.tpl.php |
| * Lors de la saisie du relevé et des arbres |
| */ |
| // ASL : APA, sTREETs, Lichen's Go! |
| export function ReleveASL(arbresProp) { |
| if ( valOk( arbresProp ) ) { |
| this.sujet = arbresProp.sujet; |
| this.tagImg = arbresProp.tagImg; |
| this.separationTagImg = arbresProp.separationTagImg; |
| this.tagImg = arbresProp.tagImg; |
| this.tagObs = arbresProp.tagObs; |
| this.separationTagObs = arbresProp.separationTagObs; |
| this.nomSciReferentiel = arbresProp.nomSciReferentiel; |
| this.referentielImpose = arbresProp.referentielImpose; |
| } |
| this.isTaxonListe = false; |
| this.numArbre = 0; |
| } |
| ReleveASL.prototype = new WidgetsSaisiesASL(); |
| |
| |
| /** |
| * Initialise le formulaire, les validateurs, les listes de complétion... |
| */ |
| ReleveASL.prototype.initForm = function() { |
| const idUtilisateur = $( '#id_utilisateur' ).val(); |
| |
| $('[type="date"]').prop('max', function(){ |
| return new Date().toJSON().split('T')[0]; |
| }); |
| if( valOk( idUtilisateur ) ) { |
| if ( valOk( $( '#releve-data' ).val() ) ) { |
| const datRuComun = $.parseJSON( $( '#dates-rues-communes' ).val() ), |
| releveDatas = $.parseJSON( $( '#releve-data' ).val() ); |
| |
| if ( !valOk( releveDatas[1] ) || -1 === datRuComun.indexOf( releveDatas[1]['date_rue_commune'] ) ) { |
| this.releveDatas = releveDatas; |
| if ( valOk( this.releveDatas[0].utilisateur, true, idUtilisateur ) ) { |
| $( '#releve-date' ).val( this.releveDatas[0].date ); |
| this.rechargerFormulaire(); |
| this.saisirArbres(); |
| $( '#bouton-list-releves' ) |
| .removeClass( 'hidden' ) |
| .on( 'click', function( event ) { |
| event.preventDefault(); |
| $( '#table-releves' ).removeClass( 'hidden' ); |
| $( this ).addClass( 'hidden' ); |
| }); |
| } |
| } |
| } |
| if ( valOk( $( '.charger-releve' ) ) ) { |
| const btnChargementForm = this.determinerBtnsChargementForm( '.' ); |
| // #releve-data est modifié, bouton dans #releves-utilisateur |
| this.btnsChargerForm( btnChargementForm ); |
| } |
| } |
| this.ajouterAutocompletionNoms(); |
| this.configurerFormValidator(); |
| this.definirReglesFormValidator(); |
| }; |
| |
| /** |
| * Initialise les écouteurs d'événements |
| */ |
| ReleveASL.prototype.initEvts = function() { |
| const lthis = this; |
| |
| // comportement du bouton nouveau releve |
| if ( valOk( $( '#id_utilisateur' ).val() ) ) { |
| // #releve-data est modifié, bouton dans #releves-utilisateur |
| this.btnsChargerForm( '#bouton-nouveau-releve' ); |
| } |
| // on location, initialisation de la géoloc |
| this.initEvtsGeoloc(); |
| // Sur téléchargement image |
| this.initEvtsFichier(); |
| |
| if ( 'tb_streets' !== this.projet ) { |
| // Gérer une option "aucune" sur plusieurs checkboxes |
| $( '#face-ombre input' ).on( 'click', function () { |
| if ( 'aucune' === $( this ).val() ) { |
| $( '#face-ombre input' ).not( '#aucune' ).prop( 'checked' , false ); |
| } else { |
| $( '#aucune' ).prop( 'checked' , false ); |
| } |
| }); |
| } |
| $( '#soumettre-releve' ).on( 'click', function( event ) { |
| event.preventDefault(); |
| lthis.saisirArbres(); |
| }); |
| // Création / Suppression / Transmission des obs |
| // Défilement des miniatures dans le résumé obs |
| this.initEvtsObs(); |
| |
| $( '#bloc-info-arbres' ).on( 'click', '.arbre-info', function ( event ) { |
| event.preventDefault(); |
| $( this ).addClass( 'disabled' ); |
| $( '.arbre-info' ).not( $( this ) ).removeClass( 'disabled' ); |
| |
| const numArbre = $( this ).data( 'arbre-info' ); |
| |
| lthis.chargerInfosArbre( numArbre ); |
| lthis.scrollFormTop( '#zone-arbres' ); |
| }); |
| // après avoir visualisé les champs d'un arbre, retour à la saisie |
| $( '#retour' ).on( 'click', function( event ) { |
| event.preventDefault(); |
| |
| const numArbre = lthis.numArbre + 1; |
| |
| // activation des champs et retour à la saisie |
| lthis.modeArbresBasculerActivation( false, numArbre ); |
| $( '#taxon' ) |
| .val('') |
| .removeData([ |
| 'value', |
| 'numNomSel', |
| 'nomRet', |
| 'numNomRet', |
| 'nt', |
| 'famille' |
| ]); |
| lthis.scrollFormTop( '#zone-arbres' ); |
| }); |
| // chargement plantes ou lichens |
| const btnChargementForm = this.determinerBtnsChargementForm( '#' ); |
| // #releve-data n'est pas modifié, bouton dans #charger-form |
| this.btnsChargerForm( btnChargementForm, false, false ); |
| // Alertes et aides |
| this.initEvtsAlertes(); |
| }; |
| |
| /** |
| * Recharge le formulaire relevé (étape 1) à partir des infos |
| * présentes dans l'input hidden '#releve-data' |
| */ |
| ReleveASL.prototype.rechargerFormulaire = function() { |
| const lthis = this; |
| |
| this.releveDatas = $.parseJSON( $( '#releve-data' ).val() ); |
| $.each( this.releveDatas[0], function( cle , valeur ) { |
| if ( 'zone-pietonne' === cle || 'pres-lampadaires' === cle ) { |
| $( 'input[name=' + cle + '][value=' + valeur + ']' , '#zone-observation' ).prop( 'checked', true ); |
| } else if ( valOk( $( '#' + cle ) ) ) { |
| $( '#' + cle ).val( valeur ); |
| } |
| }); |
| |
| if ( |
| valOk( $( '#geometry-releve' ).val() ) && |
| valOk( $( '#latitude-releve' ).val() ) && |
| valOk( $( '#longitude-releve' ).val() ) && |
| valOk( $( '#rue' ).val() ) && |
| valOk( $( '#commune-nom' ).val() ) |
| ) { |
| $( '#geoloc' ).addClass( 'hidden' ); |
| $( '#geoloc-datas' ).removeClass( 'hidden' ); |
| } |
| this.scrollFormTop( '#zone-observation', '#releve-date' ) |
| }; |
| |
| /** |
| * Recharge le formulaire étape arbres à partir des infos |
| * présentes dans l'input hidden '#releve-data' |
| */ |
| ReleveASL.prototype.chargerArbres = function() { |
| this.releveDatas = $.parseJSON( $( '#releve-data' ).val() ); |
| this.obsNbre = this.releveDatas.length - 1; |
| this.numArbre = parseInt( this.releveDatas[ this.obsNbre ]['num-arbre'] ) || this.obsNbre; |
| $( '.obs-nbre' ).text( this.obsNbre ); |
| $( '.obs-nbre' ).triggerHandler( 'changement' ); |
| $( '#arbre-nb' ).text( this.numArbre + 1 ); |
| |
| const infosArbre = { |
| releve : this.releveDatas[0], |
| obsNum : 0, |
| sujet : {} |
| }; |
| |
| for( let i = 1; i <= this.obsNbre; i ++ ) { |
| infosArbre.obsNum = i; |
| infosArbre.sujet = this.releveDatas[i]; |
| this.lienArbreInfo( infosArbre.sujet['num-arbre'] ); |
| this.afficherObs( infosArbre ); |
| this.stockerObsData( infosArbre, true ); |
| } |
| }; |
| |
| ReleveASL.prototype.lienArbreInfo = function( numArbre ) { |
| if ( numArbre == 1 ) { |
| $( '#bloc-info-arbres-title' ).removeClass( 'hidden' ); |
| } |
| $( '#bloc-info-arbres' ).append( |
| '<div'+ |
| ' id="arbre-info-' + numArbre + '"'+ |
| ' class="col-sm-8"'+ |
| '>'+ |
| '<a'+ |
| ' id="arbre-info-lien-' + numArbre + '"'+ |
| ' href=""'+ |
| ' class="arbre-info btn btn-outline-info btn-block mb-3"'+ |
| ' data-arbre-info="' + numArbre + '"'+ |
| '>'+ |
| '<i class="fas fa-info-circle"></i>'+ |
| ' Arbre ' + numArbre + |
| '</a>'+ |
| '</div>' |
| ); |
| }; |
| |
| // Ajouter Obs ****************************************************************/ |
| /** |
| * Etape formulaire avec transfert carto |
| */ |
| ReleveASL.prototype.saisirArbres = function() { |
| if ( this.validerReleve() ) { |
| $( '#soumettre-releve' ) |
| .addClass( 'disabled' ) |
| .attr( 'aria-disabled', true ) |
| .off(); |
| $( '#form-observation' ).find( 'input, textarea' ).prop( 'disabled', true ); |
| $( '#zone-arbres,#geoloc-datas,#bouton-nouveau-releve' ).removeClass( 'hidden' ); |
| this.confirmerSortie(); |
| if ( !valOk( $( '#releve-data' ).val() ) ) { |
| const releveDatasTmp = { |
| obs : { |
| ce_utilisateur : $( '#id_utilisateur' ).val(), |
| date_observation : $( '#releve-date' ).val(), |
| zone_geo : $( '#commune-nom' ).val(), |
| ce_zone_geo : $( '#commune-insee' ).val(), |
| pays : $( '#pays' ).val(), |
| commentaire : $( '#commentaires' ).val().trim() |
| }, |
| obsE : { |
| rue : $( '#rue' ).val(), |
| 'geometry-releve' : $( '#geometry-releve' ).val(), |
| 'latitude-releve' : $( '#latitude-releve' ).val(), |
| 'longitude-releve' : $( '#longitude-releve' ).val(), |
| 'altitude-releve' : $( '#altitude-releve' ).val() |
| } |
| }; |
| if ( 'tb_lichensgo' !== this.projet ) { |
| releveDatasTmp.obsE['zone-pietonne'] = $( '#zone-pietonne input:checked' ).val(); |
| releveDatasTmp.obsE['pres-lampadaires'] = $( '#pres-lampadaires input:checked' ).val(); |
| } |
| this.releveDatas = this.formaterReleveData(releveDatasTmp); |
| $( '#releve-data' ).val( JSON.stringify( this.releveDatas ) ); |
| this.numArbre = this.releveDatas.length - 1; |
| } else { |
| this.releveDatas = $.parseJSON( $( '#releve-data' ).val() ); |
| this.releveDatas[0].date = $( '#releve-date' ).val(); |
| if ( 'tb_lichensgo' !== this.projet ) { |
| this.releveDatas[0]['zone-pietonne'] = $( '#zone-pietonne input:checked' ).val(); |
| this.releveDatas[0]['pres-lampadaires'] = $( '#pres-lampadaires input:checked' ).val(); |
| } |
| this.releveDatas[0].commentaires = $( '#commentaires' ).val().trim(); |
| for ( let i = 1 ; i < this.releveDatas.length; i++ ) { |
| this.releveDatas[i]['date_rue_commune'] = ( |
| this.releveDatas[0].date + |
| this.releveDatas[0].rue + |
| this.releveDatas[0]['commune-nom'] |
| ); |
| } |
| $( '#releve-data' ).val( JSON.stringify( this.releveDatas ) ); |
| //charger les images |
| this.chargerImgEnregistrees(); |
| this.numArbre = $.parseJSON( $( '#releve-data' ).val() ).length - 1; |
| } |
| // transfert carto |
| // $cartoRemplacee = $( '#tb-geolocation' ), |
| // layer = 'osm', |
| // zoomInit = 18 |
| const donnesResetCarto = { |
| geometry : $( '#geometry-releve' ).val(), |
| latitude : $( '#latitude-releve' ).val(), |
| longitude : $( '#longitude-releve' ).val(), |
| suffixe : 'arbres', |
| layer : 'googleHybrid', |
| zoomInit : 18 |
| }; |
| |
| this.transfererCarto( donnesResetCarto ); |
| this.scrollFormTop( '#zone-arbres' ); |
| } |
| }; |
| |
| ReleveASL.prototype.chargerImgEnregistrees = function() { |
| const releveL = this.releveDatas.length; |
| let idArbre = 0, |
| last = false, |
| urlImgObs = '', |
| imgDatas = {}; |
| |
| for ( let i = 1; i < releveL; i++ ) { |
| idArbre = this.releveDatas[i]['id_observation']; |
| urlImgObs = this.serviceObsImgs + idArbre; |
| imgDatas = { |
| 'indice' : i, |
| 'idArbre' : idArbre, |
| 'numArbre' : this.releveDatas[i]['num-arbre'], |
| 'nomRet' : this.releveDatas[i].taxon.nomRet.replace( /\s/, '_' ), |
| 'releveDatas' : this.releveDatas |
| }; |
| |
| if ( ( releveL - 1) === i ) { |
| last = true; |
| } |
| this.chargerImgArbre( urlImgObs, imgDatas, last ); |
| } |
| }; |
| |
| ReleveASL.prototype.chargerImgArbre = function( urlImgObs, imgDatas, last ) { |
| const lthis = this; |
| |
| $.ajax({ |
| url: urlImgObs, |
| type: 'GET', |
| success: function( idsImg, textStatus, jqXHR ) { |
| if ( valOk( idsImg ) ) { |
| let urlImg = '', |
| images = []; |
| |
| idsImg = idsImg[parseInt( imgDatas.idArbre )]; |
| $.each( idsImg, function( i, idImg ) { |
| urlImg = lthis.serviceObsImgUrl.replace( '{id}', '000' + idImg ); |
| images[i] = { |
| nom : imgDatas.nomRet + '_arbre'+ imgDatas.numArbre +'_image' + ( i + 1 ), |
| src : urlImg, |
| b64 :[], |
| id : idImg |
| }; |
| }); |
| imgDatas.releveDatas[imgDatas.indice]['miniature-img'] = images; |
| $( '#releve-data' ).val( JSON.stringify( imgDatas.releveDatas ) ); |
| } else { |
| console.dir( lthis.msgTraduction( 'erreur-image' ) + ' : ' + lthis.msgTraduction( 'arbre' ) + ' ' + imgDatas.idArbre ); |
| } |
| }, |
| error: function( jqXHR, textStatus, errorThrown ) { |
| console.dir( lthis.msgTraduction( 'erreur-image' ) ); |
| } |
| }) |
| .always( function() { |
| if (last) { |
| lthis.chargerArbres(); |
| } |
| }); |
| }; |
| |
| /** |
| * Retourne un Array contenant les valeurs des champs |
| * dont les données seront transmises dans la table cel-obs-etendues |
| */ |
| ReleveASL.prototype.getObsChpSpecifiques = function( datasArbres ) { |
| const lthis = this, |
| retour = [], |
| champs = [ |
| 'rue', |
| 'geometry-releve', |
| 'latitude-releve', |
| 'longitude-releve', |
| 'altitude-releve' |
| ]; |
| |
| if ( 'tb_lichensgo' !== this.projet ) { |
| champs.push( |
| 'zone-pietonne', |
| 'pres-lampadaires', |
| 'surface-pied', |
| 'equipement-pied-arbre', |
| 'tassement', |
| 'dejections', |
| 'com-arbres' |
| ); |
| } |
| champs.push( |
| 'rue-arbres', |
| 'circonference' |
| ); |
| |
| let cleValeur = ''; |
| |
| $.each( champs, function( i , value ) { |
| cleValeur = ( 4 > i ) || ( 6 > i && 'tb_lichensgo' !== lthis.projet ) ? 'releve' : 'sujet'; |
| if ( valOk( datasArbres[cleValeur][value] ) ) { |
| retour.push({ cle : value, valeur : datasArbres[cleValeur][value] }); |
| } |
| }); |
| if ( 'tb_streets' !== this.projet ) { |
| const faceOmbreLength = datasArbres.sujet['face-ombre'].length; |
| let faceOmbre = ''; |
| |
| if ( 'string' === typeof datasArbres.sujet['face-ombre'] ) { |
| faceOmbre = datasArbres.sujet['face-ombre']; |
| } else { |
| $.each( datasArbres.sujet['face-ombre'], function( i ,value ) { |
| faceOmbre += value |
| if ( faceOmbreLength > ( i + 1 ) ) { |
| faceOmbre += ';'; |
| } |
| }); |
| } |
| retour.push({ cle : 'face-ombre', valeur : faceOmbre }); |
| } |
| retour.push({ cle : 'num_arbre' , valeur : datasArbres.obsNum }); |
| |
| let stockerImg = valOk( datasArbres.sujet['miniature-img'] ); |
| |
| if( stockerImg ) { |
| $.each( datasArbres.sujet['miniature-img'], function( i, paramsImg ) { |
| if( !paramsImg.hasOwnProperty( 'id' ) ) { |
| stockerImg = false; |
| } |
| return stockerImg; |
| }); |
| } |
| if( stockerImg ) { |
| retour.push({ cle : 'miniature-img' , valeur : JSON.stringify( datasArbres.sujet['miniature-img'] ) }); |
| } |
| return retour; |
| }; |
| |
| ReleveASL.prototype.chargerInfosArbre = function( numArbre ) { |
| const desactiverForm = ( parseInt( numArbre ) !== ( this.numArbre + 1 ) ); |
| |
| if ( desactiverForm ) { |
| const releveDatas = $.parseJSON( $( '#releve-data' ).val() ), |
| arbreDatas = releveDatas[numArbre]; |
| let taxon = {}, |
| imgHtml = ''; |
| |
| $( '#arbre-nb' ).text( numArbre + ' (visualisation)' ); |
| taxon.item = arbreDatas.taxon; |
| this.surAutocompletionTaxon( {}, taxon ); |
| |
| const selects = [ 'certitude' ]; |
| |
| if ( 'tb_lichensgo' !== this.projet ) { |
| selects.push( 'equipement-pied-arbre', 'tassement' ); |
| } |
| $.each( selects, function( i, value ) { |
| if( !valOk( arbreDatas[value] ) ) { |
| arbreDatas[value] = ''; |
| } |
| if ( $( this ).hasClass( 'other' ) && valOk( $( this ).val() ) ) { |
| $( this ).text( $( this ).val() ); |
| } |
| $( '#' + value + ' option' ).each( function() { |
| if ( arbreDatas[value] === $( this ).val() ) { |
| $( this ).prop( 'selected', true ); |
| } else { |
| $( this ).prop( 'selected', false ); |
| } |
| }); |
| }); |
| $( '#rue-arbres' ).val( arbreDatas['rue-arbres'] ); |
| $( '#geometry-arbres' ).val( arbreDatas['geometry-arbres'] ); |
| $( '#latitude-arbres' ).val( arbreDatas['latitude-arbres'] ); |
| $( '#longitude-arbres' ).val( arbreDatas['longitude-arbres'] ); |
| $( '#altitude-arbres' ).val( arbreDatas['altitude-arbres'] ); |
| // image |
| this.supprimerMiniatures(); |
| $.each( arbreDatas['miniature-img'], function( i, value ) { |
| imgHtml += |
| '<div class="miniature mb-3 mr-3">'+ |
| '<img class="miniature-img" class="miniature img-rounded" alt="' + value.nom + '" src="' + value.src + '"/>'+ |
| '</div>'; |
| }); |
| $( '#miniatures' ).append( imgHtml ); |
| $( '#circonference' ).val( arbreDatas.circonference ); |
| $( '#com-arbres' ).val( arbreDatas['com-arbres'] ); |
| if ( 'tb_lichensgo' !== this.projet ) { |
| $( '#surface-pied' ).val( arbreDatas['surface-pied'] ); |
| if ( undefined != arbreDatas.dejections ) { |
| $( '#dejections-oui' ).prop( 'checked', arbreDatas.dejections ); |
| $( '#dejections-non' ).prop( 'checked', !arbreDatas.dejections ); |
| } |
| } |
| if ( 'tb_streets' !== this.projet ) { |
| $( '#face-ombre input' ).each( function() { |
| if ( -1 < arbreDatas['face-ombre'].indexOf( $( this ).val() ) ) { |
| $( this ).prop( 'checked', true ); |
| } else { |
| $( this ).prop( 'checked', false ); |
| } |
| }); |
| } |
| } |
| this.modeArbresBasculerActivation( desactiverForm, numArbre ); |
| }; |
| |
| ReleveASL.prototype.modeArbresBasculerActivation = function( desactiver, numArbre = 0 ) { |
| let selecteurs = |
| '#taxon,'+ |
| '#certitude,'+ |
| '#geometry-arbres,'+ |
| '#latitude-arbres,'+ |
| '#longitude-arbres,'+ |
| '#rue-arbres,'+ |
| '#fichier,'+ |
| '#circonference,'+ |
| '#com-arbres,'+ |
| '#ajouter-obs'; |
| |
| if ( 'tb_lichensgo' !== this.projet ) { |
| selecteurs += |
| ',#equipement-pied-arbre,'+ |
| '#tassement,'+ |
| '#surface-pied'; |
| $( '#dejections' ).find( 'input' ).prop( 'disabled', desactiver ); |
| } |
| $( selecteurs ).prop( 'disabled', desactiver ); |
| if ( 'tb_streets' !== this.projet ) { |
| $( '#face-ombre' ).find( 'input' ).prop( 'disabled', desactiver ); |
| } |
| if ( desactiver ) { |
| $( '#geoloc-arbres,#bouton-fichier,#miniature-info' ).addClass( 'hidden' ); |
| $( '#geoloc-datas-arbres,#retour' ).removeClass( 'hidden' ); |
| } else { |
| // quand on change ou qu'on revient à la normale : |
| $( '#geoloc-arbres,#bouton-fichier,#miniature-info' ).removeClass( 'hidden' ); |
| $( '#geoloc-datas-arbres,#retour' ).addClass( 'hidden' ); |
| // reset carto |
| // typeLocalisation = 'point', |
| // zoomInit = 18 |
| const donnesResetCarto = { |
| cartoRemplacee : $( '#tb-geolocation-arbres' ), |
| geometry : $( '#geometry-releve' ).val(), |
| latitude : $( '#latitude-releve' ).val(), |
| longitude : $( '#longitude-releve' ).val(), |
| suffixe : 'arbres', |
| layer : 'googleHybrid', |
| zoomInit : 18 |
| }; |
| |
| this.transfererCarto( donnesResetCarto ); |
| // retour aux valeurs par defaut |
| selecteurs = '#certitude option'; |
| if ( 'tb_lichensgo' !== this.projet ) { |
| selecteurs += ',#equipement-pied-arbre option,#tassement option'; |
| $( '#equipement-pied-arbre .other' ).text( 'Autre' ).val( 'other' ); |
| $( '#collect-other-equipement-pied-arbre' ).closest( '.control-group' ).remove(); |
| $( '#dejections' ).find( 'input' ).prop( 'checked', false ); |
| } |
| if ( 'tb_streets' !== this.projet ) { |
| $( '#face-ombre' ).find( 'input' ).prop( 'checked', false ); |
| } |
| $( selecteurs ).each( function() { |
| if ( $( this ).hasClass( 'choisir' ) ) { |
| $( this ).prop( 'selected', true ); |
| } else { |
| $( this ).prop( 'selected', false ); |
| } |
| }); |
| this.supprimerMiniatures(); |
| selecteurs = |
| '#circonference,'+ |
| '#com-arbres,'+ |
| '#rue-arbres,'+ |
| '#geometry-arbres,'+ |
| '#latitude-arbres,'+ |
| '#longitude-arbres,'+ |
| '#certitude'; |
| if ( 'tb_lichensgo' !== this.projet ) { |
| selecteurs += |
| ',#equipement-pied-arbre,'+ |
| '#tassement,'+ |
| '#surface-pied'; |
| } |
| $( selecteurs ).val( '' ); |
| if( 0 < numArbre ) { |
| $( '#arbre-nb' ).text( numArbre ); |
| $( '#arbre-info-lien-' + numArbre ).addClass( 'disabled' ); |
| $( '.arbre-info' ).not( '#arbre-info-lien-' + numArbre ).removeClass( 'disabled' ); |
| } |
| } |
| }; |
| |
| /* |
| * Actualise l'id_observation ( id de l'obs en bdd ) |
| * à partir des données renvoyées par le service après transfert |
| */ |
| ReleveASL.prototype.actualiserReleveDataIdObs = function( obsId, id_observation ) { |
| this.releveData = $.parseJSON( $( '#releve-data' ).val() ); |
| this.releveData[obsId ]['id_observation'] = id_observation; |
| $( '#releve-data' ).val( JSON.stringify( this.releveData ) ); |
| }; |
| |
| // Géolocalisation *************************************************************/ |
| /** |
| * Fonction handler de l'évenement location du module tb-geoloc |
| */ |
| ReleveASL.prototype.locationHandler = function( location ) { |
| const lthis = this, |
| isGeolocArbres = ( 'tb-geolocation-arbres' === location.target.id ), |
| locDatas = location.originalEvent.detail; |
| |
| if ( valOk( locDatas ) ) { |
| console.dir( locDatas ); |
| |
| const rue = ( valOk( locDatas.osmRoad ) ) ? locDatas.osmRoad : '', |
| altitude = ( valOk( locDatas.elevation ) ) ? locDatas.elevation : '', |
| pays = ( valOk( locDatas.osmCountryCode ) ) ? locDatas.osmCountryCode.toUpperCase() : 'FR', |
| geometry = JSON.stringify( locDatas.geometry ); |
| let latitude = '', |
| longitude = '', |
| nomCommune = '', |
| communeInsee = ''; |
| |
| if ( valOk( locDatas.geometry.coordinates ) && |
| valOk( locDatas.centroid.coordinates ) && |
| valOk( locDatas.centroid.coordinates[0] ) && |
| valOk( locDatas.centroid.coordinates[1] ) |
| ) { |
| latitude = locDatas.centroid.coordinates[0]; |
| longitude = locDatas.centroid.coordinates[1]; |
| } |
| if ( !isGeolocArbres ) { |
| if ( valOk( locDatas.inseeData ) ) { |
| nomCommune = locDatas.inseeData.nom; |
| communeInsee = ( valOk( locDatas.inseeData.code ) ) ? locDatas.inseeData.code : ''; |
| } else if ( valOk( locDatas.locality ) ) { |
| nomCommune = locDatas.locality; |
| } else if ( valOk( locDatas.osmCounty ) ) { |
| nomCommune = locDatas.osmCounty; |
| } |
| $( '#rue' ).val( rue ); |
| $( '#geometry-releve' ).val( geometry ); |
| $( '#latitude-releve' ).val( latitude ); |
| $( '#longitude-releve' ).val( longitude ); |
| $( '#commune-nom' ).val( nomCommune ); |
| $( '#commune-insee' ).val( communeInsee ); |
| $( '#altitude-releve' ).val( altitude ); |
| $( '#pays' ).val( pays ); |
| $( '#latitude-releve, #longitude-releve' ).valid(); |
| if ( valOk( $( '#rue' ).val() ) && valOk( $( '#commune-nom' ).val() ) ) { |
| $( '#geoloc-error' ).addClass( 'hidden' ); |
| $( '#geoloc-datas' ).closest( '.control-group' ).removeClass( 'error' ); |
| } else { |
| $( '#rue,#commune-nom' ).prop( 'disabled', false ); |
| $( '#geoloc-datas' ) |
| .removeClass( 'hidden' ) |
| .closest( '.control-group' ) |
| .addClass( 'error' ); |
| $( '#geoloc-error' ).removeClass( 'hidden' ); |
| $( '#releve-date' ) |
| .removeClass( 'erreur' ) |
| .closest( '.control-group' ) |
| .removeClass( 'error' ) |
| .find( '#error-drc' ) |
| .remove(); |
| } |
| $( '#rue,#commune-nom' ).change( function() { |
| if ( valOk( $( '#rue' ).val() ) && valOk( $( '#commune-nom' ).val() ) ) { |
| $( '#geoloc-error' ).addClass( 'hidden' ); |
| } else { |
| $( '#geoloc-error' ).removeClass( 'hidden' ); |
| } |
| }); |
| } else { |
| $( '#rue-arbres' ).val( rue ); |
| $( '#geometry-arbres' ).val( geometry ); |
| $( '#latitude-arbres' ).val( latitude ); |
| $( '#longitude-arbres' ).val( longitude ); |
| $( '#altitude-arbres' ).val( altitude ); |
| $( '#latitude-arbres, #longitude-arbres' ).valid(); |
| if ( valOk( $( '#latitude-arbres' ).val() ) && valOk( $( '#longitude-arbres' ).val() ) ) { |
| $( '#geoloc-arbres' ).closest( '.control-group' ).removeClass( 'error' ); |
| } else { |
| $( '#geoloc-arbres' ).closest( '.control-group' ).addClass( 'error' ); |
| } |
| } |
| this.geoloc.map.setView([latitude, longitude], 18); |
| } else { |
| console.dir( 'Error location' ); |
| } |
| }; |
| |
| // Form Validator *************************************************************/ |
| ReleveASL.prototype.validerMinMax = function( element ) { |
| const minCond = parseFloat( element.value ) >= parseFloat( element.min ), |
| maxCond = parseFloat( element.value ) <= parseFloat( element.max ); |
| let mnMxCond = new Boolean(), |
| messageMnMx = 'La valeur entrée doit être', |
| returnMnMx = { cond : true , message : '' }; |
| |
| if ( |
| ( valOk( element.type, true, 'number' ) || valOk( element.type, true, 'range' ) ) && |
| ( valOk( element.min ) || valOk( element.max ) ) |
| ) { |
| |
| if ( element.min && element.max ) { |
| messageMnMx += ' comprise entre ' + element.min + ' et ' + element.max; |
| mnMxCond = ( minCond && maxCond ); |
| } else if ( element.min ) { |
| messageMnMx += ' supérieure à ' + element.min; |
| mnMxCond = minCond; |
| } else { |
| messageMnMx += ' inférieure à ' + element.max; |
| mnMxCond = maxCond; |
| } |
| returnMnMx.cond = mnMxCond; |
| returnMnMx.message = messageMnMx; |
| } |
| |
| return returnMnMx; |
| }; |
| |
| /** |
| * Valider date/rue/commune par rapport aux relevés précédents |
| */ |
| ReleveASL.prototype.validerDateRueCommune = function( valeurDate, valeurRue, valeurCmn ) { |
| let valide = true; |
| |
| if ( |
| valOk( $( '#dates-rues-communes' ).val() ) && |
| valOk( valeurDate ) && |
| valOk( valeurRue ) && |
| valOk( valeurCmn ) |
| ) { |
| const valsEltDRC = $.parseJSON( $( '#dates-rues-communes' ).val() ), |
| valeurDRC = valeurDate + valeurRue + valeurCmn; |
| |
| valide = ( -1 === valsEltDRC.indexOf( valeurDRC ) ); |
| |
| } |
| return valide; |
| }; |
| |
| /** |
| * FormValidator pour les champs date/rue/Commune |
| */ |
| ReleveASL.prototype.dateRueCommuneFormValidator = function() { |
| const dateValid = ( /^(?:[0-9]{4}-[0-9]{2}-[0-9]{2})|(?:[0-9]{2}\/[0-9]{2}\/[0-9]{4})$/.test( $( '#releve-date' ).val() ) ), |
| geolocValid = ( valOk( $( '#commune-nom' ).val() ) && valOk( $( '#rue' ).val() ) ), |
| errorDateRue = |
| '<span id="error-drc" class="error">'+ |
| this.msgTraduction( 'date-rue' )+ |
| '</span> '; |
| |
| if( this.validerDateRueCommune( $( '#releve-date' ).val(), $( '#rue' ).val(), $( '#commune-nom' ).val() ) ) { |
| $( '#releve-date' ) |
| .removeClass( 'erreur' ) |
| .closest( '.control-group' ) |
| .removeClass( 'error' ) |
| .find( '#error-drc' ) |
| .remove(); |
| if ( geolocValid ) { |
| $( '#geoloc' ) |
| .closest( '.control-group' ) |
| .removeClass( 'error' ); |
| } |
| } else { |
| $( '#releve-date' ) |
| .addClass( 'erreur' ) |
| .closest( '.control-group' ) |
| .addClass( 'error' ); |
| if ( !valOk( $( '#releve-date' ).closest( '.control-group' ).find( '#error-drc' ) ) ) { |
| $( '#releve-date' ).after( errorDateRue ); |
| } |
| $( '#geoloc' ).closest( '.control-group' ).addClass( 'error' ); |
| } |
| if ( dateValid ) { |
| $( '#releve-date' ).closest( '.control-group span.error' ).not( '#error-drc' ).remove(); |
| } |
| }; |
| |
| ReleveASL.prototype.definirReglesFormValidator = function() { |
| const lthis = this; |
| |
| $( '#form-observation' ).validate({ |
| rules : { |
| 'zone-pietonne' : { |
| required : function() { |
| return( 'tb_lichensgo' !== lthis.projet ); |
| }, |
| minlength : 1 |
| }, |
| 'latitude-releve' : { |
| required : true, |
| minlength : 1, |
| range : [-90, 90] |
| }, |
| 'longitude-releve' : { |
| required : true, |
| minlength : 1, |
| range : [-180, 180] |
| } |
| } |
| }); |
| $( 'input[type=date]' ).not( '#releve-date' ).on( 'input', function() { |
| $( this ).valid(); |
| }); |
| // validation date/rue/commune au démarage |
| this.dateRueCommuneFormValidator(); |
| // validation date/rue/commune sur event |
| $( '#releve-date,#rue,#commune-nom' ).on( 'change input focusout', this.dateRueCommuneFormValidator.bind( this ) ); |
| $( '#form-arbres' ).validate({ |
| rules : { |
| taxon : { |
| required : true, |
| minlength : 1 |
| }, |
| certitude : { |
| required : true, |
| minlength : 1 |
| }, |
| 'latitude-arbres' : { |
| required : true, |
| minlength : 1, |
| range : [-90, 90] |
| }, |
| 'longitude-arbres' : { |
| required : true, |
| minlength : 1, |
| range : [-180, 180] |
| } |
| } |
| }); |
| $( '#form-arbre-fs' ).validate({ |
| onkeyup : false, |
| onclick : false, |
| rules : { |
| circonference : { |
| required : true, |
| minlength : 1 |
| }, |
| 'surface-pied' : { |
| required : function() { |
| return( 'tb_lichensgo' !== lthis.projet ); |
| }, |
| minlength : 1, |
| 'minMaxOk' : true |
| }, |
| 'equipement-pied-arbre' : { |
| required : function() { |
| return( 'tb_lichensgo' !== lthis.projet ); |
| }, |
| minlength : 1 |
| }, |
| 'face-ombre' : { |
| required : function() { |
| return( 'tb_streets' !== lthis.projet ); |
| }, |
| minlength : 1 |
| } |
| } |
| }); |
| $( '#form-observateur' ).validate({ |
| rules : { |
| courriel : { |
| required : true, |
| minlength : 1, |
| email : true, |
| 'userEmailOk' : true |
| }, |
| mdp : { |
| required : true, |
| minlength : 1 |
| } |
| } |
| }); |
| if ( 'tb_lichensgo' !== this.projet ) { |
| $( '#equipement-pied-arbre' ).change( function() { |
| if ( valOk( $( this ).val(), false, 'other' ) ) { |
| $( this ) |
| .closest( '.control-group' ) |
| .removeClass( 'error' ) |
| .find( 'span.error' ) |
| .addClass( 'hidden' ); |
| } |
| }); |
| } |
| if ( 'tb_streets' !== this.projet ) { |
| $( '#face-ombre input' ).on( 'click', function() { |
| let oneIsChecked = false; |
| $( '#face-ombre input' ).each( function() { |
| if ( $( this ).is( ':checked' ) ) { |
| oneIsChecked = true; |
| return false; |
| } |
| }); |
| if ( oneIsChecked ) { |
| $( '#face-ombre.control-group' ) |
| .removeClass( 'error' ) |
| .find( 'span.error' ) |
| .addClass( 'hidden' ); |
| } else { |
| $( '#face-ombre.control-group' ) |
| .addClass( 'error' ) |
| .find( 'span.error' ) |
| .removeClass( 'hidden' ); |
| } |
| }); |
| } |
| $( '#connexion,#inscription,#oublie' ).on( 'click', function() { |
| $( '#tb-observateur .control-group' ).removeClass( 'error' ); |
| }); |
| }; |
| |
| /** |
| * Valide le formulaire Relevé (= étape 1) au click sur un bouton "enregistrer" |
| */ |
| ReleveASL.prototype.validerReleve = function() { |
| const observateur = ( $( '#form-observateur' ).valid() && $( '#courriel' ).valid() ), |
| obs = $( '#form-observation' ).valid(), |
| geoloc = ( |
| valOk( $( '#latitude-releve' ).val() ) && |
| valOk( $( '#longitude-releve' ).val() ) && |
| valOk( $( '#rue' ).val() ) && |
| valOk( $( '#commune-nom' ).val() ) |
| ); |
| let dateRue = true; |
| |
| if ( valOk( $( '#dates-rues-communes' ).val() ) ) { |
| dateRue = ( |
| valOk( $( '#releve-date' ).val() ) && |
| valOk( $( '#rue' ).val() ) && |
| this.validerDateRueCommune( $( '#releve-date' ).val(), $( '#rue' ).val(), $( '#commune-nom' ).val() ) |
| ); |
| } |
| if ( !obs ) { |
| this.scrollFormTop( '#zone-observation' ); |
| } |
| // panneau observateur |
| if ( observateur ) { |
| this.masquerPanneau( '#dialogue-utilisateur-non-identifie' ); |
| $( '#tb-observateur .control-group' ).removeClass( 'error' ); |
| } else { |
| this.afficherPanneau( '#dialogue-utilisateur-non-identifie' ); |
| $( '#tb-observateur .control-group' ).addClass( 'error' ); |
| } |
| if ( dateRue && geoloc ) { |
| this.masquerPanneau( '#dialogue-date-rue-ko' ); |
| $( '#geoloc-datas' ).closest( '.control-group' ).removeClass( 'error' ); |
| } else { |
| if ( |
| valOk( $( '#releve-date' ).val() ) && |
| valOk( $( '#rue' ).val() ) && |
| valOk( $( '#dates-rues-communes' ).val() ) |
| ) { |
| this.afficherPanneau( '#dialogue-date-rue-ko' ); |
| } |
| $( '#geoloc-datas' ).closest( '.control-group' ).addClass( 'error' ); |
| } |
| if ( |
| !valOk( $( '#releve-date' ).val() ) || |
| !valOk( $( '#rue' ).val() ) || |
| !valOk( $( '#dates-rues-communes' ).val() ) |
| ) { |
| this.masquerPanneau( '#dialogue-date-rue-ko' ); |
| } |
| if ( geoloc ) { |
| this.masquerPanneau( '#dialogue-geoloc-ko' ); |
| if ( dateRue ) { |
| $( '#geoloc' ).closest( '.control-group' ).removeClass( 'error' ); |
| } |
| } else { |
| this.afficherPanneau( '#dialogue-geoloc-ko' ); |
| $( '#geoloc' ).closest( '.control-group' ).addClass( 'error' ); |
| } |
| |
| return (observateur && obs && geoloc && dateRue); |
| }; |
| |
| /** |
| * Valide le formulaire Arbres (= étape 2) au click sur un bouton "suivant" |
| */ |
| ReleveASL.prototype.validerForm = function() { |
| const validerReleve = this.validerReleve(), |
| geoloc = ( |
| valOk( $( '#latitude-arbres' ).val() ) && |
| valOk( $( '#longitude-arbres' ).val() ) |
| ), |
| taxon = valOk( $( '#taxon' ).val() ); |
| let piedArbre = true; |
| |
| if ( 'tb_lichensgo' !== this.projet ) { |
| piedArbre = valOk( $( '#equipement-pied-arbre' ).val(), false, 'other' ); |
| if ( piedArbre ) { |
| $( '#equipement-pied-arbre' ) |
| .closest( '.control-group' ) |
| .removeClass( 'error' ) |
| .find( 'span.error' ) |
| .addClass( 'hidden' ); |
| } else { |
| $( '#equipement-pied-arbre' ) |
| .closest( '.control-group' ) |
| .addClass( 'error' ) |
| .find( 'span.error' ) |
| .removeClass( 'hidden' ); |
| } |
| } |
| |
| const obs = ( |
| $( '#form-arbres' ).valid() && |
| $( '#form-arbre-fs' ).valid() && |
| piedArbre |
| ); |
| |
| if ( geoloc ) { |
| this.masquerPanneau( '#dialogue-geoloc-ko' ); |
| $( '#geoloc-arbres' ).closest( '.control-group' ).removeClass( 'error' ); |
| } else { |
| this.afficherPanneau( '#dialogue-geoloc-ko' ); |
| $( '#geoloc-arbres' ).closest( '.control-group' ).addClass( 'error' ); |
| } |
| |
| return ( validerReleve && obs && geoloc && taxon ); |
| }; |