Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
719 jpm 1
//+---------------------------------------------------------------------------------------------------------+
2
// GÉNÉRAL
3
/**
4
 * Stope l'évènement courrant quand on clique sur un lien.
5
 * Utile pour Chrome, Safari...
6
 * @param evenement
7
 * @return
8
 */
9
function arreter(evenement) {
10
	if (evenement.stopPropagation) {
11
		evenement.stopPropagation();
12
	}
13
	return false;
14
}
15
 
16
//+---------------------------------------------------------------------------------------------------------+
17
// FORMULAIRE
18
 
712 jpm 19
$(function() {
719 jpm 20
	$("#saisie-obs").validate({
21
		rules: {
22
			prenom : "required",
23
			nom : "required",
24
			courriel : {
25
				required : true,
26
				email : true},
27
			courriel_confirmation : {
28
				required : true,
29
				equalTo: "#courriel"
30
			},
31
			milieu : "required",
744 jpm 32
			latitude : {
33
				required: true,
34
				range: [-90, 90]},
35
			longitude : {
36
				required: true,
37
				range: [-180, 180]},
38
			date : {
39
				required: true,
40
				date: true},
41
			taxon : "required"
719 jpm 42
		}
43
	});
44
 
833 jpm 45
	$("#date").datepicker({
46
		   onClose: function(dateText, inst) {$("#saisie-obs").valid();}
47
	});
712 jpm 48
 
744 jpm 49
	$("#courriel_confirmation").bind('paste', function(e) {
712 jpm 50
		$("#dialogue-bloquer-copier-coller").dialog();
51
		return false;
52
	});
53
 
719 jpm 54
	$("#localiser-gg-map").fancybox({
55
		'modal'			: true,
56
		'autoDimensions' : true,
57
		'titleShow'		: false,
58
		'onClosed'		: function() {
59
		    $("#gg-map").hide();
60
		},
61
		'onStart'		: function(e) {
62
			arreter(e);
63
			$("#gg-map-localisation").height($(window).height() - 100);
744 jpm 64
			$("#gg-map-carte").height($(window).height() - 200);
719 jpm 65
			$("#gg-map-localisation").width($(window).width() - 100);
66
		},
67
		'onComplete'	: function() {
68
			initialiserCarte();
69
		}
70
	});
71
 
72
	$("#valider-coordonnees").click(function(e) {
73
		var coordonnees = $("#marqueur-coordonnees").data('latLon');
74
		if (coordonnees != undefined) {
75
			$("#latitude").val(coordonnees.lat);
76
			$("#longitude").val(coordonnees.lon);
77
		}
833 jpm 78
		var commune = $("#marqueur-commune").data('commune');
79
		if (commune != undefined) {
80
			$("#commune_nom").val(commune.nom);
81
			$("#commune_code_insee").val(commune.codeInsee);
82
		}
719 jpm 83
		$.fancybox.close();
833 jpm 84
		$("#saisie-obs").valid();
719 jpm 85
	});
86
	$("#annuler-coordonnees").bind('click', function(e) {
87
		$.fancybox.close();
833 jpm 88
		$("#saisie-obs").valid()
719 jpm 89
	});
90
 
712 jpm 91
	var obsNumero = 0;
719 jpm 92
	$("#ajouter-obs").bind('click', function(e) {
93
		if ($("#saisie-obs").valid() == false) {
94
			$("#dialogue-form-invalide").dialog();
95
		} else {
96
			obsNumero = obsNumero + 1;
97
			$("#liste-obs tbody").append(
98
				'<tr id="obs'+obsNumero+'" class="obs">'+
99
					'<td>'+obsNumero+'</td>'+
100
					'<td>'+$("#date").val()+'</td>'+
101
					'<td>'+$("#taxon option:selected").text()+'</td>'+
102
					'<td>'+$("#milieu option:selected").text()+'</td>'+
103
					'<td>'+$("#latitude").val()+'</td>'+
104
					'<td>'+$("#longitude").val()+'</td>'+
105
					'<td>'+$("#notes").val()+'</td>'+
106
					'<td><button class="supprimer-obs" value="'+obsNumero+'" title="'+obsNumero+'">Supprimer</button></td>'+
107
				'</tr>');
108
			var numNomSel = $("#taxon").val();
109
			$("#liste-obs").data('obsId'+obsNumero, {
110
				'date' : $("#date").val(),
111
				'num_nom_sel' : numNomSel,
112
				'nom_sel' : taxons[numNomSel]['nom_sel'],
113
				'nom_ret' : taxons[numNomSel]['nom_ret'],
114
				'num_nom_ret' : taxons[numNomSel]['num_nom_ret'],
115
				'num_taxon' : taxons[numNomSel]['num_taxon'],
116
				'famille' : taxons[numNomSel]['famille'],
1848 aurelien 117
				'nom_referentiel' : 'bdtfx',
719 jpm 118
				'nom_fr' : taxons[numNomSel]['nom_fr'],
119
				'milieu' : $("#milieu option:selected").val(),
120
				'latitude' : $("#latitude").val(),
121
				'longitude' : $("#longitude").val(),
833 jpm 122
				'commune_nom' : $("#commune_nom").val(),
123
				'commune_code_insee' : $("#commune_code_insee").val(),
719 jpm 124
				'notes' : $("#notes").val()});
125
		}
712 jpm 126
	});
127
 
128
	$(".supprimer-obs").live('click', function() {
129
		var obsId = $(this).val();
719 jpm 130
		// Problème avec IE 6 et 7
131
		if (obsId == "Supprimer") {
132
			obsId = $(this).attr("title");
133
		}
134
 
135
		$('#obs'+obsId).remove();
136
		$("#liste-obs").removeData('obsId'+obsId)
712 jpm 137
	});
138
 
719 jpm 139
	$("#tramsmettre-obs").click(function(e) {
712 jpm 140
		var observations = $("#liste-obs").data();
719 jpm 141
 
142
		if (observations == undefined || jQuery.isEmptyObject(observations)) {
712 jpm 143
			$("#dialogue-zero-obs").dialog();
719 jpm 144
		} else if ($("#saisie-obs").valid() == false) {
145
			$("#dialogue-form-invalide").dialog();
712 jpm 146
		} else {
833 jpm 147
			observations['projet'] = 'Biodiversite34';
148
 
719 jpm 149
			var utilisateur = new Object();
1352 aurelien 150
			utilisateur.id_utilisateur = $("#id_utilisateur").val();
719 jpm 151
			utilisateur.prenom = $("#prenom").val();
152
			utilisateur.nom = $("#nom").val();
153
			utilisateur.courriel = $("#courriel").val();
154
			observations['utilisateur'] = utilisateur;
155
 
833 jpm 156
			var erreurMsg = "";
719 jpm 157
			$.ajax({
1348 aurelien 158
				url : SERVICE_SAISIE_URL,
719 jpm 159
				type : "POST",
160
				data : observations,
833 jpm 161
				dataType : "json",
719 jpm 162
				beforeSend : function() {
833 jpm 163
					$(".msg").remove();
164
					$(".msg-erreur").remove();
165
					$(".msg-debug").remove();
719 jpm 166
				},
833 jpm 167
				success : function(data, textStatus, jqXHR) {
168
					$("#dialogue-obs-transaction").append('<p class="msg">Vos observations ont bien été transmises.</p>');
169
				},
719 jpm 170
				statusCode : {
171
				    500 : function(jqXHR, textStatus, errorThrown) {
833 jpm 172
						erreurMsg += "Erreur 500 :\ntype : "+textStatus+' '+errorThrown+"\n";
719 jpm 173
						reponse = jQuery.parseJSON(jqXHR.responseText);
174
						if (reponse != null) {
175
							$.each(reponse, function (cle, valeur) {
833 jpm 176
								erreurMsg += valeur + "\n";
719 jpm 177
							});
178
						}
833 jpm 179
						if (DEBUG) {
180
							$("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
181
						}
719 jpm 182
				    }
183
				},
833 jpm 184
				error : function(jqXHR, textStatus, errorThrown) {
185
					erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n";
186
					reponse = jQuery.parseJSON(jqXHR.responseText);
187
					if (reponse != null) {
188
						$.each(reponse, function (cle, valeur) {
189
							erreurMsg += valeur + "\n";
190
						});
191
					}
192
 
193
					if (DEBUG) {
194
						$("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
195
					}
719 jpm 196
				},
197
				complete : function(jqXHR, textStatus) {
833 jpm 198
					var debugMsg = '';
199
					if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
719 jpm 200
						debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
201
						if (debugInfos != null) {
202
							$.each(debugInfos, function (cle, valeur) {
833 jpm 203
								debugMsg += valeur + "\n";
719 jpm 204
							});
205
						}
206
					}
833 jpm 207
					if (erreurMsg != '') {
208
						$("#dialogue-obs-transaction").append('<p class="msg">'+
209
								'Une erreur est survenue lors de la transmission de vos observations.'+'<br />'+
210
								'Vous pouvez signaler le disfonctionnement à <a href="'+
211
								'mailto:cel@tela-botanica.org'+'?'+
212
								'subject=Disfonctionnement du widget de saisie Biodiversite34'+
213
								"&body="+erreurMsg+"\nDébogage :\n"+debugMsg+
214
								'">cel@tela-botanica.org</a>.'+
215
								'</p>');
216
					}
217
					if (DEBUG) {
218
						$("#dialogue-obs-transaction").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');
219
					}
719 jpm 220
 
221
					$("#dialogue-obs-transaction").dialog();
222
					$("#liste-obs").removeData();
223
					$('.obs').remove();
224
					obsNumero = 0;
833 jpm 225
				}
712 jpm 226
			});
227
		}
719 jpm 228
		return false;
229
	});
230
});
712 jpm 231
 
719 jpm 232
//+---------------------------------------------------------------------------------------------------------+
233
// GOOGLE MAP
234
 
235
var geocoder;
236
var latLng;
237
var map;
238
var marker;
239
var osmMapType;
240
function initialiserCarte() {
241
	geocoder = new google.maps.Geocoder();
242
	latLng = new google.maps.LatLng(43.577, 3.455);
747 jpm 243
	map = new google.maps.Map(document.getElementById('gg-map-carte'), {
244
		zoom: 9,
245
		mapTypeId: google.maps.MapTypeId.HYBRID,
246
		mapTypeControlOptions: {
247
			mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]}
248
	});
249
 
250
	// Ajout de la couche OSM à la carte
719 jpm 251
	osmMapType = new google.maps.ImageMapType({
252
		getTileUrl: function(coord, zoom) {
253
			return "http://tile.openstreetmap.org/" +
254
			zoom + "/" + coord.x + "/" + coord.y + ".png";
255
		},
256
		tileSize: new google.maps.Size(256, 256),
257
		isPng: true,
258
		alt: "OpenStreetMap",
259
		name: "OSM",
260
		maxZoom: 19
712 jpm 261
	});
719 jpm 262
	map.mapTypes.set('OSM', osmMapType);
263
 
747 jpm 264
	// Ajout des limites de communes
265
	ctaLayer = new google.maps.KmlLayer('http://www.tela-botanica.org/commun/google/map/3/kmz/communes/34.kmz', {preserveViewport: true});
266
	ctaLayer.setMap(map);
267
 
268
	// Définition du marqueur
719 jpm 269
	marker = new google.maps.Marker({
270
		position: latLng,
271
		title: 'Ma station',
272
		map: map,
273
		draggable: true
274
	});
747 jpm 275
	deplacerMarker(latLng);
719 jpm 276
 
747 jpm 277
	// Tentative de géolocalisation
278
	if(navigator.geolocation) {	// Try W3C Geolocation (Preferred)
279
		navigator.geolocation.getCurrentPosition(function(position) {
280
			(DEBUG) ? console.log("Géolocalisation OK.") : '';
281
			latLng = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
282
			deplacerMarker(latLng);
283
			map.setCenter(latLng);
833 jpm 284
		}, function(erreur) {
285
			(DEBUG) ? console.log("Géolocalisation échouée : "+erreur.code+" = "+erreur.message) : '';
747 jpm 286
		});
287
	} else { //Browser doesn't support Geolocation
288
		(DEBUG) ? console.log("Navigateur ne supportant pas la géolocalisation. Localisation par défaut.") : '';
289
	}
833 jpm 290
	deplacerMarker(latLng);
291
	map.setCenter(latLng);
719 jpm 292
 
747 jpm 293
	// Add des évènements concernant le marqueur
719 jpm 294
	google.maps.event.addListener(marker, 'dragstart', function() {
295
		mettreAJourMarkerAdresse('Marqueur de station début du déplacement...');
296
	});
297
 
298
	google.maps.event.addListener(marker, 'drag', function() {
299
		mettreAJourMarkerStatut('Marqueur de station en cours de déplacement...');
300
		mettreAJourMarkerPosition(marker.getPosition());
301
	});
302
 
303
	google.maps.event.addListener(marker, 'dragend', function() {
304
		mettreAJourMarkerStatut('Marqueur de station déplacé (glisser/déposer).');
305
		mettreAJourMarkerPosition(marker.getPosition());
306
		geocoderPosition(marker.getPosition());
833 jpm 307
		trouverCommune(marker.getPosition());
719 jpm 308
	});
309
 
310
	google.maps.event.addListener(map, 'click', function(event) {
311
		deplacerMarker(event.latLng);
312
	});
313
}
314
 
747 jpm 315
function deplacerMarker(latLon) {
316
	if (marker != undefined) {
317
		marker.setPosition(latLon);
318
		mettreAJourMarkerStatut('Marqueur de station déplacé (clic).');
319
		mettreAJourMarkerPosition(marker.getPosition());
320
		geocoderPosition(marker.getPosition());
833 jpm 321
		trouverCommune(marker.getPosition());
747 jpm 322
	}
323
}
324
 
719 jpm 325
function geocoderPosition(pos) {
326
	if (geocoder != undefined) {
327
		geocoder.geocode({
328
			latLng: pos
329
		}, function(responses, status) {
330
			if (status == google.maps.GeocoderStatus.OK) {
331
				if (responses && responses.length > 0) {
332
					mettreAJourMarkerAdresse(responses[0].formatted_address);
333
				} else {
334
					mettreAJourMarkerAdresse("Impossible de trouver d'adresse pour cette position.");
335
				}
336
			} else {
337
				mettreAJourMarkerAdresse("Un problème de géolocalisation est survenu : "+status+".");
338
			}
339
		});
340
	}
341
}
342
 
833 jpm 343
function trouverCommune(pos) {
344
	$(function() {
1348 aurelien 345
		var urlNomCommuneFormatee = SERVICE_NOM_COMMUNE_URL.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
833 jpm 346
		$.ajax({
347
			url : urlNomCommuneFormatee,
348
			type : "GET",
349
			dataType : "json",
350
			beforeSend : function() {
351
				$(".commune-info").empty();
352
				$("#dialogue-erreur").empty();
353
			},
354
			success : function(data, textStatus, jqXHR) {
355
				$(".commune-info").empty();
356
				$("#commune-nom").append(data.nom);
357
				$("#commune-code-insee").append(data.codeINSEE);
358
				$("#marqueur-commune").data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});
359
			},
360
			statusCode : {
361
			    500 : function(jqXHR, textStatus, errorThrown) {
362
					if (DEBUG) {
363
						$("#dialogue-erreur").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
364
						reponse = jQuery.parseJSON(jqXHR.responseText);
365
						var erreurMsg = "";
366
						if (reponse != null) {
367
							$.each(reponse, function (cle, valeur) {
368
								erreurMsg += valeur + "<br />";
369
							});
370
						}
371
 
372
						$("#dialogue-erreur").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
373
					}
374
			    }
375
			},
376
			error : function(jqXHR, textStatus, errorThrown) {
377
				if (DEBUG) {
378
					$("#dialogue-erreur").append('<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');
379
					reponse = jQuery.parseJSON(jqXHR.responseText);
380
					var erreurMsg = "";
381
					if (reponse != null) {
382
						$.each(reponse, function (cle, valeur) {
383
							erreurMsg += valeur + "<br />";
384
						});
385
					}
386
 
387
					$("#dialogue-erreur").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
388
				}
389
			},
390
			complete : function(jqXHR, textStatus) {
391
				if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
392
					var debugMsg = "";
393
					debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
394
					if (debugInfos != null) {
395
						$.each(debugInfos, function (cle, valeur) {
396
							debugMsg += valeur + "<br />";
397
						});
398
						$("#dialogue-erreur").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
399
					}
400
				}
401
				if ($("#dialogue-erreur .msg").length > 0) {
402
					$("#dialogue-erreur").dialog();
403
				}
404
			}
405
		});
406
	});
407
}
408
 
719 jpm 409
function mettreAJourMarkerStatut(str) {
410
	document.getElementById('marqueur-statut').innerHTML = str;
411
}
412
 
413
function mettreAJourMarkerPosition(latLng) {
744 jpm 414
	var lat = latLng.lat().toFixed(5);
415
	var lon = latLng.lng().toFixed(5);
416
	document.getElementById('marqueur-wgs84').innerHTML = [lat, lon].join(', ');
417
	$("#marqueur-coordonnees").data('latLon', {'lat' : lat, 'lon' : lon});
418
 
419
	Proj4js.defs["EPSG:4326"] = "+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs";
420
	Proj4js.defs["EPSG:2154"]="+title=RGF93 / Lambert-93 +proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs ";
421
	var source = new Proj4js.Proj('EPSG:4326');// Coordonnées source : WGS 84
422
	var dest = new Proj4js.Proj('EPSG:2154');// Coordonnées destination  : Lambert 93
423
	var p = new Proj4js.Point(lon+','+lat);//lon+','+lat any object will do as long as it has 'x' and 'y' properties
424
	Proj4js.transform(source, dest, p);
425
	//Proj4js.reportError = function(msg) {alert(msg);}
426
	//console.log(p.toString());
427
	document.getElementById('marqueur-lambert93').innerHTML = [p.x.toFixed(0)+' '+dest.units, p.y.toFixed(0)+' '+dest.units].join(', ');
719 jpm 428
}
429
 
430
function mettreAJourMarkerAdresse(str) {
431
	document.getElementById('marqueur-adresse').innerHTML = str;
432
}
433