Subversion Repositories eFlore/Applications.cel

Rev

Rev 2470 | Details | Compare with Previous | Last modification | View Log | RSS feed

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