Subversion Repositories eFlore/Applications.cel

Rev

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