Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1210 jpm 1
<!DOCTYPE html>
2359 jpm 2
<html lang="fr">
1210 jpm 3
	<head>
2359 jpm 4
		<title>Ambroisie à épis lisses : saisie d'observations</title>
2328 jpm 5
 
2359 jpm 6
		<meta charset="utf-8">
2328 jpm 7
 
1210 jpm 8
		<meta name="revisit-after" content="15 days" />
2328 jpm 9
		<meta name="robots" content="index,follow" />
10
		<meta name="author" content="Jean-Pascal MILCENT" />
11
		<meta name="keywords" content="Tela Botanica, CEL" />
12
		<meta name="description" content="Projet Ambrosia - Widget de saisie simplifiée pour le CEL" />
1210 jpm 13
 
14
		<!-- Viewport Mobile -->
15
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
2328 jpm 16
 
1210 jpm 17
		<!-- Favicones -->
2328 jpm 18
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
19
 
1210 jpm 20
		<!-- Javascript : bibliothèques -->
21
		<!-- Google Map v3 -->
22
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
2359 jpm 23
		<script src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
2328 jpm 24
 
1210 jpm 25
		<!-- Jquery -->
2359 jpm 26
		<script src="http://resources.tela-botanica.org/jquery/1.7.1/jquery-1.7.1.min.js"></script>
27
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
28
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
29
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
1210 jpm 30
		<!-- Jquery Plugins -->
1221 jpm 31
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
2359 jpm 32
		<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/jquery.validate.min.js"></script>
33
		<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/messages_fr.js"></script>
1221 jpm 34
		<!-- Jquery Form :nécessaire pour l'upload des images -->
2359 jpm 35
		<script src="http://resources.tela-botanica.org/jquery/form/2.95/jquery.form.min.js"></script>
2328 jpm 36
 
1210 jpm 37
		<!-- Bootstrap -->
2359 jpm 38
		<script src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
2361 jpm 39
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modalmanager.js"></script>
40
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modal.js"></script>
2328 jpm 41
 
1210 jpm 42
		<!-- Javascript : appli saisie -->
2359 jpm 43
		<script>
1210 jpm 44
		//<![CDATA[
2359 jpm 45
			// Précharger le formulaire avec les infos d'une observation
46
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
1210 jpm 47
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
48
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
2359 jpm 49
 
1235 jpm 50
			// Mot-clé du widget/projet
2359 jpm 51
			var TAG_PROJET = "WidgetSaisie,Ambrosia";
1235 jpm 52
			// Mots-clés à ajouter aux images
53
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
1913 raphael 54
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
55
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
1235 jpm 56
			// Mots-clés à ajouter aux observations
57
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
1913 raphael 58
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
59
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
2328 jpm 60
 
2359 jpm 61
 
1476 aurelien 62
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
1215 jpm 63
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
1476 aurelien 64
			// Nom du référentiel utilisé pour les nom scientifiques.
65
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
2359 jpm 66
 
1418 aurelien 67
			// Indication de la présence d'une espèce imposée
68
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
1419 aurelien 69
			// Tableau d'informations sur l'espèce imposée
70
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
2359 jpm 71
 
72
			// Indication des version utilisées de chaque référentiel
73
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
1215 jpm 74
			// Nombre d'élément dans les listes d'auto-complétion
75
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
1210 jpm 76
			// URL du web service permettant l'auto-complétion des noms scientifiques.
1476 aurelien 77
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
78
					"masque={masque}&"+
79
					"recherche=etendue&"+
80
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
2243 mathias 81
					"retour.tri=alpharet&"+ // tri "à la CeL"
1476 aurelien 82
					"ns.structure=au"+"&"+
83
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
2359 jpm 84
 
1240 jpm 85
			// Nombre d'observations max autorisé avant transmission
86
			var OBS_MAX_NBRE = 10;
1249 jpm 87
			// Durée d'affichage en milliseconde des messages d'informations
88
			var DUREE_MESSAGE = 15000;
2359 jpm 89
 
90
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
91
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
92
			// URL du web service réalisant l'insertion des données dans la base du CEL.
93
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
2328 jpm 94
			// Squelette d'URL du web service de l'annuaire.
95
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
1210 jpm 96
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
1984 jpm 97
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
1210 jpm 98
			// URL du marqueur à utiliser dans la carte Google Map
2359 jpm 99
 
2328 jpm 100
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/marqueurs/epingle.png";
1210 jpm 101
			// URL de l'icône du chargement en cours
2328 jpm 102
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement.gif";
1493 aurelien 103
			// URL de l'icône du chargement en cours d'une image
2328 jpm 104
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/chargement-image.gif";
1210 jpm 105
			// URL de l'icône du calendrier
2328 jpm 106
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/calendrier.png";
1239 jpm 107
			// URL de l'icône du calendrier
2328 jpm 108
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/ambrosia/img/icones/pasdephoto.png";
109
 
1210 jpm 110
		//]]>
111
		</script>
2359 jpm 112
		<script src="<?=$url_base?>modules/saisie/squelettes/ambrosia/js/ambrosia.js"></script>
2328 jpm 113
 
1210 jpm 114
		<!-- CSS -->
2359 jpm 115
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" />
116
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" />
117
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
2361 jpm 118
		<link rel="stylesheet" media="screen" href="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/css/bootstrap-modal.css" />
2359 jpm 119
		<link rel="stylesheet" media="screen" href="<?=$url_base?>modules/saisie/squelettes/ambrosia/css/<?=isset($_GET['style']) ? $_GET['style'] : 'ambrosia'?>.css"/>
2328 jpm 120
 
1210 jpm 121
	</head>
122
 
1240 jpm 123
	<body data-spy="scroll">
1210 jpm 124
		<div class="container">
2328 jpm 125
			<div class="row-fluid  page-header">
126
				<div>
127
					<h1>
128
						<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/logos/tela_botanica.png" alt="Tela Botanica" />
129
						À la recherche des <a href="#plte-description" data-toggle="modal">Ambroisies à épis lisses</a> (<i>Ambrosia psilostachya</i> DC.)
130
					</h1>
131
				</div>
132
			</div>
1210 jpm 133
			<div class="row-fluid">
2328 jpm 134
				<div class="span6">
135
					<div class="row-fluid">
136
						<div id="intro" class ="well collapse in">
137
							<a class="fermer" data-toggle="collapse" data-target="#intro">
138
								<h3 class="titre">
139
									Le projet
140
									<i class="icone icon-plus-sign"></i>
141
								</h3>
142
							</a>
143
							<p>
2330 jpm 144
								L’<a href="http://www.ambroisie.info/pages/observatoire.htm" target="_blank">Observatoire des ambroisies</a>,
2328 jpm 145
								en collaboration avec le
2330 jpm 146
								<a href="http://www.anses.fr/fr/content/laboratoire-de-la-sant%C3%A9-des-v%C3%A9g%C3%A9taux" target="_blank">Laboratoire de la Santé des Végétaux
147
								de l’Anses</a> et <a href="http://www.tela-botanica.org" target="_blank">Tela-Botanica</a>,
2328 jpm 148
								lance une enquête pour recueillir vos observations sur cette
149
								plante afin de mieux connaître sa distribution, sa dynamique et mesurer ses impacts éventuels.
150
							</p>
151
							<p>
152
								L’<a href="#plte-description" data-toggle="modal">ambroisie à épis lisses</a> est moins répandue que l’ambroisie à feuilles d’armoise (<i>Ambrosia
153
								artemisiifolia</i>). Cependant son pollen est potentiellement allergisant. Présente en Camargue,
154
								elle semble en extension et peut présenter une menace pour les habitats sensibles.
155
								Grâce à vos observations notées sur cette page nous pourrons détecter précocement sa
156
								présence, connaître sa géolocalisation et évaluer les risques potentiels.
157
							</p>
1240 jpm 158
						</div>
159
					</div>
2328 jpm 160
				</div>
161
 
162
				<div class="span6">
163
					<div class="row-fluid">
164
						<div id="aide" class="well collapse in">
165
							<a class="fermer" data-toggle="collapse" data-target="#aide">
166
								<h3 class="titre">
167
									Aide
168
									<i class="icone icon-plus-sign"></i>
169
								</h3>
170
							</a>
1235 jpm 171
							<p>
2328 jpm 172
								Cet outil vous permet de partager simplement vos observations avec le
1485 aurelien 173
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a> (sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
174
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
1249 jpm 175
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
1485 aurelien 176
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
2328 jpm 177
								Elles apparaissent immédiatement sur les <a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
1235 jpm 178
							</p>
179
							<p class="discretion">
2082 mathias 180
								Pour toute question ou remarque,
181
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2328 jpm 182
									target="_blank"
183
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
184
									contactez-nous</a>
1485 aurelien 185
							</p>
186
							<p class="discretion">
1257 jpm 187
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
1253 jpm 188
								<button id="btn-aide" class="btn btn-mini btn-success">
189
									<span class="icon-question-sign icon-white"></span>
190
									<span id="btn-aide-txt" >Désactiver l'aide</span>
2328 jpm 191
								</button>
1253 jpm 192
							</p>
1235 jpm 193
						</div>
1210 jpm 194
					</div>
195
				</div>
2328 jpm 196
			</div>
197
			<div class="row-fluid">
198
				<div class="well">
199
					<h2>Observateur</h2>
200
					<form id="form-observateur" action="#" class="" autocomplete="on">
201
						<div class="row-fluid">
202
							<div class="span6 control-group has-tooltip" data-placement="right"
203
								title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
204
									Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
205
									ultérieurement. Des informations complémentaires vont vous être
206
									demandées : prénom et nom.">
207
								<label for="courriel"  class="control-label"
208
									title="Veuillez saisir votre adresse courriel.">
209
									<strong class="obligatoire">*</strong> Courriel
210
								</label>
211
								<div class="input-prepend">
212
									<span class="add-on">
213
										<i class="icon-envelope"></i>
214
									</span>
215
									<input id="courriel" name="courriel" type="text"/>
216
									<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
1214 jpm 217
								</div>
2328 jpm 218
							</div>
219
							<div id="zone-courriel-confirmation" class="span6 control-group hidden">
220
								<label for="courriel_confirmation" class="control-label"
221
									title="Veuillez saisir confirmer le courriel.">
222
									<strong class="obligatoire">*</strong> Courriel (confirmation)
223
								</label>
224
								<div class="input-prepend">
225
									<span class="add-on">
226
										<i class="icon-envelope"></i>
227
									</span>
228
									<input id="courriel_confirmation" name="courriel_confirmation" type="text"/>
1218 jpm 229
								</div>
1210 jpm 230
							</div>
2328 jpm 231
						</div>
232
						<div id="zone-prenom-nom" class="row-fluid hidden">
233
							<div class="span6">
234
								<label for="prenom">Prénom</label>
235
								<div>
236
									<input id="prenom" name="prenom" type="text"/>
1241 jpm 237
								</div>
2328 jpm 238
							</div>
239
							<div class="span6">
240
								<label for="nom">Nom</label>
241
								<div>
242
									<input id="nom" name="nom"  type="text"/>
1241 jpm 243
								</div>
244
							</div>
2328 jpm 245
						</div>
246
					</form>
1218 jpm 247
				</div>
1210 jpm 248
			</div>
1220 jpm 249
			<!-- Messages d'erreur du formulaire-->
250
			<div class="row">
251
				<div class="zone-alerte span6 offset3">
1249 jpm 252
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
1220 jpm 253
						<a class="close">×</a>
254
						<h4 class="alert-heading">Information : copier/coller</h4>
255
						<p>
256
							Merci de ne pas copier/coller votre courriel.<br/>
257
							La double saisie permet de vérifier l'absence d'erreurs.
258
						</p>
259
					</div>
1249 jpm 260
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
261
						<a class="close">×</a>
262
						<h4 class="alert-heading">Information : courriel introuvable</h4>
263
						<p>
264
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
265
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
2328 jpm 266
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
1249 jpm 267
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
268
						</p>
269
					</div>
1576 jpm 270
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
271
						<a class="close">×</a>
272
						<h4 class="alert-heading">Information sur Google Map</h4>
273
						<div class="contenu"></div>
274
					</div>
1220 jpm 275
				</div>
276
			</div>
1239 jpm 277
			<div class="row-fluid">
278
				<div class="span12">
1216 jpm 279
					<div class="well">
1210 jpm 280
						<div class="row-fluid">
1239 jpm 281
							<div class="span6">
282
								<div>
283
									<div class="row-fluid">
284
										<div class="span12">
285
											<h2>Lieu du relevé</h2>
1216 jpm 286
										</div>
287
									</div>
1239 jpm 288
									<div class="row-fluid">
289
										<div class="span4">
290
											<label for="map_canvas" title="Veuillez localiser l'observation">
291
												Géolocalisation
292
											</label>
1216 jpm 293
										</div>
1239 jpm 294
										<div class="span8 droite">
295
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
296
												<div class="control-group">
297
													<label for="carte-recherche">Rechercher</label>
2328 jpm 298
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
1239 jpm 299
														title="Permet de centrer la carte sur le lieu recherché."
300
														placeholder="Centrer la carte sur un lieu..."/>
301
												</div>
302
											</form>
303
										</div>
1216 jpm 304
									</div>
1239 jpm 305
									<div class="row-fluid">
306
										<div class="span12">
2328 jpm 307
											<div id="map-canvas" class="has-tooltip"
1249 jpm 308
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
2328 jpm 309
													représentant votre station ou bien le glisser-déposer sur
1249 jpm 310
													le lieu souhaité."></div>
1216 jpm 311
										</div>
312
									</div>
1239 jpm 313
									<div class="row-fluid">
2328 jpm 314
										<label class="span7 control-label">
1239 jpm 315
											<a href="#" class="afficher-coord">Afficher</a>
316
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
317
											les coordonnées géographiques
2328 jpm 318
											<span id="lat-lon-info" class="info has-tooltip"
1239 jpm 319
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
320
												(WGS84)
321
											</span>
322
										</label>
323
										<div id="info-commune" class="span5">
324
								    		<span for="marqueur-commune">Commune : </span>
325
								    		<span id="marqueur-commune">
326
								    			<span id="commune-nom" class="commune-info"></span>
2328 jpm 327
								    			(<span id="commune-code-insee" class="commune-info has-tooltip"
1239 jpm 328
								    				title="Code INSEE de la commune"></span>)
329
								    		</span>
330
							    		</div>
1214 jpm 331
									</div>
2328 jpm 332
									<form id="form-station" action="#" enctype="multipart/form-data" autocomplete="on">
1239 jpm 333
										<div id="coordonnees-geo" class="well" style="display:none;">
334
											<div class="row-fluid form-inline">
2328 jpm 335
												<div id="coord-lat" class="span4">
1239 jpm 336
													<label for="latitude">Latitude</label>
337
													<div>
338
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
339
													</div>
340
												</div>
341
												<div id="coord-lng" class="span4">
342
													<label for="longitude">Longitude</label>
343
													<div>
344
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
345
													</div>
346
												</div>
347
												<div class="span1">
348
													<div>
2328 jpm 349
														<input id="geolocaliser" type="button" value="Voir sur la carte"
350
															class="has-tooltip"
1239 jpm 351
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
352
													</div>
353
												</div>
354
									    	</div>
355
										</div>
356
										<div class="row-fluid">
2328 jpm 357
											<div class="span6 control-group has-tooltip"
1485 aurelien 358
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
2328 jpm 359
												<label class="control-label">
360
													Lieu-dit
361
													<input type="text" id="lieudit" class="" name="lieudit"/>
362
												</label>
1239 jpm 363
											</div>
2328 jpm 364
											<div class="span6 control-group has-tooltip"
1485 aurelien 365
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
2328 jpm 366
												<label class="control-label">
367
													Station
368
													<input type="text" id="station" class="" name="station"/>
369
												</label>
1239 jpm 370
											</div>
2328 jpm 371
										</div>
372
 
373
										<div class="row-fluid">
374
											<div class="span12 control-group has-tooltip"
375
												title="Indiquez la surface en m² de la station au sein de laquelle la plante est présente.">
376
												<label class="span12 control-label">
377
													<strong class="obligatoire">*</strong>
378
													Surface de la station
379
													<select id="station-surface" class="span8 obs-chp-etendu" name="stationSurface"
380
															data-label="Surface couverte dans la station">
381
														<option selected value="">Sélectionnez une surface</option>
382
														<option value="0-5">&lt;5 m²</option>
383
														<option value="5-10">5-10 m²</option>
384
														<option value="10-50">10-50 m²</option>
385
														<option value="50-100">50-100 m²</option>
386
														<option value="100-500">100-500 m²</option>
387
														<option value="500-1000">500-1000 m²</option>
388
														<option value="1000+">&gt; 1000 m²</option>
389
													</select>
390
												</label>
391
											</div>
392
										</div>
393
 
394
										<div class="row-fluid">
395
											<div class="span12 control-group" >
396
												<label class="span12 control-label">
397
													<strong class="obligatoire">*</strong>
398
													Milieu
399
													<select id="milieu" class="span8" name="milieu">
400
														<option selected value="">Sélectionnez un milieu</option>
401
														<?php foreach ($milieux as $milieu => $description) : ?>
402
														<option value="<?=strtolower($milieu)?>">
403
															<?=$milieu?> <?=($description != '') ? "($description)" : '' ?>
404
														</option>
405
														<?php endforeach; ?>
406
														<option value="">Autre : préciser dans les commentaires.</option>
407
													</select>
408
												</label>
409
											</div>
410
										</div>
411
 
412
										<div class="row-fluid">
413
											<div class="span12">
414
												<label for="milieuCommentaire">Commentaires sur le milieu</label>
1239 jpm 415
												<div>
2328 jpm 416
													<textarea id="milieu-commentaire" class="span12 obs-chp-etendu" rows="7"
417
														name="milieuCommentaire" data-label="Commentaires sur le milieu"
418
														placeholder="Vous pouvez éventuellement ajouter des informations complémentaires concernant le milieu"></textarea>
1239 jpm 419
												</div>
420
											</div>
421
										</div>
422
									</form>
1210 jpm 423
								</div>
1239 jpm 424
							</div>
425
							<div class="span6">
426
								<form id="form-obs" action="#" autocomplete="on">
2328 jpm 427
									<h2>Observation</h2>
428
									<input id="referentiel" type="hidden" value="bdtfx" />
429
 
430
									<div class="row-fluid">
431
										<div id="taxon-input-groupe" class="span8 has-tooltip"
432
											title="Sélectionnez une espèce dans la liste déroulante pour lier
433
												votre nom au référentiel selectionné. Si vous
434
												le désirez vous pouvez aussi saisir un nom absent du référentiel
435
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
436
											<label class="span12 control-label">Espèce
437
												<div class="input-prepend input-append">
438
													<span class="add-on"><i class="icon-leaf"></i></span>
439
													<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
440
													<a href="#plte-description" role="button" class="btn btn-success add-on" data-toggle="modal">Voir la description</a>
441
												</div>
442
											</label>
1476 aurelien 443
										</div>
2328 jpm 444
									</div>
445
 
1239 jpm 446
									<div class="row-fluid">
2328 jpm 447
										<div class="span12 control-group has-tooltip"
448
												title="Vous pouvez cliquer sur l'icône de calendrier pour
449
													sélectionner une date dans un calendrier.">
450
											<label class="span12 control-label"  title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
451
												<strong class="obligatoire">*</strong>
1485 aurelien 452
												Date du relevé
2328 jpm 453
												<div class="input-prepend">
454
													<span id="date-icone" class="add-on"></span>
455
													<input id="date" name="date" type="text" placeholder="jj/mm/aaaa" />
456
												</div>
1239 jpm 457
											</label>
458
										</div>
2328 jpm 459
									</div>
460
 
461
									<div class="row-fluid">
462
										<div class="span12 control-group has-tooltip"
463
												title="Indiquez ici le pourcentage de recouvrement par la plante sur la surface de la station.">
464
											<label class="span12 control-label">
465
												<strong class="obligatoire">*</strong>
466
												Recouvrement par la plante de la surface de la station
467
												<select id="recouvrement" class="span8 obs-chp-etendu" name="recouvrement"
468
														data-label="Recouvrement au sein de la surface couverte dans la station">
469
													<option selected value="">Sélectionnez un recouvrement</option>
470
													<option value="+">&lt;1 %</option>
471
													<option value="1">1-5 %</option>
472
													<option value="2">5-25 %</option>
473
													<option value="3">25-50 %</option>
474
													<option value="4">50-75 %</option>
475
													<option value="5">75-100 %</option>
476
												</select>
1239 jpm 477
											</label>
478
										</div>
1214 jpm 479
									</div>
2328 jpm 480
 
1239 jpm 481
									<div class="row-fluid">
482
										<div class="span12">
2330 jpm 483
											<label for="notes">Notes</label>
1239 jpm 484
											<div>
2328 jpm 485
												<textarea id="notes" class="span12" rows="7" name="notes"
1239 jpm 486
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
487
											</div>
488
										</div>
1214 jpm 489
									</div>
2328 jpm 490
 
1239 jpm 491
								</form>
2359 jpm 492
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=<?=isset($_GET['projet']) ? $_GET['projet'] : 'defaut'?>"
1239 jpm 493
									method="post" enctype="multipart/form-data">
2328 jpm 494
									<h2>Image(s) de cette plante</h2>
495
									<strong>Ajouter une image</strong>
1524 aurelien 496
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
497
									<div id ="photos-conteneur">
1239 jpm 498
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
499
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
1524 aurelien 500
										<div id="miniatures">
501
										</div>
502
										<p class="miniature-msg" class="span12">&nbsp;</p>
1210 jpm 503
									</div>
1239 jpm 504
								</form>
1210 jpm 505
							</div>
506
							<div class="row-fluid">
2328 jpm 507
								<div class="span12 centre has-tooltip"
508
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
1253 jpm 509
										ajouter votre observation à la liste à transmettre.">
510
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
1239 jpm 511
										Créer
512
									</button>
1210 jpm 513
								</div>
514
							</div>
1239 jpm 515
						</div>
1210 jpm 516
					</div>
2328 jpm 517
				</div>
1210 jpm 518
			</div>
2328 jpm 519
 
1249 jpm 520
			<!-- Messages d'erreur du formulaire-->
521
			<div class="row">
522
				<div class="zone-alerte span6 offset3">
523
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
524
						<a class="close">×</a>
525
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
526
						<p>
1416 aurelien 527
							Vous venez d'ajouter votre 10ème observation.<br/>
1249 jpm 528
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
529
						</p>
530
					</div>
531
				</div>
532
				<div class="zone-alerte span6 offset3">
533
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
534
						<a class="close">×</a>
535
						<h4 class="alert-heading">Information : champs en erreur</h4>
536
						<p>
537
							Certains champs du formulaire sont mal remplis.<br/>
538
							Veuillez vérifier vos données.
539
						</p>
540
					</div>
541
				</div>
542
			</div>
2328 jpm 543
 
544
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
1210 jpm 545
			<div id="zone-liste-obs" class="row-fluid">
1239 jpm 546
				<div class="span12">
547
					<div class="well">
1249 jpm 548
						<div class="row-fluid">
549
							<div class="span8">
550
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
551
							</div>
552
							<div class="span4 droite">
2328 jpm 553
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
554
									type="button" disabled="disabled"
555
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
1249 jpm 556
									Transmettre
557
								</button>
558
							</div>
559
						</div>
1240 jpm 560
						<div id="liste-obs" ></div>
1239 jpm 561
						<div class="row">
562
							<div class="zone-alerte span6 offset3">
563
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
564
									<a class="close">×</a>
565
									<h4 class="alert-heading">Attention : aucune observation</h4>
566
									<p>Veuillez saisir des observations pour les transmettres.</p>
567
								</div>
2328 jpm 568
 
1249 jpm 569
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
1239 jpm 570
									<a class="close">×</a>
571
									<h4 class="alert-heading">Information : transmission des observations</h4>
572
									<div class="alert-txt"></div>
573
								</div>
2328 jpm 574
 
1249 jpm 575
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
1239 jpm 576
									<a class="close">×</a>
577
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
578
									<div class="alert-txt"></div>
579
								</div>
1220 jpm 580
							</div>
1239 jpm 581
						</div>
2328 jpm 582
 
1220 jpm 583
					</div>
1239 jpm 584
				</div>
1210 jpm 585
			</div>
2328 jpm 586
 
1210 jpm 587
			<footer class="row-fluid">
2328 jpm 588
				<p class="span12">&copy; Tela Botanica 2014</p>
1210 jpm 589
			</footer>
2328 jpm 590
 
1239 jpm 591
			<!-- Fenêtres modales -->
2328 jpm 592
			<div id="chargement" class="modal-fenetre" style="display:none;">
1249 jpm 593
				<div id="chargement-centrage" class="modal-contenu">
2110 aurelien 594
					<div class="progress progress-striped active">
595
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
596
			    			<span class="sr-only">0/10 observations transmises</span>
597
			  			</div>
598
					</div>
1239 jpm 599
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
600
						Transfert des observations en cours...<br />
2328 jpm 601
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
1493 aurelien 602
						d'observations à transférer.
1239 jpm 603
					</p>
604
				</div>
1210 jpm 605
			</div>
2328 jpm 606
 
1249 jpm 607
			<!-- Templates HTML -->
608
			<div id="tpl-transmission-ok" style="display:none;">
609
				<p class="msg">
610
					Vos observations ont bien été transmises.<br />
2328 jpm 611
					Elles sont désormais consultables à travers les différents outils de visualisation
612
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
613
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
1493 aurelien 614
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
615
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
2328 jpm 616
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
1249 jpm 617
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
2328 jpm 618
					N'oubliez pas qu'il est nécessaire de
1249 jpm 619
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
620
					au préalable, si ce n'est pas déjà fait.
621
				</p>
622
			</div>
623
			<div id="tpl-transmission-ko" style="display:none;">
624
				<p class="msg">
2110 aurelien 625
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
2328 jpm 626
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
2110 aurelien 627
					et transmettre les suivantes.<br />
2117 aurelien 628
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
2328 jpm 629
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
2110 aurelien 630
					<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
631
								  target="_blank"
632
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
633
								  le formulaire de signalement d'erreurs</a>.
1249 jpm 634
				</p>
635
			</div>
2328 jpm 636
 
637
			<!-- Fenêtres modales -->
638
			<div id="plte-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
639
				 aria-labelledby="plte-description-titre" aria-hidden="true">
640
				<div class="modal-header">
641
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
642
					<h1 id="plte-description-titre"><i>Ambrosia psilostachya</i> DC. (Ambroisie à épis lisses)</h1>
643
				</div>
644
				<div class="modal-body">
645
					<div class="dsc-imgs">
646
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/allure_generale.jpg" alt="Allure générale"/>
647
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/feuille.jpg" alt="Feuille"/>
648
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/fruit.jpg" alt="Fruit"/>
649
						<img src="<?=$url_base?>/modules/saisie/squelettes/ambrosia/img/dsc/racine.jpg" alt="Racine"/>
650
					</div>
651
					<div class="dsc-infos">
652
						<p><b>Floraison :</b> de fin mai à septembre.</p>
653
						<p>
654
							<b>Plante vivace</b> de 10-60(80) cm à <b>rhizome grêle</b> d’où naissent des drageons (voir <b>photo 4</b>) . <b class="text-error">Attention: en
655
							arrachant la plante la tige casse facilement au ras du rhizome et la portion enfouie de la tige ressemble à une racine
656
							pivotante (=confusion possible avec une espèce annuelle) !</b>
657
						</p>
658
						<p><b>Tiges</b> simples ou à rameaux courts, souvent nues au-dessous du collet.</p>
659
						<p>
660
							<b>Feuilles</b> médianes 1 à 2 fois découpées, à bande médiane > 2 mm entre les 2 premières divisions (voir <b>photo 2</b>).<br />
661
							Morphologie des feuilles généralement uniforme au sein d’un même colonie.
662
						</p>
663
						<p><b>Inflorescence</b> mâle (au sommet) dépassant rarement 10 cm (6-20 cm chez <i>A. artemisiifolia</i>).</p>
664
						<p>
665
							<b>Fruits</b> (rarement produits en France) de plus 3,5 mm à bec de moins de 1 mm (>1 mm chez <i>A. artemisiifolia</i>) et
666
							épines obtuses courtes <0,3 mm (épines aiguës > 0,3 mm chez <i>A. artemisiifolia</i>) : voir <b>photo 3</b>.
667
						</p>
668
						<p class="muted">
669
							<b>Références :</b> Tison et al. (2014) Flore de la France méditerranéenne continentale ; Tison & De Foucault (2014) Flora Gallica ; Jauzein (1995)
670
							Flore des champs cultivés
671
						</p>
2331 jpm 672
						<div class="well">
673
							<p>Vous pouvez télécharger plusieurs documents au format PDF :</p>
674
							<ul>
675
								<li>
676
									<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/ambrosia_psilostachya.pdf" target="_blank">
677
										cette description (173 Ko)
678
									</a>
679
								</li>
680
								<li>
681
									<a href="<?=$url_base?>/modules/saisie/squelettes/ambrosia/doc/cle_ambrosia.pdf" target="_blank">
682
										une clé de détermination du genre <i>Ambrosia</i> (ambroisies) (635 Ko)
683
									</a>
684
								</li>
685
							</ul>
686
						</div>
2328 jpm 687
					</div>
688
				</div>
689
				<div class="modal-footer dsc-clean">
690
					<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
691
				</div>
692
			</div>
693
 
1239 jpm 694
			<!-- Stats : Google Analytics-->
695
			<script type="text/javascript">
696
				//<![CDATA[
697
				var _gaq = _gaq || [];
698
				_gaq.push(['_setAccount', 'UA-20092557-1']);
699
				_gaq.push(['_trackPageview']);
2328 jpm 700
 
1239 jpm 701
				(function() {
702
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
703
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
704
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
705
				})();
706
				//]]>
707
			</script>
1210 jpm 708
		</div>
709
	</body>
710
</html>