Subversion Repositories eFlore/Applications.cel

Rev

Rev 2791 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
2498 aurelien 1 
<?php
2 
	if (!isset($_GET['mission'])) {
3 
		$projets = explode(',', $_GET['projet']);
4 
		if(count($projets) > 1) {
5 
			$_GET['mission'] = $projets[1];
6 
		}
7 
	}
8 
?>
2410 jpm 9 
<?php $mission = isset($_GET['mission']) ? strtolower($_GET['mission']) : null; ?>
10 
<?php $missionTitre = isset($_GET['mission']) ? ucwords($_GET['mission']) : 'Inconnue'; ?>
2406 jpm 11 
<!DOCTYPE html>
12 
<html lang="fr">
13 
	<head>
14 
		<?php if (isset($_GET['mission'])) :?>
2408 jpm 15 
			<?php if (isset($titre)) :?>
16 
				<title><?=$titre ?></title>
2406 jpm 17 
			<?php endif; ?>
18 
		<?php else : ?>
19 
			<title>Mission flore inconnue !</title>
20 
		<?php endif; ?>
21 
 
22 
		<meta charset="utf-8">
23 
 
24 
		<meta name="revisit-after" content="15 days" />
25 
		<meta name="robots" content="index,follow" />
26 
		<meta name="author" content="Jean-Pascal MILCENT" />
27 
		<meta name="keywords" content="Tela Botanica, CEL" />
2410 jpm 28 
		<meta name="description" content="Projet Missions Flore - Widget de saisie simplifiée pour le CEL" />
2406 jpm 29 
 
30 
		<!-- Viewport Mobile -->
31 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
32 
 
33 
		<!-- Favicones -->
34 
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
35 
 
36 
		<!-- Javascript : bibliothèques -->
37 
		<!-- Google Map v3 -->
38 
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
39 
		<script src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
2410 jpm 40 
		<!-- Proj4js -->
41 
		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
2406 jpm 42 
 
43 
		<!-- Jquery -->
2410 jpm 44 
		<script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
2406 jpm 45 
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
2410 jpm 46 
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
47 
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
2406 jpm 48 
		<!-- Jquery Plugins -->
49 
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
2410 jpm 50 
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
51 
		<script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
2406 jpm 52 
		<!-- Jquery Form :nécessaire pour l'upload des images -->
2410 jpm 53 
		<script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
2406 jpm 54 
 
55 
		<!-- Bootstrap -->
2410 jpm 56 
		<script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>
2406 jpm 57 
 
58 
		<!-- Javascript : appli saisie -->
2710 mathias 59 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
60 
		<script src="<?=$url_base?>modules/saisie/squelettes/missions-flore/js/WidgetSaisieMissionsFlore.js"></script>
2406 jpm 61 
		<script>
62 
		//<![CDATA[
2710 mathias 63 
        	$(document).ready(function() {
64 
				var widget = new WidgetSaisieMissionsFlore();
2406 jpm 65 
 
2710 mathias 66 
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
67 
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
68 
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
69 
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
70 
				// Mot-clé du widget/projet
71 
				widget.tagProjet = "WidgetSaisie,Missions-Flore,<?=$missionTitre?>";
72 
				// Mots-clés à ajouter aux images
73 
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
74 
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
75 
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
76 
				// Mots-clés à ajouter aux observations
77 
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
78 
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
79 
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
80 
				// Précharger le formulaire avec les infos d'une observation
81 
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
82 
				// URL du web service réalisant l'insertion des données dans la base du CEL.
83 
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
84 
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
85 
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
86 
				// Code du référentiel utilisé pour les nom scientifiques.
87 
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
88 
				// Indication de la présence d'une espèce imposée
89 
				widget.especeImposee = "<?=$espece_imposee; ?>";
90 
				// Tableau d'informations sur l'espèce imposée
91 
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
92 
				// Nombre d'élément dans les listes d'auto-complétion
93 
				widget.autocompletionElementsNbre = 20;
94 
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
95 
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
2406 jpm 96 
					"masque={masque}&"+
97 
					"recherche=etendue&"+
98 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
99 
					"retour.tri=alpharet&"+ // tri "à la CeL"
100 
					"ns.structure=au"+"&"+
2710 mathias 101 
					"navigation.limite=" + widget.autocompletionElementsNbre;
102 
				// Nombre d'observations max autorisé avant transmission
103 
				widget.obsMaxNbre = 10;
104 
				// Durée d'affichage en milliseconde des messages d'informations
105 
				widget.dureeMessage = 15000;
106 
				// Squelette d'URL du web service de l'annuaire.
107 
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
108 
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
109 
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
110 
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
111 
				//widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
112 
				// Squelette d'URL du web service d'eFlore fournissant l'altitude
113 
				widget.serviceAltitudeUrl = "http://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
114 
				// URL du marqueur à utiliser dans la carte Google Map
115 
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/marqueurs/epingle.png";
116 
				// URL de l'icône du chargement en cours
117 
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement.gif";
118 
				// URL de l'icône du chargement en cours d'une image
119 
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement-image.gif";
120 
				// URL de l'icône du calendrier
121 
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/calendrier.png";
122 
				// URL de l'icône pour une photo manquante
123 
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/pasdephoto.png";
2406 jpm 124 
 
2710 mathias 125 
				// Initialisation du bousin
126 
				widget.init();
127 
			});
2406 jpm 128 
		//]]>
129 
		</script>
130 
 
131 
		<!-- CSS -->
2410 jpm 132 
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
133 
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
134 
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
135 
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
136 
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/missions-flore/css/<?=isset($_GET['style']) ? $_GET['style'] : 'missions-flore'?>.css" />
2678 aurelien 137 
 
138 
		<script>
139 
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
140 
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
141 
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
142 
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
143 
 
144 
		  ga('create', 'UA-20092557-1', 'auto');
145 
		  ga('require', 'displayfeatures');
146 
		  ga('send', 'pageview');
147 
 
148 
		</script>
2406 jpm 149 
	</head>
150 
 
151 
	<body data-spy="scroll">
152 
		<div class="container">
2410 jpm 153 
			<div class="page-header">
2783 mathias 154 
				<?php if (isset($_GET['mission'])) :?>
155 
					<?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
156 
						<?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
2410 jpm 157 
					<?php endif; ?>
2783 mathias 158 
				<?php else : ?>
159 
					<img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
160 
					Mission flore inconnue !
161 
				<?php endif; ?>
2406 jpm 162 
			</div>
2410 jpm 163 
			<div class="row">
164 
				<div class="col-md-6">
165 
					<div id="intro" class ="well well-lg">
166 
						<a class="fermer" data-toggle="collapse" data-target="#intro-txt">
167 
							<h3 class="titre">
2412 jpm 168 
								La mission «&nbsp;<?=$missionTitre ?>&nbsp;»
2410 jpm 169 
								<span class="glyphicon glyphicon-plus-sign"></span>
170 
							</h3>
171 
						</a>
172 
						<div id="intro-txt" class="collapse in">
173 
							<?php if (file_exists("./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html")) :?>
174 
								<?php include_once "./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html"; ?>
2406 jpm 175 
							<?php else : ?>
176 
								<p>Mission flore inconnue !</p>
177 
							<?php endif; ?>
178 
						</div>
179 
					</div>
180 
				</div>
181 
 
2410 jpm 182 
				<div class="col-md-6">
183 
					<div id="aide" class="well well-lg">
184 
						<a class="fermer" data-toggle="collapse" data-target="#aide-txt">
185 
							<h3 class="titre">
186 
								Aide
187 
								<span class="glyphicon glyphicon-plus-sign"></span>
188 
							</h3>
189 
						</a>
190 
						<div id="aide-txt" class="collapse in">
2406 jpm 191 
							<p>
2410 jpm 192 
								Cet outil vous permet de partager simplement vos observations avec
2412 jpm 193 
								le <a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
2410 jpm 194 
								(sous <a href="http://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
2406 jpm 195 
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
196 
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
197 
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
2410 jpm 198 
								Elles apparaissent immédiatement sur les
199 
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
2406 jpm 200 
							</p>
201 
							<p class="discretion">
202 
								Pour toute question ou remarque,
2601 mathias 203 
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2406 jpm 204 
									target="_blank"
205 
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
206 
									contactez-nous</a>
207 
							</p>
208 
							<p class="discretion">
2410 jpm 209 
								Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
210 
								<button id="btn-aide" class="btn btn-xs btn-success">
211 
									<span class="glyphicon glyphicon-question-sign icon-white"></span>
212 
									<span id="btn-aide-txt">Désactiver l'aide</span>
2406 jpm 213 
								</button>
214 
							</p>
215 
						</div>
216 
					</div>
217 
				</div>
218 
			</div>
2410 jpm 219 
 
220 
			<div class="well well-lg">
221 
				<h2>Observateur</h2>
222 
				<form id="form-observateur" role="form" autocomplete="on">
223 
					<div class="row">
224 
						<div class="col-md-6 form-group has-tooltip" data-placement="right"
2742 mathias 225 
							title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
2410 jpm 226 
								Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
227 
								ultérieurement. Des informations complémentaires vont vous être
228 
								demandées : prénom et nom.">
229 
							<label for="courriel"  title="Veuillez saisir votre adresse courriel.">
230 
								<strong class="obligatoire">*</strong>
231 
								Courriel
232 
							</label>
233 
							<div class="input-group">
234 
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
235 
								<input id="courriel" name="courriel" class="form-control" type="text"/>
236 
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
2406 jpm 237 
							</div>
2410 jpm 238 
						</div>
239 
						<div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
240 
							<label for="courriel_confirmation" title="Veuillez saisir confirmer le courriel.">
241 
								<strong class="obligatoire">*</strong> Courriel (confirmation)
242 
							</label>
243 
							<div class="input-group">
244 
								<span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
245 
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
2406 jpm 246 
							</div>
247 
						</div>
2410 jpm 248 
					</div>
249 
					<div id="zone-prenom-nom" class="row hidden">
250 
						<div class="col-md-6 form-group">
251 
							<label for="prenom">Prénom</label>
252 
							<div class="input-group">
253 
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
254 
								<input id="prenom" name="prenom" class="form-control" type="text"/>
2406 jpm 255 
							</div>
2410 jpm 256 
						</div>
257 
						<div class="col-md-6 form-group">
258 
							<label for="nom">Nom</label>
259 
							<div class="input-group">
260 
								<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
261 
								<input id="nom" name="nom" class="form-control" type="text"/>
2406 jpm 262 
							</div>
263 
						</div>
2410 jpm 264 
					</div>
265 
				</form>
2406 jpm 266 
			</div>
2410 jpm 267 
 
2406 jpm 268 
			<!-- Messages d'erreur du formulaire-->
269 
			<div class="row">
2410 jpm 270 
				<div class="zone-alerte col-md-6 col-md-offset-3">
2406 jpm 271 
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
2410 jpm 272 
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
2406 jpm 273 
						<h4 class="alert-heading">Information : copier/coller</h4>
274 
						<p>
275 
							Merci de ne pas copier/coller votre courriel.<br/>
276 
							La double saisie permet de vérifier l'absence d'erreurs.
277 
						</p>
278 
					</div>
279 
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
2410 jpm 280 
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
2406 jpm 281 
						<h4 class="alert-heading">Information : courriel introuvable</h4>
282 
						<p>
283 
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
284 
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
285 
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
286 
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
287 
						</p>
288 
					</div>
289 
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
2410 jpm 290 
						<button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
2406 jpm 291 
						<h4 class="alert-heading">Information sur Google Map</h4>
292 
						<div class="contenu"></div>
293 
					</div>
294 
				</div>
295 
			</div>
2410 jpm 296 
 
297 
			<div class="well well-lg">
298 
				<div class="row">
299 
					<div class="col-md-12">
300 
						<h2>Lieu et date du relevé</h2>
301 
					</div>
302 
				</div>
303 
				<div class="row">
304 
					<div class="col-md-6">
2412 jpm 305 
						<form id="form-obs-date" class="form-horizontal" role="form">
306 
							<div class="form-group has-tooltip"
307 
									title="Vous pouvez cliquer sur l'icône de calendrier pour
308 
										sélectionner une date dans un calendrier.">
309 
								<label for="date" class="col-sm-3 control-label"
310 
										title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
311 
									<strong class="obligatoire">*</strong>
312 
									Date du relevé
313 
								</label>
314 
								<div class="col-sm-9">
315 
									<div class="input-group">
2710 mathias 316 
										<span id="date-icone" class="input-group-addon add-on"></span>
2412 jpm 317 
										<input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
318 
									</div>
2410 jpm 319 
								</div>
320 
							</div>
2412 jpm 321 
						</form>
2410 jpm 322 
					</div>
323 
					<hr />
324 
				</div>
325 
 
326 
				<div class="row">
327 
					<div class="col-md-6">
328 
						<div class="row">
329 
							<div class="col-md-3">
330 
								<strong title="Veuillez localiser l'observation">Géolocalisation</strong>
331 
							</div>
332 
							<div class="col-md-9 text-right">
333 
								<form id="form-carte-recherche" class="form-horizontal" role="form">
334 
									<div class="form-group">
335 
										<label for="carte-recherche" class="sr-only">Rechercher</label>
336 
										<div class="col-md-12">
337 
											<div class="input-group">
338 
												<input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
339 
														title="Permet de centrer la carte sur le lieu recherché. Sélectionner un lieu dans la liste déroulante pour centrer la carte."
2406 jpm 340 
														placeholder="Centrer la carte sur un lieu..."/>
2410 jpm 341 
												<span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
342 
											</div>
2406 jpm 343 
										</div>
344 
									</div>
2410 jpm 345 
								</form>
346 
							</div>
347 
						</div>
348 
						<div class="row">
349 
							<div class="col-md-12">
350 
								<div id="map-canvas" class="has-tooltip"
351 
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
352 
										représentant votre station ou bien le glisser-déposer sur
353 
										le lieu souhaité."></div>
354 
							</div>
355 
						</div>
356 
						<div class="row">
357 
							<div id="info-altitude" class="col-md-5">
358 
								<span>Altitude : </span>
359 
								<span id="marqueur-altitude"><span id="altitude"></span> m</span>
360 
							</div>
361 
 
362 
							<div id="info-commune" class="col-md-7">
363 
								<span>Commune : </span>
364 
								<span id="marqueur-commune">
365 
									<span id="commune-nom" class="commune-info"></span>
366 
									(<span id="commune-code-insee" class="commune-info has-tooltip"
367 
										title="Code INSEE de la commune"></span>)
368 
								</span>
369 
							</div>
370 
						</div>
371 
					</div>
372 
					<div class="col-md-6">
373 
						<form id="form-station" class="form-horizontal" role="form" autocomplete="on">
374 
							<div class="form-group has-tooltip"
375 
								title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
376 
								<label for="lieudit" class="col-sm-2 control-label">
377 
									Lieu-dit
378 
								</label>
379 
								<div class="col-sm-10">
380 
									<input id="lieudit" class="form-control" name="lieudit" type="text" />
381 
								</div>
382 
							</div>
383 
 
384 
							<div class="span6 form-group has-tooltip"
385 
								title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
386 
								<label for="station" class="col-sm-2 control-label">
387 
									Station
388 
								</label>
389 
								<div class="col-sm-10">
390 
									<input id="station" class="form-control" name="station" type="text" />
391 
								</div>
392 
							</div>
393 
 
394 
							<div class="row">
395 
								<div class="col-md-12">
396 
									<button class="afficher-coord btn-coord btn btn-default"
397 
											data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
398 
										Afficher les coordonnées (WGS 84 et Lambert 93)
399 
									</button>
400 
									<div id="coordonnees-geo" class="well hidden">
401 
										<div class="row">
402 
											<div class="col-md-4">
403 
												<div id="coord-lat" class="form-group form-group-sm">
404 
													<label for="latitude" class="col-sm-4 control-label">Latitude</label>
405 
													<div class="col-sm-8">
406 
														<input id="latitude" class="form-control" name="latitude" type="text"
407 
															title="Latitude (WGS 84)" value=""/>
2406 jpm 408 
													</div>
409 
												</div>
2410 jpm 410 
											</div>
411 
											<div class="col-md-5">
412 
												<div id="coord-lng" class="form-group form-group-sm">
413 
													<label for="latitude" class="col-sm-4 control-label">Longitude</label>
414 
													<div class="col-sm-8">
415 
														<input id="longitude" class="form-control" name="longitude" type="text"
416 
															title="Longitude (WGS 84)" value=""/>
2406 jpm 417 
													</div>
418 
												</div>
2410 jpm 419 
											</div>
420 
											<div class="col-md-2">
421 
												<div id="coord-lng" class="form-group form-group-sm">
422 
													<input type="button" id="geolocaliser"
423 
														class="btn btn-default btn-sm has-tooltip"
424 
														title="Centre la carte sur les coordonnées de latitude et longitude saisies."
425 
														value="Voir sur la carte"/>
2406 jpm 426 
												</div>
427 
											</div>
428 
										</div>
429 
 
2410 jpm 430 
										<div class="row">
431 
											<div class="col-md-6">
432 
												<div id="coord-l93-x" class="form-group">
433 
													<label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
434 
													<div class="col-sm-5">
435 
														<input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
436 
																name="coordonneeLambert93X"
437 
																data-label="Lambert 93 X"
438 
																value=""/>
439 
													</div>
440 
												</div>
2406 jpm 441 
											</div>
2410 jpm 442 
											<div class="col-md-6">
443 
												<div id="coord-l93-y" class="form-group">
444 
													<label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
445 
													<div class="col-sm-5">
446 
														<input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
447 
																name="coordonneeLambert93Y"
448 
																data-label="Lambert 93 Y"
449 
																value=""/>
450 
													</div>
2406 jpm 451 
												</div>
452 
											</div>
453 
										</div>
2410 jpm 454 
									</div>
2406 jpm 455 
								</div>
456 
							</div>
2410 jpm 457 
						</form>
458 
					</div>
459 
				</div>
460 
			</div>
2406 jpm 461 
 
2410 jpm 462 
			<div class="well well-lg">
463 
				<div class="row">
464 
					<div class="col-md-6">
465 
						<form id="form-station-detail" class="form-horizontal" role="form" autocomplete="on">
466 
							<h2>Caractéristiques de la station</h2>
2406 jpm 467 
 
2410 jpm 468 
							<div class="form-group has-tooltip"
469 
								title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie, pelouse, lisière, friche...)." >
470 
								<label for="milieu" class="col-sm-4 control-label">
471 
									Type de milieu
472 
								</label>
473 
								<div class="col-sm-8">
474 
									<input id="milieu" class="form-control" name="milieu" type="text" />
475 
								</div>
476 
							</div>
2406 jpm 477 
 
2410 jpm 478 
							<div class="form-group has-tooltip"
479 
									title="Indiquez l'exposition principale de la station.">
480 
								<label for="station-exposition" class="col-sm-4 control-label">
481 
									Exposition du terrain
482 
								</label>
483 
								<div class="col-sm-8">
484 
									<select id="station-exposition" class="form-control obs-chp-etendu" name="stationExposition">
485 
										<option selected value="">Sélectionnez l'exposition du terrain</option>
486 
										<option value="Plat">Terrain plat</option>
487 
										<option value="N">Nord</option>
488 
										<option value="N-O">Nord-Ouest</option>
489 
										<option value="N-E">Nord-Est</option>
490 
										<option value="E">Est</option>
491 
										<option value="O">Ouest</option>
492 
										<option value="S">Sud</option>
493 
										<option value="S-O">Sud-Ouest</option>
494 
										<option value="S-E">Sud-Est</option>
495 
									</select>
496 
								</div>
497 
							</div>
2406 jpm 498 
 
2410 jpm 499 
							<div class="form-group has-tooltip"
500 
									title="Indiquez le pourcentage de la pente de la station.">
501 
								<label for="station-pente" class="col-sm-4 control-label">
502 
									Pente du terrain
503 
								</label>
504 
								<div class="col-sm-8">
505 
									<select id="station-pente" class="form-control obs-chp-etendu" name="stationPente">
506 
										<option selected value="">Sélectionnez la pente du terrain</option>
2412 jpm 507 
										<option value="0-9%">entre 0 et 9% (0 à 5°)</option>
508 
										<option value="10-19%">entre 10 et 19% (5 à 9°)</option>
509 
										<option value="20-29%">entre 20 et 29% (10 à 14°)</option>
510 
										<option value="+30%">&gt; à 30% (&gt; à 15°)</option>
2410 jpm 511 
									</select>
512 
								</div>
513 
							</div>
514 
 
515 
						</form>
516 
					</div>
517 
 
518 
					<div class="col-md-6">
519 
						<form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
520 
							<h2>Relevé de la plante</h2>
521 
 
522 
							<input id="referentiel" type="hidden" value="bdtfx" />
523 
 
524 
							<div id="taxon-input-groupe" class="form-group has-tooltip"
525 
								title="Sélectionnez une espèce dans la liste déroulante pour lier
526 
									votre nom au référentiel selectionné. Si vous
527 
									le désirez vous pouvez aussi saisir un nom absent du référentiel
528 
									(Ex. : 'fleur violette' ou 'viola sinensis???')." >
529 
								<label for="taxon"  class="col-sm-4 control-label">
530 
									<strong class="obligatoire">*</strong>
531 
									Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?>
532 
								</label>
533 
								<div class="col-sm-8">
534 
									<div class="input-group">
535 
										<span class="input-group-addon">
536 
											<span class="glyphicon glyphicon-leaf"></span>
537 
										</span>
538 
										<input id="taxon" name="taxon" type="text" class="form-control"
539 
											value="<?= $nom_sci_espece_defaut; ?>" />
2406 jpm 540 
									</div>
2410 jpm 541 
								</div>
542 
							</div>
2406 jpm 543 
 
2410 jpm 544 
							<div class="form-group has-tooltip"
545 
									title="Indiquez le type de taille de l'arbre.">
546 
								<label for="taille-type" class="col-sm-4 control-label">
547 
									Phénologie
548 
								</label>
549 
								<div class="col-sm-8">
550 
									<select id="phenologie" class="form-control" name="phenologie">
551 
										<option selected value="">Sélectionnez l'état de la plante</option>
552 
										<option value="10-19: développement des feuilles">En feuille</option>
553 
										<option value="50-59: apparition de l'inflorescence, épiaison">En bouton</option>
554 
										<option value="60-69: floraison">En fleur</option>
555 
										<option value="70-79: fructification">En fruit</option>
2412 jpm 556 
										<option value="90-99: sénescence et dormance">En sénescence ou dormance</option>
2410 jpm 557 
									</select>
558 
								</div>
559 
							</div>
560 
 
561 
							<div class="form-group has-tooltip"
562 
									title="Estimation de l'abondance de la plante sur une surface donnée. Surface inventoriée
563 
									limitée par la présence d'un autre milieu ou distancé par au moins 500m d'une autre
564 
									zone où la plante est observée.">
565 
								<label for="abondance" class="col-sm-4 control-label">
566 
									Abondance
567 
								</label>
568 
								<div class="col-sm-8">
569 
									<select id="abondance" class="form-control" name="abondance">
570 
										<option selected value="">Sélectionnez l'abondance</option>
2412 jpm 571 
										<option value="1-4 individus">1-4 individus</option>
572 
										<option value="5-9 individus">5-9 individus</option>
573 
										<option value="10-49 individus">10-49 individus</option>
574 
										<option value="50-99 individus">50-99 individus</option>
575 
										<option value="100-499 individus">100-499 individus</option>
2410 jpm 576 
										<option value=">500 individus">&gt; à 500 individus</option>
577 
									</select>
578 
								</div>
579 
							</div>
580 
 
581 
							<div id="individus-nbre-groupe" class="form-group has-tooltip hidden"
582 
								title="Indiquez le nombre d'individus." >
583 
								<label for="individus-nbre" class="col-sm-4 control-label">
584 
									Nombre d'individus
585 
								</label>
586 
								<div class="col-sm-4">
587 
									<input id="individus-nbre" class="form-control obs-chp-etendu" name="individusNombre"
588 
										min="0"
589 
										type="number"
590 
										value="" />
591 
								</div>
592 
							</div>
593 
 
594 
							<div class="form-group has-tooltip"
595 
									title="Indiquez si le relevé effectué vis à acquérir de nouvelle observation ou
596 
										viser à confirmer la présence de la plante vis à vis d'une observation historique.">
597 
								<label for="releve-type" class="col-sm-4 control-label">
598 
									Type de relevé
599 
								</label>
600 
								<div class="col-sm-8">
601 
									<select id="releve-type" class="form-control obs-chp-etendu" name="releveType">
602 
										<option selected value="">Sélectionnez le type de relevé</option>
603 
										<option value="nouveau">Acquisition d'une nouvelle donnée</option>
604 
										<option value="confirmation">Confirmation d'une donnée historique (précisez laquelle dans les notes)</option>
605 
									</select>
606 
								</div>
607 
							</div>
608 
 
609 
							<div class="form-group has-tooltip"
2412 jpm 610 
									title="Indiquez le code ISBN de l'ouvrage de détermination utilisé.
611 
										L'ISBN est un numéro international qui permet d’identifier, de manière unique,
612 
										chaque édition de chaque livre publié, que son support soit numérique ou sur papier.
613 
										Ce code est généralement présent à l'endos d'un livre (à proximité du code barre)
614 
										ou sur la page des droits d'auteur et de publication.
615 
										Si votre navigateur le supporte, vous pouvez sélectionner le code ISBN
616 
										d'une flore dans la liste qui s'ouvrira en cliquant dans le champ ou en
617 
										utilisant la touche «Flêche bas» (↓). Sinon, indiquez le code ISBN de la
618 
										flore ou de l'ouvrage principal ayant servi à la détermination
619 
										(Ex. : ISBN-13:978-3-642-11746-6, ISBN:978-3-642-11746-6, 3-642-11746-5 ).">
2410 jpm 620 
								<label for="determination-source-isbn" class="col-sm-4 control-label">
621 
									Source détermination
622 
								</label>
623 
								<div class="col-sm-8">
624 
									<input id="determination-source" class="form-control obs-chp-etendu" list="flores"
625 
										name="determinationSource"
626 
										type="text" >
627 
									<datalist id="flores">
628 
										<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>
629 
										<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>
630 
										<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>
631 
										<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>
632 
									</datalist>
633 
								</div>
634 
							</div>
635 
						</form>
636 
					</div>
637 
				</div>
638 
 
639 
 
640 
				<div class="row">
641 
					<div class="col-md-6">
642 
						<div class="row">
643 
							<div class="col-md-12">
644 
								<h2>Notes</h2>
645 
								<textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
646 
									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>
647 
							</div>
648 
						</div>
649 
					</div>
650 
 
651 
					<div class="col-md-6">
652 
						<div class="row">
653 
							<form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
654 
								method="post" enctype="multipart/form-data">
655 
								<div class="col-md-12">
656 
									<h2>Image(s) de la plante</h2>
2406 jpm 657 
									<strong>Ajouter une image</strong>
2410 jpm 658 
									<p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
659 
									<div id ="photos-conteneur" class="form-group">
660 
										<div class="col-sm-12">
661 
											<input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
662 
											<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
2406 jpm 663 
										</div>
2410 jpm 664 
										<div id="miniatures"></div>
665 
										<p class="miniature-msg col-md-12">&nbsp;</p>
2406 jpm 666 
									</div>
667 
								</div>
2410 jpm 668 
							</form>
2406 jpm 669 
						</div>
670 
					</div>
671 
				</div>
2410 jpm 672 
 
673 
				<div class="row">
674 
					<div class="col-md-12 centre has-tooltip"
675 
						title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
676 
							ajouter votre observation à la liste à transmettre.">
677 
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
678 
							Créer
679 
						</button>
680 
					</div>
681 
				</div>
2406 jpm 682 
			</div>
683 
 
2410 jpm 684 
 
685 
		<!-- Messages d'erreur du formulaire-->
2406 jpm 686 
			<div class="row">
2410 jpm 687 
				<div class="zone-alerte col-md-6 col-md-offset-3">
2406 jpm 688 
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
689 
						<a class="close">×</a>
690 
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
691 
						<p>
692 
							Vous venez d'ajouter votre 10ème observation.<br/>
693 
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
694 
						</p>
695 
					</div>
696 
				</div>
2410 jpm 697 
				<div class="zone-alerte col-md-6 col-md-offset-3">
2406 jpm 698 
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
699 
						<a class="close">×</a>
700 
						<h4 class="alert-heading">Information : champs en erreur</h4>
701 
						<p>
702 
							Certains champs du formulaire sont mal remplis.<br/>
2412 jpm 703 
							Veuillez vérifier les données saisies dans le formulaire.
2406 jpm 704 
						</p>
705 
					</div>
706 
				</div>
707 
			</div>
708 
 
709 
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
2410 jpm 710 
			<div id="zone-liste-obs" class="row">
711 
				<div class="col-md-12">
712 
					<div class="well well-lg">
713 
						<div class="row">
714 
							<div class="col-md-10">
715 
								<h2>
716 
									Observations
2791 aurelien 717 
									<?=!empty($nom_sci_espece_defaut) ? "de<i> {$nom_sci_espece_defaut}</i> " : ''; ?>
2410 jpm 718 
									à transmettre :
719 
									<span class="obs-nbre">0</span>
720 
								</h2>
2406 jpm 721 
							</div>
2410 jpm 722 
							<div class="col-md-2 text-right">
2406 jpm 723 
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
724 
									type="button" disabled="disabled"
725 
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
726 
									Transmettre
727 
								</button>
728 
							</div>
729 
						</div>
730 
						<div id="liste-obs" ></div>
731 
						<div class="row">
2410 jpm 732 
							<div class="zone-alerte col-md-6 col-md-offset-3">
2406 jpm 733 
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
734 
									<a class="close">×</a>
735 
									<h4 class="alert-heading">Attention : aucune observation</h4>
736 
									<p>Veuillez saisir des observations pour les transmettres.</p>
737 
								</div>
738 
 
739 
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
740 
									<a class="close">×</a>
741 
									<h4 class="alert-heading">Information : transmission des observations</h4>
742 
									<div class="alert-txt"></div>
743 
								</div>
744 
 
745 
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
746 
									<a class="close">×</a>
747 
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
748 
									<div class="alert-txt"></div>
749 
								</div>
750 
							</div>
751 
						</div>
752 
 
753 
					</div>
754 
				</div>
755 
			</div>
756 
 
2410 jpm 757 
			<footer class="row">
758 
				<p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
2406 jpm 759 
			</footer>
760 
 
761 
			<!-- Templates HTML -->
762 
			<div id="tpl-transmission-ok" style="display:none;">
763 
				<p class="msg">
764 
					Vos observations ont bien été transmises.<br />
765 
					Elles sont désormais consultables à travers les différents outils de visualisation
766 
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
2795 aurelien 767 
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
768 
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
2406 jpm 769 
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
770 
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
771 
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
772 
					N'oubliez pas qu'il est nécessaire de
773 
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
774 
					au préalable, si ce n'est pas déjà fait.
775 
				</p>
776 
			</div>
777 
			<div id="tpl-transmission-ko" style="display:none;">
778 
				<p class="msg">
779 
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
780 
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
781 
					et transmettre les suivantes.<br />
782 
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
783 
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
2601 mathias 784 
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2406 jpm 785 
								  target="_blank"
786 
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
787 
								  le formulaire de signalement d'erreurs</a>.
788 
				</p>
789 
			</div>
790 
 
791 
			<!-- Fenêtres modales -->
2410 jpm 792 
			<div id="chargement" class="modal-fenetre" style="display:none;">
793 
				<div id="chargement-centrage" class="modal-contenu">
794 
					<div class="progress">
795 
						<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="">
796 
							<span class="sr-only">0/10 observations transmises</span>
2406 jpm 797 
						</div>
798 
					</div>
2410 jpm 799 
 
800 
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
801 
						Transfert des observations en cours...<br />
802 
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
803 
						d'observations à transférer.
804 
					</p>
2406 jpm 805 
				</div>
806 
			</div>
807 
		</div>
808 
	</body>
809 
</html>