Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 2409 → Rev 2410

/trunk/widget/modules/saisie/squelettes/arbres-tetards/css/arbres-tetards.css
175,6 → 175,7
margin:0 auto;
top:30%;
}
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Formulaire spécifique */
.page-header {
/trunk/widget/modules/saisie/squelettes/arbres-tetards/js/arbres-tetards.js
149,7 → 149,6
$('#nom').val(infos.nom);
$('#courriel_confirmation').val(courriel);
$('#prenom, #nom, #courriel_confirmation').attr('disabled', 'disabled');
$('#structure').focus();
 
$('#dialogue-courriel-introuvable').hide();
}
781,7 → 780,6
if ($('#formation').val() === 'alignement') {
ok = (value != '' && /^[0-9]+$/.test(value) && value > 1);
}
console.log(ok);
return ok;
},
"Veuillez indiquer le nombre d'arbres d'alignement.");
1120,7 → 1118,9
var totalObsATransmettre = 0;
function transmettreObs() {
var observations = $('#liste-obs').data();
console.log(observations);
if (DEBUG) {
console.log(observations);
}
if (observations == undefined || jQuery.isEmptyObject(observations)) {
afficherPanneau('#dialogue-zero-obs');
} else {
/trunk/widget/modules/saisie/squelettes/defaut/defaut.tpl.html
346,7 → 346,7
</div>
<div class="span4" rel="tooltip"
title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
<label for="milieux">Milieu</label>
<label for="milieu">Milieu</label>
<div>
<input type="text" id="milieu" class="span2" name="milieu" />
</div>
398,7 → 398,7
(Ex. : 'fleur violette' ou 'viola sinensis???')." >
<label for="taxon" title="Choisissez une espèce">
<strong class="obligatoire">*</strong>
Espèce <?= $referentiel_impose ? '('.$ns_projet.')' : '' ?> <em>(ou indication sur la plante)</em>
Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em>
</label>
<div class="input-prepend">
<span class="add-on">
/trunk/widget/modules/saisie/squelettes/missions-flore/css/missions-flore.css
9,7 → 9,7
}
 
h1 {
font-size: 26px;
font-size: 22px !important;
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Générique */
19,9 → 19,6
font-size:11px;
line-height: 13px;
}
.droite {
text-align:right;
}
.centre {
text-align:center;
}
42,8 → 39,28
margin:0 auto;
top:30%;
}
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Formulaire spécifique */
.page-header {
border-radius: 10px;
}
.page-header h1{
font-size: 3em;
line-height: 90px;
margin-bottom: 0;
}
#logo-titre {
position: relative;
left: 8px;
margin-right: 1em;
height: 80px;
}
 
#intro {
 
}
 
#info-commune {
text-align:right;
}
53,30 → 70,27
.nn{
color:#3B9D3B;
}
.nom-sci{
font-size:1.5em;
font-weight:bold;
.nom-sci {
font-style: italic;
}
.commune, .date{
font-size:1.3em;
font-weight:bold;
}
 
.obs-action{
opacity:1;
}
 
 
#miniatures {
padding-top: 5px;
}
 
.miniature{
float: left;
height: 130px;
padding-left: 15px;
padding-right: 15px;
padding: 10px;
}
 
.miniature-img {
height: 100px;
margin: 0;
}
 
.miniature img {
97,32 → 111,33
padding-top: 30px;
width: 12px;
}
 
.defilement-miniatures {
width: 210px;
}
.defilement-miniatures .thumbnail {
float: left;
}
 
.defilement-miniatures-cache {
visibility: hidden;
}
 
.miniature-cachee {
display: none;
}
 
.miniature-selectionnee {
display: block;
width: 90px;
box-sizing: content-box;
max-height: 100px;
max-width: 100px;
}
 
.referentiel-obs {
color:#3B9D3B;
}
#referentiel {
display: inline;
}
 
#logo-titre {
position: relative;
top: -8px;
}
 
#photos-conteneur {
height: 120px;
}
144,6 → 159,7
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
 
#photo-placeholder:hover {
background: url("../img/icones/icone-photo-hover.png");
background-size: 89px;
154,14 → 170,37
#barre-progression-upload span {
color : #333333;
}
 
.obs-erreur {
background-color: #DD6E6E;
}
 
#barre-progression-upload span {
color : #333333;
}
 
#taxon-liste optgroup + optgroup {
border-top: 1px solid black;
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Details obs ajoutées*/
.obs-entete {
margin-bottom: 0;
}
.obs-entete .nom-sci, .obs-entete .commune, .obs-entete .date{
font-size:1.3em;
font-weight:bold;
color: #777;
}
.obs-entete .referentiel-obs {
color:#3B9D3B;
}
.obs-details span{
font-style:italic;
color: #777;
}
 
/*+--------------------------------------------------------------------------------------------------------+*/
/* Google Map*/
#map-canvas {
height:240px;
213,63 → 252,19
.well .fermer:hover {
text-decoration: none;
}
.well .icone {
.well .glyphicon-plus-sign {
position:absolute;
right:5px;
right:1em;
top: 0.2em;
}
 
/*+--------------------------------------------------------------------------------------------------------+*/
/*Modal plte-description */
.dsc-imgs {
max-width: 800px;
margin:0 auto;
}
.dsc-infos {
max-width: 800px;
}
.dsc-clean {
clear:both;
}
@media (min-width: 600px) and (max-width: 800px) {
.dsc-imgs {
width: 600px;
}
.dsc-imgs img {
width: 290px;
}
.dsc-infos {
width: 600px;
}
}
@media (min-width: 801px) and (max-width: 1359px) {
.modal {
width:800px;
margin-left:-400px;
}
.dsc-imgs {
width: 780px;
}
.dsc-infos {
width: 700px;
}
}
@media (min-width: 1360px) {
.modal {
width:1360px;
margin-left:-680px;
}
.dsc-imgs {
float:left;
}
.dsc-infos {
float:left;
max-width: 500px;
}
 
}
/*+--------------------------------------------------------------------------------------------------------+*/
/* Correction style CSS Bootstrap */
.well {
margin-bottom: 5px;
padding: 4px;
background-color: rgba(245,245,245,0.85);
}
input[type="file"] {
padding-top: 0;
}
/trunk/widget/modules/saisie/squelettes/missions-flore/missions-flore.tpl.html
1,3 → 1,5
<?php $mission = isset($_GET['mission']) ? strtolower($_GET['mission']) : null; ?>
<?php $missionTitre = isset($_GET['mission']) ? ucwords($_GET['mission']) : 'Inconnue'; ?>
<!DOCTYPE html>
<html lang="fr">
<head>
15,7 → 17,7
<meta name="robots" content="index,follow" />
<meta name="author" content="Jean-Pascal MILCENT" />
<meta name="keywords" content="Tela Botanica, CEL" />
<meta name="description" content="Projet Ambrosia - Widget de saisie simplifiée pour le CEL" />
<meta name="description" content="Projet Missions Flore - Widget de saisie simplifiée pour le CEL" />
 
<!-- Viewport Mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
27,23 → 29,23
<!-- Google Map v3 -->
<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
<script src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
<!-- Proj4js -->
<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
 
<!-- Jquery -->
<script src="http://resources.tela-botanica.org/jquery/1.7.1/jquery-1.7.1.min.js"></script>
<script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
<!-- Jquery Plugins -->
<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/jquery.validate.min.js"></script>
<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/messages_fr.js"></script>
<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
<!-- Jquery Form :nécessaire pour l'upload des images -->
<script src="http://resources.tela-botanica.org/jquery/form/2.95/jquery.form.min.js"></script>
<script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
 
<!-- Bootstrap -->
<script src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modalmanager.js"></script>
<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modal.js"></script>
<script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
<!-- Javascript : appli saisie -->
<script>
54,7 → 56,7
var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
 
// Mot-clé du widget/projet
var TAG_PROJET = "WidgetSaisie,Ambrosia";
var TAG_PROJET = "WidgetSaisie,Missions-Flore,<?=$missionTitre?>";
// Mots-clés à ajouter aux images
var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
97,61 → 99,58
var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
// Squelette d'URL du web service d'eFlore fournissant l'altitude
var SERVICE_ALTITUDE_URL = "http://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
 
// URL du marqueur à utiliser dans la carte Google Map
 
var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/marqueurs/epingle.png";
var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/marqueurs/epingle.png";
// URL de l'icône du chargement en cours
var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement.gif";
var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement.gif";
// URL de l'icône du chargement en cours d'une image
var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement-image.gif";
var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement-image.gif";
// URL de l'icône du calendrier
var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/calendrier.png";
var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/calendrier.png";
// URL de l'icône du calendrier
var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/pasdephoto.png";
var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/pasdephoto.png";
 
//]]>
</script>
<script src="<?=$url_base?>modules/saisie/squelettes/ambrosia/js/ambrosia.js"></script>
<script src="<?=$url_base?>modules/saisie/squelettes/missions-flore/js/missions-flore.js"></script>
 
<!-- CSS -->
<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" />
<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/css/bootstrap-modal.css" />
<link rel="stylesheet" media="screen" href="<?=$url_base?>modules/saisie/squelettes/ambrosia/css/<?=isset($_GET['style']) ? $_GET['style'] : 'ambrosia'?>.css"/>
 
<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/missions-flore/css/<?=isset($_GET['style']) ? $_GET['style'] : 'missions-flore'?>.css" />
</head>
 
<body data-spy="scroll">
<div class="container">
<div class="row-fluid page-header">
<div>
<h1>
<?php if (isset($_GET['mission'])) :?>
<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
<?php endif; ?>
<?php else : ?>
<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/missions-flore/img/logos/tela_botanica.png" alt="Tela Botanica" />
Mission flore inconnue !
<div class="page-header">
<h1>
<?php if (isset($_GET['mission'])) :?>
<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
<?php endif; ?>
</h1>
</div>
<?php else : ?>
<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/missions-flore/img/logos/tela_botanica.png" alt="Tela Botanica" />
Mission flore inconnue !
<?php endif; ?>
</h1>
</div>
<div class="row-fluid">
<div class="span6">
<div class="row-fluid">
<div id="intro" class ="well collapse in">
<a class="fermer" data-toggle="collapse" data-target="#intro">
<h3 class="titre">
Le projet
<i class="icone icon-plus-sign"></i>
</h3>
</a>
<?php if (isset($_GET['mission'])) :?>
<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/projet.tpl.html')) :?>
<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/projet.tpl.html'; ?>
<?php endif; ?>
<div class="row">
<div class="col-md-6">
<div id="intro" class ="well well-lg">
<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
<h3 class="titre">
La missions «&nbsp;<?=$missionTitre ?>&nbsp;»
<span class="glyphicon glyphicon-plus-sign"></span>
</h3>
</a>
<div id="intro-txt" class="collapse in">
<?php if (file_exists("./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html")) :?>
<?php include_once "./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html"; ?>
<?php else : ?>
<p>Mission flore inconnue !</p>
<?php endif; ?>
159,22 → 158,25
</div>
</div>
 
<div class="span6">
<div class="row-fluid">
<div id="aide" class="well collapse in">
<a class="fermer" data-toggle="collapse" data-target="#aide">
<h3 class="titre">
Aide
<i class="icone icon-plus-sign"></i>
</h3>
</a>
<div class="col-md-6">
<div id="aide" class="well well-lg">
<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
<h3 class="titre">
Aide
<span class="glyphicon glyphicon-plus-sign"></span>
</h3>
</a>
<div id="aide-txt" class="collapse in">
<p>
Cet outil vous permet de partager simplement vos observations avec le
<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
Cet outil vous permet de partager simplement vos observations avec
<a href="http://www.gentiana.org/" target="_blank">Gentiana</a> et le
<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
(sous <a href="http://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
Elles apparaissent immédiatement sur les
<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
</p>
<p class="discretion">
Pour toute question ou remarque,
184,10 → 186,10
contactez-nous</a>
</p>
<p class="discretion">
Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
<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>
Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
<button id="btn-aide" class="btn btn-xs btn-success">
<span class="glyphicon glyphicon-question-sign icon-white"></span>
<span id="btn-aide-txt">Désactiver l'aide</span>
</button>
</p>
</div>
194,63 → 196,60
</div>
</div>
</div>
<div class="row-fluid">
<div class="well">
<h2>Observateur</h2>
<form id="form-observateur" action="#" class="" autocomplete="on">
<div class="row-fluid">
<div class="span6 control-group has-tooltip" data-placement="right"
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" class="control-label"
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" name="courriel" type="text"/>
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
</div>
 
<div class="well well-lg">
<h2>Observateur</h2>
<form id="form-observateur" role="form" autocomplete="on">
<div class="row">
<div class="col-md-6 form-group has-tooltip" data-placement="right"
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-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input id="courriel" name="courriel" class="form-control" type="text"/>
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
</div>
<div id="zone-courriel-confirmation" class="span6 control-group hidden">
<label for="courriel_confirmation" class="control-label"
title="Veuillez saisir confirmer le courriel.">
<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" name="courriel_confirmation" type="text"/>
</div>
</div>
<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
<label for="courriel_confirmation" title="Veuillez saisir confirmer le courriel.">
<strong class="obligatoire">*</strong> Courriel (confirmation)
</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
</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" type="text"/>
</div>
</div>
<div id="zone-prenom-nom" class="row hidden">
<div class="col-md-6 form-group">
<label for="prenom">Prénom</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input id="prenom" name="prenom" class="form-control" type="text"/>
</div>
<div class="span6">
<label for="nom">Nom</label>
<div>
<input id="nom" name="nom" type="text"/>
</div>
</div>
<div class="col-md-6 form-group">
<label for="nom">Nom</label>
<div class="input-group">
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input id="nom" name="nom" class="form-control" type="text"/>
</div>
</div>
</form>
</div>
</div>
</form>
</div>
 
<!-- Messages d'erreur du formulaire-->
<div class="row">
<div class="zone-alerte span6 offset3">
<div class="zone-alerte col-md-6 col-md-offset-3">
<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
<a class="close">×</a>
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="alert-heading">Information : copier/coller</h4>
<p>
Merci de ne pas copier/coller votre courriel.<br/>
258,7 → 257,7
</p>
</div>
<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
<a class="close">×</a>
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="alert-heading">Information : courriel introuvable</h4>
<p>
Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
268,258 → 267,393
</p>
</div>
<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
<a class="close">×</a>
<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="alert-heading">Information sur Google Map</h4>
<div class="contenu"></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="well">
<div class="row-fluid">
<div class="span6">
<div>
<div class="row-fluid">
<div class="span12">
<h2>Lieu du relevé</h2>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="map_canvas" title="Veuillez localiser l'observation">
Géolocalisation
</label>
</div>
<div class="span8 droite">
<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
<div class="control-group">
<label for="carte-recherche">Rechercher</label>
<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
title="Permet de centrer la carte sur le lieu recherché."
 
<div class="well well-lg">
<div class="row">
<div class="col-md-12">
<h2>Lieu et date du relevé</h2>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group has-tooltip"
title="Vous pouvez cliquer sur l'icône de calendrier pour
sélectionner une date dans un calendrier.">
<label for="date" class="col-sm-4 control-label"
title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
<strong class="obligatoire">*</strong>
Date du relevé
</label>
<div class="col-sm-8">
<div class="input-group">
<span id="date-icone" class="input-group-addon"></span>
<input id="date" form="form-obs" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
</div>
</div>
</div>
</div>
<hr />
</div>
 
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-3">
<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
</div>
<div class="col-md-9 text-right">
<form id="form-carte-recherche" class="form-horizontal" role="form">
<div class="form-group">
<label for="carte-recherche" class="sr-only">Rechercher</label>
<div class="col-md-12">
<div class="input-group">
<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
title="Permet de centrer la carte sur le lieu recherché. Sélectionner un lieu dans la liste déroulante pour centrer la carte."
placeholder="Centrer la carte sur un lieu..."/>
</div>
</form>
<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
</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 class="row-fluid">
<label class="span7 control-label">
<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 has-tooltip"
title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
(WGS84)
</span>
</label>
<div id="info-commune" class="span5">
<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>
<form id="form-station" 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 for="latitude">Latitude</label>
<div>
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12">
<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 class="row">
<div id="info-altitude" class="col-md-5">
<span>Altitude : </span>
<span id="marqueur-altitude"><span id="altitude"></span> m</span>
</div>
 
<div id="info-commune" class="col-md-7">
<span>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>
<div class="col-md-6">
<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
<div class="form-group has-tooltip"
title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
<label for="lieudit" class="col-sm-2 control-label">
Lieu-dit
</label>
<div class="col-sm-10">
<input id="lieudit" class="form-control" name="lieudit" type="text" />
</div>
</div>
 
<div class="span6 form-group has-tooltip"
title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
<label for="station" class="col-sm-2 control-label">
Station
</label>
<div class="col-sm-10">
<input id="station" class="form-control" name="station" type="text" />
</div>
</div>
 
<div class="row">
<div class="col-md-12">
<button class="afficher-coord btn-coord btn btn-default"
data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
Afficher les coordonnées (WGS 84 et Lambert 93)
</button>
<div id="coordonnees-geo" class="well hidden">
<div class="row">
<div class="col-md-4">
<div id="coord-lat" class="form-group form-group-sm">
<label for="latitude" class="col-sm-4 control-label">Latitude</label>
<div class="col-sm-8">
<input id="latitude" class="form-control" name="latitude" type="text"
title="Latitude (WGS 84)" value=""/>
</div>
</div>
<div id="coord-lng" class="span4">
<label for="longitude">Longitude</label>
<div>
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
</div>
<div class="col-md-5">
<div id="coord-lng" class="form-group form-group-sm">
<label for="latitude" class="col-sm-4 control-label">Longitude</label>
<div class="col-sm-8">
<input id="longitude" class="form-control" name="longitude" type="text"
title="Longitude (WGS 84)" value=""/>
</div>
</div>
<div class="span1">
<div>
<input id="geolocaliser" type="button" value="Voir sur la carte"
class="has-tooltip"
title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
</div>
</div>
<div class="col-md-2">
<div id="coord-lng" class="form-group form-group-sm">
<input type="button" id="geolocaliser"
class="btn btn-default btn-sm has-tooltip"
title="Centre la carte sur les coordonnées de latitude et longitude saisies."
value="Voir sur la carte"/>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6 control-group has-tooltip"
title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
<label class="control-label">
Lieu-dit
<input type="text" id="lieudit" class="" name="lieudit"/>
</label>
</div>
<div class="span6 control-group has-tooltip"
title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
<label class="control-label">
Station
<input type="text" id="station" class="" name="station"/>
</label>
</div>
</div>
 
<div class="row-fluid">
<div class="span12 control-group has-tooltip"
title="Indiquez la surface en m² de la station au sein de laquelle la plante est présente.">
<label class="span12 control-label">
<strong class="obligatoire">*</strong>
Surface de la station
<select id="station-surface" class="span8 obs-chp-etendu" name="stationSurface"
data-label="Surface couverte dans la station">
<option selected value="">Sélectionnez une surface</option>
<option value="0-5">&lt;5 m²</option>
<option value="5-10">5-10 m²</option>
<option value="10-50">10-50 m²</option>
<option value="50-100">50-100 m²</option>
<option value="100-500">100-500 m²</option>
<option value="500-1000">500-1000 m²</option>
<option value="1000+">&gt; 1000 m²</option>
</select>
</label>
<div class="row">
<div class="col-md-6">
<div id="coord-l93-x" class="form-group">
<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
<div class="col-sm-5">
<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
name="coordonneeLambert93X"
data-label="Lambert 93 X"
value=""/>
</div>
</div>
</div>
</div>
 
<div class="row-fluid">
<div class="span12 control-group" >
<label class="span12 control-label">
<strong class="obligatoire">*</strong>
Milieu
<select id="milieu" class="span8" name="milieu">
<option selected value="">Sélectionnez un milieu</option>
<?php foreach ($milieux as $milieu => $description) : ?>
<option value="<?=strtolower($milieu)?>">
<?=$milieu?> <?=($description != '') ? "($description)" : '' ?>
</option>
<?php endforeach; ?>
<option value="">Autre : préciser dans les commentaires.</option>
</select>
</label>
</div>
</div>
 
<div class="row-fluid">
<div class="span12">
<label for="milieuCommentaire">Commentaires sur le milieu</label>
<div>
<textarea id="milieu-commentaire" class="span12 obs-chp-etendu" rows="7"
name="milieuCommentaire" data-label="Commentaires sur le milieu"
placeholder="Vous pouvez éventuellement ajouter des informations complémentaires concernant le milieu"></textarea>
<div class="col-md-6">
<div id="coord-l93-y" class="form-group">
<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
<div class="col-sm-5">
<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
name="coordonneeLambert93Y"
data-label="Lambert 93 Y"
value=""/>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="span6">
<form id="form-obs" action="#" autocomplete="on">
<h2>Observation</h2>
<input id="referentiel" type="hidden" value="bdtfx" />
</form>
</div>
</div>
</div>
 
<div class="row-fluid">
<div id="taxon-input-groupe" class="span8 has-tooltip"
title="Sélectionnez une espèce dans la liste déroulante pour lier
votre nom au référentiel selectionné. Si vous
le désirez vous pouvez aussi saisir un nom absent du référentiel
(Ex. : 'fleur violette' ou 'viola sinensis???')." >
<label class="span12 control-label">Espèce
<div class="input-prepend input-append">
<span class="add-on"><i class="icon-leaf"></i></span>
<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
<a href="#plte-description" role="button" class="btn btn-success add-on" data-toggle="modal">Voir la description</a>
</div>
</label>
</div>
</div>
<div class="well well-lg">
<div class="row">
<div class="col-md-6">
<form id="form-station-detail" class="form-horizontal" role="form" autocomplete="on">
<h2>Caractéristiques de la station</h2>
 
<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.">
<label class="span12 control-label" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
<strong class="obligatoire">*</strong>
Date du relevé
<div class="input-prepend">
<span id="date-icone" class="add-on"></span>
<input id="date" name="date" type="text" placeholder="jj/mm/aaaa" />
</div>
</label>
</div>
</div>
<div class="form-group has-tooltip"
title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie, pelouse, lisière, friche...)." >
<label for="milieu" class="col-sm-4 control-label">
Type de milieu
</label>
<div class="col-sm-8">
<input id="milieu" class="form-control" name="milieu" type="text" />
</div>
</div>
 
<div class="row-fluid">
<div class="span12 control-group has-tooltip"
title="Indiquez ici le pourcentage de recouvrement par la plante sur la surface de la station.">
<label class="span12 control-label">
<strong class="obligatoire">*</strong>
Recouvrement par la plante de la surface de la station
<select id="recouvrement" class="span8 obs-chp-etendu" name="recouvrement"
data-label="Recouvrement au sein de la surface couverte dans la station">
<option selected value="">Sélectionnez un recouvrement</option>
<option value="+">&lt;1 %</option>
<option value="1">1-5 %</option>
<option value="2">5-25 %</option>
<option value="3">25-50 %</option>
<option value="4">50-75 %</option>
<option value="5">75-100 %</option>
</select>
</label>
</div>
</div>
<div class="form-group has-tooltip"
title="Indiquez l'exposition principale de la station.">
<label for="station-exposition" class="col-sm-4 control-label">
Exposition du terrain
</label>
<div class="col-sm-8">
<select id="station-exposition" class="form-control obs-chp-etendu" name="stationExposition">
<option selected value="">Sélectionnez l'exposition du terrain</option>
<option value="Plat">Terrain plat</option>
<option value="N">Nord</option>
<option value="N-O">Nord-Ouest</option>
<option value="N-E">Nord-Est</option>
<option value="E">Est</option>
<option value="O">Ouest</option>
<option value="S">Sud</option>
<option value="S-O">Sud-Ouest</option>
<option value="S-E">Sud-Est</option>
</select>
</div>
</div>
 
<div class="row-fluid">
<div class="span12">
<label for="notes">Notes</label>
<div>
<textarea id="notes" class="span12" rows="7" name="notes"
placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
</div>
</div>
<div class="form-group has-tooltip"
title="Indiquez le pourcentage de la pente de la station.">
<label for="station-pente" class="col-sm-4 control-label">
Pente du terrain
</label>
<div class="col-sm-8">
<select id="station-pente" class="form-control obs-chp-etendu" name="stationPente">
<option selected value="">Sélectionnez la pente du terrain</option>
<option value="0-10%">entre 0 et 9% (0 à 5°)</option>
<option value="10-20%">entre 10 et 19% (5 à 9°)</option>
<option value="20-30%">entre 20 et 29% (10 à 14°)</option>
<option value="30-40%">&gt; à 30% (&gt; à 15°)</option>
</select>
</div>
</div>
 
</form>
</div>
 
<div class="col-md-6">
<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
<h2>Relevé de la plante</h2>
 
<input id="referentiel" type="hidden" value="bdtfx" />
 
<div id="taxon-input-groupe" class="form-group has-tooltip"
title="Sélectionnez une espèce dans la liste déroulante pour lier
votre nom au référentiel selectionné. Si vous
le désirez vous pouvez aussi saisir un nom absent du référentiel
(Ex. : 'fleur violette' ou 'viola sinensis???')." >
<label for="taxon" class="col-sm-4 control-label">
<strong class="obligatoire">*</strong>
Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?>
</label>
<div class="col-sm-8">
<div class="input-group">
<span class="input-group-addon">
<span class="glyphicon glyphicon-leaf"></span>
</span>
<input id="taxon" name="taxon" type="text" class="form-control"
value="<?= $nom_sci_espece_defaut; ?>" />
</div>
</div>
</div>
 
</form>
<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=<?=isset($_GET['projet']) ? $_GET['projet'] : 'defaut'?>"
method="post" enctype="multipart/form-data">
<h2>Image(s) de cette plante</h2>
<div class="form-group has-tooltip"
title="Indiquez le type de taille de l'arbre.">
<label for="taille-type" class="col-sm-4 control-label">
Phénologie
</label>
<div class="col-sm-8">
<select id="phenologie" class="form-control" name="phenologie">
<option selected value="">Sélectionnez l'état de la plante</option>
<option value="10-19: développement des feuilles">En feuille</option>
<option value="50-59: apparition de l'inflorescence, épiaison">En bouton</option>
<option value="60-69: floraison">En fleur</option>
<option value="70-79: fructification">En fruit</option>
<option value="90-99: sénescence et dormance">Plante en fin de vie</option>
</select>
</div>
</div>
 
<div class="form-group has-tooltip"
title="Estimation de l'abondance de la plante sur une surface donnée. Surface inventoriée
limitée par la présence d'un autre milieu ou distancé par au moins 500m d'une autre
zone où la plante est observée.">
<label for="abondance" class="col-sm-4 control-label">
Abondance
</label>
<div class="col-sm-8">
<select id="abondance" class="form-control" name="abondance">
<option selected value="">Sélectionnez l'abondance</option>
<option value="1-5 individus">1-5 individus</option>
<option value="5-10 individus">5-10 individus</option>
<option value="10-50 individus">10-50 individus</option>
<option value="50-100 individus">50-100 individus</option>
<option value="100-500 individus">100-500 individus</option>
<option value=">500 individus">&gt; à 500 individus</option>
</select>
</div>
</div>
 
<div id="individus-nbre-groupe" class="form-group has-tooltip hidden"
title="Indiquez le nombre d'individus." >
<label for="individus-nbre" class="col-sm-4 control-label">
Nombre d'individus
</label>
<div class="col-sm-4">
<input id="individus-nbre" class="form-control obs-chp-etendu" name="individusNombre"
min="0"
type="number"
value="" />
</div>
</div>
 
<div class="form-group has-tooltip"
title="Indiquez si le relevé effectué vis à acquérir de nouvelle observation ou
viser à confirmer la présence de la plante vis à vis d'une observation historique.">
<label for="releve-type" class="col-sm-4 control-label">
Type de relevé
</label>
<div class="col-sm-8">
<select id="releve-type" class="form-control obs-chp-etendu" name="releveType">
<option selected value="">Sélectionnez le type de relevé</option>
<option value="nouveau">Acquisition d'une nouvelle donnée</option>
<option value="confirmation">Confirmation d'une donnée historique (précisez laquelle dans les notes)</option>
</select>
</div>
</div>
 
<div class="form-group has-tooltip"
title="Indiquez le code ISBN de l'ouvrage de détermination utilisé. Si votre navigateur le supporte, vous pouvez sélectionner le code ISBN d'une flore dans la liste qui s'ouvrira en cliquant dans le champ ou en utilisant la touche «Flêche bas» (↓). Sinon, indiquez le code ISBN de la flore ou de l'ouvrage principal ayant servi à la détermination (Ex. : ISBN-13:978-3-642-11746-6, ISBN:978-3-642-11746-6, 3-642-11746-5 ).">
<label for="determination-source-isbn" class="col-sm-4 control-label">
Source détermination
</label>
<div class="col-sm-8">
<input id="determination-source" class="form-control obs-chp-etendu" list="flores"
name="determinationSource"
type="text" >
<datalist id="flores">
<option value="ISBN:978-2-909-71790-6">TISON J-M. &amp; JAUZEIN P., 2014. Flore de la France méditerranéenne continentale. Naturalia publications. ISBN:978-2909717906. 2078p.</option>
<option value="ISBN:978-2-853-67058-6">COSTE H. (ABBE), 1937. Flore descriptive et illustrée de la France, de la Corse et des contrées limitrophes. Albert Blanchard, éditeur. ISBN:978-2853670586. 1850p.</option>
<option value="ISBN:978-2-100-05463-3">FOURNIER P-V., 1934-1940. Les quatres flores de France, Corse comprise. ISBN:978-2100054633. 1103p.</option>
<option value="ISBN:978-2-701-11000-4">BONNIER G. &amp; DE LAYENS G., 1909. La végétation de la France, Suisse et Belgique. Librairie Générale de l'enseignement, Paris. ISBN:978-2701110004. 425p.</option>
</datalist>
</div>
</div>
</form>
</div>
</div>
 
 
<div class="row">
<div class="col-md-6">
<div class="row">
<div class="col-md-12">
<h2>Notes</h2>
<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation. Indiquez ici l'éventuelle donnée historique ayant servi de base au relevé."></textarea>
</div>
</div>
</div>
 
<div class="col-md-6">
<div class="row">
<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
method="post" enctype="multipart/form-data">
<div class="col-md-12">
<h2>Image(s) de la plante</h2>
<strong>Ajouter une image</strong>
<p class="miniature-info" class="discretion help-inline">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">
<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
<div id ="photos-conteneur" class="form-group">
<div class="col-sm-12">
<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
</div>
<p class="miniature-msg" class="span12">&nbsp;</p>
<div id="miniatures"></div>
<p class="miniature-msg col-md-12">&nbsp;</p>
</div>
</form>
</div>
<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">
Créer
</button>
</div>
</div>
</form>
</div>
</div>
</div>
 
<div class="row">
<div class="col-md-12 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">
Créer
</button>
</div>
</div>
</div>
 
<!-- Messages d'erreur du formulaire-->
 
<!-- Messages d'erreur du formulaire-->
<div class="row">
<div class="zone-alerte span6 offset3">
<div class="zone-alerte col-md-6 col-md-offset-3">
<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>
529,7 → 663,7
</p>
</div>
</div>
<div class="zone-alerte span6 offset3">
<div class="zone-alerte col-md-6 col-md-offset-3">
<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>
542,14 → 676,19
</div>
 
<!-- Affiche le tableau récapitulatif des observations ajoutées -->
<div id="zone-liste-obs" class="row-fluid">
<div class="span12">
<div class="well">
<div class="row-fluid">
<div class="span8">
<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
<div id="zone-liste-obs" class="row">
<div class="col-md-12">
<div class="well well-lg">
<div class="row">
<div class="col-md-10">
<h2>
Observations
<?=!empty($nom_sci_espece_defaut) ? "<i>d'{$nom_sci_espece_defaut}</i> " : ''; ?>
à transmettre :
<span class="obs-nbre">0</span>
</h2>
</div>
<div class="span4 droite">
<div class="col-md-2 text-right">
<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.">
559,7 → 698,7
</div>
<div id="liste-obs" ></div>
<div class="row">
<div class="zone-alerte span6 offset3">
<div class="zone-alerte col-md-6 col-md-offset-3">
<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Attention : aucune observation</h4>
584,26 → 723,10
</div>
</div>
 
<footer class="row-fluid">
<p class="span12">&copy; Tela Botanica 2014</p>
<footer class="row">
<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
</footer>
 
<!-- Fenêtres modales -->
<div id="chargement" class="modal-fenetre" style="display:none;">
<div id="chargement-centrage" class="modal-contenu">
<div class="progress progress-striped active">
<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
<span class="sr-only">0/10 observations transmises</span>
</div>
</div>
<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'observations à transférer.
</p>
</div>
</div>
 
<!-- Templates HTML -->
<div id="tpl-transmission-ok" style="display:none;">
<p class="msg">
635,60 → 758,20
</div>
 
<!-- Fenêtres modales -->
<div id="plte-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
aria-labelledby="plte-description-titre" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h1 id="plte-description-titre"><i>Ambrosia psilostachya</i> DC. (Ambroisie à épis lisses)</h1>
</div>
<div class="modal-body">
<div class="dsc-imgs">
<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/allure_generale.jpg" alt="Allure générale"/>
<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/feuille.jpg" alt="Feuille"/>
<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/fruit.jpg" alt="Fruit"/>
<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/racine.jpg" alt="Racine"/>
</div>
<div class="dsc-infos">
<p><b>Floraison :</b> de fin mai à septembre.</p>
<p>
<b>Plante vivace</b> de 10-60(80) cm à <b>rhizome grêle</b> d’où naissent des drageons (voir <b>photo 4</b>) . <b class="text-error">Attention: en
arrachant la plante la tige casse facilement au ras du rhizome et la portion enfouie de la tige ressemble à une racine
pivotante (=confusion possible avec une espèce annuelle) !</b>
</p>
<p><b>Tiges</b> simples ou à rameaux courts, souvent nues au-dessous du collet.</p>
<p>
<b>Feuilles</b> médianes 1 à 2 fois découpées, à bande médiane > 2 mm entre les 2 premières divisions (voir <b>photo 2</b>).<br />
Morphologie des feuilles généralement uniforme au sein d’un même colonie.
</p>
<p><b>Inflorescence</b> mâle (au sommet) dépassant rarement 10 cm (6-20 cm chez <i>A. artemisiifolia</i>).</p>
<p>
<b>Fruits</b> (rarement produits en France) de plus 3,5 mm à bec de moins de 1 mm (>1 mm chez <i>A. artemisiifolia</i>) et
épines obtuses courtes <0,3 mm (épines aiguës > 0,3 mm chez <i>A. artemisiifolia</i>) : voir <b>photo 3</b>.
</p>
<p class="muted">
<b>Références :</b> Tison et al. (2014) Flore de la France méditerranéenne continentale ; Tison & De Foucault (2014) Flora Gallica ; Jauzein (1995)
Flore des champs cultivés
</p>
<div class="well">
<p>Vous pouvez télécharger plusieurs documents au format PDF :</p>
<ul>
<li>
<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/ambrosia_psilostachya.pdf" target="_blank">
cette description (173 Ko)
</a>
</li>
<li>
<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/cle_ambrosia.pdf" target="_blank">
une clé de détermination du genre <i>Ambrosia</i> (ambroisies) (635 Ko)
</a>
</li>
</ul>
<div id="chargement" class="modal-fenetre" style="display:none;">
<div id="chargement-centrage" class="modal-contenu">
<div class="progress">
<div id="barre-progression-upload" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
<span class="sr-only">0/10 observations transmises</span>
</div>
</div>
 
<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'observations à transférer.
</p>
</div>
<div class="modal-footer dsc-clean">
<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
</div>
</div>
 
<!-- Stats : Google Analytics-->
/trunk/widget/modules/saisie/squelettes/missions-flore/js/missions-flore.js
27,8 → 27,8
 
function extraireEnteteDebug(jqXHR) {
var msgDebug = '';
if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
var debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
if (jqXHR.getResponseHeader('X-DebugJrest-Data') != '') {
var debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader('X-DebugJrest-Data'));
if (debugInfos != null) {
$.each(debugInfos, function (cle, valeur) {
msgDebug += valeur + "\n";
39,168 → 39,158
}
 
function afficherPanneau(selecteur) {
$(selecteur).fadeIn("slow").delay(DUREE_MESSAGE).fadeOut("slow");
$(selecteur).fadeIn('slow').delay(DUREE_MESSAGE).fadeOut('slow');
}
 
//+----------------------------------------------------------------------------------------------------------+
//UPLOAD PHOTO : Traitement de l'image
 
//+---------------------------------------------------------------------------------------------------------+
//FORMULAIRE
$(document).ready(function() {
if (OBS_ID != '') {
chargerInfoObs();
}
});
 
$(".effacer-miniature").click(function () {
supprimerMiniatures($(this));
});
 
$("#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
};
$("#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 {
$('#form-upload')[0].reset();
window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+ $("#fichier").attr("accept"));
function chargerInfoObs() {
var urlObs = SERVICE_OBS_URL + '/' + OBS_ID;
$.ajax({
url: urlObs,
type: 'GET',
success: function(data, textStatus, jqXHR) {
if (data != undefined && data != '') {
prechargerForm(data);
}
// TODO: voir s'il est pertinent d'indiquer quelque chose en cas d'erreur ou d'obs
// inexistante
},
error: function(jqXHR, textStatus, errorThrown) {
// TODO: cf TODO ci-dessus
}
return false;
});
}
 
if (ESPECE_IMPOSEE) {
$("#taxon").attr("disabled", "disabled");
$("#taxon-input-groupe").attr("title","");
var infosAssociee = new Object();
infosAssociee.label = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
infosAssociee.value = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
infosAssociee.nt = INFOS_ESPECE_IMPOSEE.num_taxonomique;
infosAssociee.nomSel = INFOS_ESPECE_IMPOSEE.nom_sci;
infosAssociee.nomSelComplet = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
infosAssociee.numNomSel = INFOS_ESPECE_IMPOSEE.id;
infosAssociee.nomRet = INFOS_ESPECE_IMPOSEE["nom_retenu.libelle"];
infosAssociee.numNomRet = INFOS_ESPECE_IMPOSEE["nom_retenu.id"];
infosAssociee.famille = INFOS_ESPECE_IMPOSEE.famille;
infosAssociee.retenu = (INFOS_ESPECE_IMPOSEE.retenu == 'false') ? false : true;
$("#taxon").data(infosAssociee);
function prechargerForm(data) {
$('#milieu').val(data.milieu);
 
$('#carte-recherche').val(data.zoneGeo);
$('#commune-nom').text(data.zoneGeo);
 
if (data.hasOwnProperty('codeZoneGeo')) {
// TODO: trouver un moyen qui fonctionne lorsqu'on aura d'autres référentiels que INSEE
$('#commune-code-insee').text(data.codeZoneGeo.replace('INSEE-C:', ''));
}
 
$('.effacer-miniature').live('click', function() {
$(this).parent().remove();
});
if (data.hasOwnProperty('latitude') && data.hasOwnProperty('longitude')) {
var latLng = new google.maps.LatLng(data.latitude, data.longitude);
mettreAJourMarkerPosition(latLng);
marker.setPosition(latLng);
map.setCenter(latLng);
map.setZoom(16);
}
}
 
 
//+----------------------------------------------------------------------------------------------------------+
//FORM IDENTITE : gestion de l'observateur
 
$(document).ready(function() {
requeterIdentite();// Sur rechargement de la page
 
// Interaction sur le formulaire observateur
$('#prenom').on('change', formaterPrenom);
$('#nom').on('change', formaterNom);
$('#courriel').on('blur', requeterIdentite);
$('#courriel').on('keyup', testerLancementRequeteIdentite);
$('#courriel_confirmation').on('paste', bloquerCopierCollerCourriel);
});
 
function verifierFormat(nom) {
var parts = nom.split('.');
extension = parts[parts.length - 1];
return (extension.toLowerCase() == 'jpeg' || extension.toLowerCase() == 'jpg');
function testerLancementRequeteIdentite(event) {
if (event.which == 13) {
requeterIdentite();
event.preventDefault();
event.stopPropagation();
}
}
 
function afficherMiniature(reponse) {
if (DEBUG) {
var debogage = $("debogage", reponse).text();
//console.log("Débogage upload : "+debogage);
function requeterIdentite() {
var courriel = $('#courriel').val();
if (courriel) {
var urlAnnuaire = SERVICE_ANNUAIRE_ID_URL + courriel;
$.ajax({
url: urlAnnuaire,
type: 'GET',
success: function(data, textStatus, jqXHR) {
if (data != undefined && data[courriel] != undefined) {
var infos = data[courriel];
surSuccesCompletionCourriel(infos, courriel);
} else {
surErreurCompletionCourriel();
}
},
error: function(jqXHR, textStatus, errorThrown) {
surErreurCompletionCourriel();
},
complete: function(jqXHR, textStatus) {
$('#zone-courriel-confirmation, #zone-prenom-nom').removeClass('hidden');
$('#form-observateur').valid();
}
});
}
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();
var imgNom = $("image-nom", reponse).text();
var html =
'<div class="miniature">'+
'<img class="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'+
'<button class="effacer-miniature" type="button">Effacer</button>'+
'</div>'
return html;
function surErreurCompletionCourriel() {
$('#prenom, #nom, #courriel_confirmation').removeAttr('disabled');
afficherPanneau('#dialogue-courriel-introuvable');
}
 
function supprimerMiniatures() {
$("#miniatures").empty();
$("#miniature-msg").empty();
function surSuccesCompletionCourriel(infos, courriel) {
$('#id_utilisateur').val(infos.id);
$('#prenom').val(infos.prenom);
$('#nom').val(infos.nom);
$('#courriel_confirmation').val(courriel);
$('#prenom, #nom, #courriel_confirmation').attr('disabled', 'disabled');
 
$('#dialogue-courriel-introuvable').hide();
}
 
//Initialise l'autocomplétion de la commune, en fonction du référentiel
function initialiserAutocompleteCommune() {
var geocoderOptions = {
};
var addressSuffix = '';
function formaterNom() {
$(this).val($(this).val().toUpperCase());
}
 
switch(NOM_SCI_REFERENTIEL) {
case 'isfan':
// Si des résultats se trouvent dans ce rectangle, ils apparaîtront en premier.
// Ça marche moyen...
geocoderOptions.bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(20.756114, -22.023927),
new google.maps.LatLng(38.065392, 33.78662)
);
break;
case 'apd':
geocoderOptions.bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-6.708254, -26.154786),
new google.maps.LatLng(27.488781, 30.490722)
);
break;
case 'bdtfx':
case 'bdtxa':
geocoderOptions.region = 'fr';
addressSuffix = ', France';
function formaterPrenom() {
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(),
motsComposes = mot.split('-');
for (var j = 0; j < motsComposes.length; j++) {
var motSimple = motsComposes[j],
motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
prenomCompose.push(motMajuscule);
}
prenom.push(prenomCompose.join('-'));
} else {
var motMajuscule = mot.charAt(0).toUpperCase() + mot.slice(1);
prenom.push(motMajuscule);
}
}
$(this).val(prenom.join(' '));
}
 
$("#carte-recherche").autocomplete({
//Cette partie utilise geocoder pour extraire des valeurs d'adresse
source: function(request, response) {
geocoderOptions.address = request.term + addressSuffix;
geocoder.geocode( geocoderOptions, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
response($.map(results, function(item) {
var retour = {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
};
return retour;
}));
} else {
afficherErreurGoogleMap(status);
}
});
},
// Cette partie est executee a la selection d'une adresse
select: function(event, ui) {
var latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
deplacerMarker(latLng);
}
});
function bloquerCopierCollerCourriel() {
afficherPanneau('#dialogue-bloquer-copier-coller');
return false;
}
 
// Autocompletion du champ adresse
$("#carte-recherche").on('focus', function() {
$(this).select();
});
$("#carte-recherche").on('mouseup', function(event) {// Pour Safari...
event.preventDefault();
});
 
$("#carte-recherche").keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
};
 
//+----------------------------------------------------------------------------------------------------------+
// GOOGLE MAP
var map;
var marker;
var latLng;
var geocoder;
var map,
marker,
latLng,
geocoder;
 
$(document).ready(function() {
initialiserGoogleMap();
218,7 → 208,6
}
 
function surDeplacementMarker() {
trouverCommune(marker.getPosition());
mettreAJourMarkerPosition(marker.getPosition());
}
 
227,8 → 216,8
}
 
function geolocaliser() {
var latitude = $('#latitude').val();
var longitude = $('#longitude').val();
var latitude = $('#latitude').val(),
longitude = $('#longitude').val();
latLng = new google.maps.LatLng(latitude, longitude);
deplacerMarker(latLng);
}
235,19 → 224,8
 
function initialiserGoogleMap(){
// Carte
if(NOM_SCI_REFERENTIEL == 'bdtxa') {
var latLng = new google.maps.LatLng(14.6, -61.08334);// Fort-De-France
var zoomDefaut = 8;
} else if(NOM_SCI_REFERENTIEL == 'isfan') {
var latLng = new google.maps.LatLng(29.28358, 10.21884);// Afrique du Nord
var zoomDefaut = 4;
} else if(NOM_SCI_REFERENTIEL == 'apd') {
var latLng = new google.maps.LatLng(8.75624, 1.80176);// Afrique de l'Ouest et du Centre
var zoomDefaut = 4;
} else {
var latLng = new google.maps.LatLng(46.30871, 2.54395);// Centre de la France
var zoomDefaut = 5;
}
var latLng = new google.maps.LatLng(46.30871, 2.54395);// Centre de la France
var zoomDefaut = 5;
 
var options = {
zoom: zoomDefaut,
260,8 → 238,8
// 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,
299,7 → 277,7
}
 
// intéraction carte
$("#geolocaliser").on('click', geolocaliser);
$('#geolocaliser').on('click', geolocaliser);
google.maps.event.addListener(marker, 'dragend', surDeplacementMarker);
google.maps.event.addListener(map, 'click', surClickDansCarte);
}
308,6 → 286,7
if (marker != undefined) {
marker.setPosition(latLng);
map.setCenter(latLng);
mettreAJourMarkerPosition(latLng);
}
}
 
316,15 → 295,18
marker.setPosition(latLng);
map.setCenter(latLng);
mettreAJourMarkerPosition(latLng);
trouverCommune(latLng);
}
}
 
function mettreAJourMarkerPosition(latLng) {
var lat = latLng.lat().toFixed(5);
var lng = latLng.lng().toFixed(5);
trouverCommune(latLng);
trouverAltitude(latLng);
 
var lat = latLng.lat().toFixed(5),
lng = latLng.lng().toFixed(5);
remplirChampLatitude(lat);
remplirChampLongitude(lng);
remplirChampsLambert93(lat, lng);
}
 
function remplirChampLatitude(latDecimale) {
337,39 → 319,110
$('#longitude').val(lng);
}
 
function trouverCommune(pos) {
proj4.defs([
['EPSG:4326', '+proj=longlat +ellps=WGS84 +datum=WGS84 +no_defs'],
['EPSG:2154', '+title=RGF93 / Lambert-93 +proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs']
]);
function remplirChampsLambert93(lat, lng) {
// Prendre en compte l'initialisation des projections
var coordinate = {x: lng,y: lat};
proj4(proj4.defs('EPSG:4326'), proj4.defs('EPSG:2154')).forward(coordinate);
$('#l93-x').val(coordinate.x.toFixed(0));
$('#l93-y').val(coordinate.y.toFixed(0));
}
 
function trouverAltitude(pos) {
$(function() {
var url_service = SERVICE_ALTITUDE_URL,
urlAltFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
$.ajax({
url: urlAltFormatee,
type: 'GET',
dataType: 'jsonp',
beforeSend : function() {
$('#altitude').empty();
$('#dialogue-erreur .alert-txt').empty();
},
success : function(data, textStatus, jqXHR) {
$('#altitude').empty().append(data.altitude);
$('#marqueur-altitude').data('altitude', data.altitude);
},
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 fournissant l\'altitude.</p>');
reponse = jQuery.parseJSON(jqXHR.responseText);
var erreurMsg = '';
if (reponse != null) {
$.each(reponse, function (cle, valeur) {
erreurMsg += valeur + '<br />';
});
}
 
var url_service = SERVICE_NOM_COMMUNE_URL;
$('#dialogue-erreur .alert-txt').append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
}
}
},
error : function(jqXHR, textStatus, errorThrown) {
if (DEBUG) {
$("#dialogue-erreur .alert-txt").append('<p class="msg">Une erreur Ajax est survenue lors de l\'appel au service fournissant l\'altitude.</p>');
reponse = jQuery.parseJSON(jqXHR.responseText);
var erreurMsg = '';
if (reponse != null) {
$.each(reponse, function (cle, valeur) {
erreurMsg += valeur + '<br />';
});
}
 
var urlNomCommuneFormatee = url_service.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
$('#dialogue-erreur .alert-txt').append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
}
},
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').show();
}
}
});
});
}
 
function trouverCommune(pos) {
$(function() {
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",
url: urlNomCommuneFormatee,
type: 'GET',
dataType: 'jsonp',
beforeSend : function() {
$(".commune-info").empty();
$("#dialogue-erreur .alert-txt").empty();
$('.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});
$('.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) {
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 = "";
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>');
}
}
},
377,14 → 430,14
if (DEBUG) {
$("#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) {
391,183 → 444,366
var debugMsg = extraireEnteteDebug(jqXHR);
if (debugMsg != '') {
if (DEBUG) {
$("#dialogue-erreur .alert-txt").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
$('#dialogue-erreur .alert-txt').append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
}
}
if ($("#dialogue-erreur .msg").length > 0) {
$("#dialogue-erreur").show();
if ($('#dialogue-erreur .msg').length > 0) {
$('#dialogue-erreur').show();
}
}
});
});
}
 
 
//+---------------------------------------------------------------------------------------------------------+
// IDENTITÉ
$(document).ready(function() {
$("#courriel").on('blur', requeterIdentite);
$("#courriel").on('keypress', testerLancementRequeteIdentite);
});
//AUTO-COMPLÉTION Noms Scientifiques
 
function testerLancementRequeteIdentite(event) {
if (event.which == 13) {
requeterIdentite();
event.preventDefault();
event.stopPropagation();
}
}
function ajouterAutocompletionNoms() {
$('#taxon').autocomplete({
source: function(requete, add){
// la variable de requête doit être vidée car sinon le parametre "term" est ajouté
 
function requeterIdentite() {
var courriel = $("#courriel").val();
//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) {
//console.log('SUCCESS:'+textStatus);
if (data != undefined && data[courriel] != undefined) {
var infos = data[courriel];
$("#id_utilisateur").val(infos.id);
$("#prenom").val(infos.prenom);
$("#nom").val(infos.nom);
$("#courriel_confirmation").val(courriel);
$("#prenom, #nom, #courriel_confirmation").attr('disabled', 'disabled');
$("#date").focus();
} else {
surErreurCompletionCourriel();
}
var url = getUrlAutocompletionNomsSci();
$.getJSON(url, function(data) {
var suggestions = traiterRetourNomsSci(data);
add(suggestions);
});
},
error : function(jqXHR, textStatus, errorThrown) {
//console.log('ERREUR :'+textStatus);
surErreurCompletionCourriel();
},
complete : function(jqXHR, textStatus) {
//console.log('COMPLETE :'+textStatus);
$("#zone-prenom-nom").removeClass("hidden");
$("#zone-courriel-confirmation").removeClass("hidden");
html: true
});
 
$('#taxon').on('autocompleteselect', function(event, ui) {
$('#taxon').data(ui.item);
if (ui.item.retenu == true) {
$('#taxon').addClass('ns-retenu');
} else {
$('#taxon').removeClass('ns-retenu');
}
});
}
 
function surErreurCompletionCourriel() {
$("#prenom, #nom, #courriel_confirmation").val('');
$("#prenom, #nom, #courriel_confirmation").removeAttr('disabled');
afficherPanneau("#dialogue-courriel-introuvable");
function getUrlAutocompletionNomsSci() {
var mots = $('#taxon').val(),
url = SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL.replace('{referentiel}',NOM_SCI_REFERENTIEL);
url = url.replace('{masque}', mots);
return url;
}
//+---------------------------------------------------------------------------------------------------------+
//FORMULAIRE
$(document).ready(function() {
if (OBS_ID != '') {
chargerInfoObs();
 
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;
}
 
function chargerInfoObs() {
var urlObs = SERVICE_OBS_URL + '/' + OBS_ID;
$.ajax({
url: urlObs,
type: 'GET',
success: function(data, textStatus, jqXHR) {
if (data != undefined && data != "") {
prechargerForm(data);
/*
* 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);
}
// TODO: voir s'il est pertinent d'indiquer quelque chose en cas d'erreur ou d'obs
// inexistante
},
error: function(jqXHR, textStatus, errorThrown) {
// TODO: cf TODO ci-dessus
_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);
 
function prechargerForm(data) {
//+----------------------------------------------------------------------------------------------------------+
//UPLOAD PHOTO : Traitement de l'image
$(document).ready(function() {
$('.effacer-miniature').click(function () {
supprimerMiniatures($(this));
});
 
$("#milieu").val(data.milieu);
$('#fichier').on('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
};
$('#ajouter-obs').attr('disabled', 'disabled');
if (verifierFormat($('#fichier').val())) {
$('#form-upload').ajaxSubmit(options);
} else {
$('#form-upload')[0].reset();
window.alert("Le format de fichier n'est pas supporté, les formats acceptés sont "+$('#fichier').attr('accept'));
}
return false;
});
 
$("#carte-recherche").val(data.zoneGeo);
$("#commune-nom").text(data.zoneGeo);
 
if(data.hasOwnProperty("codeZoneGeo")) {
// TODO: trouver un moyen qui fonctionne lorsqu'on aura d'autres référentiels que INSEE
$("#commune-code-insee").text(data.codeZoneGeo.replace('INSEE-C:', ''));
if (ESPECE_IMPOSEE) {
$('#taxon').attr('disabled', 'disabled');
$('#taxon-input-groupe').attr('title', '');
var infosAssociee = new Object();
infosAssociee.label = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
infosAssociee.value = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
infosAssociee.nt = INFOS_ESPECE_IMPOSEE.num_taxonomique;
infosAssociee.nomSel = INFOS_ESPECE_IMPOSEE.nom_sci;
infosAssociee.nomSelComplet = INFOS_ESPECE_IMPOSEE.nom_sci_complet;
infosAssociee.numNomSel = INFOS_ESPECE_IMPOSEE.id;
infosAssociee.nomRet = INFOS_ESPECE_IMPOSEE['nom_retenu.libelle'];
infosAssociee.numNomRet = INFOS_ESPECE_IMPOSEE['nom_retenu.id'];
infosAssociee.famille = INFOS_ESPECE_IMPOSEE.famille;
infosAssociee.retenu = (INFOS_ESPECE_IMPOSEE.retenu == 'false') ? false : true;
$('#taxon').data(infosAssociee);
}
 
if(data.hasOwnProperty("latitude") && data.hasOwnProperty("longitude")) {
var latLng = new google.maps.LatLng(data.latitude, data.longitude);
mettreAJourMarkerPosition(latLng);
marker.setPosition(latLng);
map.setCenter(latLng);
map.setZoom(16);
$('body').on('click', '.effacer-miniature', function() {
$(this).parent().remove();
});
});
 
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();
var imgNom = $('image-nom', reponse).text();
var html =
'<div class="miniature">'+
'<img class="miniature-img thumbnail" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'+
'<button class="effacer-miniature" type="button">Effacer</button>'+
'</div>'
return html;
}
 
function supprimerMiniatures() {
$('#miniatures').empty();
$('#miniature-msg').empty();
}
 
//Initialise l'autocomplétion de la commune, en fonction du référentiel
function initialiserAutocompleteCommune() {
var geocoderOptions = {},
addressSuffix = '';
 
geocoderOptions.region = 'fr';
addressSuffix = ', France';
 
$('#carte-recherche').autocomplete({
//Cette partie utilise geocoder pour extraire des valeurs d'adresse
source: function(request, response) {
geocoderOptions.address = request.term + addressSuffix;
geocoder.geocode( geocoderOptions, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
response($.map(results, function(item) {
var retour = {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
};
return retour;
}));
} else {
afficherErreurGoogleMap(status);
}
});
},
// Cette partie est executee a la selection d'une adresse
select: function(event, ui) {
var latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
deplacerMarker(latLng);
}
});
 
// Autocompletion du champ adresse
$('#carte-recherche').on('focus', function() {
$(this).select();
});
$('#carte-recherche').on('mouseup', function(event) {// Pour Safari...
event.preventDefault();
});
 
$('#carte-recherche').keypress(function(e) {
if (e.which == 13) {
e.preventDefault();
}
});
};
 
 
//+---------------------------------------------------------------------------------------------------------+
// FORMULAIRE : traitements génériques
var obsNbre = 0;
 
$(document).ready(function() {
$(".alert .close").on('click', fermerPanneauAlert);
 
$("body").on('click', ".fermer", function(event) {
$('.alert .close').on('click', fermerPanneauAlert);
$('body').on('click', '.fermer', function(event) {
event.preventDefault();
basculerOuvertureFermetureCadre($(this).find('.icone'));
});
 
$('.has-tooltip').tooltip('enable');
$("#btn-aide").on('click', basculerAffichageAide);
$('#btn-aide').on('click', basculerAffichageAide);
 
$("#prenom").on("change", formaterPrenom);
 
$("#nom").on("change", formaterNom);
 
// Date picker
configurerDatePicker();
 
// Gestion de la liste des taxons
ajouterAutocompletionNoms();
surChangementAbondance();// Vérif lors du chargement de la page
$('#abondance').on('change', surChangementAbondance);
 
// Validation du formulaire
configurerFormValidator();
definirReglesFormValidator();
 
$("#courriel_confirmation").on('paste', bloquerCopierCollerCourriel);
// Gestion des obs
$('.btn-coord ').on('click', basculerAffichageCoord);
$('#ajouter-obs').on('click', ajouterObs);
surChangementNbreObs();
$('.obs-nbre').on('changement', surChangementNbreObs);
$('body').on('click', '.supprimer-obs', supprimerObs);
$('#transmettre-obs').on('click', transmettreObs);
 
$("a.afficher-coord").on('click', basculerAffichageCoord);
 
$("#ajouter-obs").on('click', ajouterObs);
 
$(".obs-nbre").on('changement', surChangementNbreObs);
 
$("body").on('click', ".supprimer-obs", supprimerObs);
 
$("#transmettre-obs").on('click', transmettreObs);
 
$("#referentiel").on('change', surChangementReferentiel);
 
$("body").on('click', ".defilement-miniatures-gauche", function(event) {
// Défilement des photos
$('body').on('click', '.defilement-miniatures-gauche', function(event) {
event.preventDefault();
defilerMiniatures($(this));
});
 
$("body").on('click', ".defilement-miniatures-droite", function(event) {
$('body').on('click', '.defilement-miniatures-droite', function(event) {
event.preventDefault();
defilerMiniatures($(this));
});
});
 
function surChangementAbondance() {
if (afficherIndividusNbreGroupe()) {
$('#individus-nbre-groupe').removeClass('hidden');
$('#individus-nbre').valid();
} else {
$('#individus-nbre-groupe').addClass('hidden');
}
}
 
function afficherIndividusNbreGroupe() {
var abondance = $('#abondance').val();
if (abondance === '1-5 individus' || abondance === '5-10 individus' || abondance === '10-50 individus') {
return true;
} else {
return false;
}
}
 
function configurerFormValidator() {
$.validator.addMethod(
"dateCel",
'dateCel',
function (value, element) {
return value == "" || (/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{4}$/.test(value));
return value == '' || (/^[0-9]{2}[-\/][0-9]{2}[-\/][0-9]{4}$/.test(value));
},
"Format : jj/mm/aaaa. Date incomplète, utiliser 0, exemple : 00/12/2011.");
'Format : jj/mm/aaaa. Date incomplète, utiliser 0, exemple : 00/12/2011.');
 
$.extend($.validator.defaults, {
ignore: [],// Forcer Jquery Validate à examiner les éléments avec en display:none;
$.validator.addMethod(
'individusNbre',
function (value, element) {
var ok = true;
if (afficherIndividusNbreGroupe()) {
ok = (value == '' || /^[0-9]+$/.test(value));
}
return ok;
},
"Veuillez indiquer le nombre d'individus sous forme d'entier positif (Ex. : 3, 15 ou 33...).");
 
$.validator.addMethod(
'isbn',
function (value, element) {
var isbn = value.trim();
return (value == '' || (/^ISBN(-1(?:(0)|3))?:?( )*[0-9]+[- ][0-9]+[- ][0-9]+[- ][0-9]*[- ]*[xX0-9]$/).test(isbn));
},
'Format : ISBN 10 ou 13 avec chaque partie séparée par un espace ou tiret. <br />'+
'Doit débuter par : "ISBN" ou "ISBN-10" ou "ISBN-13". Suivi par ":" ou ": " ou directement le code ISBN.<br />'+
'(Ex. : ISBN:978-3-642-11746-6, ISBN:978 3 642 11746 6, ISBN: 978 3 642 11746 6, ISBN-10: 3 642 11746 6).');
 
// Modification des méthodes par défaut de Jquery Validation pour Boostrap 3
$.validator.setDefaults({
ignore: [],// Forcer Jquery Validate à examiner les éléments en "display:none;"
highlight: function(element) {
$(element).closest('.control-group').removeClass('success').addClass('error');
$(element).closest('.form-group').addClass('has-error');
},
unhighlight: function(element) {
$(element).closest('.form-group').removeClass('has-error');
},
success: function(element) {
element.text('OK!').addClass('valid');
element.closest('.control-group').removeClass('error').addClass('success');
$(element).closest('.form-group').removeClass('has-error').addClass('has-success');
 
if (element.attr('id') == 'taxon' && $('#taxon').val() != '') {
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', '');
577,6 → 813,16
$('#taxon').data('famille', '');
}
}
},
errorElement: 'span',
errorClass: 'help-block',
errorPlacement: function(error, element) {
//console.log(element.attr('name') +'-'+ element.parent('.input-group').length);
if (element.parent('.input-group').length) {
error.insertAfter(element.parent());
} else {
error.insertAfter(element);
}
}
});
}
600,8 → 846,8
longitude : {
range: [-180, 180],
required: true},
stationSurface: 'required',
milieu: 'required'
'l93-x': 'required',
'l93-y': 'required'
}
});
$('#form-obs').validate({
609,71 → 855,39
date: {
required: true,
'dateCel' : true},
taxon: 'required',
recouvrement: 'required'
},
errorPlacement: function(error, element) {
if (element.attr('name') == 'date') {
element.parent('.input-prepend').after(error);
} else {
error.insertAfter(element);
}
taxon: {required: true},
individusNombre: {individusNbre: true},
determinationSource: {isbn: true}
}
});
}
 
function configurerDatePicker() {
$.datepicker.setDefaults($.datepicker.regional["fr"]);
$("#date").datepicker({
dateFormat: "dd/mm/yy",
$.datepicker.setDefaults($.datepicker.regional['fr']);
$('#date').datepicker({
dateFormat: 'dd/mm/yy',
maxDate: new Date,
showOn: "button",
showOn: 'button',
buttonImageOnly: true,
buttonImage: CALENDRIER_ICONE_URL,
buttonText: "Afficher le calendrier pour saisir la date.",
buttonText: 'Afficher le calendrier pour saisir la date.',
showButtonPanel: true,
onSelect: function(date) {
$(this).valid();
}
});
$("img.ui-datepicker-trigger").appendTo("#date-icone");
$('img.ui-datepicker-trigger').appendTo('#date-icone');
}
 
function fermerPanneauAlert() {
$(this).parentsUntil(".zone-alerte", ".alert").hide();
$(this).parentsUntil('.zone-alerte', '.alert').hide();
}
 
function formaterNom() {
$(this).val($(this).val().toUpperCase());
}
 
function formaterPrenom() {
var prenom = new Array();
var 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('-');
for (var j = 0; j < motsComposes.length; j++) {
var motSimple = motsComposes[j];
var motMajuscule = motSimple.charAt(0).toUpperCase() + motSimple.slice(1);
prenomCompose.push(motMajuscule);
}
prenom.push(prenomCompose.join('-'));
} else {
var motMajuscule = mot.charAt(0).toUpperCase() + mot.slice(1);
prenom.push(motMajuscule);
}
}
$(this).val(prenom.join(' '));
}
 
function basculerOuvertureFermetureCadre(element) {
if (element.hasClass('icon-plus-sign')) {
element.removeClass('icon-plus-sign').addClass('icon-minus-sign');
if (element.hasClass('glyphicon-plus-sign')) {
element.removeClass('glyphicon-plus-sign').addClass('glyphicon-minus-sign');
} else {
element.removeClass('icon-minus-sign').addClass('icon-plus-sign');
element.removeClass('glyphicon-minus-sign').addClass('glyphicon-plus-sign');
}
}
 
690,31 → 904,44
}
 
function bloquerCopierCollerCourriel() {
afficherPanneau("#dialogue-bloquer-copier-coller");
afficherPanneau('#dialogue-bloquer-copier-coller');
return false;
}
 
function basculerAffichageCoord() {
$("a.afficher-coord").toggle();
$("#coordonnees-geo").toggle('slow');
//valeur false pour que le lien ne soit pas suivi
var textActuel = $(this).text(),
textARemplacer = $(this).data('toggle-text');
$(this).text(textARemplacer).data('toggle-text', textActuel);
 
if ($(this).hasClass('cacher-coord')) {
$(this).removeClass('cacher-coord').addClass('afficher-coord');
$('#coordonnees-geo').addClass('hidden');
} else {
$(this).removeClass('afficher-coord').addClass('cacher-coord');
$('#coordonnees-geo').removeClass('hidden');
}
 
return false;
}
 
function ajouterObs() {
// Fermeture automatique des dialogue de transmission de données
$('#dialogue-obs-transaction-ko').hide();
$('#dialogue-obs-transaction-ok').hide();
 
if (validerFormulaire() == true) {
obsNbre = obsNbre + 1;
$(".obs-nbre").text(obsNbre);
$(".obs-nbre").triggerHandler('changement');
$('.obs-nbre').text(obsNbre);
$('.obs-nbre').triggerHandler('changement');
afficherObs();
stockerObsData();
supprimerMiniatures();
if(!ESPECE_IMPOSEE) {
$("#taxon").val("");
$("#taxon").data("numNomSel",undefined);
$('#taxon').val('');
$('#taxon').data('numNomSel',undefined);
}
$('#barre-progression-upload').attr('aria-valuemax', obsNbre);
$('#barre-progression-upload .sr-only').text('0/'+obsNbre+" observations transmises");
$('#barre-progression-upload .sr-only').text('0/'+obsNbre+' observations transmises');
} else {
afficherPanneau('#dialogue-form-invalide');
}
721,78 → 948,116
}
 
function afficherObs() {
$("#liste-obs").prepend(
'<div id="obs'+obsNbre+'" class="row-fluid obs obs'+obsNbre+'">'+
'<div class="span12">'+
var date = $('#date').val(),
commune = $('#commune-nom').text(),
codeInsee = $('#commune-code-insee').text(),
lat = $('input[name="latitude"]').val(),
lng = $('input[name="longitude"]').val(),
lieudit = $('#lieudit').val(),
station = $('#station').val(),
 
milieux = $('#milieu').val(),
exposition = getTextOptionSelectionne('station-exposition'),
pente = getTextOptionSelectionne('station-pente'),
 
phenologie = getTextOptionSelectionne('phenologie'),
abondance = getTextOptionSelectionne('abondance'),
individus = (($('#individus-nbre').val() === undefined || $('#individus-nbre').val() === '') ? '' : ' (' + $('#individus-nbre').val() + ')'),
typeReleve = getTextOptionSelectionne('releve-type'),
sourceDet = $('#determination-source').val(),
 
notes = $('#notes').val();
 
$('#liste-obs').prepend(
'<div id="obs'+obsNbre+'" class="obs obs'+obsNbre+'">'+
'<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>'+
'<span class="glyphicon glyphicon-trash icon-white"></i>'+
'</button>'+
'</div> '+
'<div class="row-fluid">'+
'<div class="thumbnail span2">'+
'<div class="row">'+
'<div class="col-md-2 obs-miniatures">'+
ajouterImgMiniatureAuTransfert()+
'</div>'+
'<div class="span9">'+
'<ul class="unstyled">'+
'<div class="col-md-8">'+
'<ul class="list-unstyled obs-entete">'+
'<li>'+
'<span class="nom-sci">'+$("#taxon").val()+'</span> '+
ajouterNumNomSel()+
' observé à '+
'<span class="commune">'+$('#commune-nom').text()+'</span> '+
'('+$('#commune-code-insee').text()+') ['+$("#latitude").val()+' / '+$("#longitude").val()+']'+
' le '+
'<span class="date">'+$("#date").val()+'</span>'+
'Observé à ' +
'<span class="commune">' + commune + '</span> ' +
'(' + codeInsee + ') [' + lat +' / ' + lng + ']' +
' le ' +
'<span class="date">' + date + '</span>' +
'</li>' +
'</ul>'+
'<ul class="list-unstyled obs-details">'+
'<li>' +
'<span>Lieu-dit :</span> ' + lieudit + ' ; ' +
'<span>Station :</span> ' + station + ' ; ' +
'</li>' +
'<li>' +
'<span>Milieu :</span> ' + milieux + ' ; ' +
'<span>Exposition :</span> ' + exposition + ' ; ' +
'<span>Pente :</span> ' + pente + ' ; ' +
'</li>' +
'<li>' +
'<span>Phénologie :</span> ' + phenologie + ' ; ' +
'<span>Abondance :</span> ' + abondance + individus + ' ; ' +
'<span>Relevé :</span> ' + typeReleve + ' ; ' +
'<span>Source :</span> ' + sourceDet + ' ; ' +
'</li>' +
'<li>' +
'<span>Commentaires :</span> ' + notes +
'</li>'+
'<li>'+
'<span>Lieu-dit :</span> '+$('#lieudit').val()+' - '+
'<span>Station :</span> '+$('#station').val()+' '+
'</li>'+
'<li>'+
'<span>Surface :</span> '+$('#station-surface option:selected').text()+' - '+
'<span>Recouvrement :</span> '+$('#recouvrement option:selected').text()+' '+
'</li>'+
'<li>'+
'<span>Milieu :</span> '+$('#milieu').val()+' '+' - '+
'<span>Commentaire sur le milieu :</span> <span class="discretion">'+$('#milieu-commentaire').val()+' '+'</span><br />'+
'</li>'+
'<li>'+
'Notes : <span class="discretion">'+$("#notes").val()+'</span>'+
'</li>'+
'</ul>'+
'</div>'+
'</div>'+
'</div>'+
'</div>'+
'</div>');
}
 
function getTextOptionSelectionne(id) {
var optionVal = $('#' + id).val(),
optionText = $('#' + id + ' option:selected').text();
console.log(optionVal+'-'+optionText);
return ((optionVal === undefined || optionVal === '') ? '' : optionText);
}
 
function stockerObsData() {
$("#liste-obs").data('obsId'+obsNbre, {
'date' : $("#date").val(),
'notes' : $("#notes").val(),
var numNomSel = $('#taxon').data('numNomSel'),
nomSel = $('#taxon').val(),
nomRet = $('#taxon').data('nomRet'),
numNomRet = $('#taxon').data('numNomRet'),
numTaxon = $('#taxon').data('nt'),
famille = $('#taxon').data('famille'),
referentiel = (numNomSel == undefined) ? '' : NOM_SCI_REFERENTIEL;
 
'nom_sel' : $("#taxon").val(),
'num_nom_sel' : $("#taxon").data("numNomSel"),
'nom_ret' : $("#taxon").data("nomRet"),
'num_nom_ret' : $("#taxon").data("numNomRet"),
'num_taxon' : $("#taxon").data("nt"),
'famille' : $("#taxon").data("famille"),
'referentiel' : ($("#taxon").data("numNomSel") == undefined ? '' : NOM_SCI_REFERENTIEL),
$('#liste-obs').data('obsId'+obsNbre, {
'date' : $('#date').val(),
'notes' : $('#notes').val().trim(),
 
'latitude' : $("#latitude").val(),
'longitude' : $("#longitude").val(),
'commune_nom' : $("#commune-nom").text(),
'commune_code_insee' : $("#commune-code-insee").text(),
'lieudit' : $("#lieudit").val(),
'station' : $("#station").val(),
'milieu' : $("#milieu").val(),
'nom_sel': nomSel,
'num_nom_sel': numNomSel,
'nom_ret': nomRet,
'num_nom_ret': numNomRet,
'num_taxon': numTaxon,
'famille': famille,
'referentiel': referentiel,
 
'latitude' : $('#latitude').val(),
'longitude' : $('#longitude').val(),
'commune_nom' : $('#commune-nom').text(),
'commune_code_insee' : $('#commune-code-insee').text(),
'altitude': $('#altitude').text(),
'lieudit': $('#lieudit').val().trim(),
'station': $('#station').val().trim(),
'milieu': $('#milieu').val().trim(),
'abondance': $('#abondance').val(),
'phenologie': $('#phenologie').val(),
 
//Ajout des champs images
'image_nom' : getNomsImgsOriginales(),
'image_b64' : getB64ImgsOriginales(),
 
// Ajout des champs étendus de l'obs
'obs_etendue': getObsChpEtendus()
804,10 → 1069,9
 
$('.obs-chp-etendu').each(function() {
var valeur = $(this).val(),
cle = $(this).attr('name'),
label = $(this).data('label');
cle = $(this).attr('name');
if (valeur != '') {
var chpEtendu = {cle: cle, label: label, valeur: valeur};
var chpEtendu = {cle: cle, valeur: valeur.trim()};
champs.push(chpEtendu);
}
});
814,23 → 1078,16
return champs;
}
 
function surChangementReferentiel() {
NOM_SCI_REFERENTIEL = $('#referentiel').val();
$('#taxon').val('');
initialiserAutocompleteCommune();
initialiserGoogleMap();
}
 
function surChangementNbreObs() {
if (obsNbre == 0) {
$("#transmettre-obs").attr('disabled', 'disabled');
$("#ajouter-obs").removeAttr('disabled');
$('#transmettre-obs').attr('disabled', 'disabled');
$('#ajouter-obs').removeAttr('disabled');
} else if (obsNbre > 0 && obsNbre < OBS_MAX_NBRE) {
$("#transmettre-obs").removeAttr('disabled');
$("#ajouter-obs").removeAttr('disabled');
$('#transmettre-obs').removeAttr('disabled');
$('#ajouter-obs').removeAttr('disabled');
} else if (obsNbre >= OBS_MAX_NBRE) {
$("#ajouter-obs").attr('disabled', 'disabled');
afficherPanneau("#dialogue-bloquer-creer-obs");
$('#ajouter-obs').attr('disabled', 'disabled');
afficherPanneau('#dialogue-bloquer-creer-obs');
}
}
 
837,9 → 1094,12
var nbObsEnCours = 1;
var totalObsATransmettre = 0;
function transmettreObs() {
var observations = $("#liste-obs").data();
var observations = $('#liste-obs').data();
if (DEBUG) {
console.log(observations);
}
if (observations == undefined || jQuery.isEmptyObject(observations)) {
afficherPanneau("#dialogue-zero-obs");
afficherPanneau('#dialogue-zero-obs');
} else {
nbObsEnCours = 1;
nbObsTransmises = 0;
850,7 → 1110,7
}
 
function depilerObsPourEnvoi() {
var observations = $("#liste-obs").data();
var observations = $('#liste-obs').data();
// la boucle est factice car on utilise un tableau
// dont on a besoin de n'extraire que le premier élément
// or javascript n'a pas de méthode cross browsers pour extraire les clés
864,10 → 1124,10
obsATransmettre['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();
utilisateur.id_utilisateur = $('#id_utilisateur').val();
utilisateur.prenom = $('#prenom').val();
utilisateur.nom = $('#nom').val();
utilisateur.courriel = $('#courriel').val();
obsATransmettre['utilisateur'] = utilisateur;
obsATransmettre[obsNum] = observations[obsNum];
var idObsNumerique = obsNum.replace('obsId', '');
884,10 → 1144,10
nbObsTransmises++;
var pct = (nbObsTransmises/totalObsATransmettre)*100;
$('#barre-progression-upload').attr('aria-valuenow', nbObsTransmises);
$('#barre-progression-upload').attr('style', "width: "+pct+"%");
$('#barre-progression-upload .sr-only').text(nbObsTransmises+"/"+totalObsATransmettre+" observations transmises");
$('#barre-progression-upload').attr('style', 'width: '+pct+'%');
$('#barre-progression-upload .sr-only').text(nbObsTransmises+'/'+totalObsATransmettre+' observations transmises');
 
if(obsNbre == 0) {
if (obsNbre == 0) {
$('.progress').removeClass('active');
$('.progress').removeClass('progress-striped');
}
894,19 → 1154,19
}
 
function envoyerObsAuCel(idObs, observation) {
var erreurMsg = "";
var erreurMsg = '';
$.ajax({
url : SERVICE_SAISIE_URL,
type : "POST",
type : 'POST',
data : observation,
dataType : "json",
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();
$('#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) {
// mise à jour du nombre d'obs à transmettre
943,38 → 1203,37
 
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 : '+debugMsg+'</pre>');
$('#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_remarques@tela-botanica.org?"+
"subject=Dysfonctionnement du widget de saisie "+TAG_PROJET+
"&body="+erreurMsg+"%0D%0ADébogage :%0D%0A"+debugMsg;
var hrefCourriel = 'mailto:cel_remarques@tela-botanica.org?'+
'subject=Dysfonctionnement du widget de saisie '+TAG_PROJET+
'&body='+erreurMsg+'%0D%0ADébogage :%0D%0A'+debugMsg;
 
// mise en valeur de l'obs en erreur + scroll vers celle ci en changeant le hash
$('#obs'+idObs+' div div').addClass('obs-erreur');
window.location.hash = "obs"+idObs;
window.location.hash = 'obs'+idObs;
 
$('#dialogue-obs-transaction-ko .alert-txt').append($("#tpl-transmission-ko").clone()
$('#dialogue-obs-transaction-ko .alert-txt').append($('#tpl-transmission-ko').clone()
.find('.courriel-erreur')
.attr('href', hrefCourriel)
.end()
.html());
$("#dialogue-obs-transaction-ko").show();
$("#chargement").hide();
$('#dialogue-obs-transaction-ko').show();
$('#chargement').hide();
initialiserBarreProgression();
} else {
if (DEBUG) {
$("#dialogue-obs-transaction-ok .alert-txt").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');
$('#dialogue-obs-transaction-ok .alert-txt').append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>');
}
if(obsNbre == 0) {
setTimeout(function() {
$("#chargement").hide();
$('#chargement').hide();
$('#dialogue-obs-transaction-ok .alert-txt').append($('#tpl-transmission-ok').clone().html());
$("#dialogue-obs-transaction-ok").show();
window.location.hash = "dialogue-obs-transaction-ok";
$('#dialogue-obs-transaction-ok').show();
window.location.hash = 'dialogue-obs-transaction-ok';
initialiserObs();
}, 1500);
 
}
}
}
982,38 → 1241,25
}
 
function validerFormulaire() {
$observateur = $("#form-observateur").valid();
$station = $("#form-station").valid();
$obs = $("#form-obs").valid();
$observateur = $('#form-observateur').valid();
$station = $('#form-station').valid();
$obs = $('#form-obs').valid();
return ($observateur == true && $station == true && $obs == true) ? true : false;
}
 
function getNomsImgsOriginales() {
var noms = new Array();
$(".miniature-img").each(function() {
$('.miniature-img').each(function() {
noms.push($(this).attr('alt'));
});
return noms;
}
 
function getB64ImgsOriginales() {
var b64 = new Array();
$(".miniature-img").each(function() {
if ($(this).hasClass('b64')) {
b64.push($(this).attr('src'));
} else if ($(this).hasClass('b64-canvas')) {
b64.push($(this).data('b64'));
}
});
 
return b64;
}
 
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');
}
supprimerObsParId(obsId);
}
1020,16 → 1266,16
 
function supprimerObsParId(obsId) {
obsNbre = obsNbre - 1;
$(".obs-nbre").text(obsNbre);
$(".obs-nbre").triggerHandler('changement');
$('.obs-nbre').text(obsNbre);
$('.obs-nbre').triggerHandler('changement');
$('.obs'+obsId).remove();
$("#liste-obs").removeData('obsId'+obsId);
$('#liste-obs').removeData('obsId'+obsId);
}
 
function initialiserBarreProgression() {
$('#barre-progression-upload').attr('aria-valuenow', 0);
$('#barre-progression-upload').attr('style', "width: 0%");
$('#barre-progression-upload .sr-only').text("0/0 observations transmises");
$('#barre-progression-upload').attr('style', 'width: 0%');
$('#barre-progression-upload .sr-only').text('0/0 observations transmises');
$('.progress').addClass('active');
$('.progress').addClass('progress-striped');
}
1040,11 → 1286,11
nbObsEnCours = 0;
totalObsATransmettre = 0;
initialiserBarreProgression();
$(".obs-nbre").text(obsNbre);
$(".obs-nbre").triggerHandler('changement');
$("#liste-obs").removeData();
$('.obs-nbre').text(obsNbre);
$('.obs-nbre').triggerHandler('changement');
$('#liste-obs').removeData();
$('.obs').remove();
$("#dialogue-bloquer-creer-obs").hide();
$('#dialogue-bloquer-creer-obs').hide();
}
 
function ajouterImgMiniatureAuTransfert() {
1051,32 → 1297,31
var html = '';
var miniatures = '';
var premiere = true;
if ($("#miniatures img").length >= 1) {
$("#miniatures img").each(function() {
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+'" />';
var css = $(this).hasClass('b64') ? 'thumbnail b64' : 'thumbnail';
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';
visible = ($('#miniatures img').length > 1) ? '' : 'defilement-miniatures-cache';
var html =
'<div class="defilement-miniatures">'+
'<a href="#" class="defilement-miniatures-gauche '+visible+'">&#60;</a>'+
'<a class="defilement-miniatures-gauche '+visible+'">&#60;</a>'+
miniatures+
'<a href="#" class="defilement-miniatures-droite '+visible+'">&#62;</a>'+
'<a class="defilement-miniatures-droite '+visible+'">&#62;</a>'+
'</div>';
} else {
html = '<img class="miniature" alt="Aucune photo"src="'+PAS_DE_PHOTO_ICONE_URL+'" />';
html = '<img class="thumbnail" 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;
1083,15 → 1328,15
 
if(element.hasClass('defilement-miniatures-gauche')) {
if(miniatureSelectionne.prev('.miniature').length != 0) {
miniatureAffichee = miniatureSelectionne.prev('.miniature');
miniatureAffichee = miniatureSelectionne.prev('.thumbnail');
} else {
miniatureAffichee = miniatureSelectionne.siblings(".miniature").last();
miniatureAffichee = miniatureSelectionne.siblings('.thumbnail').last();
}
} else {
if(miniatureSelectionne.next('.miniature').length != 0) {
miniatureAffichee = miniatureSelectionne.next('.miniature');
miniatureAffichee = miniatureSelectionne.next('.thumbnail');
} else {
miniatureAffichee = miniatureSelectionne.siblings(".miniature").first();
miniatureAffichee = miniatureSelectionne.siblings('.thumbnail').first();
}
}
//console.log(miniatureAffichee);
1099,128 → 1344,13
miniatureAffichee.removeClass('miniature-cachee');
}
 
function ajouterNumNomSel() {
 
function formaterNumNomSel(numNomSel) {
var nn = '';
if ($("#taxon").data("numNomSel") == undefined) {
if (numNomSel == undefined) {
nn = '<span class="alert-error">[non lié au référentiel]</span>';
} else {
nn = '<span class="nn">['+
'<span class="referentiel-obs">'+($("#taxon").data("numNomSel") == undefined ? '' : NOM_SCI_REFERENTIEL+'-')+'</span>'+
'nn'+$("#taxon").data("numNomSel")+
']</span>';
nn = '<span class="nn">[nn'+numNomSel+']</span>';
}
return nn;
}
 
//+---------------------------------------------------------------------------------------------------------+
// AUTO-COMPLÉTION Noms Scientifiques
 
function ajouterAutocompletionNoms() {
$('#taxon').autocomplete({
source: function(requete, add){
// la variable de requête doit être vidée car sinon le parametre "term" est ajouté
requete = "";
var url = getUrlAutocompletionNomsSci();
$.getJSON(url, requete, 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();
var url = SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL.replace('{referentiel}',NOM_SCI_REFERENTIEL);
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;
// Tester dans ce sens, permet de considérer "absent" comme "false" => est-ce opportun ?
// en tout cas c'est harmonisé avec le CeL
nom.retenu = (val.retenu == 'true') ? true : false;
 
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 );
}