Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

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