Subversion Repositories eFlore/Applications.cel

Rev

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