Subversion Repositories eFlore/Applications.cel

Rev

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