Subversion Repositories eFlore/Applications.cel

Rev

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