Subversion Repositories eFlore/Applications.cel

Rev

Rev 3877 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3844 idir 1
import {WidgetsSaisiesCommun,utils} from './WidgetsSaisiesCommun.js';
3899 idir 2
import {valOk,tryParseJson} from './Utils.js';
3844 idir 3
 
3638 delphine 4
/**
5
 * Constructeur WidgetSaisie par défaut
6
 */
3844 idir 7
function WidgetSaisie(  ) {
8
	if  ( valOk(widgetProp) ) {
9
		this.urlWidgets                        = widgetProp.urlWidgets;
10
		this.projet                            = widgetProp.projet;
11
		this.idProjet                          = widgetProp.idProjet;
12
		this.tagsMotsCles                      = widgetProp.tagsMotsCles;
13
		this.mode                              = widgetProp.mode;
14
		this.langue                            = widgetProp.langue;
15
		this.serviceAnnuaireIdUrl              = widgetProp.serviceAnnuaireIdUrl;
16
		this.serviceNomCommuneUrl              = widgetProp.serviceNomCommuneUrl;
17
		this.serviceNomCommuneUrlAlt           = widgetProp.serviceNomCommuneUrlAlt;
18
		this.debug                             = widgetProp.debug;
19
		this.html5                             = widgetProp.html5;
20
		this.serviceSaisieUrl                  = widgetProp.serviceSaisieUrl;
21
		this.serviceObsUrl                     = widgetProp.serviceObsUrl;
22
		this.chargementImageIconeUrl           = widgetProp.chargementImageIconeUrl;
23
		this.pasDePhotoIconeUrl                = widgetProp.pasDePhotoIconeUrl;
24
		this.autocompletionElementsNbre        = widgetProp.autocompletionElementsNbre;
25
		this.serviceAutocompletionNomSciUrl    = widgetProp.serviceAutocompletionNomSciUrl;
26
		this.serviceAutocompletionNomSciUrlTpl = widgetProp.serviceAutocompletionNomSciUrlTpl;
27
		this.dureeMessage                      = widgetProp.dureeMessage;
28
		this.obsMaxNbre                        = widgetProp.obsMaxNbre;
29
		this.tagImg                            = widgetProp.tagImg;
30
		this.tagObs                            = widgetProp.tagObs;
31
		this.obsId                             = widgetProp.obsId;
32
		this.nomSciReferentiel                 = widgetProp.nomSciReferentiel;
33
		this.especeImposee                     = widgetProp.especeImposee;
34
		this.infosEspeceImposee                = widgetProp.infosEspeceImposee;
35
		this.referentielImpose                 = widgetProp.referentielImpose;
36
		this.isTaxonListe                      = widgetProp.isTaxonListe;
3877 idir 37
		this.photoObligatoire                  = widgetProp.photoObligatoire;
3638 delphine 38
	}
39
	this.urlRacine            = window.location.origin;
40
	this.obsNbre              = 0;
41
	this.nbObsEnCours         = 1;
42
	this.totalObsATransmettre = 0;
43
	this.nbObsTransmises      = 0;
44
	this.observer             = null;
45
	this.isASL                = false;
3844 idir 46
	this.geoloc               = {};
3638 delphine 47
}
48
WidgetSaisie.prototype = new WidgetsSaisiesCommun();
49
 
50
/**
51
 * Initialise le formulaire, les validateurs, les listes de complétion...
52
 */
53
WidgetSaisie.prototype.initForm = function() {
54
	this.initFormConnection();
3844 idir 55
	if ( valOk( this.obsId ) ) {
3638 delphine 56
		this.chargerInfoObs();
57
	}
58
	if( this.isTaxonListe ) {
59
		this.initFormTaxonListe();
60
	} else {
61
		this.ajouterAutocompletionNoms();
62
	}
63
	// au rafraichissement de la page,
64
	// les input date semblent conserver la valeur entrée précedemment
65
	// c'est voulu après la création d'une obs mais pas quand la page est actualisée
66
	// Déjà tenté: onbeforeunload avec un location.reload(true) n'a pas permis de le faire
67
	$( 'input[type=date]' ).each( function () {
3844 idir 68
		( valOk( $( this ).data( 'default' ) ) ) ? $( this ).val( $( this ).data( 'default' ) ) : $( this ).val( '' );
3638 delphine 69
	});
70
	this.configurerFormValidator();
71
	this.definirReglesFormValidator();
72
 
73
	if( this.especeImposee ) {
74
		$( '#taxon' ).attr( 'disabled', 'disabled' );
75
		$( '#taxon-input-groupe' ).attr( 'title', '' );
76
		// Bricolage cracra pour avoir le nom retenu avec auteur (nom_retenu.libelle ne le mentionne pas)
3844 idir 77
		const infosEspeceImposee = $.parseJSON( this.infosEspeceImposee );
78
		let nomRetenuComplet   = infosEspeceImposee.nom_retenu_complet;
79
		const debutAnneRefBiblio = nomRetenuComplet.indexOf( ' [' );
80
 
3638 delphine 81
		if ( -1 !== debutAnneRefBiblio ) {
82
			nomRetenuComplet = nomRetenuComplet.substr( 0, debutAnneRefBiblio );
83
		}
84
		// fin bricolage cracra
3844 idir 85
		const infosAssociee = {
3638 delphine 86
			label : infosEspeceImposee.nom_sci_complet,
87
			value : infosEspeceImposee.nom_sci_complet,
88
			nt : infosEspeceImposee.num_taxonomique,
89
			nomSel : infosEspeceImposee.nom_sci,
90
			nomSelComplet : infosEspeceImposee.nom_sci_complet,
91
			numNomSel : infosEspeceImposee.id,
92
			nomRet : nomRetenuComplet,
93
			numNomRet : infosEspeceImposee['nom_retenu.id'],
94
			famille : infosEspeceImposee.famille,
95
			retenu : ( 'false' === infosEspeceImposee.retenu ) ? false : true
96
		};
97
		$( '#taxon' ).data( infosAssociee );
98
	}
99
};
100
 
101
/**
102
 * Initialise les écouteurs d'événements
103
 */
104
WidgetSaisie.prototype.initEvts = function() {
105
	// identité
106
	this.initEvtsConnection();
107
	// on location, initialisation de la géoloc
108
	this.initEvtsGeoloc();
109
	// Sur téléchargement image
110
	this.initEvtsFichier();
111
 
112
	$( '#referentiel' ).on( 'change', this.surChangementReferentiel.bind( this ) );
113
	// Création / Suppression / Transmission des obs
114
	// Défilement des miniatures dans le résumé obs
115
	this.initEvtsObs();
116
	// Alertes et aides
117
	this.initEvtsAlertes();
118
	// message avant de quitter le formulaire
119
	this.confirmerSortie();
120
};
121
 
122
// Identité Observateur par courriel
123
WidgetSaisie.prototype.requeterIdentiteCourriel = function() {
3844 idir 124
	const lthis = this,
125
		courriel    = $( '#courriel' ).val(),
126
		urlAnnuaire = this.serviceAnnuaireIdUrl + courriel;
3638 delphine 127
 
3844 idir 128
	if ( valOk( courriel ) ) {
3638 delphine 129
		$.ajax({
130
			url : urlAnnuaire,
131
			type : 'GET',
132
			success : function( data, textStatus, jqXHR ) {
133
				if ( lthis.debug ) {
134
					console.log( 'SUCCESS: ' + textStatus );
135
				}
3844 idir 136
				if ( valOk( data ) && valOk( data[courriel] ) ) {
137
					const infos = data[courriel];
3638 delphine 138
					lthis.surSuccesCompletionCourriel( infos, courriel );
139
				} else {
140
					lthis.surErreurCompletionCourriel();
141
				}
142
			},
143
			error : function( jqXHR, textStatus, errorThrown ) {
144
				if ( lthis.debug ) {
145
					console.log( 'ERREUR: '+ textStatus );
146
				}
147
				lthis.surErreurCompletionCourriel();
148
			},
149
			complete : function( jqXHR, textStatus ) {
150
				if ( lthis.debug ) {
151
					console.log( 'COMPLETE: '+ textStatus );
152
				}
153
			}
154
		});
155
	}
156
};
157
 
158
// se déclanche quand on choisit "Observation sans inscription" mais que le mail entré est incrit à Tela
159
WidgetSaisie.prototype.surSuccesCompletionCourriel = function( infos, courriel ) {
160
	if ( $( '#utilisateur-connecte' ).hasClass( 'hidden' ) ) {// si quelque chose a foiré après actualisation
3844 idir 161
		if ( !valOk( $( '#warning-identite' ) ) ) {
3638 delphine 162
			$( '#zone-courriel' ).before( '<p id="warning-identite" class="warning"><i class="fas fa-exclamation-triangle"></i> ' + this.msgTraduction( 'courriel-connu' ) + '</p>' );
163
		}
164
		$( '#inscription, #zone-prenom-nom, #zone-courriel-confirmation' ).addClass( 'hidden' );
165
		$( '#prenom, #nom, #courriel_confirmation' ).attr( 'disabled', 'disabled' );
166
		$( '.nav.control-group' ).addClass( 'error' );
167
	}
168
};
169
 
170
// se déclanche quand on choisit "Observation sans inscription" et qu'effectivement le mail n'est pas connu de Tela
171
WidgetSaisie.prototype.surErreurCompletionCourriel = function() {
172
	$( '#creation-compte, #zone-prenom-nom, #zone-courriel-confirmation' ).removeClass( 'hidden' );
173
	$( '#warning-identite' ).remove();
174
	$( '.nav.control-group' ).removeClass( 'error' );
175
	$( '#prenom, #nom, #courriel_confirmation' ).val( '' ).removeAttr( 'disabled' );
176
};
177
 
178
WidgetSaisie.prototype.testerLancementRequeteIdentite = function( event ) {
3844 idir 179
	if ( valOk( event.which, true, 13 ) ) {
3638 delphine 180
		this.requeterIdentiteCourriel();
181
		event.preventDefault();
182
		event.stopPropagation();
183
	}
184
};
185
 
186
WidgetSaisie.prototype.reduireVoletIdentite = function() {
187
	if ( $( '#form-observateur' ).valid() && $( '#courriel' ).valid() && $( '#courriel_confirmation' ).valid() ) {
188
		$( '#bouton-connexion, #creation-compte' ).addClass( 'hidden' );
189
		$( '#bienvenue').removeClass( 'hidden' );
190
		$( '#inscription, #zone-courriel' ).addClass( 'hidden' );
3844 idir 191
		if ( valOk( $( '#nom' ).val() ) && valOk( $( '#prenom' ).val() ) ) {
3638 delphine 192
			$( '#zone-prenom-nom' ).addClass( 'hidden' );
193
			$( '#bienvenue-prenom' ).text( ' ' + $( '#prenom' ).val() );
194
			$( '#bienvenue-nom' ).text( ' ' + $( '#nom' ).val() );
195
		} else {
196
			$( '#zone-prenom-nom' ).removeClass( 'hidden' );
197
			$( '#bienvenue-prenom,#bienvenue-nom' ).text( '' );
198
		}
199
	} else {
200
		$( '#bouton-connexion, #creation-compte' ).removeClass( 'hidden' );
201
		$( '#bienvenue').addClass( 'hidden' );
202
	}
203
};
204
 
205
 
206
WidgetSaisie.prototype.formaterNom = function() {
207
	$( '#nom' ).val( $( '#nom' ).val().toUpperCase() );
208
};
209
 
210
WidgetSaisie.prototype.formaterPrenom = function() {
3844 idir 211
	const prenom   = [],
3638 delphine 212
		mots       = $( '#prenom' ).val().split( ' ' ),
213
		motsLength = mots.length;
214
 
3844 idir 215
	for ( let i = 0; i < motsLength; i++ ) {
216
		let mot          = mots[i],
217
			motMajuscule = '';
218
 
3638 delphine 219
		if ( 0 <= mot.indexOf( '-' ) ) {
3844 idir 220
			const prenomCompose    = new Array(),
221
				motsComposes       = mot.split( '-' ),
3638 delphine 222
				motsComposesLength = motsComposes.length;
223
 
3844 idir 224
			for ( let j = 0; j < motsComposesLength; j++ ) {
225
				const motSimple    = motsComposes[j];
226
 
227
				motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
3638 delphine 228
				prenomCompose.push( motMajuscule );
229
			}
230
			prenom.push( prenomCompose.join( '-' ) );
231
		} else {
3844 idir 232
			motMajuscule = mot.charAt(0).toUpperCase() + mot.slice(1);
3638 delphine 233
			prenom.push( motMajuscule );
234
		}
235
	}
236
	$( '#prenom' ).val( prenom.join( ' ' ) );
237
};
238
 
239
WidgetSaisie.prototype.bloquerCopierCollerCourriel = function() {
240
	this.afficherPanneau( '#dialogue-bloquer-copier-coller' );
3844 idir 241
 
3638 delphine 242
	return false;
243
};
244
 
245
// Préchargement des infos-obs ************************************************/
246
WidgetSaisie.prototype.chargerInfoObs = function() {
3844 idir 247
	const lthis = this,
248
		urlObs  = this.serviceObsUrl + '/' + this.obsId;
3638 delphine 249
 
250
	$.ajax({
251
		url: urlObs,
252
		type: 'GET',
253
		success: function( data, textStatus, jqXHR ) {
3844 idir 254
			if ( valOk( data ) ) {
3638 delphine 255
				lthis.prechargerForm( data );
256
			} else {
257
				lthis.surErreurChargementInfosObs.bind( lthis );
258
			}
259
		},
260
		error: function( jqXHR, textStatus, errorThrown ) {
261
			lthis.surErreurChargementInfosObs();
262
		}
263
	});
264
};
265
 
266
// @TODO faire mieux que ça !
267
WidgetSaisie.prototype.surErreurChargementInfosObs = function() {
3844 idir 268
	utils.activerModale( this.msgTraduction( 'erreur-chargement' ) );
3638 delphine 269
};
270
 
271
WidgetSaisie.prototype.prechargerForm = function( data ) {
272
	$( '#milieu' ).val( data.milieu );
273
	$( '#commune-nom' ).text( data.zoneGeo );
274
	if( data.hasOwnProperty( 'codeZoneGeo' ) ) {
275
	  // TODO: trouver un moyen qui fonctionne lorsqu'on aura d'autres référentiels que INSEE
276
	  $( '#commune-insee' ).text( data.codeZoneGeo.replace( 'INSEE-C:', '' ) );
277
	}
278
 
279
	if( data.hasOwnProperty( 'latitude' ) && data.hasOwnProperty( 'longitude' ) ) {
280
		// $cartoRemplacee = $( '#tb-geolocation' ),
281
		// suffixe = '',
282
		// layer = 'osm',
283
		// zoomInit = 18
3844 idir 284
		const typeLocalisation = $( '#top' ).data( 'type-loc' ),
285
			donnesResetCarto   = {
3638 delphine 286
			latitude         : data.latitude,
287
			longitude        : data.longitude,
3844 idir 288
			typeLocalisation : typeLocalisation,
289
			zoom             : 18
3638 delphine 290
		};
291
		this.transfererCarto( donnesResetCarto );
292
	}
293
};
294
 
295
// Ajouter Obs ****************************************************************/
296
/**
297
 * Retourne un Array contenant les valeurs des champs étendus
298
 */
299
WidgetSaisie.prototype.getObsChpSpecifiques = function() {
3844 idir 300
	const lthis = this,
301
		champs    = [],
3638 delphine 302
		$thisForm = $( '#form-supp' ),
303
		elements  =
304
			'input[type=text]:not(.collect-other),'+
305
			'input[type=checkbox]:checked,'+
306
			'input[type=radio]:checked,'+
307
			'input[type=email],'+
308
			'input[type=number],'+
309
			'input[type=range],'+
310
			'input[type=date],'+
311
			'textarea,'+
312
			'.select',
3844 idir 313
		retour    = [];
3638 delphine 314
 
315
	$( elements, $thisForm ).each( function() {
3844 idir 316
		if ( valOk( $( this ).val() ) && ( valOk( $( this ).attr( 'name' ) ) || valOk( $( this ).data( 'name' ) ) ) ) {
317
			const valeur = $( this ).val(),
318
				cle    = ( valOk( $( this ).attr( 'name' ) ) ) ? $( this ).attr( 'name' ) : $( this ).data( 'name' );
3638 delphine 319
			if ( cle in champs ) {
320
				champs[cle] += ';' + valeur;
321
			} else {
322
				champs[cle] = valeur;
323
			}
324
		}
325
	});
3844 idir 326
	for ( let key in champs ) {
3638 delphine 327
		retour.push({ 'cle' : key , 'valeur' : champs[key] });
328
	}
3844 idir 329
	if ( valOk( $( '#coord-lineaire' ).val() ) ) {
3638 delphine 330
		retour.push({ 'cle' : 'coordonnees-rue-ou-lineaire' , 'valeur' : $( '#coord-lineaire' ).val() });
331
	}
332
	return retour;
333
};
334
 
335
WidgetSaisie.prototype.reinitialiserForm = function() {
336
	this.supprimerMiniatures();
337
	if( !this.especeImposee ) {
338
		$( '#taxon' ).val( '' );
339
		$( '#taxon' ).data( 'numNomSel', '' )
340
			.data( 'nomRet','' )
341
			.data( 'numNomRet', '' )
342
			.data( 'nt', '' )
343
			.data( 'famille', '' );
344
		if( this.isTaxonListe ) {
345
			$( '#taxon-liste' ).find( 'option' ).each( function() {
346
				if ( $( this ).hasClass( 'choisir' ) ) {
347
					$( this ).attr( 'selected', true );
348
				} else {
349
					$( this ).attr( 'selected', false );
350
				}
351
			});
352
			$( '#taxon-input-groupe' ).addClass( 'hidden' );
353
			$('#taxon-autre').val('');
354
		}
355
	}
3844 idir 356
	if ( valOk( $( '#form-supp' ) ) ) {
3638 delphine 357
		$( '#form-supp' ).validate().resetForm();
358
	}
359
};
360
 
3899 idir 361
WidgetSaisie.prototype.validateGeometry = function( geometry ) {
362
	const isLineString = !!geometry && 'LineString' === geometry.type,
363
		validateTypeOfCoordinates = coordinates => isLineString ? Array.isArray( coordinates ) : ['number','string'].includes( typeof coordinates );
364
 
365
	if ( !valOk( geometry.coordinates ) ) {
366
		return false;
367
	}
368
 
369
	let isValid = true;
370
 
371
	$.each(geometry.coordinates, (i, coordinates) => {
372
		if ( !validateTypeOfCoordinates( coordinates ) ) {
373
			isValid = false;
374
		}
375
	});
376
 
377
	const isValidLength = isLineString ? ( geometry.coordinates.length >= 2 ) : ( geometry.coordinates.length === 2 );
378
 
379
	return isValid && isValidLength;
380
}
381
 
3638 delphine 382
// Géolocalisation *************************************************************/
383
/**
384
 * Fonction handler de l'évenement location du module tb-geoloc
385
 */
386
WidgetSaisie.prototype.locationHandler = function( location ) {
3899 idir 387
	const locDatas          = location.originalEvent.detail,
388
		$geolocControlGroup = $( '#geoloc' ).closest( '.control-group' );
3638 delphine 389
 
3899 idir 390
	if ( !valOk( locDatas ) ) {
391
		console.warn( 'Error location' );
392
	} else {
393
		if ( !this.validateGeometry( locDatas.geometry ) ) {
394
			$geolocControlGroup.addClass( 'error' );
395
			$( '#geometry' ).val( '' );
396
		} else {
397
			console.log( locDatas );
3638 delphine 398
 
3899 idir 399
			const geometry = JSON.stringify( locDatas.geometry ),
400
				altitude   = ( valOk( locDatas.elevation ) ) ? locDatas.elevation : '',
401
				pays       = ( valOk( locDatas.osmCountryCode ) ) ? locDatas.osmCountryCode.toUpperCase() : 'FR',
402
				rue        = ( valOk( locDatas.osmRoad ) ) ? locDatas.osmRoad : '';
403
			let latitude      = '',
404
				longitude     = '',
405
				coordLineaire = '',
406
				nomCommune    = '',
407
				communeInsee  = '';
3844 idir 408
 
3899 idir 409
			if ( valOk( locDatas.geometry.coordinates ) &&
410
				valOk( locDatas.centroid.coordinates ) &&
411
				valOk( locDatas.centroid.coordinates[0] ) &&
412
				valOk( locDatas.centroid.coordinates[1] )
413
			) {
414
				longitude = locDatas.centroid.coordinates[0];
415
				latitude = locDatas.centroid.coordinates[1];
416
			}
417
			if ( valOk( locDatas.inseeData ) ) {
418
				nomCommune = locDatas.inseeData.nom;
419
				communeInsee = ( valOk( locDatas.inseeData.code ) ) ? locDatas.inseeData.code : '';
420
			} else if ( valOk( locDatas.locality ) ) {
421
				nomCommune = locDatas.locality;
422
			} else if ( valOk( locDatas.locality ) ) {
423
				nomCommune = locDatas.osmCounty;
424
			}
425
			$( '#geometry' ).val( geometry );
426
			$( '#coord-lineaire' ).val( coordLineaire );
427
			$( '#latitude' ).val( latitude );
428
			$( '#longitude' ).val( longitude );
429
			$( '#commune-nom' ).val( nomCommune );
430
			$( '#commune-insee' ).val( communeInsee );
431
			$( '#altitude' ).val( altitude );
432
			$( '#pays' ).val( pays );
433
			$( '#station' ).val( rue );
434
			$( '#latitude, #longitude' ).valid();
435
			$geolocControlGroup.toggleClass(
436
					'error',
437
					!valOk( $( '#latitude' ).val() ) || !valOk( $( '#longitude' ).val() )
438
				);
3638 delphine 439
		}
440
	}
441
}
442
 
443
// Form Validator *************************************************************/
444
WidgetSaisie.prototype.chpEtendusValidation = function() {
3844 idir 445
	const lthis = this,
446
		$thisForm = $( '#form-supp' ),
3638 delphine 447
		elements  =
448
			'.checkbox,'+
449
			'.radio,'+
450
			'.checkboxes,'+
451
			'.select,'+
452
			'textarea,'+
453
			'input[type=text]:not(.collect-other),'+
454
			'input[type=email],'+
455
			'input[type=number],'+
456
			'input[type=range],'+
457
			'input[type=date]',
458
		speFields = ['checkbox','radio','checkboxes','select'],
459
		spefieldsCount = speFields.length,
460
		chpSuppValidation = {
461
			rules : {},
462
			messages : {},
463
			minmax : []
464
		},
465
		errors = {},
3844 idir 466
		namesListFields = [];
467
	let picked = '';
3638 delphine 468
 
469
	$( elements, $thisForm ).each( function() {
3844 idir 470
		for( let fieldsClass = 0; spefieldsCount > fieldsClass; fieldsClass++ ) {
471
				const dataName = $( this ).data( 'name' );
3638 delphine 472
 
3844 idir 473
			if ( valOk( $( this ).attr( 'required' ) ) && $( this ).hasClass( speFields[fieldsClass] ) && !valOk( chpSuppValidation.rules[ dataName ] ) ) {
3638 delphine 474
				namesListFields.push( dataName );
475
				chpSuppValidation.rules[ dataName ] = { required : true };
3844 idir 476
				if ( valOk( $( '.other', $( this ) ) ) ) {
3638 delphine 477
					picked = ( 'select' === speFields[fieldsClass] ) ? ':selected' : ':checked';
478
					chpSuppValidation.rules[ 'collect-other-' + dataName.replace( '[]', '' ) ] = {
479
						required : '#other-' + dataName.replace( '[]', '' ) + picked,
480
						minlength: 1
481
					};
482
					chpSuppValidation.messages[ 'collect-other-' + dataName.replace( '[]', '' ) ] = false;
483
				}
484
				chpSuppValidation.rules[ dataName ]['listFields'] = true;
485
				chpSuppValidation.messages[ dataName ] = 'Ce champ est requis :\nVeuillez choisir une option, ou entrer une valeur autre valide.';
486
				errors[dataName] = '.' + speFields[fieldsClass];
487
			}
488
		}
3844 idir 489
		if ( valOk( $( this ).attr( 'name' ) ) && valOk ( $( this ).attr( 'required' ) ) && 0 > $.inArray( $( this ).attr( 'name' ) , namesListFields ) ) {
3638 delphine 490
			chpSuppValidation.rules[ $( this ).attr( 'name' ) ] = { required : true, minlength: 1 };
491
			if(
3844 idir 492
				( valOk( $( this ).attr( 'type' ), true, 'number' ) || valOk( $( this ).attr( 'type' ), true, 'range' ) ) &&
493
				( valOk( $( this )[0].min ) || valOk( $( this )[0].max ) )
3638 delphine 494
			) {
495
				chpSuppValidation.rules[ $( this ).attr('name') ]['minMaxOk'] = true;
496
				chpSuppValidation.messages[ $( this ).attr('name') ] = lthis.validerMinMax( $( this )[0] ).message;
497
			}
498
		}
499
	});
3844 idir 500
	if ( valOk( chpSuppValidation.rules ) ) {
3638 delphine 501
		$.each( chpSuppValidation.rules, function( key ) {
3844 idir 502
			if ( !valOk( chpSuppValidation.messages[key] ) ) {
3638 delphine 503
				chpSuppValidation.messages[key] = 'Ce champ est requis :\nVeuillez entrer une valeur valide.';
504
			}
505
		});
506
		if ( 0 < Object.keys( errors ).length ) {
507
			chpSuppValidation['errors'] = errors;
508
		}
509
	}
510
	return chpSuppValidation;
511
};
512
 
513
WidgetSaisie.prototype.validerMinMax = function( element ) {
3844 idir 514
	const minCond  = parseFloat( element.value ) >= parseFloat( element.min ),
515
		maxCond    = parseFloat( element.value ) <= parseFloat( element.max ),
516
		returnMnMx = { cond : true , message : '' };
517
	let mnMxCond    = new Boolean(),
518
		messageMnMx = 'La valeur entrée doit être';
3638 delphine 519
 
520
	if(
3844 idir 521
		( valOk( element.type, true, 'number' ) || valOk( element.type, true, 'range' ) ) &&
522
		( valOk( element.min ) || valOk( element.max ) )
3638 delphine 523
	) {
524
		if ( element.min && element.max ) {
525
			messageMnMx += ' comprise entre ' + element.min + ' et ' + element.max;
526
			mnMxCond     = ( minCond && maxCond );
527
		} else if ( element.min ) {
528
			messageMnMx += ' supérieure à ' + element.min;
529
			mnMxCond     = minCond;
530
		} else {
531
			messageMnMx += ' inférieure à ' + element.max;
532
			mnMxCond     = maxCond;
533
		}
534
		returnMnMx.cond    = mnMxCond;
535
		returnMnMx.message = messageMnMx;
536
	}
537
	return returnMnMx;
538
 
539
};
540
 
541
WidgetSaisie.prototype.definirReglesFormValidator = function() {
3844 idir 542
	const lthis = this,
543
		formSuppValidation = this.chpEtendusValidation();
3638 delphine 544
 
545
	$( '#form-supp' ).validate({
546
		onclick : function( element ) {
547
			if (
548
				(
3844 idir 549
					valOk( element.type, true, 'checkbox' ) ||
550
					valOk( element.type, true, 'radio' )
3638 delphine 551
				) &&
552
				(
3844 idir 553
					!valOk( $( '.' + $( element ).attr( 'name' ).replace( '[]', '' ) + ':checked' ) ) ||
554
					valOk( $( '.' + $( element ).attr( 'name' ).replace( '[]', '' ) + ':not(.other):checked' ) ) ||
555
					!valOk( $( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ) ) ||
3638 delphine 556
					$( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ).is( ':checked' ) ||
557
					(
558
						$( '#other-' + $( element ).attr( 'name' ).replace( '[]', '' ) ).is( ':checked' ) &&
559
						$( element ).closest( '.control-group' ).hasClass('error')
560
					)
561
				)
562
			) {
563
				$( element ).valid();
564
				if ( $( element ).valid() ) {
565
					$( element ).closest( '.control-group' ).removeClass( 'error' );
566
					$( element ).next( $( 'span.error' ) ).remove();
567
				} else {
568
					$( element ).closest( '.control-group' ).addClass( 'error' );
569
				}
570
			}
571
			return false;
572
		},
573
		rules : formSuppValidation.rules,
574
		messages : formSuppValidation.messages,
575
		errorPlacement : function( error , element ) {
576
			if ( 0 < Object.keys( formSuppValidation.errors ).length ) {
3844 idir 577
				const errorsKeys = Object.keys( formSuppValidation.errors );
578
				let thisKey    = '',
3638 delphine 579
					errorsFlag = true;
3844 idir 580
 
581
				for ( let i = 0 ; i < errorsKeys.length ; i++ ) {
3638 delphine 582
					thisKey = errorsKeys[i];
583
					if( $( element ).attr( 'name' ) === thisKey ) {
584
						$( formSuppValidation.errors[thisKey] ).append( error );
585
						errorsFlag = false;
586
					}
587
				}
588
				if ( errorsFlag ) {
589
					error.insertAfter( element );
590
				}
591
			} else {
592
				error.insertAfter( element );
593
			}
594
		}
595
	});
596
	$( '#form-supp .select' ).change( function() {
597
		$( this ).valid();
598
	});
599
	$( 'input[type=date]' ).on( 'input', function() {
600
		$( this ).valid();
601
	});
3851 idir 602
	// Validation taxon
603
	// et gestion des messages d'erreur taxon et images en fonction de la certitude
604
	$( '#taxon, #certitude' ).on( 'change', function() {
605
		lthis.validerTaxonRequis( valOk( $( '#taxon' ).val() ) );
3638 delphine 606
	});
607
	// Validation miniatures avec MutationObserver
608
	this.surPresenceAbsenceMiniature();
609
	$( '#form-observation' ).validate({
610
		rules : {
611
			date_releve : {
612
				required : true,
613
				'dateCel' : true
614
			},
615
			latitude : {
616
				required : true,
617
				minlength : 1,
618
				range : [-90, 90]
619
			},
620
			longitude : {
621
				required : true,
622
				minlength : 1,
623
				range : [-180, 180]
624
			}
625
		}
626
	});
627
	$( '#form-observateur' ).validate({
628
		rules : {
629
			courriel : {
630
				required : true,
631
				email : true,
632
				'userEmailOk' : true
633
			},
634
			courriel_confirmation : {
635
				required : true,
636
				equalTo : '#courriel'
637
			}
638
		}
639
	});
640
	$( '#connexion,#inscription,#bouton-anonyme' ).on( 'click', function( event ) {
641
		$( '.nav.control-group' ).removeClass( 'error' );
642
	});
643
};
644
 
3844 idir 645
 
3851 idir 646
WidgetSaisie.prototype.validerCertitudeTaxonImage = function( hasTaxon = false, hasImages = false ) {
3877 idir 647
	const isCertain = 'certain' === $( '#certitude' ).val();
3899 idir 648
	let isvalid = true ;
3877 idir 649
 
650
	if ( this.photoObligatoire || !isCertain ) {
3899 idir 651
		isvalid = this.validerImageRequise( hasImages );
3851 idir 652
	}
3877 idir 653
	if ( isCertain ) {
3899 idir 654
		isvalid &= this.validerTaxonRequis( hasTaxon );
3877 idir 655
	}
656
 
3899 idir 657
	return isvalid;
3851 idir 658
};
659
 
660
WidgetSaisie.prototype.validerTaxonRequis = function( hasTaxon = false ) {
661
	const taxonEstRequis = 'certain' === $( '#certitude' ).val();
662
 
3877 idir 663
	if ( !this.photoObligatoire ) {
664
		$( '#photos-conteneur').removeClass( 'error' )
665
			.find( 'span.error' ).hide();
666
	}
3851 idir 667
 
668
	if ( !hasTaxon && taxonEstRequis ) {
669
		this.afficherPanneau( '#dialogue-taxon-or-image' );
670
		$( '#bloc-taxon' ).addClass( 'error' )
671
			.find( 'span.error' ).show();
672
	} else {
3638 delphine 673
		this.masquerPanneau( '#dialogue-taxon-or-image' );
674
		$( '#bloc-taxon' ).removeClass( 'error' )
675
			.find( 'span.error' ).hide();
3851 idir 676
	}
677
 
678
	if ( taxonEstRequis ) {
679
		return hasTaxon;
680
	}
681
};
682
 
683
WidgetSaisie.prototype.validerImageRequise = function( hasImages = false ) {
684
	$( '#bloc-taxon' ).removeClass( 'error' )
685
			.find( 'span.error' ).hide();
686
 
687
	if ( hasImages ) {
688
		this.masquerPanneau( '#dialogue-taxon-or-image' );
3877 idir 689
		this.masquerPanneau( '#dialogue-image-requise' );
3638 delphine 690
		$( '#fichier' ).parent( 'label.label-file' ).removeClass( 'error' );
691
		$( '#photos-conteneur').removeClass( 'error' ).find( 'span.error' ).hide();
692
	} else {
3877 idir 693
		if ( this.photoObligatoire ) {
694
			this.afficherPanneau( '#dialogue-image-requise' );
695
		} else {
696
			this.afficherPanneau( '#dialogue-taxon-or-image' );
697
		}
3638 delphine 698
		$( '#fichier' ).parent( 'label.label-file' ).addClass( 'error' );
699
		$( '#photos-conteneur').addClass( 'error' ).find( 'span.error' ).show();
700
	}
3851 idir 701
	return hasImages;
3638 delphine 702
};
703
 
704
WidgetSaisie.prototype.surPresenceAbsenceMiniature = function() {
705
	const lthis = this;
706
	// voir : https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/disconnect
707
	// Selectionne le noeud dont les mutations seront observées
3844 idir 708
	const targetNode = document.getElementById( 'miniatures' );
3638 delphine 709
	// Fonction callback à éxécuter quand une mutation est observée
3844 idir 710
	const callback = mutationsList => {
711
		for( let mutation of mutationsList ) {
3851 idir 712
			lthis.validerCertitudeTaxonImage(
713
				valOk( $( '#taxon' ).val() ),
714
 
715
			);
3638 delphine 716
		}
717
	};
718
	// Créé une instance de l'observateur lié à la fonction de callback
719
	this.observer = new MutationObserver( callback );
720
	// Commence à observer le noeud cible pour les mutations précédemment configurées
721
	this.observer.observe( targetNode, { childList: true } );
722
};
723
 
724
WidgetSaisie.prototype.validerForm = function() {
3899 idir 725
	const observateur  = ( $( '#form-observateur' ).valid() && $( '#courriel' ).valid() && $( '#courriel_confirmation' ).valid() ),
726
		obs            = $( '#form-observation' ).valid(),
727
		parsedGeometry = tryParseJson( $( '#geometry' ).val() ),
728
		geoloc         = this.validateGeometry( parsedGeometry ) && ( valOk( $( '#latitude' ).val() ) && valOk( $( '#longitude' ).val() ) ) ,
3844 idir 729
		// validation et panneau taxon/images
3851 idir 730
		certitudeTaxonImage  = this.validerCertitudeTaxonImage(
731
			valOk( $( '#taxon' ).val() ),
732
			valOk( $( '#miniatures .miniature' ) )
733
		);
3844 idir 734
	let chpsSupp = true;
3638 delphine 735
 
3844 idir 736
	if ( valOk( $( '#form-supp' ) ) ) {
3638 delphine 737
		chpsSupp = ( function () {
3844 idir 738
			let otherFlag = $( '#form-supp' ).valid();
739
 
740
			if( valOk( $( '.other', $( '#form-supp' ) ) ) ) {
3638 delphine 741
				$( '.other', $( '#form-supp' ) ).each( function() {
3844 idir 742
					const picked = ( $( this ).data( 'element' ) !== 'select' ) ? ':checked' : ':selected';
743
 
744
						if ( $( this ).is( picked ) && valOk( $( this ).val(), true, 'other' ) ) {
3638 delphine 745
							otherFlag = false;
746
						}
747
				});
748
			}
3844 idir 749
 
3638 delphine 750
			return otherFlag;
751
		})();
752
	}
753
	// panneau geoloc
754
	if ( geoloc ) {
755
		this.masquerPanneau( '#dialogue-geoloc-ko' );
756
		$( '#geoloc-datas' ).closest( '.control-group' ).removeClass( 'error' );
757
	} else{
758
		this.afficherPanneau( '#dialogue-geoloc-ko' );
759
		$( '#geoloc-datas' ).closest( '.control-group' ).addClass( 'error' );
760
	}
761
	// panneau observateur
762
	if ( observateur ) {
763
		this.masquerPanneau( '#dialogue-utilisateur-non-identifie' );
764
		$( '.nav.control-group' ).removeClass( 'error' );
765
	} else {
766
		this.afficherPanneau( '#dialogue-utilisateur-non-identifie' );
767
		$( '.nav.control-group' ).addClass( 'error' );
768
	}
3851 idir 769
	return ( observateur && obs && geoloc && certitudeTaxonImage && chpsSupp );
3638 delphine 770
};
771
 
772
// Referentiel ****************************************************************/
773
// N'est pas utilisé en cas de taxon-liste
774
WidgetSaisie.prototype.surChangementReferentiel = function() {
775
	this.nomSciReferentiel = $( '#referentiel' ).val();
776
	//réinitialise taxon.val
777
	$( '#taxon' ).val( '' );
778
	$( '#taxon' ).data( 'numNomSel', '' );
779
};
3844 idir 780
 
781
 
782
$( document ).ready( function() {
783
	const widget = new WidgetSaisie();
784
	widget.init();
785
	// Fonctions de Style et Affichage des éléments "spéciaux"
786
	utils.init();
787
});