Subversion Repositories eFlore/Applications.cel

//+---------------------------------------------------------------------------------------------------------+

// GÉNÉRAL

/**

 * Stope l'évènement courrant quand on clique sur un lien.

 * Utile pour Chrome, Safari...

 * @param evenement

 * @return

 */

function arreter(evenement) {

	if (evenement.stopPropagation) {

		evenement.stopPropagation();

	}

	return false;

}

// TODO : voir si cette fonction est bien utile. Résoud le pb d'un warning sous chrome.

(function(){

    // remove layerX and layerY

    var all = $.event.props,

        len = all.length,

        res = [];

    while (len--) {

      var el = all[len];

      if (el != 'layerX' && el != 'layerY') res.push(el);

    }

    $.event.props = res;

}());

//+----------------------------------------------------------------------------------------------------------+

//UPLOAD PHOTO : Traitement de l'image

$(document).ready(function() {

	$("#effacer-miniature").click(function () {

		supprimerMiniature();

	});

	if (HTML5 && window.File && window.FileReader && isCanvasSupported()) {

		if (DEBUG) {

			console.log("Support OK pour : API File et Canvas.");

		}

		$('#fichier').bind('change', function(e) {

			afficherMiniatureHtml5(e);

		});

	} else {

		$("#fichier").bind('change', function (e) {

			arreter(e);

			var options = {

				success: afficherMiniature, // post-submit callback

				dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)

				resetForm: true // reset the form after successful submit

			};

			$("#form-upload").ajaxSubmit(options);

			return false;

		});

	}

});

function isCanvasSupported(){

	var elem = document.createElement('canvas');

	return !!(elem.getContext && elem.getContext('2d'));

}

function afficherMiniatureHtml5(evt) {

	supprimerMiniature();

	var selectedfiles = evt.target.files;

	var f = selectedfiles[0];// Nous récupérons seulement le premier fichier.

	if (f.type != 'image/jpeg') {

		var message = "Seule les images JPEG sont supportées.";

		$("#miniature-msg").append(message);

	} else if (f.size > 5242880) {

		var message = "Votre image à un poids supérieur à 5Mo.";

		$("#miniature-msg").append(message);

	} else {

		var reader = new FileReader();

		// Lit le fichier image commune url de données

		reader.readAsDataURL(f);

		var imgNom = f.name;

		// Closure pour capturer les infos du fichier

		reader.onload = (function(theFile) {

			return function(e) {

				// Rendre la miniature

				var imageBase64 = e.target.result;

				//$("#miniature").append('<img id="miniature-img" class="miniature b64" src="'+imageBase64+'" alt="'+imgNom+'"/>');

				// HTML5 Canvas

				var img = new Image();

			    img.src = imageBase64;

			    img.alt = imgNom;

			    img.onload = function() {

			    	transformerImgEnCanvas(this, 100, 100, false, 'white');

			    };

			};

		})(f);

	}

	$("#effacer-miniature").show();

}

function transformerImgEnCanvas(img, thumbwidth, thumbheight, crop, background) {

	var canvas = document.createElement('canvas');

	canvas.width = thumbwidth;

	canvas.height = thumbheight;

	var dimensions = calculerDimenssions(img.width, img.height, thumbwidth, thumbheight);

	if (crop) {

		canvas.width = dimensions.w;

		canvas.height = dimensions.h;

		dimensions.x = 0;

		dimensions.y = 0;

	}

	cx = canvas.getContext('2d');

	if (background !== 'transparent') {

		cx.fillStyle = background;

		cx.fillRect(0, 0, thumbwidth, thumbheight);

	}

	cx.drawImage(img, dimensions.x, dimensions.y, dimensions.w, dimensions.h);

	afficherMiniatureCanvas(img, canvas);

}

function calculerDimensions(imagewidth, imageheight, thumbwidth, thumbheight) {

	var w = 0, h = 0, x = 0, y = 0,

	    widthratio = imagewidth / thumbwidth,

	    heightratio = imageheight / thumbheight,

	    maxratio = Math.max(widthratio, heightratio);

	if (maxratio > 1) {

	    w = imagewidth / maxratio;

	    h = imageheight / maxratio;

	} else {

	    w = imagewidth;

	    h = imageheight;

	}

	x = (thumbwidth - w) / 2;

	y = (thumbheight - h) / 2;

	return {w:w, h:h, x:x, y:y};

}

function afficherMiniatureCanvas(imgB64, canvas) {

	var url = canvas.toDataURL('image/jpeg' , 0.8);

	var alt = imgB64.alt;

	var title = Math.round(url.length / 1000 * 100) / 100 + ' KB';

	var miniature = '<img id="miniature-img" class="miniature b64-canvas" src="'+url+'" alt="'+alt+'" title="'+title+'" />';

	$("#miniature").append(miniature);

	$("#miniature-img").data('b64', imgB64.src);

}

function afficherMiniature(reponse) {

	supprimerMiniature();

	if (DEBUG) {

		var debogage = $("debogage", reponse).text();

		console.log("Débogage upload : "+debogage);

	}

	var message = $("message", reponse).text();

	if (message != '') {

		$("#miniature-msg").append(message);

	} else {

		var miniatureUrl = $("miniature-url", reponse).text();

		var imgNom = $("image-nom", reponse).text();

		$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>');

	}

	$("#effacer-miniature").show();

}

function supprimerMiniature() {

	$("#miniature").empty();

	$("#miniature-msg").empty();

	$("#effacer-miniature").hide();

}

//+----------------------------------------------------------------------------------------------------------+

// GOOGLE MAP

var geocoder;

var map;

// marqueurs de début et fin de rue

var marker;

var markerFin;

// coordonnées de début et fin de rue

var latLng;

var latLngFin;

// ligne reliant les deux points de début et fin

var ligneRue;

// Booléen de test afin de ne pas faire apparaitre la fin de rue à la premiere localisation

var premierDeplacement = true;

function initialiserGoogleMap(){

	// Carte

	latLng = new google.maps.LatLng(48.8543, 2.3483);// Paris

	if (VILLE == 'Marseille') {

		latLng = new google.maps.LatLng(43.29545, 5.37458);

	} else if (VILLE == 'Montpellier') {

		latLng = new google.maps.LatLng(43.61077, 3.87672);

	}

	latLngFin = latLng;

	var options = {

		zoom: 16,

		center: latLng,

		mapTypeId: google.maps.MapTypeId.HYBRID,

		mapTypeControlOptions: {

			mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]}

	};

	// Ajout de la couche OSM à la carte

	osmMapType = new google.maps.ImageMapType({

		getTileUrl: function(coord, zoom) {

			return "http://tile.openstreetmap.org/" +

			zoom + "/" + coord.x + "/" + coord.y + ".png";

		},

		tileSize: new google.maps.Size(256, 256),

		isPng: true,

		alt: 'OpenStreetMap',

		name: 'OSM',

		maxZoom: 19

	});

	// Création de la carte Google

	map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas

	map.mapTypes.set('OSM', osmMapType);

	// Geocodeur

	geocoder = new google.maps.Geocoder();

	// Marqueur google draggable

	marker = new google.maps.Marker({

		map: map,

		draggable: true,

		title: 'Début de la portion de rue étudiée',

		icon: MARQUEUR_ICONE_DEBUT_URL,

		position: latLng

	});

	deplacerMarker(latLng);

	// Tentative de geocalisation

	if (navigator.geolocation) {

		navigator.geolocation.getCurrentPosition(function(position) {

			var latitude = position.coords.latitude;

			var longitude = position.coords.longitude;

			latLng = new google.maps.LatLng(latitude, longitude);

			latLngFin = latLng;

			// si l'utilisateur géolocalise sa ville alors le premier déplacement doit être réinitialisé

			premierDeplacement = true;

			deplacerMarker(latLng);

		});

	}

}

var valeurDefautRechercheLieu = "";

$(document).ready(function() {

	initialiserGoogleMap();

	gererAffichageValeursParDefaut();

	// Autocompletion du champ adresse

	$("#rue").autocomplete({

		//Cette partie utilise geocoder pour extraire des valeurs d'adresse

		source: function(request, response) {

			geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) {

				if (status == google.maps.GeocoderStatus.OK) {

					response($.map(results, function(item) {

						var rue = "";

						$.each(item.address_components, function(){

							if (this.types[0] == "route" || this.types[0] == "street_address" ) {

								rue = this.short_name;

							}

						});

						var retour = {

							label: item.formatted_address,

							value: rue,

							latitude: item.geometry.location.lat(),

							longitude: item.geometry.location.lng()

						};

						return retour;

					}));

				} else {

					afficherErreurGoogleMap(status);

				}

			});

		},

		// Cette partie est executee a la selection d'une adresse

		select: function(event, ui) {

			latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);

			deplacerMarker(latLng);

			afficherEtapeGeolocalisation(2);

		}

	});

	$("#geolocaliser").click(function() {

		var latitude = $('#latitude').val();

		var longitude = $('#longitude').val();

		latLng = new google.maps.LatLng(latitude, longitude);

		deplacerMarker(latLng);

	});

	google.maps.event.addListener(marker, 'dragend', function() {

		trouverCommune(marker.getPosition());

		mettreAJourMarkerPosition(marker.getPosition());

		deplacerMarker(marker.getPosition());

	});

	google.maps.event.addListener(map, 'click', function(event) {

		deplacerMarker(event.latLng);

	});

});

function gererAffichageValeursParDefaut() {

	afficherEtapeGeolocalisation(1);

}

function afficherEtapeGeolocalisation(numEtape) {

	$(".liste_indication_geolocalisation").children().hide();

	$(".liste_indication_geolocalisation :nth-child("+numEtape+")").show();

}

function afficherErreurGoogleMap(status) {

	if (DEBUG) {

		$("#dialogue-google-map").empty();

		$("#dialogue-google-map").append('<pre class="msg-erreur">'+

			"Le service de Géocodage de Google Map a échoué à cause de l'erreur : "+status+

			'</pre>');

		$("#dialogue-google-map").dialog();

	}

}

function deplacerMarker(latLng) {

	if (marker != undefined) {

		marker.setPosition(latLng);

		map.setCenter(latLng);

		//map.setZoom(18);

		trouverCommune(latLng);

		if(!premierDeplacement) {

			if(markerFin != undefined) {

				markerFin.setMap(null);

			}

			latLngFin = new google.maps.LatLng(latLng.lat(), latLng.lng() + 0.0010);

			// Marqueur google draggable

			markerFin = new google.maps.Marker({

				map: map,

				draggable: true,

				title: 'Fin de la portion de rue étudiée',

				icon: MARQUEUR_ICONE_FIN_URL,

				position: latLngFin

			});

			google.maps.event.addListener(markerFin, 'dragend', function() {

				dessinerLigneRue(marker.getPosition(), markerFin.getPosition());

				latLngFin = markerFin.getPosition();

				latLngCentre = new google.maps.LatLng((latLngFin.lat() + latLng.lat())/2, (latLngFin.lng() + latLng.lng())/2);

				mettreAJourMarkerPosition(latLngCentre);

				afficherEtapeGeolocalisation(4);

			});

			dessinerLigneRue(latLng, latLngFin);

			latLngCentre = new google.maps.LatLng((latLngFin.lat() + latLng.lat())/2, (latLngFin.lng() + latLng.lng())/2);

			mettreAJourMarkerPosition(latLng);

			afficherEtapeGeolocalisation(3);

		} else {

			mettreAJourMarkerPosition(latLng);

		}

		premierDeplacement = false;

	}

}

function dessinerLigneRue(pointDebut, pointFin) {

	if(ligneRue != undefined) {

		ligneRue.setMap(null);

	}

	ligneRue = new google.maps.Polyline({

	    path: [pointDebut, pointFin],

	    strokeColor: "#FF0000",

	    strokeOpacity: 1.0,

	    strokeWeight: 2

	  });

	ligneRue.setMap(map);

}

function mettreAJourMarkerPosition(latLng) {

	var lat = latLng.lat().toFixed(5);

	var lng = latLng.lng().toFixed(5);

	remplirChampLatitude(lat);

	remplirChampLongitude(lng);

}

function remplirChampLatitude(latDecimale) {

	var lat = Math.round(latDecimale*100000)/100000;

	$('#latitude').val(lat);

}

function remplirChampLongitude(lngDecimale) {

	var lng = Math.round(lngDecimale*100000)/100000;

	$('#longitude').val(lng);

}

function trouverCommune(pos) {

	$(function() {

		var urlNomCommuneFormatee = SERVICE_NOM_COMMUNE_URL.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());

		$.ajax({

			url : urlNomCommuneFormatee,

			type : "GET",

			dataType : "jsonp",

			beforeSend : function() {

				$(".commune-info").empty();

				$("#dialogue-erreur").empty();

			},

			success : function(data, textStatus, jqXHR) {

				$(".commune-info").empty();

				if(data != null) {

					$("#commune-nom").append(data.nom);

					$("#commune-code-insee").append(data.codeINSEE);

					$("#marqueur-commune").data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});

				}

			},

			statusCode : {

			    500 : function(jqXHR, textStatus, errorThrown) {

					if (DEBUG) {

						$("#dialogue-erreur").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');

						reponse = jQuery.parseJSON(jqXHR.responseText);

						var erreurMsg = "";

						if (reponse != null) {

							$.each(reponse, function (cle, valeur) {

								erreurMsg += valeur + "<br />";

							});

						}

						$("#dialogue-erreur").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');

					}

			    }

			},

			error : function(jqXHR, textStatus, errorThrown) {

				if (DEBUG) {

					$("#dialogue-erreur").append('<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');

					reponse = jQuery.parseJSON(jqXHR.responseText);

					var erreurMsg = "";

					if (reponse != null) {

						$.each(reponse, function (cle, valeur) {

							erreurMsg += valeur + "<br />";

						});

					}

					$("#dialogue-erreur").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');

				}

			},

			complete : function(jqXHR, textStatus) {

				if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {

					var debugMsg = "";

					debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));

					if (debugInfos != null) {

						$.each(debugInfos, function (cle, valeur) {

							debugMsg += valeur + "<br />";

						});

						$("#dialogue-erreur").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');

					}

				}

				if ($("#dialogue-erreur .msg").length > 0) {

					$("#dialogue-erreur").dialog();

				}

			}

		});

	});

}

//+---------------------------------------------------------------------------------------------------------+

// FORMULAIRE

$(document).ready(function() {

	$("#date").datepicker($.datepicker.regional['fr']);

	$("form#saisie-obs").validate({

		rules: {

			courriel : {

				required : true,

				email : true},

			courriel_confirmation : {

				required : true,

				equalTo: "#courriel"

			},

			rue_cote : "required",

			"milieu[]" : {

			       required: true,

			       minlength: 1

			},

			latitude : {

				required: true,

				range: [-90, 90]},

			longitude : {

				required: true,

				range: [-180, 180]},

			date : {

				required: true,

				date: true},

			taxon : "required"

		},

		messages: {

			"milieu[]": "Vous devez sélectionner au moins un milieu"

		}

	});

	$("#courriel_confirmation").bind('paste', function(e) {

		$("#dialogue-bloquer-copier-coller").dialog();

		return false;

	});

	//bascule le texte d'afficher à masquer

	$("a.afficher-coord").click(function() {

		$("a.afficher-coord").toggle();

		$("#coordonnees-geo").toggle('slow');

		//valeur false pour que le lien ne soit pas suivi

		return false;

	});

	var obsNumero = 0;

	$("#ajouter-obs").bind('click', function(e) {

		if ($("#saisie-obs").valid() == false) {

			$("#dialogue-form-invalide").dialog();

		} else {

			var milieux = [];

			$('input:checked["name=milieux[]"]').each(function() {

				milieux.push($(this).val());

			});

			var rue = ($("#rue").val() == valeurDefautRechercheLieu) ? 'non renseigné(e)' : $("#rue").val();

			//rassemble les obs dans un tableau html

			obsNumero = obsNumero + 1;

			$("#liste-obs tbody").append(

					'<tr id="obs'+obsNumero+'" class="obs">'+

					'<td>'+obsNumero+'</td>'+

					'<td>'+$("#date").val()+'</td>'+

					'<td>'+rue+'</td>'+

					'<td>'+$("#taxon option:selected").text()+'</td>'+

					'<td>'+milieux.join(',<br />')+'</td>'+

					'<td>'+$("#latitude").val()+' / '+$("#longitude").val()+'</td>'+

					//Ajout du champ photo

					'<td class="obs-miniature">'+ajouterImgMiniatureAuTransfert()+'</td>'+

					'<td>'+$("#notes").val()+'</td>'+

					'<td><button class="supprimer-obs" value="'+obsNumero+'" title="Supprimer l\'observation '+obsNumero+'">'+

					'<img src="'+SUPPRIMER_ICONE_URL+'"/></button></td>'+

				'</tr>');

			//rassemble les obs dans #liste-obs

			var numNomSel = $("#taxon").val();

			$("#liste-obs").data('obsId'+obsNumero, {

				'date' : $("#date").val(),

				'num_nom_sel' : numNomSel,

				'nom_sel' : taxons[numNomSel]['nom_sel'],

				'nom_ret' : taxons[numNomSel]['nom_ret'],

				'num_nom_ret' : taxons[numNomSel]['num_nom_ret'],

				'num_taxon' : taxons[numNomSel]['num_taxon'],

				'famille' : taxons[numNomSel]['famille'],

				'nom_fr' : taxons[numNomSel]['nom_fr'],

				'milieu' : milieux.join(','),

				'latitude' : $("#latitude").val(),

				'longitude' : $("#longitude").val(),

				'commune_nom' : $("#commune-nom").text(),

				'commune_code_insee' : $("#commune-code-insee").text(),

				'lieudit' : rue,

				'station' : latLng.lat().toFixed(5)+','+latLng.lng().toFixed(5)+';'+latLngFin.lat().toFixed(5)+','+latLngFin.lng().toFixed(5)+';'+$("#rue_cote").val(),

				'notes' : $("#notes").val(),

				//Ajout des champs images

				'image_nom' : $("#miniature-img").attr('alt'),

				'image_b64' : getB64ImgOriginal()

			});

		}

	});

	$(".supprimer-obs").live('click', supprimerObs);

	$("#transmettre-obs").click(function(e) {

		var observations = $("#liste-obs").data();

		if (observations == undefined || jQuery.isEmptyObject(observations)) {

			$("#dialogue-zero-obs").dialog();

		} else if ($("#saisie-obs").valid() == false) {

			$("#dialogue-form-invalide").dialog();

		} else {

			observations['projet'] = 'Sauvages';

			var utilisateur = new Object();

			utilisateur.prenom = $("#prenom").val();

			utilisateur.nom = $("#nom").val();

			utilisateur.courriel = $("#courriel").val();

			observations['utilisateur'] = utilisateur;

			var erreurMsg = "";

			$.ajax({

				url : SERVICE_SAISIE_URL,

				type : "POST",

				data : observations,

				dataType : "json",

				beforeSend : function() {

					$(".msg").remove();

					$(".msg-erreur").remove();

					$(".msg-debug").remove();

					$("#chargement").show();

				},

				success : function(data, textStatus, jqXHR) {

					var message = 'Merci Beaucoup! Vos observations ont bien été transmises aux chercheurs.<br />'+

				    'Elles sont désormais affichées sur la carte Sauvages de ma rue, <br />'+

				    'et s\'ajoutent aux données du Carnet en ligne (<a href="http://www.tela-botanica.org/widget:cel:carto">voir la carte</a>) de Tela Botanica <br />'+

					'<br />	'+

					'Bonne continuation! <br />'+

					'<br /> '+

					'Si vous souhaitez modifier ou supprimer vos données, vous pouvez les retrouver en vous connectant au <a href="http://www.tela-botanica.org/page:cel">Carnet en ligne</a>. <br /> '+

					'(Attention, il est nécessaire de s\'inscrire gratuitement à Tela Botanica au préalable, si ce n\'est pas déjà fait). <br /> '+

					'<br /> '+

					'Pour toute question, n\'hésitez pas: notre contact: sauvages@tela-botanica.org ';

					$("#dialogue-obs-transaction").append('<p class="msg">'+message+'</p>');

					supprimerMiniature();

				},

				statusCode : {

					500 : function(jqXHR, textStatus, errorThrown) {

						$("#chargement").hide();

						erreurMsg += "Erreur 500 :\ntype : "+textStatus+' '+errorThrown+"\n";

						if (DEBUG) {

							$("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');

						}

				    }

				},

				error : function(jqXHR, textStatus, errorThrown) {

					erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n";

					try {

						reponse = jQuery.parseJSON(jqXHR.responseText);

						if (reponse != null) {

							$.each(reponse, function (cle, valeur) {

								erreurMsg += valeur + "\n";

							});

						}

					} catch(e) {

						erreurMsg += "L'erreur n'était pas en JSON.";

					}

					if (DEBUG) {

						$("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>');

					}

				},

				complete : function(jqXHR, textStatus) {

					$("#chargement").hide();

					var debugMsg = '';

					if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {

						debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));

						if (debugInfos != null) {

							$.each(debugInfos, function (cle, valeur) {

								debugMsg += valeur + "\n";

							});

						}

					}

					if (erreurMsg != '') {

						$("#dialogue-obs-transaction").append('<p class="msg">'+

								'Une erreur est survenue lors de la transmission de vos observations.'+'<br />'+

								'Vous pouvez signaler le disfonctionnement à <a href="'+

								'mailto:cel@tela-botanica.org'+'?'+

								'subject=Disfonctionnement du widget de saisie Biodiversite34'+

								"&body="+erreurMsg+"\nDébogage :\n"+debugMsg+

								'">cel@tela-botanica.org</a>.'+

								'</p>');

					}

					if (DEBUG) {

						$("#dialogue-obs-transaction").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');

					}

					$("#dialogue-obs-transaction").dialog();

					$("#liste-obs").removeData();

					$('.obs').remove();

					obsNumero = 0;

				}

			});

		}

		return false;

	});

});

function getB64ImgOriginal() {

	var b64 = '';

	if ($("#miniature-img").hasClass('b64')) {

		b64 = $("#miniature-img").attr('src');

	} else if ($("#miniature-img").hasClass('b64-canvas')) {

		b64 = $("#miniature-img").data('b64');

	}

	return b64;

}

function supprimerObs() {

	var obsId = $(this).val();

	// Problème avec IE 6 et 7

	if (obsId == "Supprimer") {

		obsId = $(this).attr("title");

	}

	$('#obs'+obsId).remove();

	$("#liste-obs").removeData('obsId'+obsId);

}

function ajouterImgMiniatureAuTransfert() {

	var miniature = '';

	if ($("#miniature img").length == 1) {

		var css = $("#miniature-img").hasClass('b64') ? 'miniature b64' : 'miniature';

		var src = $("#miniature-img").attr("src");

		var alt = $("#miniature-img").attr("alt");

		miniature = '<img class="'+css+'" alt="'+alt+'"src="'+src+'" />';

	}

	return miniature;

}