Subversion Repositories eFlore/Applications.cel

Rev

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

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