Subversion Repositories eFlore/Applications.cel

Rev

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

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