Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 1537 → Rev 1540

/trunk/widget/modules/saisie/squelettes/florileges/css/florileges.css
22,6 → 22,7
h1, h2 {
font-size: 40px;
font-family:florileges;
font-weight: normal;
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Générique */
54,31 → 55,9
margin:0 auto;
top:30%;
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Formulaire */
#map-canvas {
height:240px;
.nom-sci {
font-style: italic;
}
#info-commune {
text-align:right;
}
.ns-retenu {
font-weight:bold;
}
.nn{
color:#3B9D3B;
}
.nom-sci{
font-size:1.5em;
font-weight:bold;
}
.commune, .date{
font-size:1.3em;
font-weight:bold;
}
.obs-action{
opacity:1;
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Gestion des photos */
.miniature{
156,6 → 135,21
padding: 4px;
background: url("../img/background/noise.png") repeat scroll 0 0 white;
}
@media (min-width: 575px) and (max-width: 767px){
.forcer-colonne [class*="span"] {
float: left;
margin-left: 2.12766%;
}
.forcer-colonne .span4 {
width: 31.6239%;
}
.forcer-colonne .span6 {
width: 48.9362%;
}
.forcer-colonne .span8 {
width: 65.9574%;
}
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Spécifique Florilèges */
.page-header .intro {
168,12 → 162,22
}
 
/* Géolocalisation */
 
 
#map-canvas {
height: 240px;
margin-bottom:5px;
}
.coordonnees-geo, .lat-lon-info {
font-size: 10px;
}
#info-commune {
text-align:right;
font-size:10px;
}
.afficher-coord {
font-size:10px;
}
 
/* Observations */
#obs-titre {
183,8 → 187,37
margin: 10px 0;
line-height: 40px;
}
.ns-retenu {
font-weight:bold;
}
.nn{
color:#3B9D3B;
}
.obs .nom-sci{
font-size:1.5em;
font-weight:bold;
}
.commune, .date{
font-size:1.3em;
font-weight:bold;
}
.obs-action{
opacity:1;
}
 
 
/* Validation du formulaire */
label.valid {
display: inline-block;
text-indent: -9999px;
color: #468847;
}
label.error {
font-weight: bold;
color: #B94A48;
padding: 2px 8px;
margin-top: 2px;
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* SLIDERs */
.slider-on {
display: none;
242,4 → 275,7
}
.ui-slider .ui-slider-handle {
font-size: 12px;
}
.ui-datepicker {
z-index: 2;
}
/trunk/widget/modules/saisie/squelettes/florileges/florileges.tpl.html
118,7 → 118,7
<body data-spy="scroll">
<div class="container">
<div class="row-fluid page-header">
<div class="span6">
<div class="span7">
<div class="well intro">
<h1>Florilèges</h1>
<p>
161,79 → 161,82
</div>
</div>
<div class="span6">
<div class="well">
<div class="span5">
<div class="well forcer-colonne">
<h2>Observateur</h2>
<form id="form-observateur" action="#" class="" autocomplete="on">
<div class="row-fluid">
<div class="span6" rel="tooltip" data-placement="right"
<div class="span6 control-group" rel="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 for="courriel"
title="Veuillez saisir votre adresse courriel.">
<strong class="obligatoire">*</strong> Courriel
</label>
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input id="courriel" class="span12" name="courriel" type="text"/>
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
</div>
<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">
<label for="courriel_confirmation"
title="Veuillez saisir confirmer le courriel.">
<div id="zone-courriel-confirmation" class="span6 hidden control-group">
<label class="control-label" for="courriel_confirmation">
<strong class="obligatoire">*</strong>
Courriel (confirmation)
</label>
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input id="courriel_confirmation" class="span12" name="courriel_confirmation" type="text"/>
<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-prenom-nom" class="row-fluid hidden">
<div class="span6">
<label for="prenom">Prénom</label>
<div>
<input id="prenom" name="prenom" class="span12" type="text"/>
</div>
<label for="prenom">
Prénom
</label>
<input id="prenom" name="prenom" class="span12" type="text"/>
</div>
<div class="span6">
<label for="nom">Nom</label>
<div>
<input id="nom" name="nom" class="span12" type="text"/>
</div>
<label for="nom">
Nom
</label>
<input id="nom" name="nom" class="span12" type="text"/>
</div>
</div>
<div id="zone-personne-complement" >
<div id="zone-personne-complement" class="forcer-colonne">
<div class="row-fluid">
<div class="span12">
<label for="structure">Structure</label>
<div>
<input id="structure" name="personneStructure" class="span12 " type="text"/>
</div>
<div class="span6">
<label for="structure">
Structure
</label>
<input id="structure" name="personneStructure" class="span12 " type="text"/>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label for="service">Service</label>
<div>
<input id="service" name="personneService" class="span12" type="text"/>
</div>
<div class="span6">
<label for="service">
Service
</label>
<input id="service" name="personneService" class="span12" type="text"/>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<label for="fonction">Fonction</label>
<div>
<input id="fonction" name="personneFonction" class="span12" type="text"/>
</div>
<label for="fonction">
Fonction
</label>
<input id="fonction" name="personneFonction" class="span12" type="text"/>
</div>
</div>
</div>
283,7 → 286,7
</div>
</div>
</div>
<div class="well">
<div class="forcer-colonne well">
<div class="row-fluid">
<div class="span4">
<label for="map_canvas" title="Veuillez localiser l'observation">
309,18 → 312,20
le lieu souhaité."></div>
</div>
</div>
<div class="row-fluid">
<label for="coordonnees-geo" class="span7">
<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"
rel="tooltip"
title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
(WGS84)
</span>
<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"
rel="tooltip"
title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
(WGS84)
</span>
</a>
</label>
<div id="info-commune" class="span5">
<div id="info-commune" class="span6">
<span for="marqueur-commune">Commune : </span>
<span id="marqueur-commune">
<span id="commune-nom" class="commune-info"></span>
330,31 → 335,29
</span>
</div>
</div>
<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
<div id="coordonnees-geo" class="well" style="display:none;">
<div class="row-fluid form-inline">
<div id="coord-lat" class="span4">
<label>
Latitude
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
</label>
</div>
<div id="coord-lng" class="span4">
<label>
Longitude
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
</label>
</div>
<div class="span4">
<button id="geolocaliser" class="btn"
rel="tooltip"
title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
Voir sur la carte
</button>
</div>
<div id="coordonnees-geo" class="row-fluid" style="display:none;">
<form id="form-station" class="control-group form-inline">
<div id="coord-lat" class="span4">
<label>
Latitude
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
</label>
</div>
</div>
</form>
<div id="coord-lng" class="span4">
<label>
Longitude
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
</label>
</div>
<div class="span4">
<button id="geolocaliser" class="btn"
rel="tooltip"
title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
Voir sur la carte
</button>
</div>
</form>
</div>
</div>
</div>
<div class="span4">
497,78 → 500,88
<div class="span4">
<h2 id="obs-titre">Observations</h2>
</div>
<form id="form-date" class="form-inline">
<div class="span4" rel="tooltip"
title="Vous pouvez cliquer sur l'icône de calendrier pour
sélectionner une date dans un calendrier.">
<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
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>
</div>
<div class="span4" rel="tooltip"
title="Date approximative de la dernière intervention." >
<label for="date-derniere-intervention">Dernière intervention</label>
<select id="date-derniere-intervention">
<option value="inconnue">ne sais pas</option>
<option>plus de 3 ans</option>
<option>entre 1 et 3 ans</option>
<option>moins d'1 an</option>
<option>au cours du dernier semestre</option>
<option>au cours du dernier trimestre</option>
<option>au cours des 30 derniers jours</option>
<option>au cours des 7 derniers jours</option>
</select>
</div>
</form>
<div class="span8">
<form id="form-date" class="form-inline">
<div class="span6" rel="tooltip"
title="Vous pouvez cliquer sur l'icône de calendrier pour
sélectionner une date dans un calendrier.">
<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
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>
</div>
<div class="span6" rel="tooltip"
title="Date approximative de la dernière intervention." >
<label>
Dernière intervention
<select id="date-derniere-intervention">
<option value="inconnue">ne sais pas</option>
<option>plus de 3 ans</option>
<option>entre 1 et 3 ans</option>
<option>moins d'1 an</option>
<option>au cours du dernier semestre</option>
<option>au cours du dernier trimestre</option>
<option>au cours des 30 derniers jours</option>
<option>au cours des 7 derniers jours</option>
</select>
</label>
</div>
</form>
</div>
</div>
<form id="form-obs" action="#" autocomplete="on">
<form id="form-obs" autocomplete="on">
<div class="row-fluid">
<div class="well span6">
<div class="row-fluid">
<div class="span12">
<div id="taxon-liste-input-groupe" rel="tooltip"
<div id="taxon-liste-input-groupe" class="control-group" rel="tooltip"
title="Sélectionnez une espèce dans la liste déroulante par son nom latin
ou commun. Si une espèce est abscente, sélectionner «Autre espèce»." >
<label title="Choisissez l'espèce rencontrée.">
<label class="control-label" for="taxon-liste" title="Choisissez l'espèce rencontrée.">
<strong class="obligatoire">*</strong>
Espèces les plus communes
<div class="input-prepend">
</label>
<div class="controls">
<div class="input-prepend ">
<span class="add-on">
<i class="icon-leaf"></i>
</span>
<select id="taxon-liste" class="span12" name="taxon-liste">
<option value="" selected="selected">Sélectionner une espèce</option>
<option value="" selected>Sélectionner une espèce</option>
<option value="?">Autre espèce</option>
<?php foreach ($taxons as $taxon) :?>
<option <?= $taxon['nom_ret']== $taxon['nom_fr'] ? 'style="font-style:italic;"' : '' ?> value="<?=$taxon['num_nom_sel']?>"
title="<?=$taxon['nom_ret'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>">
<option
class="<?=($taxon['nom_ret'] == $taxon['nom_fr']) ? 'nom-sci' : 'nom-fr' ?>"
value="<?=$taxon['num_nom_sel']?>"
title="<?=$taxon['nom_ret'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>"
>
<?=$taxon['nom_fr']?>
</option>
<?php endforeach; ?>
</select>
</div>
</label>
</div>
</div>
</div>
</div>
<div id="taxon-input-groupe" class="row-fluid hidden">
<div class="span12">
<div rel="tooltip"
<div class="control-group" rel="tooltip"
title="Sélectionnez une espèce dans la liste déroulante pour lier
votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
un nom absent du référentiel (Ex. : 'fleur violette' ou 'viola sinensis???')." >
<label title="Choisissez l'espèce rencontrée.">
<label class="control-label" for="taxon" title="Choisissez l'espèce rencontrée.">
Autre espèce
</label>
<div class="controls">
<input id="taxon" name="taxon" type="text" class="span12"
placeholder="Autre espèce (ou indication sur la plante)"
value="<?= $nom_sci_espece_defaut; ?>" />
</label>
</div>
</div>
</div>
</div>
639,7 → 652,8
title="Hauteur maximum en centimètre de la plante sur le site.">
<label >
Hauteux max. (en cm) de la plante
<input id="hauteur-plante" class="span2" name="hauteurPlante" type="number" />
<input id="hauteur-plante" class="span2" name="hauteurPlante"
type="number" min="0" step="1" />
</label>
</div>
</div>
698,7 → 712,7
<div class="input-prepend">
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown">
<i class="icon-heart"></i>
<i class="icon-eye-open"></i>
Sélectionner une ou plusieurs perceptions
<span class="caret"></span>
</button>
785,9 → 799,34
</button>
</div>
</div>
</div>
</div>
<!-- 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 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>
<!-- Affiche le tableau récapitualif des observations ajoutées -->
<div id="zone-liste-obs" class="row-fluid">
<div class="span12">
835,30 → 874,6
<p class="span12">&copy; Tela Botanica 2013</p>
</footer>
</div>
<!-- Messages d'erreur du formulaire-->
<div class="row">
<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 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>
<!-- Fenêtres modales -->
<div id="chargement" class="modal-fenetre" style="display:none;">
/trunk/widget/modules/saisie/squelettes/florileges/js/florileges.js
50,7 → 50,7
});
$('#photo-placeholder').click(function(event) {
$("#fichier").click();
$('#fichier').click();
});
$('#fichier').bind('change', function (e) {
60,12 → 60,13
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+'"/>');
$('#miniature').append(
'<img id="miniature-chargement" class="miniature" alt="chargement" src="'+CHARGEMENT_IMAGE_URL+'"/>');
$('#ajouter-obs').attr('disabled', 'disabled');
if(verifierFormat($('#fichier').val())) {
$('#form-upload').ajaxSubmit(options);
} else {
window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+ $("#fichier").attr("accept"));
window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+ $('#fichier').attr('accept'));
}
return false;
});
113,29 → 114,29
 
//+----------------------------------------------------------------------------------------------------------+
// GOOGLE MAP
var map;
var marker;
var latLng;
var geocoder;
var map,
marker,
latLng,
geocoder;
 
$(document).ready(function() {
initialiserGoogleMap();
// Autocompletion du champ adresse
$("#carte-recherche").on('focus', function() {
$('#carte-recherche').on('focus', function() {
$(this).select();
});
$("#carte-recherche").on('mouseup', function(event) {// Pour Safari...
$('#carte-recherche').on('mouseup', function(event) {// Pour Safari...
event.preventDefault();
});
$("#carte-recherche").keypress(function(e) {
$('#carte-recherche').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
$("#carte-recherche").autocomplete({
$('#carte-recherche').autocomplete({
//Cette partie utilise geocoder pour extraire des valeurs d'adresse
source: function(request, response) {
162,7 → 163,7
}
});
$("#geolocaliser").on('click', geolocaliser);
$('#geolocaliser').on('click', geolocaliser);
google.maps.event.addListener(marker, 'dragend', surDeplacementMarker);
171,22 → 172,24
 
function initialiserGoogleMap(){
// Carte
var latLng = new google.maps.LatLng(46.30871, 2.54395);// Centre de la France
var zoomDefaut = 5;
var options = {
zoom: zoomDefaut,
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]}
};
var latLng = new google.maps.LatLng(46.30871, 2.54395),// Centre de la France
zoomDefaut = 5;
options = {
zoom: zoomDefaut,
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";
return 'http://tile.openstreetmap.org/' + zoom + '/' + coord.x + '/' + coord.y + '.png';
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
214,11 → 217,13
initialiserMarker(latLng);
// Tentative de geocalisation
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var latitude = position.coords.latitude,
longitude = position.coords.longitude;
latLng = new google.maps.LatLng(latitude, longitude);
deplacerMarker(latLng);
});
}
233,11 → 238,12
deplacerMarker(event.latLng);
}
 
function geolocaliser() {
var latitude = $('#latitude').val();
var longitude = $('#longitude').val();
function geolocaliser(event) {
var latitude = $('#latitude').val(),
longitude = $('#longitude').val();
latLng = new google.maps.LatLng(latitude, longitude);
deplacerMarker(latLng);
arreter(event);
}
 
function initialiserMarker(latLng) {
244,6 → 250,8
if (marker != undefined) {
marker.setPosition(latLng);
map.setCenter(latLng);
mettreAJourMarkerPosition(latLng);
trouverCommune(latLng);
}
}
 
257,8 → 265,8
}
 
function mettreAJourMarkerPosition(latLng) {
var lat = latLng.lat().toFixed(5);
var lng = latLng.lng().toFixed(5);
var lat = latLng.lat().toFixed(5),
lng = latLng.lng().toFixed(5);
remplirChampLatitude(lat);
remplirChampLongitude(lng);
}
275,55 → 283,56
 
function trouverCommune(pos) {
$(function() {
var url_service = SERVICE_NOM_COMMUNE_URL;
var urlNomCommuneFormatee = url_service.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 .alert-txt").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();
$("#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 .alert-txt").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 .alert-txt").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 .alert-txt").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 .alert-txt").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) {
complete: function(jqXHR, textStatus) {
var debugMsg = extraireEnteteDebug(jqXHR);
if (debugMsg != '') {
if (DEBUG) {
357,9 → 366,9
//TODO: mettre ceci en paramètre de config
var urlAnnuaire = SERVICE_ANNUAIRE_ID_URL + courriel;
$.ajax({
url : urlAnnuaire,
type : 'GET',
success : function(data, textStatus, jqXHR) {
url: urlAnnuaire,
type: 'GET',
success: function(data, textStatus, jqXHR) {
console.log('SUCCESS:'+textStatus);
if (data != undefined && data[courriel] != undefined) {
var infos = data[courriel];
373,11 → 382,11
surErreurCompletionCourriel();
}
},
error : function(jqXHR, textStatus, errorThrown) {
error: function(jqXHR, textStatus, errorThrown) {
console.log('ERREUR :'+textStatus);
surErreurCompletionCourriel();
},
complete : function(jqXHR, textStatus) {
complete: function(jqXHR, textStatus) {
console.log('COMPLETE :'+textStatus);
$('#zone-prenom-nom').removeClass('hidden');
$('#zone-courriel-confirmation').removeClass('hidden');
402,11 → 411,12
transformerEnSlider('#resistance-traitement-phyto');
transformerEnSlider('#vitesse-croissance');
// Afficher/Cacher champs cachés par défaut
$('#periodicite-traitement-phyto').on('change', function() {
if ($(this).val() === 'jamais') {
$('#datp-zone').removeClass('hidden');
} else {
$('#datp-zone').addClass('hidden');
$('#datp-zone').addClass('hidden');
}
});
$('#taxon-liste').on('change', function() {
413,7 → 423,7
if ($(this).val() === '?') {
$('#taxon-input-groupe').removeClass('hidden');
} else {
$('#taxon-input-groupe').addClass('hidden');
$('#taxon-input-groupe').addClass('hidden');
}
});
423,12 → 433,13
$('#btn-aide').on('click', basculerAffichageAide);
$('#prenom').on('change', formaterPrenom);
$('#nom').on('change', formaterNom);
configurerDatePicker('#date');
configurerDatePicker('#date-arret-traitement-phyto');
ajouterAutocompletionNoms();
configurerFormValidator();
definirReglesFormValidator();
453,6 → 464,21
event.preventDefault();
defilerMiniatures($(this));
});
$('.dropdown-menu input, .dropdown-menu label').on('click', function(event) {
event.stopPropagation();
});
$('input#hauteur-plante').on('blur', function() {
// if there's a bad value
var valeur = $(this).val();
console.log(valeur);
if (! valeur.match(/^[0-9]+$/)) {
// replace it with nothing
var nouvelleValeur = valeur.replace(/[^0-9]/g, '');
$(this).val(nouvelleValeur);
}
});
});
 
function transformerEnSlider(selector) {
511,36 → 537,20
'Format : jj/mm/aaaa. Date incomplète, utiliser 0, exemple : 00/12/2011.');
$.extend($.validator.defaults, {
errorClass: 'control-group error',
validClass: 'control-group success',
errorElement: 'span',
highlight: function(element, errorClass, validClass) {
if (element.type === 'radio') {
this.findByName(element.name).parent('div').parent('div').removeClass(validClass).addClass(errorClass);
} else {
$(element).parent('div').parent('div').removeClass(validClass).addClass(errorClass);
}
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
},
unhighlight: function(element, errorClass, validClass) {
if (element.type === 'radio') {
this.findByName(element.name).parent('div').parent('div').removeClass(errorClass).addClass(validClass);
} else {
if ($(element).attr('id') == 'taxon') {
if ($('#taxon').val() != '') {
// Si le taxon n'est pas lié au référentiel, on vide le data associé
if($('#taxon').data('value') != $('#taxon').val()) {
$('#taxon').data('numNomSel', '');
$('#taxon').data('nomRet', '');
$('#taxon').data('numNomRet', '');
$('#taxon').data('nt', '');
$('#taxon').data('famille', ');
}
$('#taxon-input-groupe').removeClass(errorClass).addClass(validClass);
$(element).next('span.help-inline').remove();
}
} else {
$(element).parent('div').parent('div').removeClass(errorClass).addClass(validClass);
$(element).next('span.help-inline').remove();
success: function(element) {
element.text('OK!').addClass('valid')
.closest('.control-group').removeClass('error').addClass('success');
if (element.attr('id') == 'taxon' && $('#taxon').val() != '') {
// Si le taxon n'est pas lié au référentiel, on vide le data associé
if ($('#taxon').data('value') != $('#taxon').val()) {
$('#taxon').data('numNomSel', '');
$('#taxon').data('nomRet', '');
$('#taxon').data('numNomRet', '');
$('#taxon').data('nt', '');
$('#taxon').data('famille', '');
}
}
}
562,7 → 572,7
rules: {
latitude : {
range: [-90, 90]},
longitude : {
longitude: {
range: [-180, 180]}
}
});
569,7 → 579,7
$('#form-obs').validate({
rules: {
date: 'dateCel',
taxon: 'required'
'taxon-liste': 'required'
}
});
}
596,16 → 606,16
}
 
function formaterPrenom() {
var prenom = new Array();
var mots = $(this).val().split(' ');
var prenom = new Array(),
mots = $(this).val().split(' ');
for (var i = 0; i < mots.length; i++) {
var mot = mots[i];
if (mot.indexOf('-') >= 0) {
var prenomCompose = new Array();
var motsComposes = mot.split('-');
var prenomCompose = new Array(),
motsComposes = mot.split('-');
for (var j = 0; j < motsComposes.length; j++) {
var motSimple = motsComposes[j];
var motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
var motSimple = motsComposes[j],
motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
prenomCompose.push(motMajuscule);
}
prenom.push(prenomCompose.join('-'));
621,7 → 631,7
if ($(this).hasClass('btn-warning')) {
$('[rel=tooltip]').tooltip('enable');
$(this).removeClass('btn-warning').addClass('btn-success');
$('#btn-aide-txt', this).text('Désactiver l'aide');
$('#btn-aide-txt', this).text("Désactiver l'aide");
} else {
$('[rel=tooltip]').tooltip('disable');
$(this).removeClass('btn-success').addClass('btn-warning');
635,7 → 645,7
}
 
function basculerAffichageCoord() {
$('a.afficher-coord').toggle();
$('.afficher-coord-action').toggle();
$('#coordonnees-geo').toggle('slow');
//valeur false pour que le lien ne soit pas suivi
return false;
649,8 → 659,7
afficherObs();
stockerObsData();
supprimerMiniatures();
$('#taxon').val('');
$('#taxon').data('numNomSel', undefined);
$('#taxon').val('').data('numNomSel', undefined).removeClass('ns-retenu');
} else {
afficherPanneau('#dialogue-form-invalide');
}
657,6 → 666,18
}
 
function afficherObs() {
var numNomSel = ($('#taxon-liste').val() == '?') ? $('#taxon').data('numNomSel') : $('#taxon-liste').val(),
taxon = ($('#taxon-liste').val() == '?') ? $('#taxon').val() : taxons[numNomSel]['nom_sel'],
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(),
milieux = getMilieux(),
notes = $('#notes').val();
$('#liste-obs').prepend(
'<div id="obs'+obsNbre+'" class="row-fluid obs obs'+obsNbre+'">'+
'<div class="span12">'+
674,23 → 695,22
'<div class="span9">'+
'<ul class="unstyled">'+
'<li>'+
'<span class="nom-sci">'+$("#taxon").val()+'</span> '+
ajouterNumNomSel()+'<span class="referentiel-obs">'+
($("#taxon").data("numNomSel") == undefined ? '' : '['+NOM_SCI_PROJET+']')+'</span>'+
' observé à '+
'<span class="commune">'+$('#commune-nom').text()+'</span> '+
'('+$('#commune-code-insee').text()+') ['+$("#latitude").val()+' / '+$("#longitude").val()+']'+
' le '+
'<span class="date">'+$("#date").val()+'</span>'+
'<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>Milieu :</span> ' + milieux + ' ' +
'</li>' +
'<li>' +
'Commentaires : <span class="discretion">' + notes + '</span>'+
'</li>'+
'<li>'+
'<span>Lieu-dit :</span> '+$('#lieudit').val()+' '+
'<span>Station :</span> '+$('#station').val()+' '+
'<span>Milieu :</span> '+$('#milieu').val()+' '+
'</li>'+
'<li>'+
'Commentaires : <span class="discretion">'+$("#notes").val()+'</span>'+
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
699,6 → 719,55
'</div>');
}
 
function getMilieux() {
var milieuxStr = '',
milieux = [];
$('input:checkbox[name="milieux"]:checked').each(function() {
milieux.push($(this).val());
});
milieuxStr = Array.prototype.slice.call(milieux).join(', ');
return milieuxStr;
}
 
function ajouterImgMiniatureAuTransfert() {
var html = '',
miniatures = '',
premiere = true;
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');
premiere = false;
miniature = '<img class="'+css+' '+visible+'" alt="'+alt+'"src="'+src+'" />';
miniatures += miniature;
});
visible = ($('#miniatures img').length > 1) ? '' : 'defilement-miniatures-cache';
var html =
'<div class="defilement-miniatures">'+
'<a href="#" class="defilement-miniatures-gauche '+visible+'">&#60;</a>'+
miniatures+
'<a href="#" class="defilement-miniatures-droite '+visible+'">&#62;</a>'+
'</div>';
} else {
html = '<img class="miniature" alt="Aucune photo"src="'+PAS_DE_PHOTO_ICONE_URL+'" />';
}
return html;
}
 
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 stockerObsData() {
$('#liste-obs').data('obsId'+obsNbre, {
'date' : $('#date').val(),
770,11 → 839,11
function envoyerObsAuCel(observations) {
var erreurMsg = '';
$.ajax({
url : SERVICE_SAISIE_URL,
type : 'POST',
data : observations,
dataType : 'json',
beforeSend : function() {
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();
782,16 → 851,16
$('.alert-txt .msg-debug').remove();
$('#chargement').show();
},
success : function(data, textStatus, jqXHR) {
success: function(data, textStatus, jqXHR) {
$('#dialogue-obs-transaction-ok .alert-txt').append($('#tpl-transmission-ok').clone().html());
supprimerMiniatures();
},
statusCode : {
500 : function(jqXHR, textStatus, errorThrown) {
statusCode: {
500: function(jqXHR, textStatus, errorThrown) {
erreurMsg += "Erreur 500 :\ntype : " + textStatus + ' ' + errorThrown + "\n";
}
}
},
error : function(jqXHR, textStatus, errorThrown) {
error: function(jqXHR, textStatus, errorThrown) {
erreurMsg += "Erreur Ajax :\ntype : " + textStatus + ' ' + errorThrown + "\n";
try {
reponse = jQuery.parseJSON(jqXHR.responseText);
804,7 → 873,7
erreurMsg += "L'erreur n'était pas en JSON.";
}
},
complete : function(jqXHR, textStatus) {
complete: function(jqXHR, textStatus) {
$('#chargement').hide();
var debugMsg = extraireEnteteDebug(jqXHR);
813,9 → 882,9
$('#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 : ' + debugMsg + '</pre>');
}
var hrefCourriel = "mailto:cel@tela-botanica.org?" +
"subject=Disfonctionnement du widget de saisie " + TAG_PROJET +
"&body=" + erreurMsg + "\nDébogage :\n" + debugMsg;
var hrefCourriel = 'mailto:cel@tela-botanica.org?' +
'subject=Disfonctionnement du widget de saisie ' + TAG_PROJET +
'&body=' + erreurMsg + "\nDébogage :\n" + debugMsg;
$('#dialogue-obs-transaction-ko .alert-txt').append($('#tpl-transmission-ko').clone()
.find('.courriel-erreur')
884,36 → 953,9
$('#dialogue-bloquer-creer-obs').hide();
}
 
function ajouterImgMiniatureAuTransfert() {
var html = '';
var miniatures = '';
var premiere = true;
if ($("#miniatures img").length >= 1) {
$("#miniatures img").each(function() {
var visible = premiere ? 'miniature-selectionnee' : 'miniature-cachee';
premiere = false;
var css = $(this).hasClass('b64') ? 'miniature b64' : 'miniature';
var src = $(this).attr("src");
var alt = $(this).attr("alt");
miniature = '<img class="'+css+' '+visible+'" alt="'+alt+'"src="'+src+'" />';
miniatures += miniature;
});
visible = ($("#miniatures img").length > 1) ? '' : 'defilement-miniatures-cache';
var html =
'<div class="defilement-miniatures">'+
'<a href="#" class="defilement-miniatures-gauche '+visible+'">&#60;</a>'+
miniatures+
'<a href="#" class="defilement-miniatures-droite '+visible+'">&#62;</a>'+
'</div>';
} else {
html = '<img class="miniature" alt="Aucune photo"src="'+PAS_DE_PHOTO_ICONE_URL+'" />';
}
return html;
}
 
function defilerMiniatures(element) {
var miniatureSelectionne = element.siblings("img.miniature-selectionnee");
var miniatureSelectionne = element.siblings('img.miniature-selectionnee');
miniatureSelectionne.removeClass('miniature-selectionnee');
miniatureSelectionne.addClass('miniature-cachee');
var miniatureAffichee = miniatureSelectionne;
922,30 → 964,19
if(miniatureSelectionne.prev('.miniature').length != 0) {
miniatureAffichee = miniatureSelectionne.prev('.miniature');
} else {
miniatureAffichee = miniatureSelectionne.siblings(".miniature").last();
miniatureAffichee = miniatureSelectionne.siblings('.miniature').last();
}
} else {
if(miniatureSelectionne.next('.miniature').length != 0) {
miniatureAffichee = miniatureSelectionne.next('.miniature');
} else {
miniatureAffichee = miniatureSelectionne.siblings(".miniature").first();
miniatureAffichee = miniatureSelectionne.siblings('.miniature').first();
}
}
console.log(miniatureAffichee);
miniatureAffichee.addClass('miniature-selectionnee');
miniatureAffichee.removeClass('miniature-cachee');
}
 
function ajouterNumNomSel() {
var nn = '';
if ($("#taxon").data("numNomSel") == undefined) {
nn = '<span class="alert-error">[non lié au référentiel]</span>';
} else {
nn = '<span class="nn">[nn'+$("#taxon").data("numNomSel")+']</span>';
}
return nn;
}
 
//+---------------------------------------------------------------------------------------------------------+
// AUTO-COMPLÉTION Noms Scientifiques
 
964,33 → 995,33
html: true
});
$( "#taxon" ).bind("autocompleteselect", function(event, ui) {
$("#taxon").data(ui.item);
$('#taxon').bind('autocompleteselect', function(event, ui) {
$('#taxon').data(ui.item);
if (ui.item.retenu == true) {
$("#taxon").addClass('ns-retenu');
$('#taxon').addClass('ns-retenu');
} else {
$("#taxon").removeClass('ns-retenu');
$('#taxon').removeClass('ns-retenu');
}
});
}
 
function getUrlAutocompletionNomsSci() {
var mots = $('#taxon').val();
var url = SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL.replace('{referentiel}',NOM_SCI_PROJET);
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 = [];
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
var nom = {label: '', value: '', nt: '', nomSel: '', nomSelComplet: '', numNomSel: '',
nomRet: '', numNomRet: '', famille: '', retenu: false
};
if (suggestions.length >= AUTOCOMPLETION_ELEMENTS_NBRE) {
nom.label = "...";
nom.label = '...';
nom.value = $('#taxon').val();
suggestions.push(nom);
return false;
1002,12 → 1033,12
nom.nomSelComplet = val.nom_sci_complet;
nom.numNomSel = val.nn;
nom.nomRet = val.nom_retenu_complet;
nom.numNomRet = val["nom_retenu.id"];
nom.numNomRet = val['nom_retenu.id'];
nom.famille = val.famille;
nom.retenu = (val.retenu == 'false') ? false : true;
suggestions.push(nom);
}
}
});
}
return suggestions;
1023,36 → 1054,36
*
* Adaptation par Aurélien Peronnet pour la mise en gras des noms de taxons valides
*/
(function( $ ) {
(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() );
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, {
$.extend(proto, {
_initSource: function() {
if ( this.options.html && $.isArray(this.options.source) ) {
if (this.options.html && $.isArray(this.options.source)) {
this.source = function( request, response ) {
response( filter( this.options.source, request.term ) );
response(filter(this.options.source, request.term));
};
} else {
initSource.call( this );
initSource.call(this);
}
},
_renderItem: function( ul, item) {
_renderItem: function(ul, item) {
if (item.retenu == true) {
item.label = "<strong>"+item.label+"</strong>";
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 );
return $('<li></li>')
.data('item.autocomplete', item)
.append($('<a></a>')[this.options.html ? 'html' : 'text'](item.label))
.appendTo(ul);
}
});
})( jQuery );
})(jQuery);