Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 1921 → Rev 1922

/trunk/widget/modules/saisie/squelettes/sauvages/js/sauvages.js
120,246 → 120,46
$(this).val(prenom.join(' '));
}
 
 
 
//+----------------------------------------------------------------------------------------------------------+
//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'));
}
//GOOGLE MAP => OK
 
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);
}
var map,
geocoder,
markerDeb,
latLngDeb,
markerFin,
latLngFin,
ligneRue,
premierDeplacement = true;
 
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;
$(document).ready(function() {
initialiserGoogleMap();
afficherEtapeGeolocalisation(1);
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
// Autocompletion du champ adresse
$('#carte-recherche').on('focus', function() {
$(this).select();
});
$('#carte-recherche').on('mouseup', function(event) {// Pour Safari...
event.preventDefault();
});
// 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: GOOGLE_MAP_MARQUEUR_DEBUT_URL,
position: latLng
$('#carte-recherche').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
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({
$('#carte-recherche').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,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
};
372,185 → 172,235
},
// 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);
var nouvellePosition = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
initialiserMarkerDeb();
deplacerMarkerDeb(nouvellePosition);
map.setZoom(16);
afficherEtapeGeolocalisation(2);
}
});
$('#geolocaliser').click(function() {
var latitude = $('#latitude').val();
var longitude = $('#longitude').val();
latLng = new google.maps.LatLng(latitude, longitude);
deplacerMarker(latLng);
$('#geolocaliser').on('click', geolocaliser);
});
 
function initialiserGoogleMap(){
latLngDeb = new google.maps.LatLng(46.30871, 2.54395);// Centre de la France
var options = {
zoom: 5,
center: latLngDeb,
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
});
google.maps.event.addListener(marker, 'dragend', function() {
trouverCommune(marker.getPosition());
mettreAJourMarkerPosition(marker.getPosition());
deplacerMarker(marker.getPosition());
// 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);
// Ajout de l'évènment sur click dans Carte
google.maps.event.addListener(map, 'click', surClickDansCarte);
// Lorsque la carte est chargée, on vérifie si on peut précharger des données
google.maps.event.addListenerOnce(map, 'idle', function(){
// Initialisation du marker de début de rue
initialiserMarkerDeb();
// Tentative de geocalisation si aucune obs à précharger
tenterGeolocalisation();
});
google.maps.event.addListener(map, 'click', function(event) {
deplacerMarker(event.latLng);
});
});
// Création du Geocoder
geocoder = new google.maps.Geocoder();
}
 
function gererAffichageValeursParDefaut() {
afficherEtapeGeolocalisation(1);
function initialiserMarkerDeb() {
premierDeplacement = true;
if (markerDeb == undefined) {
// Marqueur de début de Rue
markerDeb = new google.maps.Marker({
map: map,
draggable: true,
title: 'Début de la portion de rue étudiée',
icon: GOOGLE_MAP_MARQUEUR_DEBUT_URL,
position: latLngDeb
});
google.maps.event.addListener(markerDeb, 'dragend', surDeplacementMarkerDeb);
}
latLngFin = latLngDeb;
if (markerFin != undefined) {
markerFin.setMap(null);
}
latLngCentre = latLngDeb;
if (ligneRue != undefined) {
ligneRue.setMap(null);
}
}
 
function afficherEtapeGeolocalisation(numEtape) {
$(".liste_indication_geolocalisation").children().hide();
$(".liste_indication_geolocalisation :nth-child("+numEtape+")").show();
function surDeplacementMarkerDeb() {
deplacerMarkerDeb(markerDeb.getPosition());
}
 
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 deplacerMarkerDeb(nouvellePosition) {
latLngDeb = nouvellePosition;
markerDeb.setPosition(latLngDeb);
map.setCenter(latLngDeb);
mettreAJourStationPosition(latLngDeb);
trouverCommune(latLngDeb);
 
if (premierDeplacement) {
initialiserMarkerDeb();
premierDeplacement = false;
} else {
var nouvellePositionFin = new google.maps.LatLng(latLngDeb.lat(), latLngDeb.lng() + 0.0010);
initialiserMarkerFin();
deplacerMakerFin(nouvellePositionFin)
afficherEtapeGeolocalisation(3);
}
}
 
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: GOOGLE_MAP_MARQUEUR_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 initialiserMarkerFin() {
if (markerFin == undefined) {
markerFin = new google.maps.Marker({
map: map,
draggable: true,
title: 'Fin de la portion de rue étudiée',
icon: GOOGLE_MAP_MARQUEUR_FIN_URL,
position: latLngFin
});
google.maps.event.addListener(markerFin, 'dragend', surDeplacementMarkerFin);
} else {
markerFin.setMap(null);
}
}
 
function deplacerMakerFin(nouvellePosition) {
latLngFin = nouvellePosition;
markerFin.setMap(map);
markerFin.setPosition(latLngFin);
dessinerLigneRue(latLngDeb, latLngFin);
}
 
function surDeplacementMarkerFin() {
dessinerLigneRue(markerDeb.getPosition(), markerFin.getPosition());
afficherCentreRue();
afficherEtapeGeolocalisation(4);
}
 
function dessinerLigneRue(pointDebut, pointFin) {
if(ligneRue != undefined) {
if (ligneRue != undefined) {
ligneRue.setMap(null);
}
ligneRue = new google.maps.Polyline({
path: [pointDebut, pointFin],
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
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);
function afficherCentreRue() {
latLngDeb = markerDeb.getPosition();
latLngFin = markerFin.getPosition();
latLngCentre = new google.maps.LatLng((latLngFin.lat() + latLngDeb.lat())/2, (latLngFin.lng() + latLngDeb.lng())/2);
mettreAJourStationPosition(latLngCentre);
}
 
function mettreAJourStationPosition(latLng) {
var lat = latLng.lat().toFixed(5),
lng = latLng.lng().toFixed(5);
remplirChampLatitude(lat);
remplirChampLongitude(lng);
}
 
function remplirChampLatitude(latDecimale) {
var lat = Math.round(latDecimale*100000)/100000;
var lat = Math.round(latDecimale * 100000) / 100000;
$('#latitude').val(lat);
}
 
function remplirChampLongitude(lngDecimale) {
var lng = Math.round(lngDecimale*100000)/100000;
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());
var url_service = SERVICE_NOM_COMMUNE_URL,
urlNomCommuneFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
$.ajax({
url : urlNomCommuneFormatee,
type : "GET",
dataType : "jsonp",
beforeSend : function() {
$(".commune-info").empty();
$("#dialogue-erreur").empty();
url: urlNomCommuneFormatee,
type: 'GET',
dataType: 'jsonp',
beforeSend: function() {
$('.commune-info').empty();
$('#dialogue-erreur .alert-txt').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});
}
success: function(data, textStatus, jqXHR) {
$('.commune-info').empty();
$('#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) {
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>');
$('#dialogue-erreur .alert-txt').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 />";
erreurMsg += valeur + '<br />';
});
}
$("#dialogue-erreur").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
$('#dialogue-erreur .alert-txt').append(
'<p class="msg-erreur">Erreur 500 : '+errorThrown+'<br />'+erreurMsg+'</p>');
}
}
}
},
error : function(jqXHR, textStatus, errorThrown) {
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>');
$('#dialogue-erreur .alert-txt').append(
'<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');
reponse = jQuery.parseJSON(jqXHR.responseText);
var erreurMsg = "";
var erreurMsg = '';
if (reponse != null) {
$.each(reponse, function (cle, valeur) {
erreurMsg += valeur + "<br />";
erreurMsg += valeur + '<br />';
});
}
$("#dialogue-erreur").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
$('#dialogue-erreur .alert-txt').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>');
complete: function(jqXHR, textStatus) {
var debugMsg = extraireEnteteDebug(jqXHR);
if (debugMsg != '') {
if (DEBUG) {
$("#dialogue-erreur .alert-txt").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
}
}
if ($("#dialogue-erreur .msg").length > 0) {
$("#dialogue-erreur").dialog();
$("#dialogue-erreur").show();
}
}
});
557,214 → 407,283
});
}
 
function afficherEtapeGeolocalisation(numEtape) {
$('.liste_indication_geolocalisation').children().hide();
$('.liste_indication_geolocalisation :nth-child('+numEtape+')').show();
}
 
function afficherErreurGoogleMap(status) {
if (DEBUG) {
$('#dialogue-google-map .contenu').empty().append(
'<pre class="msg-erreur">'+
"Le service de Géocodage de Google Map a échoué à cause de l'erreur : "+status+
'</pre>');
afficherPanneau('#dialogue-google-map');
}
}
 
function geolocaliser(event) {
var latitude = $('#latitude').val(),
longitude = $('#longitude').val(),
nouvellePosition = new google.maps.LatLng(latitude, longitude);
initialiserMarkerDeb();
deplacerMarkerDeb(nouvellePosition);
afficherEtapeGeolocalisation(2);
map.setZoom(16);
arreter(event);
}
 
function tenterGeolocalisation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude,
longitude = position.coords.longitude,
nouvellePosition = new google.maps.LatLng(latitude, longitude);
initialiserMarkerDeb();
deplacerMarkerDeb(nouvellePosition);
map.setZoom(16);
});
}
}
 
function surClickDansCarte(event) {
deplacerMarkerDeb(event.latLng);
}
 
 
//+---------------------------------------------------------------------------------------------------------+
//AUTO-COMPLÉTION Noms Scientifiques => OK
 
function ajouterAutocompletionNoms() {
$('#taxon').autocomplete({
source: function(requete, add){
// la variable de requête doit être vidée car sinon le parametre "term" est ajouté
var url = getUrlAutocompletionNomsSci();
$.getJSON(url, function(data) {
var suggestions = traiterRetourNomsSci(data);
add(suggestions);
});
},
html: true
});
$('#taxon').bind('autocompleteselect', function(event, ui) {
$('#taxon').data(ui.item);
if (ui.item.retenu == true) {
$('#taxon').addClass('ns-retenu');
} else {
$('#taxon').removeClass('ns-retenu');
}
});
}
 
function getUrlAutocompletionNomsSci() {
var mots = $('#taxon').val(),
url = SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL.replace('{referentiel}',NOM_SCI_PROJET);
url = url.replace('{masque}', mots);
return url;
}
 
function traiterRetourNomsSci(data) {
var suggestions = [];
if (data.resultat != undefined) {
$.each(data.resultat, function(i, val) {
val.nn = i;
var nom = {label: '', value: '', nt: '', nomSel: '', nomSelComplet: '', numNomSel: '',
nomRet: '', numNomRet: '', famille: '', retenu: false
};
if (suggestions.length >= AUTOCOMPLETION_ELEMENTS_NBRE) {
nom.label = '...';
nom.value = $('#taxon').val();
suggestions.push(nom);
return false;
} else {
nom.label = val.nom_sci_complet;
nom.value = val.nom_sci_complet;
nom.nt = val.num_taxonomique;
nom.nomSel = val.nom_sci;
nom.nomSelComplet = val.nom_sci_complet;
nom.numNomSel = val.nn;
nom.nomRet = val.nom_retenu_complet;
nom.numNomRet = val['nom_retenu.id'];
nom.famille = val.famille;
nom.retenu = (val.retenu == 'false') ? false : true;
suggestions.push(nom);
}
});
}
return suggestions;
}
 
/*
* jQuery UI Autocomplete HTML Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*
* Adaptation par Aurélien Peronnet pour la mise en gras des noms de taxons valides
*/
(function($) {
var proto = $.ui.autocomplete.prototype,
initSource = proto._initSource;
function filter(array, term) {
var matcher = new RegExp($.ui.autocomplete.escapeRegex(term), 'i');
return $.grep(array, function(value) {
return matcher.test($('<div>').html(value.label || value.value || value).text());
});
}
$.extend(proto, {
_initSource: function() {
if (this.options.html && $.isArray(this.options.source)) {
this.source = function( request, response ) {
response(filter(this.options.source, request.term));
};
} else {
initSource.call(this);
}
},
_renderItem: function(ul, item) {
if (item.retenu == true) {
item.label = '<strong>'+item.label+'</strong>';
}
return $('<li></li>')
.data('item.autocomplete', item)
.append($('<a></a>')[this.options.html ? 'html' : 'text'](item.label))
.appendTo(ul);
}
});
})(jQuery);
 
//+----------------------------------------------------------------------------------------------------------+
//UPLOAD PHOTO : Traitement de l'image => OK
 
$(document).ready(function() {
$('#fichier').on('click change', function(event) {
if ($(this).val().length > 0) {
arreter(event);
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
};
$('#miniature').append(
'<img id="miniature-chargement" class="miniature" alt="chargement" src="'+CHARGEMENT_IMAGE_URL+'"/>');
$('#ajouter-obs').attr('disabled', 'disabled');
if (verifierFormat($(this).val())) {
$('#form-upload').ajaxSubmit(options);
} else {
window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+ $('#fichier').attr('accept'));
}
return false;
}
});
$('#photo-placeholder').click(function(event) {
$('#fichier').click();
});
$('body').on('click', '.effacer-miniature', function(event) {
supprimerMiniature($(this));
});
});
 
 
 
function verifierFormat(nom) {
var parts = nom.split('.');
extension = parts[parts.length - 1];
return (extension.toLowerCase() == 'jpeg' || extension.toLowerCase() == 'jpg');
}
 
function afficherMiniature(reponse) {
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 {
$('#miniatures').append(creerWidgetMiniature(reponse));
}
$('#ajouter-obs').removeAttr('disabled');
}
 
function creerWidgetMiniature(reponse) {
var miniatureUrl = $('miniature-url', reponse).text(),
imgNom = $('image-nom', reponse).text(),
html =
'<div class="miniature">'+
'<img class="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'+
'<button class="btn effacer-miniature" type="button">Effacer</button>'+
'</div>'
return html;
}
 
function supprimerMiniature(miniature) {
miniature.parents('.miniature').remove();
}
 
function supprimerMiniatures() {
$('#miniatures').empty();
$('#miniature-msg').empty();
}
 
 
//+---------------------------------------------------------------------------------------------------------+
//FORMULAIRE : traitements génériques
 
$(document).ready(function() {
$('#prenom').on('change', formaterPrenom);
$('#nom').on('change', formaterNom);
 
configurerDatePicker('#date');
$('#taxon-liste').on('change', surChangementTaxonListe);
// Interaction générales
$('.alert .close').on('click', fermerPanneauAlert);
$('.has-tooltip').tooltip('enable');
$('#btn-aide').on('click', basculerAffichageAide);
$('.dropdown-menu input, .dropdown-menu label').on('click', function(event) {
event.stopPropagation();
});
 
// Interaction sur le formulaire observateur
$('#prenom').on('change', formaterPrenom);
$('#nom').on('change', formaterNom);
$('#courriel_confirmation').on('paste', bloquerCopierCollerCourriel);
// Interaction sur le formulaire obs
configurerDatePicker('#date');
$('a.afficher-coord').on('click', basculerAffichageCoord);
$('#taxon-liste').on('change', surChangementTaxonListe);
ajouterAutocompletionNoms();
$('.cb-milieux').on('click', function(event) {
$(this).valid();
event.stopPropagation();
});
 
// Validation du formulaire
configurerFormValidator();
definirReglesFormValidator();
// Gestion des obs
$('#ajouter-obs').on('click', ajouterObs);
$('.obs-nbre').on('changement', surChangementNbreObs);
$('body').on('click', '.supprimer-obs', supprimerObs);
$('#transmettre-obs').on('click', transmettreObs);
//-------------------------------------------------------------------------------------------------------
// A NETTOYER :
 
$.validator.addMethod(
'dateCel',
function (value, element) {
return /^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{4}$/.test(value);
},
'Format : jj/mm/aaaa. Date incomplète, utiliser 0, exemple : 00/12/2011.');
messages: {
'milieu[]': 'Vous devez sélectionner au moins un milieu'
}
// Défilement des photos
$('body').on('click', '.defilement-control-zone', function(event) {
defilerMiniatures($(this));
});
$("#courriel_confirmation").bind('paste', function(e) {
$("#dialogue-bloquer-copier-coller").dialog();
return false;
$('body').on('mouseover', '.defilement-control-zone', function(event) {
$('.defilement-control', this).removeClass('hidden');
});
//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;
$('body').on('mouseout', '.defilement-control-zone', function(event) {
$('.defilement-control', this).addClass('hidden');
});
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_referentiel' : 'bdtfx',
'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()
});
// retour à une sélection vide pour le taxon
$('#taxon option[value=""]').attr("selected", "selected");
}
});
$(".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 {
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-remarques@tela-botanica.org'+'?'+
'subject=Disfonctionnement du widget de saisie Biodiversite34'+
"&body="+erreurMsg+"\nDébogage :\n"+debugMsg+
'">cel-remarques@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 configurerFormValidator() {
873,34 → 792,441
$(selector + ' + img.ui-datepicker-trigger').appendTo(selector + '-icone.add-on');
}
 
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');
function fermerPanneauAlert() {
$(this).parentsUntil('.zone-alerte', '.alert').hide();
}
 
function basculerAffichageAide() {
if ($(this).hasClass('btn-warning')) {
$('.has-tooltip').tooltip('enable');
$(this).removeClass('btn-warning').addClass('btn-success');
$('#btn-aide-txt', this).text("Désactiver l'aide");
} else {
$('.has-tooltip').tooltip('disable');
$(this).removeClass('btn-success').addClass('btn-warning');
$('#btn-aide-txt', this).text("Activer l'aide");
}
return b64;
}
 
function bloquerCopierCollerCourriel() {
afficherPanneau('#dialogue-bloquer-copier-coller');
return false;
}
 
function basculerAffichageCoord() {
$('.afficher-coord-action').toggle();
$('#coordonnees-geo').toggle('slow');
//valeur false pour que le lien ne soit pas suivi
return false;
}
 
//+----------------------------------------------------------------------------------------------------------+
//CRÉER OBS : Gestion des obs => OK
 
var obsNbre = 0;
 
function ajouterObs() {
if (validerFormulaire() == true) {
obsNbre = obsNbre + 1;
$('.obs-nbre').text(obsNbre);
$('.obs-nbre').triggerHandler('changement');
afficherObs();
stockerObsData();
supprimerMiniatures();
} else {
var debRue = (latLngDeb == undefined) ? false : true,
finRue = (latLngFin == undefined) ? false : true;
if (debRue == false || finRue == false) {
afficherPanneau('#dialogue-form-invalide-rue');
} else {
afficherPanneau('#dialogue-form-invalide');
}
}
}
 
function afficherObs() {
var numNomSel = ($('#taxon-liste').val() == '?') ? $('#taxon').data('numNomSel') : $('#taxon-liste').val(),
nomSpecial = $('#taxon-liste option:selected').hasClass('nom-special'),
taxon = ($('#taxon-liste').val() == '?') ? $('#taxon').val() : $('#taxon-liste option:selected').data('nom-a-sauver'),
referentiel = (numNomSel == undefined) ? '' : '['+NOM_SCI_PROJET+']',
commune = $('#commune-nom').text(),
codeInsee = $('#commune-code-insee').text(),
lat = $('input[name="latitude"]').val(),
lng = $('input[name="longitude"]').val(),
date = $('#date').val(),
site = $('#station').val(),
revetement = $('#revetement-sol').val(),
intensiteGestion = $('#intensite-gestion').val(),
resistance = $('#resistance-traitement-phyto').val(),
milieux = getMilieux(),
notes = (nomSpecial ? taxons[numNomSel]['nom_fr'] + ".<br />" : '') + $('#notes').val();
$('#liste-obs').prepend(
'<div id="obs'+obsNbre+'" class="row-fluid obs obs'+obsNbre+'">'+
'<div class="span12">'+
'<div class="well">'+
'<div class="obs-action pull-right has-tooltip" data-placement="bottom" '+
'title="Supprimer cette observation de la liste à transmettre">'+
'<button class="btn btn-danger supprimer-obs" value="'+obsNbre+'" title="'+obsNbre+'">'+
'<i class="icon-trash icon-white"></i>'+
'</button>'+
'</div> '+
'<div class="row-fluid">'+
'<div class="span2 obs-miniatures">'+
ajouterImgMiniatureAuTransfert()+
'</div>'+
'<div class="span8">'+
'<ul class="unstyled">'+
'<li>'+
'<span class="nom-sci">' + taxon + '</span> ' +
formaterNumNomSel(numNomSel)+
'<span class="referentiel-obs">' + referentiel + '</span>' +
' observé à ' +
'<span class="commune">' + commune + '</span> ' +
'(' + codeInsee + ') [' + lat +' / ' + lng + ']' +
' le ' +
'<span class="date">' + date + '</span>' +
'</li>' +
'<li>' +
'<span>Site :</span> ' + site + ' ' + ' ; ' +
'<span>Revêtement au sol :</span> ' + revetement + ' ' + ' ; ' +
'<span>Intensité de gestion :</span> ' + intensiteGestion + ' ' + ' ; ' +
'<span>Milieu :</span> ' + milieux + ' ' + ' ; ' +
'<span>Résistance/Résilience :</span> ' + resistance + ' ' +
'</li>' +
'<li>' +
'Commentaires : ' + notes +
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
}
 
function getMilieux() {
var milieuxStr = '',
milieux = [];
$('.cb-milieux:checked').each(function() {
milieux.push($(this).val());
});
milieuxStr = Array.prototype.slice.call(milieux).join(', ');
return milieuxStr;
}
 
function ajouterImgMiniatureAuTransfert() {
var html = '',
miniatures = '',
indicateurs = '',
premiere = true,
numero = 1;
if ($('#miniatures img').length == 0) {
html = '<img class="miniature" alt="Aucune photo"src="'+PAS_DE_PHOTO_ICONE_URL+'" />';
} else if ($('#miniatures img').length >= 1) {
$('#miniatures img').each(function() {
var visible = premiere ? 'miniature-selectionnee' : 'miniature-cachee',
css = $(this).hasClass('b64') ? 'miniature b64' : 'miniature',
src = $(this).attr('src'),
alt = $(this).attr('alt');
var miniature = '<img class="'+css+' '+visible+'" alt="'+alt+'"src="'+src+'" />';
miniatures += miniature;
var indicateurActif = premiere ? 'active' : '';
var indicateur = '<li class="' + indicateurActif + '" data-numero="' + numero++ + '"></li>';
indicateurs += indicateur;
premiere = false;
});
if ($('#miniatures img').length == 1) {
html = miniatures;
} else {
html =
'<div class="defilement">' +
miniatures +
'<a class="defilement-control-zone gauche">' +
' <span class="defilement-control gauche hidden">&#60;</span>' +
'</a>' +
'<a class="defilement-control-zone droite">' +
' <span class="defilement-control droite hidden">&#62;</span>' +
'</a>' +
'<ol class="defilement-indicateurs">' + indicateurs + '</ol>' +
'</div>';
}
}
return html;
}
 
function defilerMiniatures(element) {
var miniatureSelectionne = element.siblings('img.miniature-selectionnee');
miniatureSelectionne.removeClass('miniature-selectionnee').addClass('miniature-cachee');
var miniatureAffichee = miniatureSelectionne;
var indicateurActif = element.parent().find('.defilement-indicateurs .active');
indicateurActif.removeClass('active');
if (element.hasClass('defilement-control-zone') && element.hasClass('gauche')) {
if (miniatureSelectionne.prev('.miniature').length != 0) {
miniatureAffichee = miniatureSelectionne.prev('.miniature');
indicateurActif.prev().addClass('active');
} else {
miniatureAffichee = miniatureSelectionne.siblings('.miniature').last();
indicateurActif.siblings().last().addClass('active');
}
} else {
if (miniatureSelectionne.next('.miniature').length != 0) {
miniatureAffichee = miniatureSelectionne.next('.miniature');
indicateurActif.next().addClass('active');
} else {
miniatureAffichee = miniatureSelectionne.siblings('.miniature').first();
indicateurActif.siblings().first().addClass('active');
}
}
miniatureAffichee.addClass('miniature-selectionnee').removeClass('miniature-cachee');
}
 
function formaterNumNomSel(numNomSel) {
var nn = '';
if (numNomSel == undefined) {
nn = '<span class="alert-error">[non lié au référentiel]</span>';
} else {
nn = '<span class="nn">[nn'+numNomSel+']</span>';
}
return nn;
}
 
function surChangementReferentiel() {
NOM_SCI_PROJET = $('#referentiel').val();
NOM_SCI_REFERENTIEL = NOM_SCI_PROJET+':'+PROJETS_VERSIONS[NOM_SCI_PROJET];
$('#taxon').val('');
}
 
function surChangementNbreObs() {
if (obsNbre == 0) {
$('#transmettre-obs').attr('disabled', 'disabled');
$('#ajouter-obs').removeAttr('disabled');
$('#zone-liste-obs').addClass('hidden');
} else {
$('#zone-liste-obs').removeClass('hidden');
if (obsNbre > 0 && obsNbre < OBS_MAX_NBRE) {
$('#transmettre-obs').removeAttr('disabled');
$('#ajouter-obs').removeAttr('disabled');
} else if (obsNbre >= OBS_MAX_NBRE) {
$('#ajouter-obs').attr('disabled', 'disabled');
afficherPanneau('#dialogue-bloquer-creer-obs');
}
}
}
 
function supprimerObs() {
var obsId = $(this).val();
// Problème avec IE 6 et 7
if (obsId == "Supprimer") {
obsId = $(this).attr("title");
if (obsId == 'Supprimer') {
obsId = $(this).attr('title');
}
obsNbre = obsNbre - 1;
$('.obs-nbre').text(obsNbre);
$('.obs-nbre').triggerHandler('changement');
$('#obs'+obsId).remove();
$("#liste-obs").removeData('obsId'+obsId);
$('.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+'" />';
function initialiserObs() {
obsNbre = 0;
$('.obs-nbre').text(obsNbre);
$('.obs-nbre').triggerHandler('changement');
$('#liste-obs').removeData();
$('.obs').remove();
$('#dialogue-bloquer-creer-obs').hide();
}
 
function getNomsImgsOriginales() {
var noms = new Array();
$('.miniature-img').each(function() {
noms.push($(this).attr('alt'));
});
return noms;
}
 
function stockerObsData() {
var nomHorsListe = $('#taxon-liste').val() == '?' ? true : false;
nomSpecial = $('#taxon-liste option:selected').hasClass('nom-special'),
numNomSel = nomHorsListe ? $('#taxon').data('numNomSel') : $('#taxon-liste').val(),
nomSel = nomHorsListe ? $('#taxon').val() : $('#taxon-liste option:selected').data('nom-a-sauver'),
nomRet = nomHorsListe ? $('#taxon').data('nomRet') : taxons[numNomSel]['nom_ret'],
numNomRet = nomHorsListe ? $('#taxon').data('numNomRet') : taxons[numNomSel]['num_nom_ret'],
numTaxon = nomHorsListe ? $('#taxon').data('nt') : taxons[numNomSel]['num_taxon'],
famille = nomHorsListe ? $('#taxon').data('famille') : taxons[numNomSel]['famille'],
referentiel = (numNomSel == undefined) ? '' : NOM_SCI_REFERENTIEL,
notes = (nomSpecial ? taxons[numNomSel]['nom_fr'] + '. ' : '') + $('#notes').val();
$('#liste-obs').data('obsId'+obsNbre, {
'date': $('#date').val(),
'notes': notes,
'station': $('#station').val(),
'latitude': $('#latitude').val(),
'longitude': $('#longitude').val(),
'commune_nom': $('#commune-nom').text(),
'commune_code_insee': $('#commune-code-insee').text(),
'nom_sel': nomSel,
'num_nom_sel': numNomSel,
'nom_ret': nomRet,
'num_nom_ret': numNomRet,
'num_taxon': numTaxon,
'famille': famille,
'referentiel': referentiel,
'milieu': getMilieux(),
// Ajout des champs images
'image_nom': getNomsImgsOriginales(),
// Ajout des champs étendus de l'obs
'obs_etendue': getObsChpEtendus()
});
//console.log($('#liste-obs').data('obsId'+obsNbre));
}
 
function getObsChpEtendus() {
var champs = [],
perceptionTechnicien = getPerceptionTechnicien();
if (perceptionTechnicien != undefined) {
champs.push(perceptionTechnicien);
}
return miniature;
if (latLngDeb != undefined) {
var latitudeDebutRue = {cle: 'latitudeDebutRue', label: 'Latitude du début de la rue', valeur: latLngDeb.lat().toFixed(5)};
champs.push(latitudeDebutRue);
var longitudeDebutRue = {cle: 'longitudeDebutRue', label: 'Longitude du début de la rue', valeur: latLngDeb.lng().toFixed(5)};
champs.push(longitudeDebutRue);
}
if (latLngFin != undefined) {
var latitudeFinRue = {cle: 'latitudeFinRue', label: 'Latitude de fin de la rue', valeur: latLngFin.lat().toFixed(5)};
champs.push(latitudeFinRue);
var longitudeFinRue = {cle: 'longitudeFinRue', label: 'Longitude de fin de la rue', valeur: latLngFin.lng().toFixed(5)};
champs.push(longitudeFinRue);
}
$('.obs-chp-etendu').each(function() {
var valeur = $(this).val(),
cle = $(this).attr('name'),
label = $(this).data('label');
if (valeur != '') {
var chpEtendu = {cle: cle, label: label, valeur: valeur};
champs.push(chpEtendu);
}
});
return champs;
}
 
function getPerceptionTechnicien() {
var perceptionTechnicien = undefined,
perceptions = [];
$('.cb-perception-technicien:checked').each(function() {
perceptions.push($(this).val());
});
if (perceptions.length > 0) {
var valeur = Array.prototype.slice.call(perceptions).join(', ');
perceptionTechnicien = {cle: 'perceptionTechnicien', label: "Perceptions par l'équipe", valeur: valeur};
}
return perceptionTechnicien;
}
 
//+----------------------------------------------------------------------------------------------------------+
//TRANSFERER OBS : envoie des obs au CEL => OK
 
function transmettreObs() {
var observations = $('#liste-obs').data();
if (observations == undefined || jQuery.isEmptyObject(observations)) {
afficherPanneau('#dialogue-zero-obs');
} else {
observations['projet'] = TAG_PROJET;
observations['tag-obs'] = TAG_OBS;
observations['tag-img'] = TAG_IMG;
var utilisateur = new Object();
utilisateur.id_utilisateur = $('#id_utilisateur').val();
utilisateur.prenom = $('#prenom').val();
utilisateur.nom = $('#nom').val();
utilisateur.courriel = $('#courriel').val();
observations['utilisateur'] = utilisateur;
envoyerObsAuCel(observations);
}
return false;
}
 
function envoyerObsAuCel(observations) {
var erreurMsg = '',
debugNonJson = '';
$.ajax({
url: SERVICE_SAISIE_URL,
type: 'POST',
data: observations,
dataType: 'json',
beforeSend: function() {
$('#dialogue-obs-transaction-ko').hide();
$('#dialogue-obs-transaction-ok').hide();
$('.alert-txt .msg').remove();
$('.alert-txt .msg-erreur').remove();
$('.alert-txt .msg-debug').remove();
$('#chargement').show();
},
success: function(data, textStatus, jqXHR) {
$('#dialogue-obs-transaction-ok .alert-txt').append($('#tpl-transmission-ok').clone().html());
supprimerMiniatures();
},
statusCode: {
500: function(jqXHR, textStatus, errorThrown) {
erreurMsg += "Erreur 500 :\ntype : " + textStatus + ' ' + errorThrown + "\n";
}
},
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'est pas en JSON.";
debugNonJson = jqXHR.responseText;
}
},
complete: function(jqXHR, textStatus) {
$('#chargement').hide();
var debugMsg = extraireEnteteDebug(jqXHR);
if (erreurMsg != '') {
if (DEBUG) {
$('#dialogue-obs-transaction-ko .alert-txt').append('<pre class="msg-erreur">' + erreurMsg + '</pre>');
$('#dialogue-obs-transaction-ko .alert-txt').append('<pre class="msg-debug">Débogage : ' + debugNonJson + debugMsg + '</pre>');
}
var hrefCourriel = 'mailto:cel_remarques@tela-botanica.org?' +
'subject=Disfonctionnement du widget de saisie ' + TAG_PROJET +
'&body=' + erreurMsg + "\nDébogage :\n" + debugMsg + debugNonJson;
$('#dialogue-obs-transaction-ko .alert-txt').append($('#tpl-transmission-ko').clone()
.find('.courriel-erreur')
.attr('href', hrefCourriel)
.end()
.html());
$('#dialogue-obs-transaction-ko').show();
} else {
if (DEBUG) {
$('#dialogue-obs-transaction-ok .alert-txt').append('<pre class="msg-debug">Débogage : ' + debugMsg + debugNonJson + '</pre>');
}
$('#dialogue-obs-transaction-ok').show();
}
initialiserObs();
}
});
}
/trunk/widget/modules/saisie/squelettes/sauvages/sauvages.tpl.html
136,161 → 136,248
 
<body data-spy="scroll">
<div id="zone-appli" class="container">
<?php if ($titre == 'defaut' ) : ?>
<h1 id="widget-titre"><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/img/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
<?php else: ?>
<h1 id="widget-titre"><?= $titre ?></h1>
<?php endif; ?>
<h2>Observateur</h2>
<form id="form-observateur" action="#" autocomplete="on">
<fieldset id="partie-identification">
<div class="row-fluid">
<div class="span6 control-group has-tooltip" data-placement="bottom"
title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
ultérieurement. Des informations complémentaires vont vous être
demandées : prénom et nom.">
<label class="control-label" for="courriel">
<strong class="obligatoire">*</strong>
Courriel
</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input id="courriel" name="courriel" class="span11" type="text"/>
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
<div class="row-fluid entete">
<div class="span12">
<?php if ($titre == 'defaut' ) : ?>
<h1 id="widget-titre"><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/img/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
<?php else: ?>
<h1 id="widget-titre"><?= $titre ?></h1>
<?php endif; ?>
<p class="discretion">
Un aide interactive est à votre disposition sur l'interface.
Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
<button id="btn-aide" class="btn btn-mini btn-success">
<span class="icon-question-sign icon-white"></span>
<span id="btn-aide-txt" >Désactiver l'aide</span>
</button>
</p>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<h2>Observateur</h2>
<form id="form-observateur" action="#" autocomplete="on">
<fieldset id="partie-identification">
<div class="row-fluid">
<div class="span6 control-group has-tooltip" data-placement="bottom"
title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
ultérieurement. Des informations complémentaires vont vous être
demandées : prénom et nom.">
<label class="control-label" for="courriel">
<strong class="obligatoire">*</strong>
Courriel
</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input id="courriel" name="courriel" class="span11" type="text"/>
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
</div>
</div>
</div>
<div id="zone-courriel-confirmation" class="span6 hidden control-group has-tooltip"
data-placement="bottom"
title="Saisissez à nouveau votre courriel afin de le confirmer. Le
copier/coller est désactivé pour éviter les erreurs.">
<label class="control-label" for="courriel_confirmation">
<strong class="obligatoire">*</strong>
Courriel (confirmation)
</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input id="courriel_confirmation" name="courriel_confirmation"
class="span11" type="text"/>
</div>
</div>
</div>
</div>
<div id="zone-courriel-confirmation" class="span6 hidden control-group has-tooltip"
data-placement="bottom"
title="Saisissez à nouveau votre courriel afin de le confirmer. Le
copier/coller est désactivé pour éviter les erreurs.">
<label class="control-label" for="courriel_confirmation">
<strong class="obligatoire">*</strong>
Courriel (confirmation)
</label>
<div class="controls">
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input id="courriel_confirmation" name="courriel_confirmation"
class="span11" type="text"/>
</div>
<div id="zone-prenom-nom" class="row-fluid hidden">
<div class="span6 control-group">
<label for="prenom" class="control-label">
<strong class="obligatoire">*</strong>
Prénom
</label>
<input id="prenom" name="prenom" class="span12" type="text"/>
</div>
<div class="span6 control-group">
<label for="nom" class="control-label">
<strong class="obligatoire">*</strong>
Nom
</label>
<div class="controls">
<input id="nom" name="nom" class="span12" type="text"/>
</div>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
<!-- Messages d'erreur du formulaire-->
<div class="row-fluid">
<div class="zone-alerte span12">
<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : copier/coller</h4>
<p>
Merci de ne pas copier/coller votre courriel.<br/>
La double saisie permet de vérifier l'absence d'erreurs.
</p>
</div>
<div id="zone-prenom-nom" class="row-fluid hidden">
<div class="span6 control-group">
<label for="prenom" class="control-label">
<strong class="obligatoire">*</strong>
Prénom
</label>
<input id="prenom" name="prenom" class="span12" type="text"/>
</div>
<div class="span6 control-group">
<label for="nom" class="control-label">
<strong class="obligatoire">*</strong>
Nom
</label>
<div class="controls">
<input id="nom" name="nom" class="span12" type="text"/>
</div>
</div>
<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : courriel introuvable</h4>
<p>
Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
</p>
</div>
</fieldset>
</form>
<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information sur Google Map</h4>
<div class="contenu"></div>
</div>
</div>
</div>
<form id="form-obs" action="#" autocomplete="on">
<form id="form-obs" class="form-inline" action="#" autocomplete="on">
<h2>Fiche de terrain</h2>
<div id="zone-fiche-terrain">
<fieldset id="partie-date">
<legend>Date du relevé</legend>
<ul>
<li>
<label for="date" title="Indiquez la date de votre relevé (au format jj/mm/aaaa) ou utilisez le calendrier">
<strong class="obligatoire">*</strong> Date du relevé
<legend>Date du relevé</legend>
<div class="row-fluid">
<div class="span12 control-group has-tooltip"
title="Vous pouvez cliquer sur l'icône de calendrier pour
sélectionner une date dans un calendrier. La date doit être au format :
jj/mm/aaaa">
<label class="control-label">
<strong class="obligatoire">*</strong>
Date du relevé
<div class="input-prepend">
<span id="date-icone" class="add-on"></span>
<input id="date" class="input-small" name="date" type="text"
placeholder="jj/mm/aaaa" />
</div>
</label>
<input id="date" name="date" type="text" value="" />
</li>
</ul>
</div>
</div>
</fieldset>
<fieldset id="partie-station">
<legend>Lieu du relevé</legend>
<ul>
<li>
<label id="label_map_canvas" for="map_canvas" class="oblig" title="Sur la carte ci-dessous, retracez le parcours étudié, en placant d'abord le point de début de la rue, puis le point de fin">
<strong class="obligatoire">*</strong> Localisation de la rue étudiée
 
<div class="row-fluid">
<div class="span12">
<label for="map_canvas" class="control-label"
title="Veuillez localiser l'observation">
<strong class="obligatoire">*</strong>
Géolocalisation
</label>
</li>
<li>
<ul class="liste_indication_geolocalisation">
<li class="indication_geolocalisation">1ere étape : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li>
<li class="indication_geolocalisation">2eme étape : Placez le drapeau vert au début de la portion de rue étudiée</li>
<li class="indication_geolocalisation">3eme étape : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé,
vous pouvez redéplacer le drapeau vert</li>
<li class="indication_geolocalisation">4eme étape : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
</ul>
<input id="rue" name="rue" type="text" placeholder="Entrez un nom de ville, de lieu ou de rue..." value="" />
</li>
<li id="map-canvas"></li>
<li>
<label for="coordonnees-geo">
<a href="#" class="afficher-coord">Afficher</a>
<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
Les coordonnées géographiques
<span id="lat-lon-info" class="info"
<div class="row-fluid">
<div class="span12">
<ul class="unstyled liste_indication_geolocalisation">
<li class="indication_geolocalisation">Étape 1/4 : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li>
<li class="indication_geolocalisation">Étape 2/4 : Placez le drapeau vert au début de la portion de rue étudiée</li>
<li class="indication_geolocalisation">Étape 3/4 : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé, vous pouvez redéplacer le drapeau vert</li>
<li class="indication_geolocalisation">Étape 4/4 : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
</ul>
</div>
</div>
<div class="form-search form-horizontal">
<div class="control-group">
<input id="carte-recherche"
class="search-query span12 obs-chp-etendu has-tooltip"
type="text"
title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
placeholder="Entrez un nom de ville, de lieu ou de rue..."
name="adresse"
data-label="Adresse"
value=""/>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="map-canvas" class="has-tooltip"
title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
représentant votre station ou bien le glisser-déposer sur
le lieu souhaité."></div>
</div>
</div>
<div id="coordonnees-geo-affichage" class="row-fluid">
<label for="coordonnees-geo" class="span6">
<a class="afficher-coord btn">
<span class="afficher-coord-action">Afficher</span>
<span class="afficher-coord-action" style="display:none;">Cacher</span>
coordonnées
<span id="lat-lon-info" class="info has-tooltip"
title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
(WGS84)
</span>
</label>
<ul id="coordonnees-geo" style="display:none;">
<li id="coord-lat">
<label for="latitude">Latitude</label>
<input id="latitude" name="latitude" type="text" value=""/>
</li>
<li id="coord-lng">
<label for="longitude">Longitude</label>
<input id="longitude" name="longitude" type="text" value=""/>
</li>
<li id="info-commune">
<label for="marqueur-commune">Commune</label><br />
<span id="marqueur-commune">
<span id="commune-nom" class="commune-info"></span>
(<span id="commune-code-insee" class="commune-info" title="Code INSEE de la commune"></span>)
</span>
</li>
<li>
<input id="geolocaliser" type="button" value="Voir sur la carte"/>
</li>
</ul>
</li>
<li>
<hr class="nettoyage" />
</li>
<li>
<ul>
<li>
<label for="rue_cote" title="Choisissez le (ou les) côté(s) de la rue que vous avez étudié">
<strong class="obligatoire">*</strong>
Côté de la rue
</label>
<select id="rue_cote" name="rue_cote">
<option value="">Sélectionner un type de côté</option>
<option value="pair">Pair</option>
<option value="impair">Impair</option>
<option value="2cotes">Les deux</option>
</select>
</li>
</ul>
</li>
</ul>
</a>
</label>
<div id="info-commune" class="span6">
<span for="marqueur-commune">Commune : </span>
<span id="marqueur-commune">
<span id="commune-nom" class="commune-info"></span>
(<span id="commune-code-insee" class="commune-info has-tooltip"
title="Code INSEE de la commune"></span>)
</span>
</div>
</div>
<div id="coordonnees-geo" class="row-fluid" style="display:none;">
<div class="form-inline">
<div id="coord-lat" class="span4 control-group">
<label for="latitude" class="control-label">
<strong class="obligatoire">*</strong>
Latitude
</label>
<div class="controls">
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
</div>
</div>
<div id="coord-lng" class="span4">
<label for="longitude" class="control-label">
<strong class="obligatoire">*</strong>
Longitude
</label>
<div class="controls">
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
</div>
</div>
<div class="span4">
<button id="geolocaliser" class="btn has-tooltip"
title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
Voir sur la carte
</button>
</div>
</div>
</div>
<label for="rue_cote" title="Choisissez le (ou les) côté(s) de la rue que vous avez étudié">
<strong class="obligatoire">*</strong>
Côté de la rue
</label>
<select id="rue_cote" name="rue_cote">
<option value="">Sélectionner un type de côté</option>
<option value="pair">Pair</option>
<option value="impair">Impair</option>
<option value="2cotes">Les deux</option>
</select>
</fieldset>
 
<fieldset id="partie-observation">
<legend>Observations</legend>
<ul>
334,82 → 421,162
</div><!-- zone-fiche-terrain-->
</form>
<div id="zone-fiche-terrain-photo">
<form id="form-upload" action="<?= $url_ws_upload ?>?projet=sauvages"
<div id="zone-fiche-terrain-photo">
<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=sauvages"
method="post" enctype="multipart/form-data">
<fieldset id="partie-photo">
<legend>Ajouter une photo</legend>
<p id="miniature-info" class="discretion">Vous pouvez ajouter une photo correspondant à cette espèce. La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p>
<input type="file" id="fichier" name="fichier" accept="image/jpeg"/>
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
<p id="miniature-msg">&nbsp;</p>
<div id="miniature"></div>
<button id="effacer-miniature" type="button" style="display:none;">Effacer</button>
</fieldset>
<div class="row-fluid">
<div class="span12">
<fieldset id="partie-photo">
<legend>Ajouter une photo</legend>
<p class="miniature-info" class="discretion help-inline">Vous pouvez ajouter des photos correspondant à cette espèce. Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
<div id ="photos-conteneur">
<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
<div id="miniatures"></div>
<p class="miniature-msg" class="span12">&nbsp;</p>
</div>
</fieldset>
</div>
</div>
</form>
<div class="row-fluid">
<div class="span12 centre has-tooltip"
title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
ajouter votre observation à la liste à transmettre.">
<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
Ajouter
</button>
</div>
</div>
</div>
<div>
<button id="ajouter-obs" type="button">Ajouter</button>
<!-- Messages d'erreur du formulaire-->
<div class="row-fluid">
<div class="zone-alerte span6 offset3">
<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : 10 observations maximum</h4>
<p>
Vous venez d'ajouter votre 10ème observation.<br/>
Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
</p>
</div>
</div>
</div><!-- zone-fiche-terrain-photo -->
<div class="zone-alerte span6 offset3">
<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : champs en erreur</h4>
<p>
Certains champs du formulaire sont mal remplis.<br/>
Veuillez vérifier vos données.
</p>
</div>
</div>
<div class="zone-alerte span6 offset3">
<div id="dialogue-form-invalide-rue" class="alert alert-warning alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : champs en erreur</h4>
<p>
Le coordonnées du début et de la fin de la rue n'ont pas été géoréférencé.<br/>
Veuillez suivre les étapes indiquées dans le champ « Géolocalisation ».
</p>
</div>
</div>
</div>
<!-- Affiche le tableau récapitualif des observations ajoutées -->
<div id="zone-liste-obs">
<form action="#" >
<fieldset id="partie-preview">
<legend>Liste des observations à transmettre</legend>
<table id="liste-obs">
<thead>
<tr>
<th>N&deg;</th>
<th>Date</th>
<th>Adresse</th>
<th>Nom</th>
<th>Milieu(x)</th>
<th title="Latitude / Longitude">Lat./Long.</th>
<th>Photo</th>
<th>Notes</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
<button id="transmettre-obs" type="button">Transmettre</button>
</fieldset>
</form>
</div> <!-- zone-liste-obs : wrap3 -->
<div id="zone-liste-obs" class="row-fluid hidden">
<div class="span12">
<div class="well">
<div class="row-fluid">
<div class="span8">
<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
</div>
<div class="span4 droite">
<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
type="button" disabled="disabled"
title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
Transmettre
</button>
</div>
</div>
<div id="liste-obs" ></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="zone-alerte span6 offset3">
<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Attention : aucune observation</h4>
<p>Veuillez saisir des observations pour les transmettres.</p>
</div>
<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : transmission des observations</h4>
<div class="alert-txt"></div>
</div>
<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Erreur : transmission des observations</h4>
<div class="alert-txt"></div>
</div>
</div>
</div>
</div>
<!-- Messages d'erreur du formulaire-->
<div id="dialogue-bloquer-copier-coller" style="display: none;" title="Information copier/coller">
<p>
Merci de ne pas copier/coller votre courriel.<br/>
La double saisie permet de vérifier l'absence d'erreurs.
</p>
</div>
<div id="dialogue-zero-obs" style="display: none;" title="Information aucune observation">
<p>Veuillez saisir des observations pour les transmettres.</p>
</div>
<div id="dialogue-form-invalide" style="display: none;" title="Validation du formulaire">
<p>Certains champs n'ont pas été saisis correctement, veuillez vérifier les champs saisis.</p>
</div>
<div id="dialogue-obs-transaction" style="display: none;" title="Transmission des observations"></div>
<div id="dialogue-google-map" style="display: none;" title="Information sur Google Map"></div>
<div id="dialogue-erreur" style="display: none;" title="Erreur"></div>
<div id="chargement" style="position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%;background:#777;background:rgba(90,86,93,0.7);text-align:center;display:none;">
<div id="chargement-centrage" style="position:relative;width:30%;margin:0 auto;top:30%;">
<img id="chargement-img" src="<?=$url_base?>modules/saisie/squelettes/sauvages/img/chargement_arbre.gif" alt="Transfert en cours..."/>
<!-- Fenêtres modales -->
<div id="chargement" class="modal-fenetre" style="display:none;">
<div id="chargement-centrage" class="modal-contenu">
<img id="chargement-img"
src="<?=$url_base?>modules/saisie/squelettes/florileges/img/chargement_arbre.gif"
alt="Transfert en cours..."/>
<p id="chargement-txt" style="color:white;font-size:1.5em;">
Transfert des observations en cours...<br />
Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre d'observation à transférer.
Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
d'observations à transférer.
</p>
</div>
</div>
<!-- Templates HTML -->
<div id="tpl-transmission-ok" style="display:none;">
<p class="msg">
Merci Beaucoup&nbsp;! Vos observations ont bien été transmises aux chercheurs.<br />
Elles sont désormais affichées sur la carte Sauvages de ma rue,
et s'ajoutent aux données du Carnet en ligne.<br />
Elles sont désormais consultables à travers les différents outils de visualisation
du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
</p>
<p>
Bonne continuation&nbsp;!
</p>
<p>
Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
N'oubliez pas qu'il est nécessaire de
<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
au préalable, si ce n'est pas déjà fait.
</p>
<p>
Pour toute question, n'hésitez pas à nous contacter à&nbsp;:
<a href="mailto:sauvages@tela-botanica.org">sauvages@tela-botanica.org</a>
</p>
</div>
<div id="tpl-transmission-ko" style="display:none;">
<p class="msg">
Une erreur est survenue lors de la transmission de vos observations.<br />
Vous pouvez signaler le dysfonctionnement à
<a class="courriel-erreur" href="mailto:cel_remarques@tela-botanica.org">cel_remarques@tela-botanica.org</a>.
</p>
</div>
<!-- Stats : Google Analytics-->
<script type="text/javascript">
//<![CDATA[
/trunk/widget/modules/saisie/squelettes/sauvages/css/sauvages.css
1,13 → 1,9
@CHARSET "UTF-8";
/*+--------------------------------------------------------------------------------------------------------+*/
/* Balises */
body {
padding:0;
margin:0;
width:100%;
height:100%;
font-family:Arial;
font-size:12px;
background-color:#FFF;
color:#000;
}
h1 {
font-size:1.6em;
25,78 → 21,14
line-height:2em;
}
a, a:active, a:visited {
border-bottom:1px dotted #666;
color:#181;
border-bottom:1px dotted;
text-decoration:none;
}
a:active {
outline:none;
a:active, a:focus, a:hover{
border-bottom:none;
}
a:focus {
outline:thin dotted;
}
a:hover {
color:#56B80E;
border-bottom:1px dotted #56B80E;
}
 
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Présentation des listes de définitions */
dl {
width:100%;
}
dt {
float:left;
font-weight:bold;
text-align:top left;
margin-right:0.3em;
}
dd {
width:auto;
margin:0.5em 0;
}
 
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Tableau : */
table {
border:1px solid gray;
border-collapse:collapse;
}
table thead, table tfoot, table tbody {
background-color:Gainsboro;
border:1px solid gray;
color:black;
}
table tbody {
background-color:#FFF;
}
table th {
font-family:monospace;
border:1px dotted gray;
padding:5px;
background-color:Gainsboro;
}
table td {
font-family:arial;
border:1px dotted gray;
padding:5px;
text-align:left;
}
table caption {
font-family:sans-serif;
}
legend {
font-size:1.2em;
color:#000;
text-transform:uppercase;
letter-spacing:0.2em;
padding:5px 10px;
}
 
.colonne_milieu {
}
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Générique */
.discretion {
104,15 → 36,6
font-family:arial;
font-size:11px;
}
.nettoyage{
clear:both;
}
hr.nettoyage{
visibility:hidden;
}
label[title]:after, th[title]:after, span[title]:after {
content: " " url("../images/icones/aide.png");
}
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Positionnement général */
124,14 → 47,39
/*+--------------------------------------------------------------------------------------------------------+*/
/* Formulaire générique */
fieldset {
background-color:#fff;
background-color:#A1CA10;
}
input[type="text"], select, textarea {
width:240px;
 
/* Validation du formulaire */
label.error {
display:inline-block;
float:left;
color:red;
width:150px;
}
label.error[for="date"] {
display:block;
float:none;
padding-left:5px;
width:100%;
}
label.error.valid {
text-indent: -9999px;
color: #468847;
float:none;
width:0;
height:0;
}
 
/*-------------------------------------------------------*/
/* Formulaire observateur */
#partie-identification, #partie-identification legend{
background:#A1CA10;
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
}
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Formulaire spécifique */
/* Formulaire obs */
#zone-fiche-terrain, #zone-fiche-terrain-photo{
background:#A1CA10;
width:600px;
143,27 → 91,8
}
#zone-fiche-terrain-photo{
-webkit-border-radius: 0 0 10px 10px;-moz-border-radius: 0 0 10px 10px;border-radius: 0 0 10px 10px;
margin-top:-10px;
margin-top:-20px;
}
#zone-liste-obs{
padding-bottom:25px;
margin-top:15px;
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
}
#saisie-obs fieldset{
display:block;
}
#saisie-obs label{
font-weight:bold;
}
 
#partie-observation, #partie-preview, #partie-station{
margin-top:10px;
}
#partie-date * {
position: relative;
z-index:50;
}
#partie-station, #partie-observation, #partie-photo, #partie-date{
width:550px;
margin-left:10px;
174,165 → 103,164
background:#E5E5E5;
-webkit-border-radius: 10px 10px 0 0 ;-moz-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0;
}
#saisie-obs ul {
list-style-type:none;
margin:0;
padding:0;
}
#saisie-obs li {
margin:5px;
}
 
/*-------------------------------------------------------*/
/* Partie-identification */
#partie-identification, #partie-identification legend{
background:#A1CA10;
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px;
/* Géolocalisation */
#map-canvas {
height: 280px;
margin-bottom:5px;
}
#partie-identification{
width:582px;
.coordonnees-geo, .lat-lon-info {
font-size: 10px;
}
#partie-identification li{
float: left;
margin-left: 20px;
display:inline;
width:250px;
#info-commune {
text-align:right;
font-size:10px;
}
#partie-identification label{
/*display:block;*/
.afficher-coord {
font-size:10px;
}
/*-------------------------------------------------------*/
/* Partie-station */
#partie-station fieldset{
margin-top:0;
.indication_geolocalisation {
color:#118811;
font-style: italic;
font-weight: bold;
font-weight:0.9em;
}
#partie-station label {
width: 120px;
display:block;
float:left;
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Gestion des photos */
 
/* Form d'ajout des photos */
#form-upload .miniature {
float: left;
height: 130px;
margin: 5px;
}
#latitude, #longitude {
width:70px;
float:left;
#form-upload .miniature-img {
display: block;
height: 100px;
}
#latitude {
margin-right:5px;
#form-upload .miniature-chargement {
height:100px;
width: 100px;
}
#lat-lon-info {
margin-left:5px;
 
#photos-conteneur {
height: 120px;
}
#partie-observation label{
width:120px;
float:left;
 
/* Images d'une observation */
.obs .obs-miniatures {
min-width: 150px;
margin-right: 5px;
background-color:#524C47;
padding: 4px 0;
}
#partie-observation li{
margin :10px;
.obs .miniature {
display: block;
height: 100px;
margin: 0 auto;
}
#partie-station #label_map_canvas {
width: 100%;
.defilement {
position: relative;
padding: 8px 0;
}
#map-canvas {
width:525px;
height: 340px;
}
#partie-station #partie-lat-lon label.error{
float:left;
width:80px;
.defilement-control-zone {
display: block;
z-index:2;
position: absolute;
top: 0;
width: 50%;
height: 116px;
}
#partie-observation li li, #rue_numeros li{
width :150px;
float:left;
margin :5px;
.defilement-control-zone.gauche{
left: 0;
}
#rue_numeros li{
width :265px;
float:left;
margin:0;
.defilement-control-zone.droite {
right: 0;
}
#rue_numeros li label{
width:80px;
float:left;
.defilement-control {
display: block;
position: absolute;
top: 35%;
width:20px;
height: 20px;
line-height: 20px;
font-size: 17px;
font-weight: 100;
text-align: center;
vertical-align: middle;
border: 3px solid white;
border-radius: 20px;
color: white;
opacity: 1;
background: none repeat scroll 0 0 #524C47;
}
#rue_numeros li input{
width:175px;
.defilement-control.gauche {
left: 3%;
}
#partie-observation li li label.error{
position: relative;
margin-top: -42px;
margin-left:50px;
float:left;
.defilement-control.droite {
right: 3%;
}
label[for=milieu]{
display:block;
width:100%;
 
.defilement-miniatures-cache {
visibility: hidden;
}
label[for=coordonnees-geo] {
display:block;
width:100% !important;
.obs .miniature-cachee {
display: none;
}
ul#coordonnees-geo {
list-style-type:none;
float:left;
width: 100%;
 
.defilement-indicateurs {
list-style: none outside none;
margin: 0;
position: absolute;
left: 0;
bottom: 2px;
z-index: 5;
}
ul#coordonnees-geo li {
float: left;
margin: 5px;
width: 201px;
.defilement-indicateurs li {
background-color: rgba(255, 255, 255, 0.25);
border-radius: 2px;
border: 1px solid lightgrey;
display: block;
float: left;
height: 4px;
margin-left: 2px;
text-indent: -999px;
width: 4px;
}
ul#coordonnees-geo #coord-lat,ul#coordonnees-geo #coord-lng {
width: 70px;
.defilement-indicateurs .active {
background-color: #FFFFFF;
}
ul#coordonnees-geo #info-commune{
width: 150px;
 
/*-------------------------------------------------------*/
/* Observations */
#obs-titre {
margin-right: 20px;
}
ul#liste-milieux{
float:left;
#form-date {
margin: 10px 0;
line-height: 40px;
}
ul#liste-milieux li{
display:inline;
width:100px;
.ns-retenu {
font-weight:bold;
}
#notes{
width:400px;
.nn{
color:#3B9D3B;
}
#rue{
/**width:440px;**/
left: 35px;
position: relative;
top: 35px;
width: 320px;
z-index: 45;
.obs .nom-sci{
font-size:1.5em;
font-weight:bold;
}
.indication_geolocalisation {
color:#118811;
font-style: italic;
font-weight: bold;
font-weight:0.9em;
.commune, .date{
font-size:1.3em;
font-weight:bold;
}
.indication_geolocalisation {
height: 30px;
position: relative;
top: 15px;
.obs-action{
opacity:1;
}
 
/*-------------------------------------------------------*/
/* Photo */
#resultat,.resultat {
width:20%;
}
.resultat {
width:30px;
}
#form-upload{
margin-top:10px;
}
#miniature-info{
margin:0;
}
.b64{
max-width:100px;
max-height:100px;
}
/*-------------------------------------------------------*/
/* Partie-preview */
#partie-preview legend, #partie-preview{
background:#A1CA10;
342,28 → 270,6
width:582px;
border:none;
}
.supprimer-obs{
background-color:transparent;
border:none;
padding:0;
cursor:pointer;
}
.obs-miniature {
text-align:center;
}
.obligatoire {
color:red;
}
label.error {
display:inline;
float:none;
padding-left:.5em;
color:red;
}
#partie-observation label.error,#partie-station label.error {
width:150px;
float:right;
}
#ajouter-obs{
margin-left:407px;
margin-top:10px;
383,6 → 289,11
-webkit-border-radius: 5x;-moz-border-radius: 5px;border-radius: 5px;
height:35px;
}
 
 
 
 
 
/*-------------------------------------------------------*/
/* Autocomplete */
.valeur-defaut-recherche {
/trunk/widget/modules/saisie/squelettes/florileges/css/florileges.css
76,12 → 76,6
width: 100px;
}
 
/* Bouton de sélection des fichiers */
/*#fichier {
visibility: hidden;
height:0;
width:0;
}*/
#photos-conteneur {
height: 120px;
}
252,11 → 246,6
}
 
/* Validation du formulaire */
label.valid {
display: inline-block;
text-indent: -9999px;
color: #468847;
}
label.error {
font-weight: bold;
font-style:italic;
263,6 → 252,14
color: #B94A48;
padding: 0 8px;
}
label.valid {
display: inline-block;
text-indent: -9999px;
color: #468847;
width:0;
height:0;
padding:0;
}
.control-group.error label {
font-weight: bold;
}
/trunk/widget/modules/saisie/squelettes/florileges/florileges.tpl.html
996,7 → 996,7
<p>Veuillez saisir des observations pour les transmettres.</p>
</div>
<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : transmission des observations</h4>
<div class="alert-txt"></div>
/trunk/widget/modules/saisie/squelettes/florileges/js/florileges.js
1005,7 → 1005,6
return ok;
}
 
 
function fermerPanneauAlert() {
$(this).parentsUntil('.zone-alerte', '.alert').hide();
}
1425,7 → 1424,7
$('#dialogue-obs-transaction-ko .alert-txt').append('<pre class="msg-erreur">' + erreurMsg + '</pre>');
$('#dialogue-obs-transaction-ko .alert-txt').append('<pre class="msg-debug">Débogage : ' + debugNonJson + debugMsg + '</pre>');
}
var hrefCourriel = 'mailto:cel@tela-botanica.org?' +
var hrefCourriel = 'mailto:cel_remarques@tela-botanica.org?' +
'subject=Disfonctionnement du widget de saisie ' + TAG_PROJET +
'&body=' + erreurMsg + "\nDébogage :\n" + debugMsg + debugNonJson;