Subversion Repositories eFlore/Applications.cel

Rev

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