Subversion Repositories eFlore/Applications.cel

Rev

Rev 3853 | Rev 3877 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

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