Subversion Repositories eFlore/Applications.cel

Rev

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