Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 2866 → Rev 2904

/branches/v2.24-sarcloir/widget/modules/saisie/squelettes/messicoles/messicoles.tpl.html
156,11 → 156,14
<?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>
167,9 → 170,9
</div>
</div>
<div class="row-fluid">
<div class="span12">
<div class="span6">
<div class="row">
<div class="span12">
<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>).
196,34 → 199,29
</div>
</div>
</div>
</div>
<div class="row-fluid">
<!-- Bloc Observateur -->
<div class="span6">
<div class="well">
Zone du schéma
</div>
</div>
<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 has-tooltip" data-placement="right"
title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
<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.">
<label for="courriel"
class="pointer"
title="Veuillez saisir votre adresse courriel.">
<strong class="obligatoire">*</strong> Courriel
<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="courriel" class="input-large" name="courriel" type="text" />
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
</div>
</div>
230,7 → 228,7
<div id="zone-courriel-confirmation" class="span6 hidden">
<label for="courriel_confirmation"
title="Veuillez saisir confirmer le courriel.">
<strong class="obligatoire">*</strong> Courriel (confirmation)
<strong class="obligatoire">*Courriel (confirmation)</strong>
</label>
<div class="input-prepend">
<span class="add-on">
241,15 → 239,23
</div>
<div id="zone-prenom-nom" class="row-fluid hidden">
<div class="span6">
<label for="prenom">Prénom</label>
<div>
<input id="prenom" name="prenom" class="span3" type="text"/>
<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">Nom</label>
<div>
<input id="nom" name="nom" class="span3" type="text"/>
<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>
259,7 → 265,7
</div>
<!-- Messages d'erreur du formulaire-->
<div class="row">
<div class="zone-alerte span6 offset3">
<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>
287,22 → 293,22
</div>
<div class="row-fluid">
<div class="span12">
<div class="well">
<div class="row-fluid">
<div class="row-fluid">
<div class="span6">
<div class="well">
<!-- 1e colonne : date, lieu, geoloc -->
<div class="span6">
<div>
<div class="row-fluid">
<!-- DATE-->
<h2>Date du relevé</h2>
<div class="control-group">
<form id="form-date" action="#" autocomplete="on">
<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">*</strong>
Date du relevé
<strong class="obligatoire">*Date du relevé</strong>
</span>
</label>
<div class="input-prepend">
310,380 → 316,531
class="input-small" name="date" type="text"
placeholder="jj/mm/aaaa" />
</div>
<div id="date-obligatoire" class="alert alert-error alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : date de saisie obligatoire</h4>
<p>
Veuillez renseigner la date de saisie pour cette estpèce.
</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>
<!-- LIEU -->
<h2>Lieu du relevé</h2>
<!-- Type de culture -->
<div class="control-group">
<span class="row-fluid">
<span class="span3 has-tooltip"
title="Vous pouvez sélectionner un type de culture parmi la liste ou en saisir un manuellement via l'option Autres">
<label class="pointer">Type de culture</label>
</span>
<span class="span9">
<!-- 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" />
Céréale
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
</i>
</label>
<div class="popover-html-content" data-for="culture-cereale-radio">
<h5>Céréale</h5>
Une description du champ de céréales<br/>
...
</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" />
Friche
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
</i>
</label>
<div class="popover-html-content" data-for="culture-friche-radio">
<h5>Friche</h5>
Une description du champ de Friche<br/>
...
</div>
<!-- Légumineuse -->
<label for="culture-legumineuse-radio" class="radio culture pointer">
<input type="radio" id="culture-legumineuse-radio" name="type-culture" value="legumineuse" data-titre="légumineuse" />
Légumineuse
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
</i>
</label>
<div class="popover-html-content" data-for="culture-legumineuse-radio">
<h5>Légumineuse</h5>
Une description du champ de Légumineuse<br/>
...
</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" />
Vigne
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
</i>
</label>
<div class="popover-html-content" data-for="culture-vigne-radio">
<h5>Vigne</h5>
Une description du champ de Vigne<br/>
...
</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" />
Verger
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
</i>
</label>
<div class="popover-html-content" data-for="culture-verger-radio">
<h5>Verger</h5>
Une description du champ de Verger<br/>
...
</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="culture-autres" style="display: none;" />
</label>
</span>
</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>
<!-- Géolocalisation -->
<div class="row-fluid">
<div class="span4">
<h2>Géolocalisation</h2>
</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 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 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>
<!-- 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 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>
<!-- 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>
</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="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 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>
<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"/>
<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 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>
<div class="row-fluid">
<div class="span6">
<label for="notes" class="pointer">
<strong>Notes</strong>
</label>
<div>
<input type="text" id="milieu" class="span2" name="milieu" />
<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">&nbsp;</p>
</div>
</form>
</div>
</div>
</div>
<!-- 2e colonne : observation -->
<div class="span6">
<form id="form-obs" action="#" autocomplete="on">
<h2>Observation</h2>
<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">*</strong>
Espèces communes
</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 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 id="taxon-input-groupe" class="span8" 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 class="obligatoire">*</strong>
Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?> <em>(ou indication sur la plante)</em>
</span>
</label>
<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 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>
<p class="alert alert-warning" id="avertissement-non-messicole" style="display: none;">
<strong>Attention:</strong> cette espèce n'est
pas considérée comme messicole !
</p>
</div>
<!-- Identification -->
<div class="row-fluid">
<div class="span12">
<label for="identification-liste">Identification</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>Sélectionner une identification</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="span12">
<label for="abondance-liste">
<strong class="obligatoire">*</strong>
Abondance
</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 espèces">1 à 10 espèces</option>
<option value="10" data-titre="10 à 100 espèces">10 à 100 espèces</option>
<option value="100" data-titre="100 à 1000 espèces">100 à 1000 espèces</option>
</select>
</div>
</div>
<!-- Zone du champ -->
<div class="row-fluid">
<span class="span3 control-group">
<label>
<strong class="obligatoire">*</strong>
Zone du champ
</label>
</span>
<span class="span9 control-group">
<!-- Bordure -->
<label for="bordure" class="checkbox pointer">
<input type="checkbox" id="bordure" name="zone-champ[]" value="bordure" data-titre="bordure" />
Bordure
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
</i>
</label>
<div class="popover-html-content" data-for="bordure">
<h5>Bordure</h5>
Une description de la zone Bordure<br/>
...
<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>
<!-- 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" />
Cœur du champ
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
</i>
</label>
<div class="popover-html-content" data-for="coeur-champ">
<h5>Cœur du champ</h5>
Une description de la zone Cœur du champ<br/>
...
</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" />
Zone délaissée
<i class="icon-question-sign cursor-pointer" data-toggle="popover" data-trigger="hover">
</i>
</label>
<div class="popover-html-content" data-for="zone-delaissee">
<h5>Zone délaissée</h5>
Une description de la Zone délaissée<br/>
...
</div>
</span>
</div>
<div class="row-fluid">
<div class="span12">
<label for="notes" class="pointer">Notes</label>
<div>
<textarea id="notes" class="span6" rows="7" 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">
<h2>Image(s) de cette 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 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 type="file" class="pointer" id="fichier" name="fichier" accept="image/jpeg" />
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
<div id="miniatures">
</div>
<p class="miniature-msg" class="span12">&nbsp;</p>
</div>
</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>
</div>
690,29 → 847,6
</div>
</div>
</div>
<!-- Messages d'erreur du formulaire-->
<div class="row">
<div class="zone-alerte span6 offset3">
<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : 10 observations maximum</h4>
<p>
Vous venez d'ajouter votre 10ème observation.<br/>
Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
</p>
</div>
</div>
<div class="zone-alerte span6 offset3">
<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Information : champs en erreur</h4>
<p>
Certains champs du formulaire sont mal remplis.<br/>
Veuillez vérifier vos données.
</p>
</div>
</div>
</div>
<!-- Affiche le tableau récapitualif des observations ajoutées -->
<div id="zone-liste-obs" class="row-fluid">
<div class="span12">