WebSVN – eFlore/Applications.cel – Diff – /branches/v3.01-serpe/widget/modules/saisie/squelettes/js/ReleveASL.js


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' );
			}
		}
 
	} 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 );
};
Subversion Repositories eFlore/Applications.cel

(root)/branches/v3.01-serpe/widget/modules/saisie/squelettes/js/ReleveASL.js – Rev 3857 → 3864

Rev 3857		Rev 3864
1	`import {WidgetsSaisiesASL} from './WidgetsSaisiesASL.js';`	1	`import {WidgetsSaisiesASL} from './WidgetsSaisiesASL.js';`
2	`import {valOk} from './Utils.js';`	2	`import {valOk} from './Utils.js';`
3		3
4	`/**`	4	`/**`
5	`* Constructeur ReleveASL par défaut`	5	`* Constructeur ReleveASL par défaut`
6	`* S'applique au squelette apaforms.tpl.html`	6	`* S'applique au squelette apaforms.tpl.html`
7	`* Qui se charge dans apa.tpl.php`	7	`* Qui se charge dans apa.tpl.php`
8	`* Lors de la saisie du relevé et des arbres`	8	`* Lors de la saisie du relevé et des arbres`
9	`*/`	9	`*/`
10	`// ASL : APA, sTREETs, Lichen's Go!`	10	`// ASL : APA, sTREETs, Lichen's Go!`
11	`export function ReleveASL(arbresProp) {`	11	`export function ReleveASL(arbresProp) {`
12	`if ( valOk( arbresProp ) ) {`	12	`if ( valOk( arbresProp ) ) {`
13	`this.sujet = arbresProp.sujet;`	13	`this.sujet = arbresProp.sujet;`
14	`this.tagImg = arbresProp.tagImg;`	14	`this.tagImg = arbresProp.tagImg;`
15	`this.separationTagImg = arbresProp.separationTagImg;`	15	`this.separationTagImg = arbresProp.separationTagImg;`
16	`this.tagImg = arbresProp.tagImg;`	16	`this.tagImg = arbresProp.tagImg;`
17	`this.tagObs = arbresProp.tagObs;`	17	`this.tagObs = arbresProp.tagObs;`
18	`this.separationTagObs = arbresProp.separationTagObs;`	18	`this.separationTagObs = arbresProp.separationTagObs;`
19	`this.nomSciReferentiel = arbresProp.nomSciReferentiel;`	19	`this.nomSciReferentiel = arbresProp.nomSciReferentiel;`
20	`this.referentielImpose = arbresProp.referentielImpose;`	20	`this.referentielImpose = arbresProp.referentielImpose;`
21	`}`	21	`}`
22	`this.isTaxonListe = false;`	22	`this.isTaxonListe = false;`
23	`this.numArbre = 0;`	23	`this.numArbre = 0;`
24	`}`	24	`}`
25	`ReleveASL.prototype = new WidgetsSaisiesASL();`	25	`ReleveASL.prototype = new WidgetsSaisiesASL();`
26		26
27		27
28	`/**`	28	`/**`
29	`* Initialise le formulaire, les validateurs, les listes de complétion...`	29	`* Initialise le formulaire, les validateurs, les listes de complétion...`
30	`*/`	30	`*/`
31	`ReleveASL.prototype.initForm = function() {`	31	`ReleveASL.prototype.initForm = function() {`
32	`const idUtilisateur = $( '#id_utilisateur' ).val();`	32	`const idUtilisateur = $( '#id_utilisateur' ).val();`
33		33
34	`$('[type="date"]').prop('max', function(){`	34	`$('[type="date"]').prop('max', function(){`
35	`return new Date().toJSON().split('T')[0];`	35	`return new Date().toJSON().split('T')[0];`
36	`});`	36	`});`
37	`if( valOk( idUtilisateur ) ) {`	37	`if( valOk( idUtilisateur ) ) {`
38	`if ( valOk( $( '#releve-data' ).val() ) ) {`	38	`if ( valOk( $( '#releve-data' ).val() ) ) {`
39	`const datRuComun = $.parseJSON( $( '#dates-rues-communes' ).val() ),`	39	`const datRuComun = $.parseJSON( $( '#dates-rues-communes' ).val() ),`
40	`releveDatas = $.parseJSON( $( '#releve-data' ).val() );`	40	`releveDatas = $.parseJSON( $( '#releve-data' ).val() );`