Subversion Repositories eFlore/Applications.cel

Rev

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