Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
3025 delphine 1
// Héritage !!
3052 mathias 2
function WidgetSaisieBellesdemarue(langue) {
3049 mathias 3
	this.taxons = {}; // utile ?
3052 mathias 4
	this.langue = langue || "fr";
3025 delphine 5
}
6
WidgetSaisieBellesdemarue.prototype = new WidgetSaisie();
7
 
8
//surcharge
9
WidgetSaisieBellesdemarue.prototype.initialiserGoogleMap = function() {
3046 mathias 10
	// centrage
3025 delphine 11
	this.latLng = new google.maps.LatLng(50.8504500, 4.3487800);// Bruxelles par défaut
12
 
13
	var options = {
14
			zoom: 11, // avant : 16
15
			center: this.latLng,
16
			mapTypeId: google.maps.MapTypeId.HYBRID,
17
			mapTypeControlOptions: {
18
				mapTypeIds: ['OSM',
19
					google.maps.MapTypeId.ROADMAP,
20
					google.maps.MapTypeId.HYBRID,
21
					google.maps.MapTypeId.SATELLITE,
22
					google.maps.MapTypeId.TERRAIN]}
23
		};
24
 
25
	// Ajout de la couche OSM à la carte
26
	osmMapType = new google.maps.ImageMapType({
27
		getTileUrl: function(coord, zoom) {
28
			return 'http://tile.openstreetmap.org/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
29
		},
30
		tileSize: new google.maps.Size(256, 256),
31
		isPng: true,
32
		alt: 'OpenStreetMap',
33
		name: 'OSM',
34
		maxZoom: 19
35
	});
36
 
37
	// Création de la carte Google
38
	this.map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas
39
	this.map.mapTypes.set('OSM', osmMapType);
40
 
41
	// Création du Geocoder
42
	this.geocoder = new google.maps.Geocoder();
43
 
44
	// Marqueur google draggable
45
	this.marker = new google.maps.Marker({
46
		map: this.map,
47
		draggable: true,
48
		title: 'Ma station',
49
		icon: this.googleMapMarqueurUrl,
50
		position: this.latLng
51
	});
52
 
53
	this.initialiserMarker(this.latLng);
54
 
55
	// intéraction carte
56
	$("#geolocaliser").on('click', this.geolocaliser.bind(this));
57
	google.maps.event.addListener(this.marker, 'dragend', this.surDeplacementMarker.bind(this));
58
	google.maps.event.addListener(this.map, 'click', this.surClickDansCarte.bind(this));
59
};
60
 
61
//surcharge
62
WidgetSaisieBellesdemarue.prototype.initForm = function() {
63
	// super() à la main - toute autre manière de faire est über-komplex
64
	WidgetSaisie.prototype.initForm.call(this);
65
 
66
	this.surChangementTaxonListe();
67
	$('#taxon-liste').on('change', this.surChangementTaxonListe);
68
	if (this.debug) {
69
		console.log('Selected taxon:'+$('#taxon-liste option:selected').val());
70
	}
3048 mathias 71
 
72
	// vidage du champ de recherche Google Maps
73
	$('#carte-recherche').val('');
74
 
75
	// vidage du taxon précédemment saisi avec l'autocomplétion, sans quoi on
76
	// perd son nn
77
	$('#taxon').val('');
78
	$('#taxon').data('numNomSel', ''); // et on vide le nn précédent
79
	this.surChangementValeurTaxon();
3025 delphine 80
	$('#taxon-liste').on('blur', this.surChangementValeurTaxon);
81
	$('#taxon').on('blur', this.surChangementValeurTaxon);
3046 mathias 82
 
83
	this.surChangementMilieuListe();
84
	$('#milieu').on('change', this.surChangementMilieuListe);
3025 delphine 85
};
86
 
87
//surcharge
88
WidgetSaisieBellesdemarue.prototype.initEvts = function() {
89
	var lthis = this;
90
	// super() à la main - toute autre manière de faire est über-komplex
91
	WidgetSaisie.prototype.initEvts.call(this);
92
 
93
	$('.dropdown-menu input, .dropdown-menu label').on('click', function(event) {
94
		event.stopPropagation();
95
	});
96
	$('#fichier').off(); // elever l'écouteur d'événements de base
97
	$('#fichier').on('click change', function(event) {
98
		if ($(this).val().length > 0) {
99
			arreter(event);
100
			var options = {
101
				success: lthis.afficherMiniature.bind(lthis), // post-submit callback
102
				dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)
103
				resetForm: true // reset the form after successful submit
104
			};
105
			$('#miniature').append(
106
				'<img id="miniature-chargement" class="miniature" alt="chargement" src="'+ this.chargementImageIconeUrl +'"/>');
107
			$('#ajouter-obs').attr('disabled', 'disabled');
108
			if (lthis.verifierFormat($(this).val())) {
109
				$('#form-upload').ajaxSubmit(options);
110
			} else {
111
				$('#form-upload')[0].reset();
112
				window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+	$('#fichier').attr('accept'));
113
			}
114
			return false;
115
		}
116
	});
117
 
118
	$('.cb-milieux').on('click', function(event) {
119
		$(this).valid();
120
		event.stopPropagation();
121
	});
122
 
123
	// Défilement des photos
124
	$('body').on('click', '.defilement-control-zone', function(event) {
125
		lthis.defilerMiniatures($(this));
126
	});
127
	$('body').on('mouseover', '.defilement-control-zone', function(event) {
128
		$('.defilement-control', this).removeClass('hidden');
129
	});
130
	$('body').on('mouseout', '.defilement-control-zone', function(event) {
131
		$('.defilement-control', this).addClass('hidden');
132
	});
133
 
134
	$('#photo-placeholder').click(function(event) {
135
		$('#fichier').click();
136
	});
137
	$('#geolocaliser').on('click', this.geolocaliser.bind(this));
138
 
139
};
140
 
141
// surcharge
142
WidgetSaisieBellesdemarue.prototype.configurerFormValidator = function() {
143
	$.validator.addMethod(
144
		'dateCel',
145
		function (value, element) {
146
			return value == '' || (/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{4}$/.test(value));
147
		},
148
		'Format : jj/mm/aaaa. Date incomplète, utiliser 0, exemple : 00/12/2011.');
149
 
150
	$.extend($.validator.defaults, {
151
		ignore: [],// Forcer Jquery Validate à examiner les éléments avec en display:none;
152
		highlight: function(element) {
153
			$(element).closest('.control-group').removeClass('success').addClass('error');
154
		},
155
		success: function(element) {
156
			element.text('OK!').addClass('valid');
157
			element.closest('.control-group').removeClass('error').addClass('success');
158
 
159
			if (element.attr('id') == 'taxon' && $('#taxon').val() != '') {
160
				// Si le taxon n'est pas lié au référentiel, on vide le data associé
161
				if ($('#taxon').data('value') != $('#taxon').val()) {
162
					$('#taxon').data('numNomSel', '');
163
					$('#taxon').data('nomRet', '');
164
					$('#taxon').data('numNomRet', '');
165
					$('#taxon').data('nt', '');
166
					$('#taxon').data('famille', '');
167
				}
168
			}
169
		}
170
	});
171
};
172
 
173
// surcharge
174
WidgetSaisieBellesdemarue.prototype.definirReglesFormValidator = function() {
175
	$('#form-observateur').validate({
176
		rules: {
177
			courriel: {
178
				required: true,
179
				email: true},
180
			courriel_confirmation: {
181
				equalTo: '#courriel'},
182
			prenom: {
183
				required: true},
184
			nom: {
185
				required: true}
186
		}
187
	});
188
	$('#form-obs').validate({
189
		rules: {
190
			latitude : {
191
				required: true,
3046 mathias 192
				range: [-90, 90]
193
			},
3025 delphine 194
			longitude: {
195
				required: true,
3046 mathias 196
				range: [-180, 180]
197
			},
3025 delphine 198
			date: {
199
				required: true,
3046 mathias 200
				'dateCel' : true
201
			},
3025 delphine 202
			'taxon-liste': {
3046 mathias 203
				required: true
204
			},
205
			milieu: {
3025 delphine 206
				required: true,
3046 mathias 207
				minlength: 1
208
			},
209
			certitude: {
210
				required: true
211
			}
3025 delphine 212
		},
213
		errorPlacement: function(error, element) {
214
			if (element.attr('name') == 'date') {
215
				element.parent('.input-prepend').after(error);
3046 mathias 216
			} else if (element.attr('name') == 'certitude') {
217
				error.insertAfter('#certitude-controls');
3047 mathias 218
			} else if (element.attr('name') == 'longitude') { // on ignore "latitude" pour ne pas avoir de double erreur
219
				error.insertBefore('#info-commune');
3025 delphine 220
			} else {
221
				error.insertAfter(element);
222
			}
223
		}
224
	});
225
};
226
 
227
WidgetSaisieBellesdemarue.prototype.validerFormulaire = function() {
3046 mathias 228
	$observateur = $("#form-observateur").valid();
229
	$obs = $("#form-obs").valid();
230
	return ($observateur == true && $obs == true) ? true : false;
3025 delphine 231
};
232
 
233
WidgetSaisieBellesdemarue.prototype.surChangementTaxonListe = function() {
234
	if ($('#taxon-liste').val() === '?') {
235
		$('#taxon-input-groupe').removeClass('hidden');
236
	} else {
3048 mathias 237
		$('#taxon').val(''); // on force à réutiliser l'autocomplétion pour avoir un nn
238
		$('#taxon').data('numNomSel', ''); // on vide le nn précédent
3025 delphine 239
		$('#taxon-input-groupe').addClass('hidden');
240
	}
241
};
242
 
3046 mathias 243
WidgetSaisieBellesdemarue.prototype.surChangementMilieuListe = function() {
244
	if ($('#milieu').val() === 'autres') {
245
		$('#milieu-autre-input-group').removeClass('hidden');
246
	} else {
247
		$('#milieu-autre').val('');
248
		$('#milieu-autre-input-group').addClass('hidden');
249
	}
250
};
251
 
3047 mathias 252
// trouve la commune (zone géo de niveau 8) sous le pointeur, en mode mondial
253
// et pas seulement français (service zoneAdmin et non nomCommune)
3045 mathias 254
WidgetSaisieBellesdemarue.prototype.trouverCommune = function(pos) {
255
	if (this.latLng == null) { // tentative de protection contre le démon de Prémilhat
256
		return;
257
	}
258
	var lthis = this;
259
	$(function() {
260
 
261
		var url_service = lthis.serviceNomCommuneUrl;
262
 
263
		var urlNomCommuneFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
264
		$.ajax({
265
			url : urlNomCommuneFormatee,
266
			type : "GET",
267
			dataType : "jsonp",
268
			beforeSend : function() {
269
				$(".commune-info").empty();
270
				$("#dialogue-erreur .alert-txt").empty();
271
			},
272
			success : function(data, textStatus, jqXHR) {
273
				$(".commune-info").empty();
274
				// en Belgique et en France, en général 8 = patelin @TODO bancal
275
				if ("8" in data) {
276
					$("#commune-nom").append(data["8"].intitule);
277
					$("#marqueur-commune").data('commune', {'nom' : data["8"].nom, 'codeInsee' : null});
278
				}
279
			},
280
			statusCode : {
281
			    500 : function(jqXHR, textStatus, errorThrown) {
282
					if (this.debug) {
283
						$("#dialogue-erreur .alert-txt").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
284
						reponse = jQuery.parseJSON(jqXHR.responseText);
285
						var erreurMsg = "";
286
						if (reponse != null) {
287
							$.each(reponse, function (cle, valeur) {
288
								erreurMsg += valeur + "<br />";
289
							});
290
						}
291
 
292
						$("#dialogue-erreur .alert-txt").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
293
					}
294
			    }
295
			},
296
			error : function(jqXHR, textStatus, errorThrown) {
297
				if (this.debug) {
298
					$("#dialogue-erreur .alert-txt").append('<p class="msg">Une erreur Ajax est survenue lors de la recherche de la commune.</p>');
299
					reponse = jQuery.parseJSON(jqXHR.responseText);
300
					var erreurMsg = "";
301
					if (reponse != null) {
302
						$.each(reponse, function (cle, valeur) {
303
							erreurMsg += valeur + "<br />";
304
						});
305
					}
306
 
307
					$("#dialogue-erreur .alert-txt").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
308
				}
309
			},
310
			complete : function(jqXHR, textStatus) {
311
				var debugMsg = extraireEnteteDebug(jqXHR);
312
				if (debugMsg != '') {
313
					if (this.debug) {
314
						$("#dialogue-erreur .alert-txt").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
315
					}
316
				}
317
				if ($("#dialogue-erreur .msg").length > 0) {
318
					$("#dialogue-erreur").show();
319
				}
320
			}
321
		});
322
	});
323
};
324
 
3048 mathias 325
// lorsqu'on choisit un taxon dans la liste, ou qu'on en tape un à la main dans
326
// le champ "autre espèce" (avec autocomplétion)
3025 delphine 327
WidgetSaisieBellesdemarue.prototype.surChangementValeurTaxon = function() {
328
	var nomHorsListe = $('#taxon-liste').val() == '?' ? true : false;
329
	var nomSpecial = $('#taxon-liste option:selected').hasClass('nom-special');
330
	var numNomSel = nomHorsListe ? $('#taxon').data('numNomSel') : $('#taxon-liste').val();
3048 mathias 331
	var nomSel = nomHorsListe ? $('#taxon').val() : $('#taxon-liste option:selected').text().trim();
332
 
3025 delphine 333
	// Un nom non valide entraine automatiquement une certitude "à déterminer"
334
	if(nomSpecial || !numNomSel) {
3048 mathias 335
		$('#certitude-adeterminer').prop('checked', true);
3025 delphine 336
	} else {
3048 mathias 337
		$('#certitude-adeterminer').prop('checked', false);
3025 delphine 338
	}
3048 mathias 339
 
340
	// stockage temporaire des infos connues
341
	$('#taxon').data('nn', numNomSel);
342
	$('#taxon').data('ns', nomSel);
3025 delphine 343
};
344
 
3048 mathias 345
 
3025 delphine 346
// surcharge
347
WidgetSaisieBellesdemarue.prototype.ajouterObs = function() {
3047 mathias 348
	// Fermeture automatique des dialogue de transmission de données
349
	$('#dialogue-obs-transaction-ko').hide();
350
	$('#dialogue-obs-transaction-ok').hide();
351
 
352
	// obligation de fournir au moins une image
353
	var nbImages = $('#miniatures img').length;
354
	if (nbImages == 0) {
355
		$('#image-obligatoire').show();
356
	} else {
357
		$('#image-obligatoire').hide();
358
	}
359
 
3048 mathias 360
	if (this.validerFormulaire() == true && nbImages > 0) {
3047 mathias 361
		this.masquerPanneau('#dialogue-form-invalide');
3025 delphine 362
		this.obsNbre = this.obsNbre + 1;
3047 mathias 363
		$(".obs-nbre").text(this.obsNbre);
364
		$(".obs-nbre").triggerHandler('changement');
3025 delphine 365
		this.afficherObs();
366
		this.stockerObsData();
367
		this.supprimerMiniatures();
3047 mathias 368
		if(! this.especeImposee) {
3048 mathias 369
			$("#taxon").data("numNomSel", undefined);
3047 mathias 370
		}
371
		$('#barre-progression-upload').attr('aria-valuemax', this.obsNbre);
372
		$('#barre-progression-upload .sr-only').text('0/'+this.obsNbre+" observations transmises");
3025 delphine 373
	} else {
3047 mathias 374
		this.afficherPanneau('#dialogue-form-invalide');
3025 delphine 375
	}
376
};
377
 
378
// surcharge
379
WidgetSaisieBellesdemarue.prototype.afficherObs = function() {
3048 mathias 380
	// on accepte que la commune soit parfois vide
381
	var commune = $("#commune-nom").text();
382
	if (this.debug) {
383
		console.log(commune);
384
	}
385
	$("#liste-obs").prepend(
386
		'<div id="obs'+this.obsNbre+'" class="row-fluid obs obs'+this.obsNbre+'">'+
387
			'<div class="span12">'+
388
				'<div class="well">'+
389
					'<div class="obs-action pull-right has-tooltip" data-placement="bottom" '+
390
						'title="Supprimer cette observation de la liste à transmettre">'+
391
						'<button class="btn btn-danger supprimer-obs" value="'+this.obsNbre+'" title="'+this.obsNbre+'">'+
392
							'<i class="icon-trash icon-white"></i>'+
393
						'</button>'+
394
					'</div> '+
395
					'<div class="row-fluid">'+
396
						'<div class="thumbnail span2">'+
397
						this.ajouterImgMiniatureAuTransfert()+
3025 delphine 398
						'</div>'+
3048 mathias 399
						'<div class="span9">'+
400
							'<ul class="unstyled">'+
3025 delphine 401
								'<li>'+
3048 mathias 402
									'<span class="nom-sci">'+this.ajouterNomEspece()+'</span> '+
403
									this.ajouterNumNomSel()+
404
									this.ajouterNomReferentiel()+
405
								'</li>'+
406
								'<li>'+
407
									'Observé à '+
408
									'<span class="commune">'+commune+'</span> '+
409
									' ['+$("#latitude").val()+' / '+$("#longitude").val()+']'+
410
									' le '+
411
									'<span class="date">'+$("#date").val()+'</span>'+
412
								'</li>'+
413
								'<li>'+
414
									'<span>Certitude :</span> '+$('input[name="certitude"]').val()+' '+
415
								'</li>'+
416
								'<li>'+
417
									'<span>Milieu :</span> '+this.ajouterMilieu()+
418
								'</li>'+
419
								'<li>'+
420
									'Commentaires : <span class="discretion">'+$("#notes").val()+'</span>'+
421
								'</li>'+
422
							'</ul>'+
423
						'</div>'+
424
					'</div>'+
425
				'</div>'+
3025 delphine 426
			'</div>'+
427
		'</div>');
3048 mathias 428
	$('#zone-liste-obs').removeClass("hidden").show();
3025 delphine 429
};
430
 
3049 mathias 431
// surcharge
432
WidgetSaisieBellesdemarue.prototype.stockerObsData = function() {
433
	var lthis = this;
434
	var nomHorsListe = $('#taxon-liste').val() == '?' ? true : false;
435
		nomSpecial = $('#taxon-liste option:selected').hasClass('nom-special'),
436
		numNomSel = nomHorsListe ? $('#taxon').data('numNomSel') : $('#taxon-liste').val();
437
	var nomSel = nomHorsListe ? $('#taxon').val() : $('#taxon-liste option:selected').data('nom-a-sauver'),
438
		nomRet = nomHorsListe ? $('#taxon').data('nomRet') : this.taxons[numNomSel]['nom_ret'],
439
		numNomRet = nomHorsListe ? $('#taxon').data('numNomRet') : this.taxons[numNomSel]['num_nom_ret'],
440
		numTaxon = nomHorsListe ? $('#taxon').data('nt') : this.taxons[numNomSel]['num_taxon'],
441
		famille = nomHorsListe ? $('#taxon').data('famille') : this.taxons[numNomSel]['famille'],
442
		referentiel = (numNomSel == undefined) ? '' : this.nomSciReferentiel,
443
		notes = (nomSpecial ? this.taxons[numNomSel]['nom_fr'] + '. ' : '') + $('#notes').val();
444
 
445
		certitude = $('input[name=certitude]:checked').val();
446
		certitude = (certitude == undefined) ? '' : certitude;
447
 
448
	$('#liste-obs').data('obsId'+this.obsNbre, {
449
		'date': $('#date').val(),
450
		'notes': notes,
451
 
452
		'latitude': $('#latitude').val(),
453
		'longitude': $('#longitude').val(),
454
		'commune_nom': $('#commune-nom').text(),
455
 
456
		'nom_sel': nomSel,
457
		'num_nom_sel': numNomSel,
458
		'nom_ret': nomRet,
459
		'num_nom_ret': numNomRet,
460
		'num_taxon': numTaxon,
461
		'famille': famille,
462
		'referentiel': referentiel,
463
		'certitude': certitude,
464
		'milieu': lthis.ajouterMilieu(),
465
 
466
		// Ajout des champs images
467
		'image_nom': lthis.getNomsImgsOriginales(),
468
 
469
		// Ajout des champs étendus de l'obs
470
		'obs_etendue': lthis.getObsChpEtendus()
471
	});
3052 mathias 472
	if (this.debug) {
3049 mathias 473
		console.log($('#liste-obs').data('obsId'+this.obsNbre));
3052 mathias 474
	}
3049 mathias 475
};
476
 
3048 mathias 477
WidgetSaisieBellesdemarue.prototype.ajouterMilieu = function() {
478
	var milieu = $('#milieu').val();
479
	if (milieu == 'autres') {
480
		var autreMilieu = $('#milieu-autre').val();
481
		if (autreMilieu) {
482
			milieu = autreMilieu;
483
		}
484
	}
485
	return milieu;
486
};
487
 
488
WidgetSaisieBellesdemarue.prototype.ajouterNomEspece = function() {
489
	var ns = $('#taxon').data('ns');
490
	if (! ns) {
491
		ns = "inconnue";
492
	}
493
	return ns;
494
};
495
 
496
WidgetSaisieBellesdemarue.prototype.ajouterNomReferentiel = function() {
497
	var nomRef = '';
498
	if ($("#taxon").data("nn")) {
499
		nomRef = '<span class="referentiel-obs">'+
500
			' [' + this.nomSciReferentiel +']'+
501
		'</span>';
502
	}
503
	return nomRef;
504
};
505
 
506
// surcharge
507
WidgetSaisieBellesdemarue.prototype.ajouterNumNomSel = function() {
508
	var nn = '';
509
	if (! $("#taxon").data("nn")) {
510
		nn = ' <span class="alert-error">[non lié au référentiel]</span>';
3025 delphine 511
	} else {
3048 mathias 512
		nn = ' <span class="nn">[nn'+$("#taxon").data("nn")+']</span>';
3025 delphine 513
	}
3048 mathias 514
	return nn;
515
};