Rev 2902 | Rev 2919 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed
<!DOCTYPE html>
<html>
<head>
<title>Saisie simplifiée du CEL - messicoles</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Tela Botanica" />
<meta name="keywords" content="Tela Botanica, CEL" />
<meta name="description" content="Widget de saisie simplifiée pour le CEL" />
<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Saisie rapide d'observations - messicoles" />
<meta property="og:site_name" content="Tela Botanica" />
<meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:locale" content="fr_FR" />
<!-- Viewport Mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicones -->
<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
<!-- Javascript : bibliothèques -->
<!-- Google Map v3 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&region=FR"></script>
<!-- Jquery -->
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
<script type="text/javascript" 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 type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
<!-- Jquery Form :nécessaire pour l'upload des images -->
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<!-- Javascript : appli saisie -->
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/messicoles/js/WidgetSaisieMessicoles.js"></script>
<script src="<?=$url_base?>saisie?projet=messicoles&service=taxons" type="text/javascript"></script>
<script type="text/javascript" src="<?=$url_base?>modules/saisie/configurations/messicoles_nnr.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// Un objet sauvage apparaît
var widget = new WidgetSaisieMessicoles();
// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
widget.taxons = taxons;
// La présence du parametre 'debug' dans l'URL enclenche le débogage
widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
// Mot-clé du widget/projet
widget.tagProjet = "WidgetSaisie";
// Mots-clés à ajouter aux images
widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
// Mots-clés à ajouter aux observations
widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
// Précharger le formulaire avec les infos d'une observation
widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
// URL du web service réalisant l'insertion des données dans la base du CEL.
widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
// URL du web service permettant de récupérer les infos d'une observation du CEL.
widget.serviceObsUrl = "<?=$url_ws_obs?>";
// Code du référentiel utilisé pour les nom scientifiques.
widget.nomSciReferentiel = "<?=$ns_referentiel?>";
// Indication de la présence d'une espèce imposée
widget.especeImposee = "<?=$espece_imposee; ?>";
// Tableau d'informations sur l'espèce imposée
widget.infosEspeceImposee = <?=$infos_espece; ?>;
// Nombre d'élément dans les listes d'auto-complétion
widget.autocompletionElementsNbre = 20;
// Indication de la présence d'un référentiel imposé
widget.referentielImpose = "<?=$referentiel_impose; ?>";
// URL du web service permettant l'auto-complétion des noms scientifiques
widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
"masque={masque}&"+
"recherche=etendue&"+
"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
"ns.structure=au"+"&"+
"navigation.limite=" + widget.autocompletionElementsNbre;
// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
"masque={masque}&"+
"recherche=etendue&"+
"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
"retour.tri=alpharet&"+ // tri "à la CeL"
"ns.structure=au"+"&"+
"navigation.limite=" + widget.autocompletionElementsNbre;
// Nombre d'observations max autorisé avant transmission
widget.obsMaxNbre = 10;
// Durée d'affichage en milliseconde des messages d'informations
widget.dureeMessage = 15000;
// Squelette d'URL du web service de l'annuaire.
widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
widget.serviceNomCommuneUrl = "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 les noms de communes hors de France (localisation approximative).
widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
// URL du marqueur à utiliser dans la carte Google Map
widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/marqueurs/debut.png";
// URL de l'icône du chargement en cours
widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/chargement.gif";
// URL de l'icône du chargement en cours d'une image
widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/chargement-image.gif";
// URL de l'icône du calendrier
widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/calendrier.png";
// URL de l'icône pour une photo manquante
widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/pasdephoto.png";
// Initialisation du bousin
widget.init();
});
//]]>
</script>
<!-- CSS -->
<link href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="<?=$url_base?>modules/saisie/squelettes/messicoles/css/<?=isset($_GET['style']) ? $_GET['style'] : 'messicoles'?>.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Google Analytics -->
<?php if($prod): ?>
<?php include "analytics.html"; ?>
<?php endif; ?>
</head>
<body data-spy="scroll">
<div class="container">
<div class="row-fluid">
<div class="span12 page-header">
<div class="row">
<div class="span12">
<h1>
<?php if($logo != 'defaut' && $logo != '0') { ?>
<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
<?php } else if($logo == 'defaut') { ?>
<img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
<?php } ?>
<span id="titre-projet">
<?php if($titre != 'defaut') { ?>
<?= $titre; ?>
</span>
<?php } else { ?>
Ajout rapide d'observations
<?php } ?>
<img id="logo-messicoles" src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/icones/logo.jpg" />
</h1>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<div class="row">
<div class="span6">
<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>).
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.
</p>
<p class="discretion">
Pour toute question ou remarque,
<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
target="_blank"
onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
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>
</button>
</p>
</div>
</div>
</div>
<!-- Bloc Observateur -->
<div class="span6">
<div class="well">
<h2>Observateur</h2>
<hr>
<form id="form-observateur" action="#" class="" autocomplete="on">
<div class="row-fluid">
<div class="span6" data-placement="right">
<label for="courriel">
<span class="has-tooltip pointer"
title="Saisissez le courriel avec lequel vous êtes 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.">
<strong class="obligatoire">*Courriel</strong>
</span>
</label>
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input id="courriel" class="input-large" name="courriel" type="text" />
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
</div>
</div>
<div id="zone-courriel-confirmation" class="span6 hidden">
<label for="courriel_confirmation"
title="Veuillez saisir confirmer le courriel.">
<strong class="obligatoire">*Courriel (confirmation)</strong>
</label>
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
</div>
</div>
</div>
<div id="zone-prenom-nom" class="row-fluid hidden">
<div class="span6">
<label for="prenom">
<strong>Prénom</strong>
</label>
<div class="input-prepend">
<span class="add-on">
<i class="icon-user"></i>
</span><input id="prenom" name="prenom" class="input-large" type="text"/>
</div>
</div>
<div class="span6">
<label for="nom">
<strong>Nom</strong>
</label>
<div class="input-prepend">
<span class="add-on">
<i class="icon-user"></i>
</span><input id="nom" name="nom" class="input-large" type="text"/>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- Messages d'erreur du formulaire-->
<div class="row">
<div class="zone-alerte span6 offset6">
<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : copier/coller</h4>
<p>
Merci de ne pas copier/coller votre courriel.<br/>
La double saisie permet de vérifier l'absence d'erreurs.
</p>
</div>
<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : courriel introuvable</h4>
<p>
Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
</p>
</div>
<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information sur Google Maps</h4>
<div class="contenu"></div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<div class="well">
<!-- 1e colonne : date, lieu, geoloc -->
<div class="row-fluid">
<h2>Relevé</h2>
<hr>
<form id="form-releve" class="control-group" action="#" autocomplete="on">
<!-- DATE -->
<div class="row-fluid">
<div class="control-group">
<label for="date">
<span class="has-tooltip pointer"
title="Veuillez indiquer la date du relevé au format jj/mm/aaaa. Vous pouvez
cliquer sur l'icône de calendrier pour sélectionner une date">
<strong class="obligatoire">*Date du relevé</strong>
</span>
</label>
<div class="input-prepend">
<span id="date-icone" class="add-on"></span><input id="date"
class="input-small" name="date" type="text"
placeholder="jj/mm/aaaa" />
</div>
</div>
</div>
<!-- Type de culture -->
<div class="row-fluid">
<div class="span3 control-group">
<label class="pointer">
<span class="has-tooltip pointer"
title="Vous pouvez sélectionner un type de culture parmi la liste ou en saisir un manuellement via l'option Autres"
>
<strong class="obligatoire">*Type de culture</strong>
</span>
</label>
</div>
<div class="span9 control-group">
<!-- Céréale -->
<label for="culture-cereale-radio" class="radio culture pointer">
<input type="radio" id="culture-cereale-radio" name="type-culture" value="cereale" data-titre="céréale" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Céréale
<input class="has-tooltip" type="text" id="culture-cereale-input" name="type-culture-details"
placeholder="Ex : Maïs"
style="display: none;"
title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ"
/>
</label>
<div class="popover-html-content" data-for="culture-cereale-radio">
<h5>Céréale</h5>
<p class="texte-infobulle">
Plante cultivée principalement pour ses grains, c'est-à-dire ses fruits
(caryopses), utilisés dans l'alimentation de l'Homme et des animaux
domestiques, souvent moulus sous forme de farine raffinée ou plus ou
moins complète, mais aussi en grains entiers (ces plantes sont aussi
parfois consommées sous forme de fourrage). En botanique, les céréales
regroupent des plantes de la famille des <i>Poacées</i> (ou <i>Graminées</i>).
Certaines graines d'autres familles botaniques sont parfois communément
appelées céréales, telles que le sarrasin (<i>Polygonacées</i>), le quinoa et
l'amarante (<i>Chénopodiacées</i>) ou le sésame (<i>Pédaliacées</i>). Toutefois,
n'étant pas des <i>Poacées</i>, ces dernières ne sont pas des céréales au sens
strict, et on leur donne souvent le nom de pseudo-céréales.
</p>
<img
class="image-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/cereale.png"
/>
</div>
<!-- Friche -->
<label for="culture-friche-radio" class="radio culture pointer">
<input type="radio" id="culture-friche-radio" name="type-culture" value="friche" data-titre="friche" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Friche
<input class="has-tooltip" type="text" id="culture-friche-input" name="type-culture-details"
placeholder="Ex : Pissenlit"
style="display: none;"
title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ"
/>
</label>
<div class="popover-html-content" data-for="culture-friche-radio">
<h5>Friche</h5>
<p class="texte-infobulle">
Zone, terrain ou une propriété qui n'est pas ou plus cultivée ni entretenue.
Des activités marginales peuvent cependant s’y étendre si ses parties restent
bien sûr accessibles : pâturage, cueillette, braconnage, chasse ou pêche et
autres activités de loisirs.
</p>
<img
class="image-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/friche.png"
/>
</div>
<!-- Maraichère -->
<label for="culture-maraichere-radio" class="radio culture pointer">
<input type="radio" id="culture-maraichere-radio" name="type-culture" value="maraichere" data-titre="maraichère" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Maraichère
<input class="has-tooltip" type="text" id="culture-maraichere-input" name="type-culture-details"
placeholder="Ex : Pois"
style="display: none;"
title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ"
/>
</label>
<div class="popover-html-content" data-for="culture-maraichere-radio">
<h5>Maraichère</h5>
<p class="texte-infobulle">
La culture maraîchère concerne les légumes, les petits fruits, les fines
herbes et fleurs à usage alimentaire, de manière professionnelle.
</p>
<img
class="image-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/maraichere.jpg"
/>
</div>
<!-- Vigne -->
<label for="culture-vigne-radio" class="radio culture pointer">
<input type="radio" id="culture-vigne-radio" name="type-culture" value="vigne" data-titre="vigne" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Vigne
<input class="has-tooltip" type="text" id="culture-vigne-input" name="type-culture-details"
placeholder="Ex : Sauterne"
style="display: none;"
title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ"
/>
</label>
<div class="popover-html-content" data-for="culture-vigne-radio">
<h5>Vigne</h5>
<p class="texte-infobulle">
Plantes grimpantes de la famille des <i>Vitaceae</i>, du genre <i>Vitis</i>.
Elles sont largement cultivées pour leur fruit en grappes, le raisin,
dont on tire un jus, le moût, qui devient du vin après fermentation.
</p>
<img
class="image-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/vigne.png"
/>
</div>
<!-- Verger -->
<label for="culture-verger-radio" class="radio culture pointer">
<input type="radio" id="culture-verger-radio" name="type-culture" value="verger" data-titre="verger" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Verger
<input class="has-tooltip" type="text" id="culture-verger-input" name="type-culture-details"
placeholder="Ex : Pommier"
style="display: none;"
title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ"
/>
</label>
<div class="popover-html-content" data-for="culture-verger-radio">
<h5>Verger</h5>
<p class="texte-infobulle">
Espace de terrain dévolu à la culture d'arbres fruitiers, appelée
arboriculture fruitière. Il en existe différents types : les vergers
conservatoires, les prés-vergers, les vergers commerciaux et de jardin
potager.
</p>
<img
class="image-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/verger.png"
/>
</div>
<!-- Plantes à parfum, aromatiques et médicinales -->
<label for="culture-aromatique-radio" class="radio culture pointer">
<input type="radio" id="culture-aromatique-radio" name="type-culture" value="aromatique" data-titre="plantes à parfum, aromatiques et médicinales" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Plantes à parfum, aromatiques et médicinales
<input class="has-tooltip" type="text" id="culture-aromatique-input" name="type-culture-details"
placeholder="Ex : Lavande"
style="display: none;"
title="Si vous la connaissez, indiquez quelle plante est cultivée sur le champ"
/>
</label>
<div class="popover-html-content" data-for="culture-aromatique-radio">
<h5>Plantes à parfum, aromatiques et médicinales</h5>
<p class="texte-infobulle">
Plantes grimpantes de la famille des <i>Vitaceae</i>, du genre <i>Vitis</i>.
Elles sont largement cultivées pour leur fruit en grappes, le raisin,
dont on tire un jus, le moût, qui devient du vin après fermentation.
</p>
<img
class="image-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/aromatique.jpg"
/>
</div>
<!-- Autres -->
<label for="culture-autres-radio" class="radio culture pointer">
<input type="radio" id="culture-autres-radio" name="type-culture" value="autres" data-titre="autres" />
Autres
<input type="text" id="culture-autres-input" name="type-culture-details"
style="display: none;"
/>
</label>
</div>
</div>
</form>
<!-- Géolocalisation -->
<div class="row-fluid">
<div class="span4">
<strong>Géolocalisation</strong>
</div>
<div class="span8 droite">
<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
<div class="control-group">
<label for="carte-recherche" class="pointer">Rechercher</label>
<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
title="Permet de centrer la carte sur le lieu recherché."
placeholder="Ex : France, Paris, Rue de Rivoli..."/>
</div>
</form>
</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>
<!-- Coordonnées -->
<div class="row-fluid">
<label for="coordonnees-geo" class="span7">
<a href="#" class="afficher-coord">Afficher</a>
<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
les coordonnées géographiques
<span id="lat-lon-info" class="info 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>
<!-- Formulaire Station -->
<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
<div id="coordonnees-geo" class="well" style="display:none;">
<div class="row-fluid form-inline">
<div id="coord-lat" class="span4">
<label for="latitude" class="pointer">Latitude</label>
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
</div>
<div id="coord-lng" class="span4">
<label for="longitude" class="pointer">Longitude</label>
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
</div>
<div class="span4 droite">
<input class="btn btn-primary" 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>
<div class="row-fluid">
<div class="span4 has-tooltip centre"
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="pointer">Lieu-dit</label>
<div>
<input type="text" id="lieudit" class="span2" name="lieudit"/>
</div>
</div>
<div class="span4 has-tooltip centre"
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="pointer">Station</label>
<div>
<input type="text" id="station" class="span2" name="station"/>
</div>
</div>
<div class="span4 has-tooltip centre"
title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie humide).">
<label for="milieu" class="pointer">Milieu</label>
<div>
<input type="text" id="milieu" class="span2" name="milieu" />
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<!-- 2e colonne : observation -->
<div class="span6">
<div class="well">
<div class="row-fluid">
<div class="span12">
<form id="form-obs" action="#" autocomplete="on">
<h2>Observation</h2>
<hr>
<div class="row-fluid">
<div id="taxon-liste-input-groupe" class="control-group">
<label for="taxon-liste">
<span class="has-tooltip pointer"
title="Sélectionnez une espèce dans la liste déroulante par son nom latin
ou commun. Si une espèce est absente, sélectionner «Autre espèce»."
>
<strong class="obligatoire">*Espèces</strong>
</span>
</label>
<span class="input-prepend">
<span id="espece-icone" class="add-on">
<i class="icon-leaf"></i>
</span>
</span>
<select id="taxon-liste" name="taxon-liste" class="form-control">
<option value="" selected>Sélectionner une espèce</option>
<optgroup id="taxon-liste-noms">
<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
<option
class="<?=$taxon['nom_type'] ?>"
value="<?=$taxon['num_nom'] ?>"
title="<?=$taxon['nom_title'] ?>"
data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
>
<?=$taxon['nom_a_afficher']?>
</option>
<?php endforeach; ?>
</optgroup>
<optgroup id="taxon-liste-special">
<?php foreach ($taxons['speciaux'] as $taxon) :?>
<option
class="<?=$taxon['nom_type'] ?>"
value="<?=$taxon['num_nom'] ?>"
title="<?=$taxon['nom_title'] ?>"
data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
>
<?=$taxon['nom_a_afficher']?>
</option>
<?php endforeach; ?>
</optgroup>
<option id="taxon-option-autre" value="?">Autre espèce</option>
</select>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div id="taxon-input-groupe" class="" hidden>
<label for="taxon" title="Choisissez une espèce">
<span class="has-tooltip pointer" 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???').">
<strong>Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em></strong>
</span>
</label>
<div class="row-fluid">
<div class="span12">
<span class="input-prepend">
<span class="add-on">
<i class="icon-leaf"></i>
</span>
<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" data="numNomSel" />
</span>
</div>
</div>
</div>
</div>
<p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
<strong>Attention :</strong> cette espèce ne fait pas partie de la liste des messicoles du plan national d'action pour les messicoles. L'espèce que vous observez pourrait ne pas être une messicole.
</p>
</div>
<!-- Certitude -->
<div class="row-fluid">
<div class="span12 control-group">
<label for="identification-liste">
<span class="has-tooltip pointer"
title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
<strong>Certitude</strong>
</span>
</label>
<span class="input-prepend">
<span id="identification-icone" class="add-on">
<i class="icon-eye-open"></i>
</span>
</span>
<select name="identification-liste" id="identification-liste">
<option value="" selected>Indiquez votre certitude</option>
<option value="certaine" data-titre="certaine">Certaine</option>
<option value="douteuse" data-titre="douteuse">Douteuse</option>
<option value="adeterminer" data-titre="à déterminer">A déterminer</option>
</select>
</div>
</div>
<!-- Abondance -->
<div class="row-fluid">
<div class="control-group">
<label for="abondance-liste">
<span class="has-tooltip pointer"
title="Indiquez le nombre d'individus observés, toutes zones du champ confondues">
<strong class="obligatoire">*Abondance</strong>
</span>
</label>
<span class="input-prepend">
<span id="abondance-icone" class="add-on">
<i class="icon-signal"></i>
</span>
</span>
<select name="abondance-liste" id="abondance-liste">
<option value="" class="a-masquer" selected>Sélectionner une abondance</option>
<option value="1" data-titre="1 à 10 individus">1 à 10 individus</option>
<option value="10" data-titre="10 à 100 individus">10 à 100 individus</option>
<option value="100" data-titre="100 à 1000 individus">100 à 1000 individus</option>
</select>
</div>
</div>
<!-- Zone du champ -->
<div class="row-fluid">
<div class="span3 control-group">
<label>
<span class="has-tooltip pointer"
title="Sélectionnez une ou plusieurs zones dans lesquelles l'espèce indiquée est présente">
<strong class="obligatoire">*Zone du champ</strong>
</span>
</label>
</div>
<div class="span9 control-group">
<!-- Bord -->
<label for="bordure" class="checkbox pointer">
<input type="checkbox" id="bordure" name="zone-champ[]" value="bord" data-titre="bord" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Bord du champ
</label>
<div class="popover-html-content" data-for="bordure">
<h5>Bord du champ</h5>
<img
class="image-verticale-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord2.png"
/>
<p class="texte-infobulle">
Le bord du champ à inventorier prend en compte la zone terreuse entre le bord enherbé
de la route et un mètre dans la zone cultivée (dès les premières plantes cultivées du
bord vers le cœur du champ. Le bord du champs ne prend pas en compte la zone enherbée
qui peut se trouver en bord de route.
</p>
<img
class="image-infobulle" id="bord1"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/bord1.png"
/>
</div>
<!-- Cœur du champ -->
<label for="coeur-champ" class="checkbox pointer">
<input type="checkbox" id="coeur-champ" name="zone-champ[]" value="coeur" data-titre="cœur" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Cœur du champ
</label>
<div class="popover-html-content" data-for="coeur-champ">
<h5>Cœur du champ</h5>
<p class="texte-infobulle">
Le cœur du champ concerne la zone cultivée. Il exclut 1m de bord de champ cultivé, et les
zones délaissées/oubliées par l'agriculteur lors du semi.
</p>
<img
class="image-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/coeur.png"
/>
</div>
<!-- Zone délaissée -->
<label for="zone-delaissee" class="checkbox pointer">
<input type="checkbox" id="zone-delaissee" name="zone-champ[]" value="zone-delaissee" data-titre="zone délaissée" />
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover"></i>
Zone délaissée
</label>
<div class="popover-html-content" data-for="zone-delaissee">
<h5>Zone délaissée</h5>
<p class="texte-infobulle">
Les zones délaissées sont les zones où l'agriculteur n'a pas réalisé de semi, ce qui semblerait
être un oubli de sa part. Cette zone ne prend pas en compte le bord du champ.
</p>
<img
class="image-infobulle"
src="<?=$url_base?>modules/saisie/squelettes/messicoles/img/photos/delaissee.png"
/>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span6">
<label for="notes" class="pointer">
<strong>Notes</strong>
</label>
<div>
<textarea id="notes" class="span5" rows="6" name="notes"
placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
</div>
</div>
</div>
</form>
<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
method="post" enctype="multipart/form-data">
<h3>Image(s) de cette plante</h3>
<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 chacune.</p>
<div id="image-obligatoire" class="alert alert-error alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : image obligatoire</h4>
<p>
Votre identification n'est pas certaine.
<br>
Veuillez ajouter au moins une image.
</p>
</div>
<div id ="photos-conteneur">
<input class="pointer" type="file" id="fichier" name="fichier" accept="image/jpeg" />
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
<div id="miniatures">
</div>
<p class="miniature-msg" class="span12"> </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>
<!-- Messages d'erreur du formulaire-->
<div class="row-fluid">
<div class="zone-alerte">
<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : 10 observations maximum</h4>
<p>
Vous venez d'ajouter votre 10ème observation.<br/>
Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
</p>
</div>
</div>
<div class="zone-alerte">
<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : champs en erreur</h4>
<p>
Certains champs du formulaire sont mal remplis.<br/>
Veuillez vérifier vos données.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Affiche le tableau récapitualif 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>
<div class="span4 droite">
<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
type="button" disabled="disabled"
title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
Transmettre
</button>
</div>
</div>
<div id="liste-obs" ></div>
<div class="row">
<div class="zone-alerte span6 offset3">
<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Attention : aucune observation</h4>
<p>Veuillez saisir des observations pour les transmettres.</p>
</div>
<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
<a class="close">×</a>
<h4 class="alert-heading">Information : transmission des observations</h4>
<div class="alert-txt"></div>
</div>
<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Erreur : transmission des observations</h4>
<div class="alert-txt"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="row-fluid">
<p class="span12">© Tela Botanica 2015</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">
Vos observations ont bien été transmises.<br />
Elles sont désormais consultables à travers les différents outils de visualisation
du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
N'oubliez pas qu'il est nécessaire de
<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
au préalable, si ce n'est pas déjà fait.
</p>
</div>
<div id="tpl-transmission-ko" style="display:none;">
<p class="msg">
Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
et transmettre les suivantes.<br />
Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
target="_blank"
onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
le formulaire de signalement d'erreurs</a>.
</p>
</div>
</div>
</body>
</html>