Subversion Repositories eFlore/Applications.cel

Rev

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