Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
1526 jpm 1
<!DOCTYPE html>
2
<html lang="fr">
3
	<head>
1537 jpm 4
		<title>Florilèges</title>
1526 jpm 5
		<meta charset="utf-8">
2408 jpm 6
 
1526 jpm 7
		<meta name="author" content="Jean-Pascal MILCENT, Aurélien PERONNET" />
8
		<meta name="keywords" content="Florilege, Tela Botanica, CEL" />
9
		<meta name="description" content="Widget de saisie du projet Florilege" />
10
 
11
		<!-- Viewport Mobile -->
12
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
2408 jpm 13
 
1526 jpm 14
		<!-- Favicones -->
1537 jpm 15
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/florileges/img/favicon.ico" />
2408 jpm 16
 
1526 jpm 17
		<!-- Javascript : bibliothèques -->
18
		<!-- Google Map v3 -->
19
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
2408 jpm 20
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
1526 jpm 21
		<!-- Jquery -->
2707 mathias 22
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
1526 jpm 23
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
2707 mathias 24
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
25
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
1526 jpm 26
		<!-- Jquery Plugins -->
27
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
2707 mathias 28
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
29
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
30
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
1526 jpm 31
		<!-- Jquery Form :nécessaire pour l'upload des images -->
2707 mathias 32
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
2408 jpm 33
 
1526 jpm 34
		<!-- Bootstrap -->
2707 mathias 35
		<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
2408 jpm 36
 
1526 jpm 37
		<!-- Javascript : appli saisie -->
2707 mathias 38
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
2708 mathias 39
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/sauvages/js/WidgetSaisieSauvages.js"></script>
2707 mathias 40
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/florileges/js/WidgetSaisieFlorileges.js"></script>
1955 jpm 41
		<script src="<?=$url_base?>saisie?projet=florileges&amp;service=taxons" type="text/javascript"></script>
1526 jpm 42
		<script type="text/javascript">
43
		//<![CDATA[
2707 mathias 44
           $(document).ready(function() {
45
				// Héritage !!
46
				var widget = new WidgetSaisieFlorileges();
2408 jpm 47
 
2707 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 = "Florileges,WidgetFlorileges,Sauvages";
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?>?"+
1526 jpm 80
					"masque={masque}&"+
81
					"recherche=etendue&"+
82
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
83
					"ns.structure=au"+"&"+
2707 mathias 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?>?"+
1526 jpm 87
					"masque={masque}&"+
88
					"recherche=etendue&"+
89
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
2707 mathias 90
					"retour.tri=alpharet&"+ // tri "à la CeL"
1526 jpm 91
					"ns.structure=au"+"&"+
2707 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 des marqueurs à utiliser dans la carte Google Map
104
				widget.googleMapMarqueurDebutUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/marqueurs/debut.png";
105
				widget.googleMapMarqueurFinUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/marqueurs/fin.png";
106
				// URL de l'icône du chargement en cours
107
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement.gif";
108
				// URL de l'icône du chargement en cours d'une image
109
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement-image.gif";
110
				// URL de l'icône du calendrier
111
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/calendrier.png";
112
				// URL de l'icône pour une photo manquante
113
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/pas_de_photo.png";
114
 
115
				// et BIM
116
				widget.init();
117
           });
1526 jpm 118
		//]]>
119
		</script>
2408 jpm 120
 
1526 jpm 121
		<!-- CSS -->
2707 mathias 122
		<link href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
123
		<link href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
124
		<link href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
1537 jpm 125
		<link href="<?=$url_base?>modules/saisie/squelettes/florileges/css/<?=isset($_GET['style']) ? $_GET['style'] : 'florileges'?>.css" rel="stylesheet" type="text/css" media="screen" />
2678 aurelien 126
 
127
 
128
		<script>
129
		  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
130
		  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
131
		  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
132
		  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
133
 
134
		  ga('create', 'UA-20092557-1', 'auto');
135
		  ga('require', 'displayfeatures');
136
		  ga('send', 'pageview');
137
 
138
		</script>
1526 jpm 139
	</head>
140
 
141
	<body data-spy="scroll">
142
		<div class="container">
1564 jpm 143
			<div class="row-fluid entete">
1540 jpm 144
				<div class="span7">
1537 jpm 145
					<div class="well intro">
146
						<h1>Florilèges</h1>
147
						<p>
148
							Bienvenue sur l'interface de saisie en ligne des données
149
							"Florilèges"-RUES. Cette interface vous permet d'enregistrer vos
2408 jpm 150
							observations de terrain et de les partager simplement
1537 jpm 151
							(sous <a href="http://creativecommons.org/licenses/by-sa/2.0/fr/">licence CC-BY-SA</a>)
2408 jpm 152
							avec <a href="http://www.plante-et-cite.fr">Plante &amp; Cité</a>,
1537 jpm 153
							<a href="http://www.tela-botanica.org/site:accueil">le réseau Tela Botanica</a>
154
							et <a href="http://sauvagesdemarue.mnhn.fr">le programme Sauvage de ma Rue</a>.
155
						</p>
156
						<p>
157
							En vous identifiant, vous pourrez retrouver et consulter l'ensemble de
158
							vos observations dans <a href="http://www.tela-botanica.org/appli:cel">le Carnet en ligne</a>.<br />
2408 jpm 159
							Renseignez tout d'abord les caractéristiques et l'itinéraire technique mis en place
160
							sur le site des relevés, puis détaillez ensuite les espèces observées sur ce site.
161
							Ajoutez chaque observation à la liste à transmettre à l'aide du bouton
1537 jpm 162
							«&nbsp;Créer&nbsp;».
163
						</p>
164
						<p>
165
							L'interface de saisie vous permet de renseigner jusqu'à 10 observations à des dates
166
							différentes pour un même site.
167
							Partagez-les avec le bouton «&nbsp;Transmettre&nbsp;».
2408 jpm 168
							Elles apparaissent immédiatement sur
169
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la carte</a> et
170
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la galerie photos</a>
1537 jpm 171
							du projet.
172
						</p>
173
						<p>
174
							Pour toute question, <a href="mailto:contact@florileges.info">contactez les animateurs du programme Florilèges</a>.
175
						</p>
176
						<p class="discretion">
1608 jpm 177
							Un aide interactive est à votre disposition sur l'interface.
1537 jpm 178
							Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
179
							<button id="btn-aide" class="btn btn-mini btn-success">
180
								<span class="icon-question-sign icon-white"></span>
181
								<span id="btn-aide-txt" >Désactiver l'aide</span>
2408 jpm 182
							</button>
1537 jpm 183
						</p>
1526 jpm 184
					</div>
185
				</div>
2408 jpm 186
 
1540 jpm 187
				<div class="span5">
188
					<div class="well forcer-colonne">
1526 jpm 189
						<h2>Observateur</h2>
190
						<form id="form-observateur" action="#" class="" autocomplete="on">
191
							<div class="row-fluid">
1608 jpm 192
								<div class="span6 control-group has-tooltip" data-placement="bottom"
1526 jpm 193
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
2408 jpm 194
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
195
										ultérieurement. Des informations complémentaires vont vous être
1526 jpm 196
										demandées : prénom et nom.">
1540 jpm 197
										<label class="control-label" for="courriel">
2408 jpm 198
											<strong class="obligatoire">*</strong>
1540 jpm 199
											Courriel
200
										</label>
201
										<div class="controls">
202
											<div class="input-prepend">
203
												<span class="add-on">
204
													<i class="icon-envelope"></i>
205
												</span>
206
												<input id="courriel" name="courriel" class="span11" type="text"/>
207
												<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
208
											</div>
209
										</div>
2408 jpm 210
 
1526 jpm 211
								</div>
1608 jpm 212
								<div id="zone-courriel-confirmation" class="span6 hidden control-group has-tooltip"
2408 jpm 213
									data-placement="bottom"
214
									title="Saisissez à nouveau votre courriel afin de le confirmer. Le
1608 jpm 215
										copier/coller est désactivé pour éviter les erreurs.">
1540 jpm 216
									<label class="control-label" for="courriel_confirmation">
1537 jpm 217
										<strong class="obligatoire">*</strong>
218
										Courriel (confirmation)
1526 jpm 219
									</label>
1540 jpm 220
									<div class="controls">
221
										<div class="input-prepend">
222
											<span class="add-on">
223
												<i class="icon-envelope"></i>
224
											</span>
2408 jpm 225
											<input id="courriel_confirmation" name="courriel_confirmation"
1540 jpm 226
											 	class="span11" type="text"/>
227
										</div>
1526 jpm 228
									</div>
229
								</div>
230
							</div>
231
							<div id="zone-prenom-nom" class="row-fluid hidden">
1560 jpm 232
								<div class="span6 control-group">
1563 jpm 233
									<label for="prenom" class="control-label">
1560 jpm 234
										<strong class="obligatoire">*</strong>
1540 jpm 235
										Prénom
236
									</label>
237
									<input id="prenom" name="prenom" class="span12" type="text"/>
1526 jpm 238
								</div>
1560 jpm 239
								<div class="span6 control-group">
1563 jpm 240
									<label for="nom" class="control-label">
1560 jpm 241
										<strong class="obligatoire">*</strong>
1540 jpm 242
										Nom
243
									</label>
1560 jpm 244
									<div class="controls">
245
										<input id="nom" name="nom"  class="span12" type="text"/>
246
									</div>
1526 jpm 247
								</div>
248
							</div>
1540 jpm 249
							<div id="zone-personne-complement" class="forcer-colonne">
1537 jpm 250
								<div class="row-fluid">
2408 jpm 251
									<div class="span6 control-group has-tooltip"
252
										title="Précisez l'entreprise, l'association, l'école, ... au nom de
1608 jpm 253
										laquelle vous participez.">
1560 jpm 254
										<label for="structure" class="control-label">
255
											<strong class="obligatoire">*</strong>
1540 jpm 256
											Structure
257
										</label>
1560 jpm 258
										<div class="controls">
2408 jpm 259
											<input id="structure" name="personneStructure" class="span12 obs-chp-etendu"
1567 jpm 260
												type="text" data-label="Structure de l'observateur"/>
1560 jpm 261
										</div>
1537 jpm 262
									</div>
2408 jpm 263
									<div class="span6 control-group has-tooltip"
1608 jpm 264
										title="Précisez le service de la structure au nom de laquelle vous participez.">
1560 jpm 265
										<label for="service" class="control-label">
266
											<strong class="obligatoire">*</strong>
1540 jpm 267
											Service
268
										</label>
1560 jpm 269
										<div class="controls">
2408 jpm 270
											<input id="service" name="personneService" class="span12 obs-chp-etendu"
1567 jpm 271
												type="text" data-label="Service de l'observateur"/>
1560 jpm 272
										</div>
1537 jpm 273
									</div>
274
								</div>
275
								<div class="row-fluid">
1608 jpm 276
									<div class="span12 has-tooltip" title="Indiquez l'intitulé de votre poste
277
										ou votre mission principale.">
1540 jpm 278
										<label for="fonction">
279
											Fonction
280
										</label>
2408 jpm 281
										<input id="fonction" name="personneFonction" class="span12 obs-chp-etendu"
1567 jpm 282
											type="text" data-label="Fonction de l'observateur"/>
1537 jpm 283
									</div>
284
								</div>
285
							</div>
1526 jpm 286
						</form>
287
					</div>
288
				</div>
289
			</div>
290
			<!-- Messages d'erreur du formulaire-->
1537 jpm 291
			<div class="row-fluid">
1526 jpm 292
				<div class="zone-alerte span6 offset3">
293
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
294
						<a class="close">×</a>
295
						<h4 class="alert-heading">Information : copier/coller</h4>
296
						<p>
297
							Merci de ne pas copier/coller votre courriel.<br/>
298
							La double saisie permet de vérifier l'absence d'erreurs.
299
						</p>
300
					</div>
301
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
302
						<a class="close">×</a>
303
						<h4 class="alert-heading">Information : courriel introuvable</h4>
304
						<p>
305
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
306
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
2408 jpm 307
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
1526 jpm 308
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
309
						</p>
310
					</div>
1577 jpm 311
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
312
						<a class="close">×</a>
313
						<h4 class="alert-heading">Information sur Google Map</h4>
314
						<div class="contenu"></div>
315
					</div>
1526 jpm 316
				</div>
317
			</div>
318
			<div class="row-fluid">
319
				<div class="span12">
1560 jpm 320
					<form id="form-site">
321
						<div class="well">
322
							<div class="row-fluid">
323
								<div class="span4">
324
									<div class="row-fluid">
325
										<div class="span12">
326
											<h2>Site</h2>
1526 jpm 327
										</div>
328
									</div>
329
									<div class="row-fluid">
2408 jpm 330
										<div class="span12 control-group has-tooltip"
1608 jpm 331
											title="Nom du site d'étude (quartier, rue, ...)." >
1560 jpm 332
											<label for="station" class="control-label">
333
												<strong class="obligatoire">*</strong>
334
												Nom
1526 jpm 335
											</label>
1560 jpm 336
											<div class="controls">
337
												<input id="station" class="span12" name="station" type="text"/>
338
											</div>
1526 jpm 339
										</div>
1560 jpm 340
									</div>
341
									<div class="forcer-colonne well control-group">
342
										<div class="row-fluid">
343
											<div class="span12">
2408 jpm 344
												<label for="map_canvas" class="control-label"
1560 jpm 345
														title="Veuillez localiser l'observation">
346
													<strong class="obligatoire">*</strong>
347
													Géolocalisation
348
												</label>
1577 jpm 349
												<div class="row-fluid">
350
													<div class="span12">
351
														<ul class="unstyled liste_indication_geolocalisation">
352
															<li class="indication_geolocalisation">Étape 1/4 : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li>
353
															<li class="indication_geolocalisation">Étape 2/4 : Placez le drapeau vert au début de la portion de rue étudiée</li>
354
															<li class="indication_geolocalisation">Étape 3/4 : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé, vous pouvez redéplacer le drapeau vert</li>
355
															<li class="indication_geolocalisation">Étape 4/4 : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li>
356
														</ul>
357
													</div>
358
												</div>
1560 jpm 359
												<div class="form-search form-horizontal">
360
													<div class="control-group">
2408 jpm 361
														<input id="carte-recherche"
1608 jpm 362
															class="search-query span12 obs-chp-etendu has-tooltip"
1587 jpm 363
															type="text"
1560 jpm 364
															title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
1577 jpm 365
															placeholder="Entrez un nom de ville, de lieu ou de rue..."
366
															name="adresse"
367
															data-label="Adresse"
368
															value=""/>
1560 jpm 369
													</div>
370
												</div>
371
											</div>
372
										</div>
373
										<div class="row-fluid">
374
											<div class="span12">
2408 jpm 375
												<div id="map-canvas" class="has-tooltip"
1560 jpm 376
													title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
2408 jpm 377
														représentant votre station ou bien le glisser-déposer sur
1560 jpm 378
														le lieu souhaité."></div>
379
											</div>
380
										</div>
381
										<div id="coordonnees-geo-affichage" class="row-fluid">
382
											<label for="coordonnees-geo" class="span6">
383
												<a class="afficher-coord btn">
384
													<span class="afficher-coord-action">Afficher</span>
385
													<span class="afficher-coord-action" style="display:none;">Cacher</span>
386
													coordonnées
2408 jpm 387
													<span id="lat-lon-info" class="info has-tooltip"
1560 jpm 388
														title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
389
														(WGS84)
390
													</span>
391
												</a>
392
											</label>
393
											<div id="info-commune" class="span6">
394
												<span for="marqueur-commune">Commune : </span>
395
												<span id="marqueur-commune">
396
													<span id="commune-nom" class="commune-info"></span>
2408 jpm 397
													(<span id="commune-code-insee" class="commune-info has-tooltip"
1560 jpm 398
														title="Code INSEE de la commune"></span>)
399
												</span>
400
											</div>
401
										</div>
402
										<div id="coordonnees-geo" class="row-fluid" style="display:none;">
403
											<div class="form-inline">
404
												<div id="coord-lat" class="span4 control-group">
405
													<label for="latitude" class="control-label">
406
														<strong class="obligatoire">*</strong>
407
														Latitude
408
													</label>
409
													<div class="controls">
410
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
411
													</div>
412
												</div>
413
												<div id="coord-lng" class="span4">
414
													<label for="longitude" class="control-label">
415
														<strong class="obligatoire">*</strong>
416
														Longitude
417
													</label>
418
													<div class="controls">
419
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
420
													</div>
421
												</div>
422
												<div class="span4">
1608 jpm 423
													<button id="geolocaliser" class="btn has-tooltip"
1560 jpm 424
														title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
425
														Voir sur la carte
426
													</button>
1526 jpm 427
												</div>
1560 jpm 428
											</div>
1526 jpm 429
										</div>
430
									</div>
1560 jpm 431
								</div>
432
								<div class="span4">
1526 jpm 433
									<div class="row-fluid">
434
										<div class="span12">
1560 jpm 435
											<h2>Typologie du site</h2>
1526 jpm 436
										</div>
437
									</div>
1560 jpm 438
									<div class="row-fluid">
2408 jpm 439
										<div class="span12 control-group has-tooltip"
1608 jpm 440
											title="Précisez la typologie du site." >
1560 jpm 441
											<label for="typo-urbaine" class="control-label">
442
												<strong class="obligatoire">*</strong>
443
												Typologie
444
											</label>
445
											<div class="controls">
1567 jpm 446
												<select id="typo-urbaine" class="span12 obs-chp-etendu" name="typoUrbaine"
447
													data-label="Typologie">
1560 jpm 448
													<option selected value="">Sélectionnez une typologie</option>
449
													<option>centre ville</option>
450
													<option>faubourg</option>
451
													<option>quartier résidentiel</option>
452
													<option>zone commerciale</option>
453
													<option>zone d'activités</option>
454
												</select>
455
											</div>
1537 jpm 456
										</div>
1526 jpm 457
									</div>
1560 jpm 458
									<div class="row-fluid">
2408 jpm 459
										<div class="span12 control-group has-tooltip"
1608 jpm 460
											title="Indiquez le type de revêtement au sol." >
1560 jpm 461
											<label for="revetement-sol" class="control-label">
462
												<strong class="obligatoire">*</strong>
1614 jpm 463
												Revêtement au sol
1560 jpm 464
											</label>
465
											<div class="controls">
1567 jpm 466
												<select id="revetement-sol" class="span12 obs-chp-etendu" name="revetementSol"
1614 jpm 467
													data-label="Revêtement au sol">
468
													<option selected value="">Sélectionnez le revêtement au sol</option>
1560 jpm 469
													<option>asphalte et enrobés</option>
470
													<option>pavés</option>
471
													<option>stabilisés, aires sablées</option>
472
													<option>graviers</option>
473
													<option>terre</option>
474
												</select>
1537 jpm 475
											</div>
1560 jpm 476
										</div>
1540 jpm 477
									</div>
1560 jpm 478
									<div class="row-fluid">
2408 jpm 479
										<div class="span12 has-tooltip"
1608 jpm 480
											title="Évaluez la densité de zones végétalisés autour du site (haie, aménagement paysager, parcs et jardins, ...)." >
1560 jpm 481
											<label>
482
												Présence de zones végétalisés
2408 jpm 483
												<select id="presence-zone-vegetalise" class="obs-chp-etendu slider"
1567 jpm 484
													name="presenceZoneVegetalise" data-label="Présence de zones végétalisés">
1560 jpm 485
													<option selected value=""></option>
1580 jpm 486
													<option value="nulle">nulle</option>
487
													<option value="faible">faible</option>
488
													<option value="moyenne">moyenne</option>
489
													<option value="importante">importante</option>
1560 jpm 490
												</select>
491
											</label>
492
										</div>
1537 jpm 493
									</div>
1560 jpm 494
									<div class="row-fluid">
2408 jpm 495
										<div class="span12 has-tooltip"
1608 jpm 496
											title="Indiquez la hauteur des bâtiments avoisinants (en étages)." >
1560 jpm 497
											<label>
498
												Hauteur des bâtiments
2408 jpm 499
												<select id="hauteur-batiment-avoisinant" class="obs-chp-etendu slider"
1567 jpm 500
													name="hauteurBatimentAvoisinant" data-label="Hauteur des bâtiments">
1560 jpm 501
													<option selected value=""></option>
1580 jpm 502
													<option value="0">0</option>
503
													<option value="1">1</option>
504
													<option value="2">2</option>
505
													<option value="3">3</option>
506
													<option value="4">4</option>
507
													<option value="5 et +">5 et +</option>
1560 jpm 508
												</select>
509
											</label>
510
										</div>
1537 jpm 511
									</div>
512
								</div>
1560 jpm 513
								<div class="span4">
514
									<div class="row-fluid">
515
										<div class="span12">
516
											<h2>Itinéraire technique</h2>
517
										</div>
1537 jpm 518
									</div>
1560 jpm 519
									<div class="row-fluid">
2408 jpm 520
										<div class="span12 control-group has-tooltip"
1614 jpm 521
											title="Évaluez l'intensité de gestion du site." >
1560 jpm 522
											<label for="intensite-gestion" class="control-label">
523
												<strong class="obligatoire">*</strong>
524
												Intensité de gestion
525
											</label>
526
											<div class="controls">
2408 jpm 527
												<select id="intensite-gestion" class="span12 obs-chp-etendu"
1567 jpm 528
													name="intensiteGestion" data-label="Intensité de gestion">
1560 jpm 529
													<option selected value="">Sélectionnez l'intensité</option>
530
													<option>extensive</option>
531
													<option>intermédiaire</option>
532
													<option>intensive</option>
533
												</select>
1526 jpm 534
											</div>
1537 jpm 535
										</div>
1560 jpm 536
									</div>
537
									<div class="row-fluid">
538
										<div class="span12">
539
											<div class="row-fluid">
2408 jpm 540
												<div class="span12 control-group has-tooltip"
1608 jpm 541
													title="Évaluez la fréquence d'utilisation de produits phytosanitaires sur le site." >
1560 jpm 542
													<label for="periodicite-traitement-phyto" class="control-label">
543
														<strong class="obligatoire">*</strong>
544
														Utilisation de produits phytosanitaires
545
													</label>
546
													<div class="controls">
2408 jpm 547
														<select id="periodicite-traitement-phyto"
548
															class="obs-chp-etendu slider"
1567 jpm 549
															name="periodiciteTraitementPhyto"
550
															data-label="Utilisation de produits phytosanitaires">
1560 jpm 551
															<option selected value=""></option>
552
															<option value="régulière">régulière</option>
553
															<option value="occasionnelle">occasionnelle</option>
554
															<option value="rare">rare</option>
555
															<option value="jamais">jamais</option>
556
														</select>
1537 jpm 557
													</div>
1560 jpm 558
												</div>
1526 jpm 559
											</div>
1560 jpm 560
											<div id="datp-zone" class="row-fluid hidden">
2408 jpm 561
												<div class="span12 has-tooltip"
562
														title="Indiquez la date approximative de l'arrêt des traitements.
563
														Vous pouvez cliquer sur l'icône de calendrier pour
1560 jpm 564
														sélectionner une date dans un calendrier.">
565
													<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
566
														Date d'arrêt des traitements
567
														<div class="input-prepend">
568
															<span id="date-arret-traitement-phyto-icone" class="add-on"></span>
2408 jpm 569
															<input id="date-arret-traitement-phyto" class="input-small obs-chp-etendu"
1567 jpm 570
																name="dateArretTraitementPhyto" type="text"
2408 jpm 571
																placeholder="jj/mm/aaaa"
1567 jpm 572
																data-label="Date d'arrêt des traitements"/>
1560 jpm 573
														</div>
574
													</label>
575
												</div>
576
											</div>
1537 jpm 577
										</div>
578
									</div>
1560 jpm 579
									<div class="row-fluid">
2408 jpm 580
										<div class="span12 control-group has-tooltip"
581
											title="Description de l'itinéraire de gestion (type de traitement,
1567 jpm 582
											matériel utilisé, fréquence de passage, ...)." >
1560 jpm 583
											<label for="itineraire-gestion" class="control-label">
584
												<strong class="obligatoire">*</strong>
585
												Description de l'itinéraire de gestion
586
											</label>
587
											<div class="controls">
2408 jpm 588
												<textarea id="itineraire-gestion" class="span12 obs-chp-etendu"
589
													rows="7" name="itineraireGestion"
1567 jpm 590
													data-label="Description de l'itinéraire de gestion"></textarea>
1560 jpm 591
											</div>
592
										</div>
1537 jpm 593
									</div>
594
								</div>
595
							</div>
596
						</div>
1560 jpm 597
					</form>
1537 jpm 598
				</div>
599
			</div>
600
			<div class="row-fluid">
601
				<div class="span12 well">
602
					<div class="row-fluid">
1560 jpm 603
						<div class="span3">
1537 jpm 604
							<h2 id="obs-titre">Observations</h2>
605
						</div>
1560 jpm 606
						<div class="span9">
1540 jpm 607
							<form id="form-date" class="form-inline">
2408 jpm 608
								<div class="span5 control-group has-tooltip"
609
									title="Vous pouvez cliquer sur l'icône de calendrier pour
610
									sélectionner une date dans un calendrier. La date doit être au format :
1560 jpm 611
									jj/mm/aaaa">
612
									<label class="control-label">
613
										<strong class="obligatoire">*</strong>
2408 jpm 614
										Date du relevé
1540 jpm 615
										<div class="input-prepend">
616
											<span id="date-icone" class="add-on"></span>
2408 jpm 617
											<input id="date" class="input-small" name="date" type="text"
1540 jpm 618
												placeholder="jj/mm/aaaa" />
619
										</div>
620
									</label>
621
								</div>
2408 jpm 622
								<div class="span7 control-group has-tooltip"
1540 jpm 623
									title="Date approximative de la dernière intervention." >
1560 jpm 624
									<label class="span12 control-label">
625
										<strong class="obligatoire">*</strong>
1540 jpm 626
										Dernière intervention
2408 jpm 627
										<select id="date-derniere-intervention" class="span8 obs-chp-etendu"
1567 jpm 628
											name="dateDerniereIntervention" data-label="Dernière intervention">
1560 jpm 629
											<option selected value="">Sélectionnez la date d'intervention</option>
1540 jpm 630
											<option value="inconnue">ne sais pas</option>
631
											<option>plus de 3 ans</option>
632
											<option>entre 1 et 3 ans</option>
633
											<option>moins d'1 an</option>
634
											<option>au cours du dernier semestre</option>
635
											<option>au cours du dernier trimestre</option>
636
											<option>au cours des 30 derniers jours</option>
637
											<option>au cours des 7 derniers jours</option>
638
										</select>
639
									</label>
640
								</div>
641
							</form>
642
						</div>
1537 jpm 643
					</div>
1540 jpm 644
					<form id="form-obs" autocomplete="on">
1537 jpm 645
						<div class="row-fluid">
1577 jpm 646
							<div class="span6">
647
								<div class="well">
648
									<div class="row-fluid">
649
										<div class="span12">
1608 jpm 650
											<div id="taxon-liste-input-groupe" class="control-group has-tooltip"
2408 jpm 651
												title="Sélectionnez une espèce dans la liste déroulante par son nom latin
1608 jpm 652
												ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
1577 jpm 653
												<label class="control-label" for="taxon-liste" title="Choisissez l'espèce rencontrée.">
2408 jpm 654
													<strong class="obligatoire">*</strong>
1577 jpm 655
													Espèces les plus communes
656
												</label>
657
												<div class="controls">
658
													<div class="input-prepend ">
659
														<span class="add-on">
660
															<i class="icon-leaf"></i>
661
														</span>
2408 jpm 662
 
1577 jpm 663
														<select id="taxon-liste" class="span10" name="taxon-liste">
664
															<option value="" selected>Sélectionner une espèce</option>
2408 jpm 665
 
1613 jpm 666
															<optgroup id="taxon-liste-noms">
667
																<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
2408 jpm 668
																	<option
669
																		class="<?=$taxon['nom_type'] ?>"
670
																		value="<?=$taxon['num_nom'] ?>"
1613 jpm 671
																		title="<?=$taxon['nom_title'] ?>"
672
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
673
																		>
674
																		<?=$taxon['nom_a_afficher']?>
675
																	</option>
676
																<?php endforeach; ?>
677
															</optgroup>
678
															<optgroup id="taxon-liste-special">
679
																<?php foreach ($taxons['speciaux'] as $taxon) :?>
2408 jpm 680
																	<option
681
																		class="<?=$taxon['nom_type'] ?>"
682
																		value="<?=$taxon['num_nom'] ?>"
1613 jpm 683
																		title="<?=$taxon['nom_title'] ?>"
684
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
685
																		>
686
																		<?=$taxon['nom_a_afficher']?>
687
																	</option>
688
																<?php endforeach; ?>
689
																<option value="?">Autre espèce</option>
690
															</optgroup>
1577 jpm 691
														</select>
692
													</div>
1526 jpm 693
												</div>
1540 jpm 694
											</div>
1537 jpm 695
										</div>
696
									</div>
1577 jpm 697
									<div id="taxon-input-groupe" class="row-fluid hidden">
698
										<div class="span12">
2408 jpm 699
											<div class="control-group has-tooltip"
700
												title="Sélectionnez une espèce dans la liste déroulante pour lier
701
													votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
1608 jpm 702
													un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
1577 jpm 703
												<label for="taxon" class="control-label" title="Choisissez l'espèce rencontrée.">
704
													Autre espèce
705
												</label>
706
												<div class="controls">
707
													<input id="taxon" name="taxon" type="text" class="span12"
2408 jpm 708
														placeholder="Autre espèce (ou indication sur la plante)"
1577 jpm 709
														value="<?= $nom_sci_espece_defaut; ?>" />
710
												</div>
1540 jpm 711
											</div>
1537 jpm 712
										</div>
713
									</div>
1577 jpm 714
									<div class="row-fluid">
2408 jpm 715
										<div class="span12 control-group has-tooltip"
1608 jpm 716
											title="Sélectionnez un ou plusieurs milieux dans lesquels l'espèce est présente sur le site.">
1577 jpm 717
											<label class="span2 control-label">
718
												<strong class="obligatoire">*</strong>
719
												Milieux
720
											</label>
721
											<div id="milieux-controls" class="controls">
722
												<div class="input-prepend">
723
													<div class="btn-group">
724
														<button class="btn dropdown-toggle" data-toggle="dropdown">
725
															<i class="icon-globe"></i>
726
															Sélectionner un ou plusieurs milieux
727
															<span class="caret"></span>
728
														</button>
729
														<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
730
															<li>
731
																<label class="checkbox">
732
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="chemin"/>
733
																	chemin
734
																</label>
735
															</li>
736
															<li>
737
																<label class="checkbox">
738
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="fissures"/>
739
																	fissures
740
																</label>
741
															</li>
742
															<li>
743
																<label class="checkbox">
744
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="haie"/>
745
																	haie
746
																</label>
747
															</li>
748
															<li>
749
																<label class="checkbox">
750
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="mur"/>
751
																	mur
752
																</label>
753
															</li>
754
															<li>
755
																<label class="checkbox">
756
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="pelouse"/>
757
																	pelouse
758
																</label>
759
															</li>
760
															<li>
761
																<label class="checkbox">
762
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="pied d'arbre"/>
763
																	pied d'arbre
764
																</label>
765
															</li>
766
															<li>
767
																<label class="checkbox">
768
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="plate bande"/>
769
																	plate bande
770
																</label>
771
															</li>
772
														</ul>
773
													</div>
1560 jpm 774
												</div>
1526 jpm 775
											</div>
776
										</div>
1537 jpm 777
									</div>
2408 jpm 778
 
1577 jpm 779
									<div class="row-fluid">
1608 jpm 780
										<div class="span12 control-group has-tooltip"
781
											title="Indiquez la hauteur maximum en centimètre de la plante sur le site.">
1577 jpm 782
											<label class="control-label">
783
												<strong class="obligatoire">*</strong>
2408 jpm 784
												Hauteur max. (en cm) de la plante
785
												<input id="hauteur-plante" class="span2 obs-chp-etendu"
786
													name="hauteurPlante"
787
													type="number" min="0" step="5"
1577 jpm 788
													data-label="Hauteur max. (en cm) de la plante"/>
789
											</label>
790
										</div>
1537 jpm 791
									</div>
2408 jpm 792
 
1577 jpm 793
									<div class="row-fluid">
794
										<div class="span12">
795
											<label for="notes">Commentaires</label>
796
											<div>
2408 jpm 797
												<textarea id="notes" class="span12" rows="7" name="notes"
1577 jpm 798
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
799
											</div>
1537 jpm 800
										</div>
801
									</div>
802
								</div>
1526 jpm 803
							</div>
804
							<div class="span6">
1537 jpm 805
								<div class="well">
806
									<div class="row-fluid">
2408 jpm 807
										<div class="span12 control-group has-tooltip"
1608 jpm 808
											title="Évaluez la résistance/résilience de l'espèce face aux traitements utilisés sur ce site." >
1560 jpm 809
											<label class="control-label">
810
												<strong class="obligatoire">*</strong>
1537 jpm 811
												Résistance/Résilience
1560 jpm 812
											</label>
813
											<div class="controls">
2408 jpm 814
												<select id="resistance-traitement-phyto"
815
													class="obs-chp-etendu slider"
816
													name="resistanceTraitementPhyto"
1580 jpm 817
													data-label="Résistance/Résilience">
1560 jpm 818
													<option selected value=""></option>
1580 jpm 819
													<option value="pas de traitement">pas de traitement</option>
820
													<option value="faible">faible</option>
821
													<option value="intermédiaire">intermédiaire</option>
822
													<option value="forte">forte</option>
823
													<option value="très forte">très forte</option>
1537 jpm 824
												</select>
1560 jpm 825
											</div>
1526 jpm 826
										</div>
1537 jpm 827
									</div>
2408 jpm 828
 
1526 jpm 829
									<div class="row-fluid">
2408 jpm 830
										<div class="span12 has-tooltip"
1608 jpm 831
											title="Évaluez la vitesse de croissance de l'espèce sur ce site." >
1537 jpm 832
											<label>
833
												Croissance
2408 jpm 834
												<select id="vitesse-croissance"
835
													class="obs-chp-etendu slider"
1580 jpm 836
													name="vitesseCroissance"
1567 jpm 837
												 	data-label="Croissance">
1560 jpm 838
													<option selected value=""></option>
1580 jpm 839
													<option value="nulle">nulle</option>
840
													<option value="lente">lente</option>
841
													<option value="moyenne">moyenne</option>
842
													<option value="rapide">rapide</option>
843
													<option value="trop rapide">trop rapide</option>
1537 jpm 844
												</select>
1526 jpm 845
											</label>
846
										</div>
1537 jpm 847
									</div>
848
								</div>
849
								<div class="well">
850
									<div class="row-fluid">
2408 jpm 851
										<div class="span12 has-tooltip"
1537 jpm 852
											title="Perception globale de l'espèce par l'équipe technique.">
853
											<label class="span4">
854
												Perceptions par l'équipe
1526 jpm 855
											</label>
856
											<div class="input-prepend">
1537 jpm 857
												<div class="btn-group">
858
													<button class="btn dropdown-toggle" data-toggle="dropdown">
1540 jpm 859
														<i class="icon-eye-open"></i>
1537 jpm 860
														Sélectionner une ou plusieurs perceptions
861
														<span class="caret"></span>
862
													</button>
863
													<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
864
														<li>
865
															<label class="checkbox">
1577 jpm 866
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="inconnue"/>
1537 jpm 867
																ne connaissais pas la plante avant l'étude
868
															</label>
869
														</li>
870
														<li>
871
															<label class="checkbox">
1577 jpm 872
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="discrète"/>
1537 jpm 873
																discrète ne pose pas de problème
874
															</label>
875
														</li>
876
														<li>
877
															<label class="checkbox">
1577 jpm 878
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="esthétique"/>
1537 jpm 879
																visible et esthétique
880
															</label>
881
														</li>
882
														<li>
883
															<label class="checkbox">
1577 jpm 884
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="gênante"/>
1537 jpm 885
																gênante, difficile à gérer
886
															</label>
887
														</li>
888
														<li>
889
															<label class="checkbox">
1577 jpm 890
																<input name="perceptionTechnicien[]" class="cb-perception-technicien" type="checkbox" value="envahissante"/>
1537 jpm 891
																envahissante, cause des dégâts
892
															</label>
893
														</li>
894
													</ul>
895
												</div>
1526 jpm 896
											</div>
897
										</div>
898
									</div>
2408 jpm 899
 
1526 jpm 900
									<div class="row-fluid">
2408 jpm 901
										<div class="span12 has-tooltip"
1608 jpm 902
											title="Évaluez la mauvaise perception des riverains vis à vis de cette espèce." >
1537 jpm 903
											<label>
904
												Mauvaise perception par les riverains ?
2408 jpm 905
												<select id="perception-riverain-mauvaise" class="obs-chp-etendu"
1567 jpm 906
													name="perceptionRiverainMauvaise" data-label="Mauvaise perception par les riverains ?">
1537 jpm 907
													<option>inconnue</option>
908
													<option>oui</option>
909
													<option>non</option>
910
												</select>
911
											</label>
1526 jpm 912
										</div>
913
									</div>
1537 jpm 914
								</div>
915
							</div>
916
						</div>
1560 jpm 917
					</form>
2408 jpm 918
 
919
					<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
1560 jpm 920
						method="post" enctype="multipart/form-data">
921
						<div class="row-fluid">
922
							<div class="span12 well">
2408 jpm 923
								<strong>Ajoutez des images</strong>
1560 jpm 924
								<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
925
								<div id ="photos-conteneur">
1577 jpm 926
									<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
2408 jpm 927
									<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
1562 jpm 928
									<div id="miniatures"></div>
929
									<p class="miniature-msg" class="span12">&nbsp;</p>
1537 jpm 930
								</div>
1526 jpm 931
							</div>
1537 jpm 932
						</div>
1560 jpm 933
					</form>
934
					<div class="row-fluid">
2408 jpm 935
						<div class="span12 centre has-tooltip"
936
							title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
1560 jpm 937
								ajouter votre observation à la liste à transmettre.">
938
							<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
939
								Créer
940
							</button>
941
						</div>
1537 jpm 942
					</div>
2408 jpm 943
 
1537 jpm 944
				</div>
1560 jpm 945
			</div>
2408 jpm 946
 
1560 jpm 947
			<!-- Messages d'erreur du formulaire-->
948
			<div class="row-fluid">
949
				<div class="zone-alerte span6 offset3">
950
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
951
						<a class="close">×</a>
952
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
953
						<p>
954
							Vous venez d'ajouter votre 10ème observation.<br/>
955
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
956
						</p>
1540 jpm 957
					</div>
1560 jpm 958
				</div>
959
				<div class="zone-alerte span6 offset3">
960
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
961
						<a class="close">×</a>
962
						<h4 class="alert-heading">Information : champs en erreur</h4>
963
						<p>
964
							Certains champs du formulaire sont mal remplis.<br/>
965
							Veuillez vérifier vos données.
966
						</p>
1540 jpm 967
					</div>
968
				</div>
1577 jpm 969
				<div class="zone-alerte span6 offset3">
970
					<div id="dialogue-form-invalide-rue" class="alert alert-warning alert-block" style="display: none;">
971
						<a class="close">×</a>
972
						<h4 class="alert-heading">Information : champs en erreur</h4>
973
						<p>
974
							Le coordonnées du début et de la fin de la rue n'ont pas été géoréférencé.<br/>
975
							Veuillez suivre les étapes indiquées dans le champ « Géolocalisation ».
976
						</p>
977
					</div>
978
				</div>
1560 jpm 979
			</div>
2408 jpm 980
 
1560 jpm 981
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
1564 jpm 982
			<div id="zone-liste-obs" class="row-fluid hidden">
1560 jpm 983
				<div class="span12">
984
					<div class="well">
985
						<div class="row-fluid">
986
							<div class="span8">
987
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
988
							</div>
989
							<div class="span4 droite">
2408 jpm 990
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
1608 jpm 991
									type="button" disabled="disabled"
2408 jpm 992
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
1560 jpm 993
									Transmettre
994
								</button>
995
							</div>
996
						</div>
997
						<div id="liste-obs" ></div>
1526 jpm 998
					</div>
1537 jpm 999
				</div>
1526 jpm 1000
			</div>
2408 jpm 1001
 
1567 jpm 1002
			<div class="row-fluid">
1003
				<div class="zone-alerte span6 offset3">
1004
					<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
1005
						<a class="close">×</a>
1006
						<h4 class="alert-heading">Attention : aucune observation</h4>
1007
						<p>Veuillez saisir des observations pour les transmettres.</p>
1008
					</div>
2408 jpm 1009
 
1922 jpm 1010
					<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;">
1567 jpm 1011
						<a class="close">×</a>
1012
						<h4 class="alert-heading">Information : transmission des observations</h4>
1013
						<div class="alert-txt"></div>
1014
					</div>
2408 jpm 1015
 
1567 jpm 1016
					<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
1017
						<a class="close">×</a>
1018
						<h4 class="alert-heading">Erreur : transmission des observations</h4>
1019
						<div class="alert-txt"></div>
1020
					</div>
1021
				</div>
1022
			</div>
1023
 
2408 jpm 1024
 
1560 jpm 1025
			<footer class="row-fluid">
1026
				<p class="span12">&copy; Tela Botanica 2013</p>
1027
			</footer>
1028
		</div>
2408 jpm 1029
 
1560 jpm 1030
		<!-- Fenêtres modales -->
2408 jpm 1031
		<div id="chargement" class="modal-fenetre" style="display:none;">
1560 jpm 1032
			<div id="chargement-centrage" class="modal-contenu">
2118 aurelien 1033
				<div class="progress progress-striped active">
1034
		 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
1035
		    			<span class="sr-only">0/10 observations transmises</span>
1036
		  			</div>
1037
				</div>
1560 jpm 1038
				<p id="chargement-txt" style="color:white;font-size:1.5em;">
1039
					Transfert des observations en cours...<br />
2408 jpm 1040
					Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
1560 jpm 1041
					d'observations à transférer.
1526 jpm 1042
				</p>
1043
			</div>
1560 jpm 1044
		</div>
2408 jpm 1045
 
1560 jpm 1046
		<!-- Templates HTML -->
1047
		<div id="tpl-transmission-ok" style="display:none;">
1048
			<p class="msg">
1049
				Vos observations ont bien été transmises.<br />
2408 jpm 1050
				Elles sont désormais consultables à travers les différents outils de visualisation
1051
				du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
1052
				<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
1560 jpm 1053
				<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
1054
				<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
2408 jpm 1055
				Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
1560 jpm 1056
				connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
2408 jpm 1057
				N'oubliez pas qu'il est nécessaire de
1560 jpm 1058
				<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
1059
				au préalable, si ce n'est pas déjà fait.
1060
			</p>
1061
		</div>
1062
		<div id="tpl-transmission-ko" style="display:none;">
1063
			<p class="msg">
2118 aurelien 1064
				Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
2408 jpm 1065
				Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
2118 aurelien 1066
				et transmettre les suivantes.<br />
1067
				Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
2408 jpm 1068
				Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
2601 mathias 1069
				<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2118 aurelien 1070
							  target="_blank"
1071
							  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
1072
							  le formulaire de signalement d'erreurs</a>.
1560 jpm 1073
			</p>
1074
		</div>
1526 jpm 1075
	</body>
1076
</html>