Subversion Repositories eFlore/Applications.cel

Rev

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