Subversion Repositories eFlore/Applications.cel

Rev

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