Subversion Repositories eFlore/Applications.cel

Rev

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