Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
1056 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
// TODO : voir si cette fonction est bien utile. Résoud le pb d'un warning sous chrome.
16
(function(){
17
    // remove layerX and layerY
18
    var all = $.event.props,
19
        len = all.length,
20
        res = [];
21
    while (len--) {
22
      var el = all[len];
23
      if (el != 'layerX' && el != 'layerY') res.push(el);
24
    }
25
    $.event.props = res;
26
}());
27
 
28
//+----------------------------------------------------------------------------------------------------------+
29
//UPLOAD PHOTO : Traitement de l'image
30
$(document).ready(function() {
1093 jpm 31
 
32
	$("#effacer-miniature").click(function () {
33
		supprimerMiniature();
34
	});
35
 
36
	$("#fichier").bind('change', function () {
37
		$("#form-upload").ajaxSubmit(options);
38
		return false;
39
	});
40
 
1056 jpm 41
	//prepare the form when the DOM is ready
42
	//create service object(proxy) using SMD (generated by the json result)
43
	var options = {
44
		success: afficherMiniature, // post-submit callback
45
		dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)
46
		resetForm: true // reset the form after successful submit
47
	};
48
});
49
 
1093 jpm 50
function afficherMiniature(reponse) {
51
	// 'responseXML' is the XML document returned by the server; we use
52
	// jQuery to extract the content of the message node from the XML doc
53
	var miniatureUrl = $("miniature-url", reponse).text();
54
	var imgNom = $("image-nom", reponse).text();
55
	$("#miniature").empty();
56
	$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>');
57
	$("#effacer-miniature").show();
58
	console.log(imgNom);
59
	console.log(miniatureUrl);
60
}
61
 
62
function supprimerMiniature() {
63
	$("#miniature").empty();
64
	$("#effacer-miniature").hide();
65
}
66
 
1056 jpm 67
//+----------------------------------------------------------------------------------------------------------+
68
// GOOGLE MAP
69
var geocoder;
70
var map;
71
var marker;
72
var latLng;
73
 
1093 jpm 74
function initialiserGoogleMap(){
1056 jpm 75
	// Carte
76
	var latLng = new google.maps.LatLng(43.29545, 5.37458);
1093 jpm 77
	if (VILLE == 'Montpellier') {
78
		latLng = new google.maps.LatLng(43.61077, 3.87672);
79
	} else {
80
		console.log('Ville:'+VILLE);
81
	}
82
 
1056 jpm 83
	var options = {
84
		zoom: 16,
85
		center: latLng,
1093 jpm 86
		mapTypeId: google.maps.MapTypeId.HYBRID,
87
		mapTypeControlOptions: {
88
			mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]}
1056 jpm 89
	};
1093 jpm 90
 
91
	// Ajout de la couche OSM à la carte
92
	osmMapType = new google.maps.ImageMapType({
93
		getTileUrl: function(coord, zoom) {
94
			return "http://tile.openstreetmap.org/" +
95
			zoom + "/" + coord.x + "/" + coord.y + ".png";
96
		},
97
		tileSize: new google.maps.Size(256, 256),
98
		isPng: true,
99
		alt: 'OpenStreetMap',
100
		name: 'OSM',
101
		maxZoom: 19
102
	});
1056 jpm 103
 
1093 jpm 104
	// Création de la carte Google
105
	map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas
106
	map.mapTypes.set('OSM', osmMapType);
1056 jpm 107
 
108
	// Geocodeur
109
	geocoder = new google.maps.Geocoder();
110
	console.log(GOOGLE_MAP_MARQUEUR_URL);
111
 
112
	// Marqueur google draggable
113
	marker = new google.maps.Marker({
114
		map: map,
115
		draggable: true,
116
		title: 'Ma station',
117
		icon: GOOGLE_MAP_MARQUEUR_URL,
118
		position: latLng
119
	});
1093 jpm 120
 
121
	deplacerMarker(latLng);
1056 jpm 122
}
123
 
124
$(document).ready(function() {
1093 jpm 125
 
126
	initialiserGoogleMap();
1056 jpm 127
 
128
	$(function() {
129
		// Tentative de geocalisation
130
		if (navigator.geolocation) {
131
			navigator.geolocation.getCurrentPosition(function(position) {
132
				var latitude = position.coords.latitude;
133
				var longitude = position.coords.longitude;
134
				var altitude = position.coords.altitude;
135
				var geocalisation = new google.maps.LatLng(latitude, longitude);
136
				marker.setPosition(geocalisation);
137
				map.setCenter(geocalisation);
138
				$('#adresse').val(codeLatLng(marker.getPosition()));
1093 jpm 139
				mettreAJourMarkerPosition(marker.getPosition());
1056 jpm 140
			});
141
		}
142
 
143
		// Autocompletion du champ adresse
144
		$("#adresse").autocomplete({
145
			//Cette partie utilise geocoder pour extraire des valeurs d'adresse
146
			source: function(request, response) {
1093 jpm 147
				geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) {
148
					if (status == google.maps.GeocoderStatus.OK) {
149
						response($.map(results, function(item) {
150
							return {
151
								label: item.formatted_address,
152
								value: item.formatted_address,
153
								latitude: item.geometry.location.lat(),
154
								longitude: item.geometry.location.lng()
155
							}
156
						}));
157
					} else {
158
						afficherErreurGoogleMap(status);
159
					}
1056 jpm 160
				})
161
			},
162
			// Cette partie est executee a la selection d'une adresse
163
			select: function(event, ui) {
1093 jpm 164
				remplirChampLatitude(ui.item.latitude);
165
				remplirChampLongitude(ui.item.longitude);
166
				var latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
167
				deplacerMarker(latLng);
168
				map.setCenter(latLng);
169
				map.setZoom(19);
1056 jpm 170
			}
171
		});
1093 jpm 172
 
173
		google.maps.event.addListener(marker, 'dragend', function() {
174
			trouverCommune(marker.getPosition());
1056 jpm 175
			geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
176
				if (status == google.maps.GeocoderStatus.OK) {
177
					if (results[0]) {
178
						$('#adresse').val(results[0].formatted_address);
1093 jpm 179
						mettreAJourMarkerPosition(marker.getPosition());
1056 jpm 180
					}
1093 jpm 181
				} else  {
182
					afficherErreurGoogleMap(status);
1056 jpm 183
				}
184
			});
185
		});
186
	});
187
});
188
 
189
// Transforme les coordonnés en adresse (reverse geocoder)
190
function codeLatLng() {
191
	var lat = parseFloat(document.getElementById("latitude").value);
192
	var lng = parseFloat(document.getElementById("longitude").value);
193
	var latlng = new google.maps.LatLng(lat, lng);
194
	geocoder.geocode({'latLng': latlng}, function(results, status) {
195
		if (status == google.maps.GeocoderStatus.OK) {
196
			if (results[0]) {
197
				marker.setPosition(latlng);
198
				map.setCenter(latlng);
199
				$('#adresse').val(results[0].formatted_address);
200
			}
201
		} else {
1093 jpm 202
			afficherErreurGoogleMap(status);
1056 jpm 203
		}
204
	});
205
}
206
 
1093 jpm 207
function afficherErreurGoogleMap(status) {
208
	if (DEBUG) {
209
		$("#dialogue-google-map").empty();
210
		$("#dialogue-google-map").append('<pre class="msg-erreur">'+
211
			"Le service de Géocodage de Google Map a échoué à cause de l'erreur : "+status+
212
			'</pre>');
213
		$("#dialogue-google-map").dialog();
214
	}
215
}
216
 
217
function deplacerMarker(latLon) {
218
	if (marker != undefined) {
219
		marker.setPosition(latLon);
220
		mettreAJourMarkerPosition(marker.getPosition());
221
		trouverCommune(marker.getPosition());
222
	}
223
}
224
 
225
function mettreAJourMarkerPosition(latLng) {
226
	var lat = latLng.lat().toFixed(5);
227
	var lng = latLng.lng().toFixed(5);
228
	remplirChampLatitude(lat);
229
	remplirChampLongitude(lng);
230
}
231
 
232
function remplirChampLatitude(latDecimale) {
233
	var lat = Math.round(latDecimale*100000)/100000;
234
	$('#latitude').val(lat);
235
}
236
 
237
function remplirChampLongitude(lngDecimale) {
238
	var lng = Math.round(lngDecimale*100000)/100000;
239
	$('#longitude').val(lng);
240
}
241
 
242
function trouverCommune(pos) {
243
	$(function() {
244
		var urlNomCommuneFormatee = SERVICE_NOM_COMMUNE_URL.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
245
		$.ajax({
246
			url : urlNomCommuneFormatee,
247
			type : "GET",
248
			dataType : "jsonp",
249
			beforeSend : function() {
250
				$(".commune-info").empty();
251
				$("#dialogue-erreur").empty();
252
			},
253
			success : function(data, textStatus, jqXHR) {
254
				$(".commune-info").empty();
255
				$("#commune-nom").append(data.nom);
256
				$("#commune-code-insee").append(data.codeINSEE);
257
				$("#marqueur-commune").data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});
258
			},
259
			statusCode : {
260
			    500 : function(jqXHR, textStatus, errorThrown) {
261
					if (DEBUG) {
262
						$("#dialogue-erreur").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
263
						reponse = jQuery.parseJSON(jqXHR.responseText);
264
						var erreurMsg = "";
265
						if (reponse != null) {
266
							$.each(reponse, function (cle, valeur) {
267
								erreurMsg += valeur + "<br />";
268
							});
269
						}
270
 
271
						$("#dialogue-erreur").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
272
					}
273
			    }
274
			},
275
			error : function(jqXHR, textStatus, errorThrown) {
276
				if (DEBUG) {
277
					$("#dialogue-erreur").append('<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');
278
					reponse = jQuery.parseJSON(jqXHR.responseText);
279
					var erreurMsg = "";
280
					if (reponse != null) {
281
						$.each(reponse, function (cle, valeur) {
282
							erreurMsg += valeur + "<br />";
283
						});
284
					}
285
 
286
					$("#dialogue-erreur").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
287
				}
288
			},
289
			complete : function(jqXHR, textStatus) {
290
				if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
291
					var debugMsg = "";
292
					debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
293
					if (debugInfos != null) {
294
						$.each(debugInfos, function (cle, valeur) {
295
							debugMsg += valeur + "<br />";
296
						});
297
						$("#dialogue-erreur").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
298
					}
299
				}
300
				if ($("#dialogue-erreur .msg").length > 0) {
301
					$("#dialogue-erreur").dialog();
302
				}
303
			}
304
		});
305
	});
306
}
307
 
1056 jpm 308
//+---------------------------------------------------------------------------------------------------------+
309
// FORMULAIRE
310
$(document).ready(function() {
311
	$("form#saisie-obs").validate({
312
		rules: {
313
			courriel : {
314
				required : true,
315
				email : true},
316
			courriel_confirmation : {
317
				required : true,
318
				equalTo: "#courriel"
319
			},
1070 jpm 320
			rue : "required",
321
			rue_num_debut : {
322
				required : true,
323
				digits : true,
324
				min : 1},
325
			rue_num_fin : {
326
				required : true,
327
				digits : true,
328
				min : 1},
329
			rue_cote : "required",
1056 jpm 330
			milieu : "required",
331
			latitude : {
332
				required: true,
333
				range: [-90, 90]},
334
			longitude : {
335
				required: true,
336
				range: [-180, 180]},
337
			date : {
338
				required: true,
339
				date: true},
340
			taxon : "required"
341
		}
342
	});
343
 
344
	$("#date").datepicker($.datepicker.regional['fr']);
345
 
346
	$("#courriel_confirmation").bind('paste', function(e) {
347
		$("#dialogue-bloquer-copier-coller").dialog();
348
		return false;
349
	});
1073 jpm 350
 
1056 jpm 351
	//bascule le texte d'afficher à masquer
1093 jpm 352
	$("a.afficher-coord").click(function() {
353
		$("a.afficher-coord").toggle();
354
		$("#coordonnees-geo").toggle('slow');
355
		//valeur false pour que le lien ne soit pas suivi
356
		return false
1056 jpm 357
	});
358
 
359
	var obsNumero = 0;
360
	$("#ajouter-obs").bind('click', function(e) {
361
		if ($("#saisie-obs").valid() == false) {
362
			$("#dialogue-form-invalide").dialog();
363
		} else {
364
			//rassemble les obs dans un tableau html
365
			obsNumero = obsNumero + 1;
366
			$("#liste-obs tbody").append(
367
					'<tr id="obs'+obsNumero+'" class="obs">'+
368
					'<td>'+obsNumero+'</td>'+
369
					'<td>'+$("#date").val()+'</td>'+
370
					'<td>'+$("#adresse").val()+'</td>'+
371
					'<td>'+$("#taxon option:selected").text()+'</td>'+
372
					'<td>'+$('input[name=milieu]:checked').val()+'</td>'+
1093 jpm 373
					'<td>'+$("#latitude").val()+' / '+$("#longitude").val()+'</td>'+
1056 jpm 374
					//Ajout du champ photo
1093 jpm 375
					'<td class="obs-miniature">'+ajouterImgMiniature()+'</td>'+
1056 jpm 376
					'<td>'+$("#notes").val()+'</td>'+
377
					'<td><button class="supprimer-obs" value="'+obsNumero+'" title="Supprimer l\'observation '+obsNumero+'">'+
378
					'<img src="'+SUPPRIMER_ICONE_URL+'"/></button></td>'+
379
				'</tr>');
380
			//rassemble les obs dans #liste-obs
381
			var numNomSel = $("#taxon").val();
382
			$("#liste-obs").data('obsId'+obsNumero, {
383
				'date' : $("#date").val(),
384
				'num_nom_sel' : numNomSel,
385
				'nom_sel' : taxons[numNomSel]['nom_sel'],
386
				'nom_ret' : taxons[numNomSel]['nom_ret'],
387
				'num_nom_ret' : taxons[numNomSel]['num_nom_ret'],
388
				'num_taxon' : taxons[numNomSel]['num_taxon'],
389
				'famille' : taxons[numNomSel]['famille'],
390
				'nom_fr' : taxons[numNomSel]['nom_fr'],
391
				'milieu' : $('input[name=milieu]:checked').val(),
392
				'latitude' : $("#latitude").val(),
393
				'longitude' : $("#longitude").val(),
1073 jpm 394
				'commune_nom' : '',// TODO : utiliser le web service
395
				'commune_code_insee' : '',// TODO : utiliser le web service
396
				'lieu_dit' : $("#rue").val(),
397
				'station' : $("#rue_num_debut").val()+'-'+$("#rue_num_fin").val()+'-'+$("#rue_cote").val(),
1070 jpm 398
				'notes' : $("#notes").val(),
399
				//Ajout des champs images
1056 jpm 400
				'image_nom' : $("#miniature-img").attr('alt'),
1070 jpm 401
				'image_b64' : ''// TODO : ajoute le support HTML5
1073 jpm 402
			});
1056 jpm 403
		}
404
	});
405
 
406
	$(".supprimer-obs").live('click', function() {
407
		var obsId = $(this).val();
408
		// Problème avec IE 6 et 7
409
		if (obsId == "Supprimer") {
410
			obsId = $(this).attr("title");
411
		}
412
 
413
		$('#obs'+obsId).remove();
414
		$("#liste-obs").removeData('obsId'+obsId)
415
	});
416
 
417
	// TODO : remplacer par du jquery
418
	//document.getElementById('image_file').addEventListener('change', handleFileSelect, false);
419
 
420
	$("#transmettre-obs").click(function(e) {
421
		var observations = $("#liste-obs").data();
1073 jpm 422
 
1056 jpm 423
		if (observations == undefined || jQuery.isEmptyObject(observations)) {
424
			$("#dialogue-zero-obs").dialog();
425
		} else if ($("#saisie-obs").valid() == false) {
426
			$("#dialogue-form-invalide").dialog();
427
		} else {
1073 jpm 428
			observations['projet'] = 'Sauvages';
429
 
1056 jpm 430
			var utilisateur = new Object();
431
			utilisateur.prenom = $("#prenom").val();
432
			utilisateur.nom = $("#nom").val();
433
			utilisateur.courriel = $("#courriel").val();
434
			observations['utilisateur'] = utilisateur;
435
 
1073 jpm 436
			var erreurMsg = "";
437
			$.ajax({
438
				url : SERVICE_SAISIE_URL,
439
				type : "POST",
440
				data : observations,
441
				dataType : "json",
442
				beforeSend : function() {
443
					$(".msg").remove();
444
					$(".msg-erreur").remove();
445
					$(".msg-debug").remove();
446
				},
447
				success : function(data, textStatus, jqXHR) {
448
					$("#dialogue-obs-transaction").append('<p class="msg">Vos observations ont bien été transmises.</p>');
1093 jpm 449
					supprimerMiniature();
1073 jpm 450
				},
451
				statusCode : {
452
				    500 : function(jqXHR, textStatus, errorThrown) {
453
						erreurMsg += "Erreur 500 :\ntype : "+textStatus+' '+errorThrown+"\n";
454
						reponse = jQuery.parseJSON(jqXHR.responseText);
455
						if (reponse != null) {
456
							$.each(reponse, function (cle, valeur) {
457
								erreurMsg += valeur + "\n";
458
							});
459
						}
460
						if (DEBUG) {
461
							$("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
462
						}
463
				    }
464
				},
465
				error : function(jqXHR, textStatus, errorThrown) {
466
					erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n";
467
					reponse = jQuery.parseJSON(jqXHR.responseText);
468
					if (reponse != null) {
469
						$.each(reponse, function (cle, valeur) {
470
							erreurMsg += valeur + "\n";
471
						});
472
					}
473
 
474
					if (DEBUG) {
475
						$("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');
476
					}
477
				},
478
				complete : function(jqXHR, textStatus) {
479
					var debugMsg = '';
480
					if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
481
						debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
482
						if (debugInfos != null) {
483
							$.each(debugInfos, function (cle, valeur) {
484
								debugMsg += valeur + "\n";
485
							});
486
						}
487
					}
488
					if (erreurMsg != '') {
489
						$("#dialogue-obs-transaction").append('<p class="msg">'+
490
								'Une erreur est survenue lors de la transmission de vos observations.'+'<br />'+
491
								'Vous pouvez signaler le disfonctionnement à <a href="'+
492
								'mailto:cel@tela-botanica.org'+'?'+
493
								'subject=Disfonctionnement du widget de saisie Biodiversite34'+
494
								"&body="+erreurMsg+"\nDébogage :\n"+debugMsg+
495
								'">cel@tela-botanica.org</a>.'+
496
								'</p>');
497
					}
498
					if (DEBUG) {
499
						$("#dialogue-obs-transaction").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');
500
					}
501
 
502
					$("#dialogue-obs-transaction").dialog();
503
					$("#liste-obs").removeData();
504
					$('.obs').remove();
505
					obsNumero = 0;
506
				}
507
			});
1056 jpm 508
		}
509
		return false;
510
	});
511
});
512
 
1093 jpm 513
function ajouterImgMiniature() {
514
	var miniature = '';
515
	if ($("#miniature img").length == 1) {
516
		var src = $("#miniature-img").attr("src");
517
		var alt = $("#miniature-img").attr("alt");
518
		miniature = '<img class="miniature" alt="'+alt+'"src="'+src+'" />';
519
	}
520
	return miniature;
521
}
1056 jpm 522
 
523
function handleFileSelect(evt) {
524
	// Check for the various File API support.
525
	if (window.File && window.FileReader && window.FileList && window.Blob) {
526
	// Great success! All the File APIs are supported.
527
		var selectedfiles = evt.target.files; // FileList object
528
 
529
		// Loop through the FileList and render image files as thumbnails.
530
		for (var i = 0, f; f = selectedfiles[i]; i++) {
531
 
532
		  // Only process image files.
533
		  if (!f.type.match('image.*')) {
534
		    continue;
535
		  }
536
 
537
		  var reader = new FileReader();
538
 
539
		  // Read in the image file as a data URL.
540
		  reader.readAsDataURL(f);
541
 
542
		  // Closure to capture the file information.
543
		  reader.onload = (function(theFile) {
544
			 return function(e) {
545
		    	// Render thumbnail.
546
		    	document.getElementById('image').src = e.target.result;
547
		    	//document.getElementById('list').insertBefore(img, null);
548
		    };
549
		  })(f);
550
		}
551
 
552
	}
553
	else {
554
	  alert('The File APIs are not fully supported in this browser.');
555
	}
556
}