Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
2360 jpm 1
<!DOCTYPE html>
2
<html lang="fr">
3
	<head>
4
		<title>Arbres têtards : saisie d'observations</title>
5
 
6
		<meta charset="utf-8">
7
 
8
		<meta name="revisit-after" content="15 days" />
9
		<meta name="robots" content="index,follow" />
10
		<meta name="author" content="Jean-Pascal MILCENT" />
11
		<meta name="keywords" content="Arbres têtards, projet, saisie, observation, Gentiana, CEL" />
12
		<meta name="description" content="Projet Arbres têtards de Gentiana - Widget de saisie simplifiée pour le CEL" />
13
 
14
		<!-- Viewport Mobile -->
15
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
16
 
17
		<!-- Favicones -->
18
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/favicon.ico" />
19
 
20
		<!-- Javascript : bibliothèques -->
21
		<!-- Google Map v3 -->
22
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
23
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
24
 
25
		<!-- Jquery -->
26
		<script src="http://resources.tela-botanica.org/jquery/1.7.1/jquery-1.7.1.min.js"></script>
27
		<!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
28
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
29
		<script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
30
		<!-- Jquery Plugins -->
31
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
32
		<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/jquery.validate.min.js"></script>
33
		<script src="http://resources.tela-botanica.org/jquery/validate/1.9.0/messages_fr.js"></script>
34
		<!-- Jquery Form :nécessaire pour l'upload des images -->
35
		<script src="http://resources.tela-botanica.org/jquery/form/2.95/jquery.form.min.js"></script>
36
 
37
		<!-- Bootstrap -->
38
		<script src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
39
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modalmanager.js"></script>
40
		<script src="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/js/bootstrap-modal.js"></script>
41
 
2366 jpm 42
		<!-- Proj4js -->
43
		<script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>
44
 
2360 jpm 45
		<!-- Javascript : appli saisie -->
2366 jpm 46
		<script src="<?=$url_base?>saisie?projet=arbres-tetards&amp;service=taxons" type="text/javascript"></script>
2360 jpm 47
		<script>
48
		//<![CDATA[
49
			// Précharger le formulaire avec les infos d'une observation
50
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
51
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
52
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
53
 
54
			// Mot-clé du widget/projet
55
			var TAG_PROJET = "WidgetSaisie,ArbresTetards";
56
			// Mots-clés à ajouter aux images
57
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
58
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
59
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
60
			// Mots-clés à ajouter aux observations
61
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
62
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
63
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
64
 
65
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
66
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
67
			// Nom du référentiel utilisé pour les nom scientifiques.
68
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
69
 
70
			// Indication de la présence d'une espèce imposée
71
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
72
			// Tableau d'informations sur l'espèce imposée
73
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
74
 
75
			// Indication des version utilisées de chaque référentiel
76
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
77
			// Nombre d'élément dans les listes d'auto-complétion
78
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
79
			// URL du web service permettant l'auto-complétion des noms scientifiques.
80
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
81
					"masque={masque}&"+
82
					"recherche=etendue&"+
83
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
84
					"retour.tri=alpharet&"+ // tri "à la CeL"
85
					"ns.structure=au"+"&"+
86
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
87
 
88
			// Nombre d'observations max autorisé avant transmission
89
			var OBS_MAX_NBRE = 10;
90
			// Durée d'affichage en milliseconde des messages d'informations
91
			var DUREE_MESSAGE = 15000;
92
 
93
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
94
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
95
			// URL du web service réalisant l'insertion des données dans la base du CEL.
96
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
97
			// Squelette d'URL du web service de l'annuaire.
98
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
99
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
100
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
2366 jpm 101
			// Squelette d'URL du web service d'eFlore fournissant l'altitude
102
			var SERVICE_ALTITUDE_URL = "http://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
2360 jpm 103
 
104
			// URL du marqueur à utiliser dans la carte Google Map
105
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/marqueurs/epingle.png";
106
			// URL de l'icône du chargement en cours
107
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement.gif";
108
			// URL de l'icône du chargement en cours d'une image
109
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement-image.gif";
110
			// URL de l'icône du calendrier
111
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/calendrier.png";
112
			// URL de l'icône du calendrier
113
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/pasdephoto.png";
114
 
115
		//]]>
116
		</script>
117
		<script src="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/js/arbres-tetards.js"></script>
118
 
119
		<!-- CSS -->
120
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" />
121
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" />
122
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
123
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/css/bootstrap-modal.css" />
124
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-tetards'?>.css" />
125
 
126
	</head>
127
 
128
	<body data-spy="scroll">
129
		<div class="container">
130
			<div class="row-fluid page-header">
131
				<div>
132
					<h1>
133
						<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/logos/gentiana.png" alt="Gentiana" />
134
						Arbres têtards de l'Isère
135
					</h1>
136
				</div>
137
			</div>
138
			<div class="row-fluid">
139
				<div class="span6">
140
					<div class="row-fluid">
141
						<div id="intro" class ="well collapse in">
142
							<a class="fermer" data-toggle="collapse" data-target="#intro">
143
								<h3 class="titre">
144
									Le projet
145
									<i class="icone icon-plus-sign"></i>
146
								</h3>
147
							</a>
148
							<p>
149
								Les arbres têtards (trognes), sont des arbres taillés exploités depuis des siècles
150
								pour leurs branches ou leurs feuilles.
151
							</p>
152
							<p>
153
								La taille consiste à couper la tête de l’arbre à environ 2m du sol. Les branches
154
								repoussent en couronne au sommet du tronc et sont taillées au même endroit tous
155
								les 5 à 12 ans. De nombreuses espèces de feuillus peuvent être taillées en têtard,
156
								les plus fréquentes sont les saules, les frênes, les peupliers et aussi les muriers.
157
							</p>
158
							<p>
159
								Ces arbres, témoins d’anciennes pratiques agricoles, embellissent le paysage,
160
								retiennent les berges, participent au maintien des zones humides et abritent de
161
								nombreuses espèces végétales et animales dont beaucoup sont menacées.<br />
162
								Victimes de la modernisation de l’agriculture et de l’urbanisation des zones
163
								rurales, ces arbres remarquables disparaissent !
164
							</p>
165
							<p>
166
								C’est pourquoi <a href="http://www.gentiana.org/" target="_blank">Gentiana</a>
167
								a lancé un programme de suivi, de sauvegarde et de restauration des arbres têtards
168
								en Isère. Ce projet a pour but de mieux faire connaître ces arbres, de les entretenir,
169
								de restaurer les arbres à l’abandon et d’en replanter.
170
							</p>
171
							<p>
172
								La première chose à faire est un état des lieux des arbres têtards sur tout le
173
								département de l’Isère.<br />
174
								<strong>Nous avons besoin de vous pour améliorer notre connaissance !</strong><br />
175
								Vous pouvez nous aider en nous signalant les arbres têtards que vous connaissez
176
								à l’aide du formulaire suivant.
177
							</p>
178
						</div>
179
					</div>
180
				</div>
181
 
182
				<div class="span6">
183
					<div class="row-fluid">
184
						<div id="aide" class="well collapse in">
185
							<a class="fermer" data-toggle="collapse" data-target="#aide">
186
								<h3 class="titre">
187
									Aide
188
									<i class="icone icon-plus-sign"></i>
189
								</h3>
190
							</a>
191
							<p>
192
								Cet outil vous permet de partager simplement vos observations avec
193
								<a href="http://www.gentiana.org/" target="_blank">Gentiana</a> et le
194
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
195
								(sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
196
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
197
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
198
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
199
								Elles apparaissent immédiatement sur les
200
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
201
							</p>
202
							<p class="discretion">
203
								Pour toute question ou remarque,
204
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
205
									target="_blank"
206
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
207
									contactez-nous</a>
208
							</p>
209
							<p class="discretion">
210
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
211
								<button id="btn-aide" class="btn btn-mini btn-success">
212
									<span class="icon-question-sign icon-white"></span>
213
									<span id="btn-aide-txt" >Désactiver l'aide</span>
214
								</button>
215
							</p>
216
						</div>
217
					</div>
218
				</div>
219
			</div>
220
			<div class="row-fluid">
221
				<div class="well">
222
					<h2>Observateur</h2>
223
					<form id="form-observateur" action="#" class="" autocomplete="on">
224
						<div class="row-fluid">
225
							<div class="span6 control-group has-tooltip" data-placement="right"
226
								title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
227
									Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
228
									ultérieurement. Des informations complémentaires vont vous être
229
									demandées : prénom et nom.">
230
								<label for="courriel"  class="control-label"
231
									title="Veuillez saisir votre adresse courriel.">
232
									<strong class="obligatoire">*</strong> Courriel
233
								</label>
234
								<div class="input-prepend">
235
									<span class="add-on">
236
										<i class="icon-envelope"></i>
237
									</span>
238
									<input id="courriel" name="courriel" type="text"/>
239
									<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
240
								</div>
241
							</div>
242
							<div id="zone-courriel-confirmation" class="span6 control-group hidden">
243
								<label for="courriel_confirmation" class="control-label"
244
									title="Veuillez saisir confirmer le courriel.">
245
									<strong class="obligatoire">*</strong> Courriel (confirmation)
246
								</label>
247
								<div class="input-prepend">
248
									<span class="add-on">
249
										<i class="icon-envelope"></i>
250
									</span>
251
									<input id="courriel_confirmation" name="courriel_confirmation" type="text"/>
252
								</div>
253
							</div>
254
						</div>
255
						<div id="zone-prenom-nom" class="row-fluid hidden">
256
							<div class="span6">
257
								<label for="prenom">Prénom</label>
258
								<div>
259
									<input id="prenom" name="prenom" type="text"/>
260
								</div>
261
							</div>
262
							<div class="span6">
263
								<label for="nom">Nom</label>
264
								<div>
265
									<input id="nom" name="nom"  type="text"/>
266
								</div>
267
							</div>
268
						</div>
269
					</form>
270
				</div>
271
			</div>
272
			<!-- Messages d'erreur du formulaire-->
273
			<div class="row">
274
				<div class="zone-alerte span6 offset3">
275
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
276
						<a class="close">×</a>
277
						<h4 class="alert-heading">Information : copier/coller</h4>
278
						<p>
279
							Merci de ne pas copier/coller votre courriel.<br/>
280
							La double saisie permet de vérifier l'absence d'erreurs.
281
						</p>
282
					</div>
283
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
284
						<a class="close">×</a>
285
						<h4 class="alert-heading">Information : courriel introuvable</h4>
286
						<p>
287
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
288
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
289
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
290
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
291
						</p>
292
					</div>
293
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
294
						<a class="close">×</a>
295
						<h4 class="alert-heading">Information sur Google Map</h4>
296
						<div class="contenu"></div>
297
					</div>
298
				</div>
299
			</div>
300
			<div class="row-fluid">
301
				<div class="span12">
302
					<div class="well">
303
						<div class="row-fluid">
2366 jpm 304
							<div class="span12">
305
								<h2>Lieu du relevé</h2>
306
							</div>
307
						</div>
308
						<div class="row-fluid">
2360 jpm 309
							<div class="span6">
2366 jpm 310
								<div class="row-fluid">
311
									<div class="span4">
312
										<label for="map_canvas" title="Veuillez localiser l'observation">
313
											Géolocalisation
314
										</label>
315
									</div>
316
									<div class="span8 droite">
317
										<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
318
											<div class="control-group">
319
												<label for="carte-recherche">Rechercher</label>
320
												<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
321
													title="Permet de centrer la carte sur le lieu recherché."
322
													placeholder="Centrer la carte sur un lieu..."/>
323
											</div>
324
										</form>
325
									</div>
326
								</div>
327
								<div class="row-fluid">
328
									<div class="span12">
329
										<div id="map-canvas" class="has-tooltip"
330
											title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
331
												représentant votre station ou bien le glisser-déposer sur
332
												le lieu souhaité."></div>
333
									</div>
334
								</div>
335
								<div class="row-fluid">
336
									<div id="info-altitude" class="span5">
337
										<span for="marqueur-altitude">Altitude : </span>
338
										<span id="marqueur-altitude"><span id="altitude"></span> m</span>
339
									</div>
340
 
341
									<div id="info-commune" class="span7">
342
										<span for="marqueur-commune">Commune : </span>
343
										<span id="marqueur-commune">
344
											<span id="commune-nom" class="commune-info"></span>
345
											(<span id="commune-code-insee" class="commune-info has-tooltip"
346
												title="Code INSEE de la commune"></span>)
347
										</span>
348
									</div>
349
								</div>
350
							</div>
351
							<div class="span6">
352
								<form id="form-station" action="#" enctype="multipart/form-data" autocomplete="on">
2360 jpm 353
									<div class="row-fluid">
2366 jpm 354
										<div class="span12 control-group has-tooltip"
355
											title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
356
											<label class="control-label">
357
												<strong class="obligatoire">*</strong>
358
												Lieu-dit
359
												<input type="text" id="lieudit" name="lieudit"/>
360
											</label>
2360 jpm 361
										</div>
362
									</div>
2366 jpm 363
 
2360 jpm 364
									<div class="row-fluid">
2366 jpm 365
										<div class="span12 control-group has-tooltip"
366
											title="Sélectionnez une ou plusieurs situations correspondant au site.">
367
											<label class="span2 control-label">
368
												Situation(s)
2360 jpm 369
											</label>
2366 jpm 370
											<div id="milieux-controls" class="controls">
371
												<div class="input-prepend">
372
													<div class="btn-group">
373
														<button class="btn dropdown-toggle" data-toggle="dropdown">
374
															<i class="icon-globe"></i>
375
															Sélectionner une ou plusieurs situations
376
															<span class="caret"></span>
377
														</button>
378
														<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
379
															<li>
380
																<label class="checkbox">
381
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="séparation de parcelle"/>
382
																	Séparation de parcelle
383
																</label>
384
															</li>
385
															<li>
386
																<label class="checkbox">
387
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="proximité de bâtiment"/>
388
																	Proximité de bâtiment
389
																</label>
390
															</li>
391
															<li>
392
																<label class="checkbox">
393
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="plein champ"/>
394
																	Plein champ
395
																</label>
396
															</li>
397
															<li>
398
																<label class="checkbox">
399
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="jardin de particulier"/>
400
																	Jardin de particulier
401
																</label>
402
															</li>
403
															<li>
404
																<label class="checkbox">
405
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de cours d'eau"/>
406
																	Bord de cours d'eau
407
																</label>
408
															</li>
409
															<li>
410
																<label class="checkbox">
411
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="bord de chemin"/>
412
																	Bord de chemin
413
																</label>
414
															</li>
415
															<li>
416
																<label class="checkbox">
417
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="intégré à une haie"/>
418
																	Intégré à une haie
419
																</label>
420
															</li>
421
															<li>
422
																<label class="checkbox">
423
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="en forêt"/>
424
																	En forêt
425
																</label>
426
															</li>
427
															<li>
428
																<label class="checkbox">
429
																	<input name="milieux[]" class="cb-milieux" type="checkbox" value="en zone humide"/>
430
																	En zone humide
431
																</label>
432
															</li>
433
														</ul>
434
													</div>
2360 jpm 435
												</div>
2366 jpm 436
											</div>
2360 jpm 437
										</div>
438
									</div>
2366 jpm 439
 
2360 jpm 440
									<div class="row-fluid">
2366 jpm 441
										<label class="span12 control-label">
442
											<a href="#" class="afficher-coord btn">Afficher les coordonnées (WGS 84 et Lambert 93)</a>
443
											<a href="#" class="afficher-coord btn" style="display:none;">Cacher les coordonnées (WGS 84 et Lambert 93)</a>
2360 jpm 444
										</label>
445
									</div>
2366 jpm 446
									<div id="coordonnees-geo" class="well" style="display:none;">
2360 jpm 447
										<div class="row-fluid">
2366 jpm 448
											<div id="coord-lat" class="span4">
449
												<label>Latitude
450
													<input id="latitude" class="input-mini" name="latitude" type="text"
451
														title="Latitude (WGS 84)" value=""/>
2360 jpm 452
												</label>
453
											</div>
2366 jpm 454
											<div id="coord-lng" class="span4">
455
												<label>Longitude
456
													<input id="longitude" class="input-mini" name="longitude" type="text"
457
														title="Longitude (WGS 84)" value=""/>
2360 jpm 458
												</label>
459
											</div>
2366 jpm 460
											<div class="span1">
461
												<input id="geolocaliser" type="button" value="Voir sur la carte"
462
													class="btn has-tooltip"
463
													title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
464
											</div>
2360 jpm 465
										</div>
2366 jpm 466
										<div class="row-fluid form-inline">
467
											<div id="coord-l93-x" class="span4">
468
												<label >X Lambert 93
469
													<input id="l93-x" disabled type="text" class="input-mini obs-chp-etendu"
470
															name="coordonneeLambert93X"
471
															data-label="Lambert 93 X"
472
															value=""/>
2360 jpm 473
												</label>
474
											</div>
2366 jpm 475
											<div id="coord-l93-y" class="span4">
476
												<label>Y Lambert 93
477
													<input id="l93-y" disabled type="text" class="input-mini obs-chp-etendu"
478
															name="coordonneeLambert93Y"
479
															data-label="Lambert 93 Y"
480
															value=""/>
481
												</label>
482
											</div>
2360 jpm 483
										</div>
2366 jpm 484
									</div>
485
								</form>
486
							</div>
487
						</div>
2360 jpm 488
 
2366 jpm 489
						<div class="row-fluid">
490
							<div class="span6">
491
								<form id="form-obs" class="form-horizontal" action="#" autocomplete="on">
492
									<h2>Arbre observé</h2>
493
									<input id="referentiel" type="hidden" value="bdtfx" />
2360 jpm 494
 
2366 jpm 495
									<div class="row-fluid">
496
										<div class="span12 control-group has-tooltip"
497
												title="Vous pouvez cliquer sur l'icône de calendrier pour
498
													sélectionner une date dans un calendrier.">
499
											<label for="date"class="control-label"  title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
500
												<strong class="obligatoire">*</strong>
501
												Date du relevé
502
											</label>
503
											<div class="controls">
504
												<div class="input-prepend">
505
													<span id="date-icone" class="add-on"></span>
506
													<input id="date" name="date" type="text" placeholder="jj/mm/aaaa" />
507
												</div>
2360 jpm 508
											</div>
509
										</div>
2366 jpm 510
									</div>
2360 jpm 511
 
2366 jpm 512
									<div class="row-fluid">
513
										<div class="span12">
514
											<div id="taxon-liste-input-groupe" class="control-group has-tooltip"
515
												title="Sélectionnez une espèce dans la liste déroulante par son nom latin
516
												ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
517
												<label for="taxon-liste" class="control-label" title="Choisissez l'espèce rencontrée.">
518
													<strong class="obligatoire">*</strong>
519
													Espèces
520
												</label>
521
												<div class="controls">
522
													<div class="input-prepend ">
523
														<span class="add-on">
524
															<i class="icon-leaf"></i>
525
														</span>
2360 jpm 526
 
2366 jpm 527
														<select id="taxon-liste" name="taxon-liste">
528
															<option value="" selected>Sélectionner une espèce</option>
529
 
530
															<optgroup id="taxon-liste-noms">
531
																<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
532
																	<option
533
																		class="<?=$taxon['nom_type'] ?>"
534
																		value="<?=$taxon['num_nom'] ?>"
535
																		title="<?=$taxon['nom_title'] ?>"
536
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
537
																		>
538
																		<?=$taxon['nom_a_afficher']?>
539
																	</option>
540
																<?php endforeach; ?>
541
															</optgroup>
542
															<optgroup id="taxon-liste-special">
543
																<?php foreach ($taxons['speciaux'] as $taxon) :?>
544
																	<option
545
																		class="<?=$taxon['nom_type'] ?>"
546
																		value="<?=$taxon['num_nom'] ?>"
547
																		title="<?=$taxon['nom_title'] ?>"
548
																		data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
549
																		>
550
																		<?=$taxon['nom_a_afficher']?>
551
																	</option>
552
																<?php endforeach; ?>
553
																<option value="?">Autre espèce</option>
554
															</optgroup>
555
														</select>
556
													</div>
2360 jpm 557
												</div>
558
											</div>
559
										</div>
2366 jpm 560
									</div>
561
									<div id="taxon-input-groupe" class="row-fluid hidden">
562
										<div class="span12">
563
											<div class="control-group has-tooltip"
564
												title="Sélectionnez une espèce dans la liste déroulante pour lier
565
													votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
566
													un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
567
												<label for="taxon" class="control-label" title="Choisissez l'espèce rencontrée.">
568
													<strong class="obligatoire">*</strong>
569
													Autre espèce
570
												</label>
571
												<div class="controls">
572
													<input id="taxon" name="taxon" type="text" class="span12"
573
														placeholder="Autre espèce (ou indication sur la plante)"
574
														value="<?= $nom_sci_espece_defaut; ?>" />
575
												</div>
576
											</div>
577
										</div>
578
									</div>
2360 jpm 579
 
580
									<div class="row-fluid">
2366 jpm 581
										<div class="span12 control-group has-tooltip"
582
												title="Indiquez la certitude de votre détermination.">
583
											<label for="certitude" class="control-label">
584
												<strong class="obligatoire">*</strong>
585
												Identification de l'arbre
2360 jpm 586
											</label>
2366 jpm 587
											<div class="controls">
588
												<select id="certitude" class="span12" name="certitude">
589
													<option selected value="">Sélectionnez une certitude</option>
590
													<option value="certaine">Certaine</option>
591
													<option value="douteuse">Douteuse</option>
592
													<option value="A déterminer">À déterminer</option>
593
												</select>
594
											</div>
2360 jpm 595
										</div>
596
									</div>
597
 
598
									<div class="row-fluid">
599
										<div class="span12 control-group has-tooltip"
2366 jpm 600
												title="Indiquez le type de formation de l'arbre ou des arbres têtards.">
601
											<label for="formation" class="control-label">
2360 jpm 602
												<strong class="obligatoire">*</strong>
2366 jpm 603
												Formation
604
											</label>
605
											<div class="controls">
606
												<select id="formation" class="span12 obs-chp-etendu"
607
														name="arbreTetardFormation"
608
														data-label="Type de formation">
609
													<option selected value="">Sélectionnez une formation</option>
610
													<option value="alignement">Arbres d'alignement</option>
611
													<option value="isolé">Arbre isolé</option>
612
												</select>
613
											</div>
614
										</div>
615
									</div>
616
									<div id="aligne-nbre-groupe" class="row-fluid form-inline hidden">
617
										<div class="span12">
618
											<div class="control-group has-tooltip"
619
												title="Indiquez le nombre d'arbres têtards alignés." >
620
												<label for="aligne-nbre" class="control-label">
621
													<strong class="obligatoire">*</strong>
622
													Nombre d'arbres
623
												</label>
624
												<div class="controls">
625
													<input id="aligne-nbre" type="number" class="span2 obs-chp-etendu"
626
														name="arbreTetardAligneNbre"
627
														data-label="Nombre d'arbres d'alignement"
628
														value="" />
2360 jpm 629
												</div>
2366 jpm 630
											</div>
631
										</div>
632
									</div>
633
 
634
									<div class="row-fluid">
635
										<div class="span12 control-group has-tooltip"
636
												title="Indiquez si des cavités sont présentes sur l'arbre.">
637
											<label for="cavites" class="control-label">
638
												Cavités
2360 jpm 639
											</label>
2366 jpm 640
											<div class="controls">
641
												<select id="cavites" class="span12 obs-chp-etendu"
642
														name="arbreTetardPresenceCavite"
643
														data-label="Présence de cavités">
644
													<option selected value="">Sélectionnez la présence de cavités</option>
645
													<option value="aucune">Aucune</option>
646
													<option value="petite">Oui, petite(s)</option>
647
													<option value="grande">Oui, grande(s)</option>
648
												</select>
649
											</div>
2360 jpm 650
										</div>
651
									</div>
652
 
653
									<div class="row-fluid">
654
										<div class="span12 control-group has-tooltip"
2366 jpm 655
												title="Indiquez la circonférence à 1m du sol.">
656
											<label for="circonference" class="control-label">
657
												Circonférence
658
											</label>
659
											<div class="controls">
660
												<select id="circonference" class="span12 obs-chp-etendu"
661
														name="arbreTetardCirconferenceA1m"
662
														data-label="Circonférence à 1 m du sol">
663
													<option selected value="">Sélectionnez la circonférence (à 1m du sol)</option>
664
													<option value="0-0,5">0 à 0,5m</option>
665
													<option value="0,5-2">0,5 à 2m</option>
666
													<option value="2-3">2 à 3m</option>
667
													<option value="+3">&gt; à 3m</option>
2360 jpm 668
												</select>
2366 jpm 669
											</div>
670
										</div>
671
									</div>
672
 
673
									<div class="row-fluid">
674
										<div class="span12 control-group has-tooltip"
675
												title="Indiquez la hauteur de la tête.">
676
											<label for="hauteur-tete" class="control-label">
677
												Hauteur de la tête
2360 jpm 678
											</label>
2366 jpm 679
											<div class="controls">
680
												<select id="hauteur-tete" class="span12 obs-chp-etendu"
681
														name="arbreTetardHauteurTete"
682
														data-label="Hauteur de la tête">
683
													<option selected value="">Sélectionnez la hauteur</option>
684
													<option value="0-1,5">0 à 1,5m</option>
685
													<option value="1,5-3">1,5 à 3m</option>
686
													<option value="+3">&gt; à 3m</option>
687
												</select>
688
											</div>
2360 jpm 689
										</div>
690
									</div>
691
 
692
									<div class="row-fluid">
693
										<div class="span12">
2366 jpm 694
											<label for="presence-sp">Espèces présentes sur l'arbre (végétale ou animale)</label>
2360 jpm 695
											<div>
2366 jpm 696
												<textarea id="presence-sp" class="span12 obs-chp-etendu" rows="7"
697
													name="arbreTetardPresenceSp"
698
													data-label="Présence d'espèces sur l'arbre"
699
													placeholder="Vous pouvez éventuellement indiquez des informations du type : Champignons ; Lierre ; Mousses ; Lichens ; Autre plante... Larve d'insecte saproxylique ; Galerie dans le bois ; Pelote de réjection ; Nid ; Crotte ; Trou"></textarea>
2360 jpm 700
											</div>
701
										</div>
702
									</div>
2366 jpm 703
								</form>
704
							</div>
705
							<div class="span6">
706
								<form id="form-gestion" class="form-horizontal" action="#" autocomplete="on">
707
									<h2>Gestion de l'arbre</h2>
2360 jpm 708
 
2366 jpm 709
									<div class="row-fluid">
710
										<div class="span12 control-group has-tooltip"
711
												title="Indiquez le type de taille de l'arbre.">
712
											<label for="taille-type" class="control-label">
713
												Type de taille
714
											</label>
715
											<div class="controls">
716
												<select id="taille-type" class="span12 obs-chp-etendu"
717
														name="arbreTetardTailleType"
718
														data-label="Type de taille">
719
													<option selected value="">Sélectionnez le type de taille</option>
720
													<option value="trogne">Trogne</option>
721
													<option value="tête de chat">Tête de chat</option>
722
													<option value="émonde">Émonde</option>
723
													<option value="autre">Autre, précisez le type de taille dans les notes</option>
724
												</select>
725
											</div>
726
										</div>
727
									</div>
728
 
729
									<div class="row-fluid">
730
										<div class="span12 control-group has-tooltip"
731
												title="Indiquez le type d’entretien de l'arbre, en précisant la périodicité des coupes.">
732
											<label for="entretient" class="control-label">
733
												Type d'entretient
734
											</label>
735
											<div class="controls">
736
												<select id="entretient" class="span12 obs-chp-etendu"
737
														name="arbreTetardEntretientCoupe"
738
														data-label="Type d'entretient">
739
													<option selected value="">Sélectionnez la périodicité des coupes d'entretient</option>
740
													<option value="récente">Coupe récente (< 5 ans ; branches de diamètre < 10cm)</option>
741
													<option value="ancienne">Ancienne (5 à 10 ans ; diamètre des branches entre 10 et 15 cm )</option>
742
													<option value="non entretenu">Non entretenu ( diamètre des branches > 15 cm)</option>
743
												</select>
744
											</div>
745
										</div>
746
									</div>
747
 
748
									<div class="row-fluid">
749
										<div class="span12 control-group has-tooltip"
750
												title="Indiquez l'état sanitaire de l'arbre têtard.">
751
											<label for="etat-sanitaire" class="control-label">
752
												État sanitaire
753
											</label>
754
											<div class="controls">
755
												<select id="etat-sanitaire" class="span12 obs-chp-etendu"
756
														name="arbreTetardEtatSanitaire"
757
														data-label="État sanitaire">
758
													<option selected value="">Sélectionnez l'état sanitaire</option>
759
													<option value="mort">Mort</option>
760
													<option value="dépérissant">Dépérissant</option>
761
													<option value="bon">Bon état général</option>
762
												</select>
763
											</div>
764
										</div>
765
									</div>
2360 jpm 766
								</form>
2366 jpm 767
 
768
								<div>
769
									<h2>Notes</h2>
770
									<textarea id="notes" form="form-obs" class="span12" rows="7" name="notes"
771
										placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation"></textarea>
772
								</div>
773
 
2360 jpm 774
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=<?=isset($_GET['projet']) ? $_GET['projet'] : 'defaut'?>"
775
									method="post" enctype="multipart/form-data">
2366 jpm 776
									<h2>Image(s) de l'arbre</h2>
2360 jpm 777
									<strong>Ajouter une image</strong>
778
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
779
									<div id ="photos-conteneur">
780
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
781
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
782
										<div id="miniatures">
783
										</div>
784
										<p class="miniature-msg" class="span12">&nbsp;</p>
785
									</div>
786
								</form>
787
							</div>
2366 jpm 788
						</div>
789
 
790
						<div class="row-fluid">
791
 
792
						</div>
793
 
794
						<div class="row-fluid">
795
							<div class="span12 centre has-tooltip"
796
								title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
797
									ajouter votre observation à la liste à transmettre.">
798
								<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
799
									Créer
800
								</button>
2360 jpm 801
							</div>
802
						</div>
803
					</div>
804
				</div>
805
			</div>
806
 
807
			<!-- Messages d'erreur du formulaire-->
808
			<div class="row">
809
				<div class="zone-alerte span6 offset3">
810
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
811
						<a class="close">×</a>
812
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
813
						<p>
814
							Vous venez d'ajouter votre 10ème observation.<br/>
815
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
816
						</p>
817
					</div>
818
				</div>
819
				<div class="zone-alerte span6 offset3">
820
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
821
						<a class="close">×</a>
822
						<h4 class="alert-heading">Information : champs en erreur</h4>
823
						<p>
824
							Certains champs du formulaire sont mal remplis.<br/>
825
							Veuillez vérifier vos données.
826
						</p>
827
					</div>
828
				</div>
829
			</div>
830
 
831
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
832
			<div id="zone-liste-obs" class="row-fluid">
833
				<div class="span12">
834
					<div class="well">
835
						<div class="row-fluid">
836
							<div class="span8">
837
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
838
							</div>
839
							<div class="span4 droite">
840
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
841
									type="button" disabled="disabled"
842
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
843
									Transmettre
844
								</button>
845
							</div>
846
						</div>
847
						<div id="liste-obs" ></div>
848
						<div class="row">
849
							<div class="zone-alerte span6 offset3">
850
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
851
									<a class="close">×</a>
852
									<h4 class="alert-heading">Attention : aucune observation</h4>
853
									<p>Veuillez saisir des observations pour les transmettres.</p>
854
								</div>
855
 
856
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
857
									<a class="close">×</a>
858
									<h4 class="alert-heading">Information : transmission des observations</h4>
859
									<div class="alert-txt"></div>
860
								</div>
861
 
862
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
863
									<a class="close">×</a>
864
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
865
									<div class="alert-txt"></div>
866
								</div>
867
							</div>
868
						</div>
869
 
870
					</div>
871
				</div>
872
			</div>
873
 
874
			<footer class="row-fluid">
875
				<p class="span12">&copy; Tela Botanica 2014</p>
876
			</footer>
877
 
878
			<!-- Fenêtres modales -->
879
			<div id="chargement" class="modal-fenetre" style="display:none;">
880
				<div id="chargement-centrage" class="modal-contenu">
881
					<div class="progress progress-striped active">
882
						<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
883
							<span class="sr-only">0/10 observations transmises</span>
884
						</div>
885
					</div>
886
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
887
						Transfert des observations en cours...<br />
888
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
889
						d'observations à transférer.
890
					</p>
891
				</div>
892
			</div>
893
 
894
			<!-- Templates HTML -->
895
			<div id="tpl-transmission-ok" style="display:none;">
896
				<p class="msg">
897
					Vos observations ont bien été transmises.<br />
898
					Elles sont désormais consultables à travers les différents outils de visualisation
899
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
900
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
901
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
902
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
903
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
904
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
905
					N'oubliez pas qu'il est nécessaire de
906
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
907
					au préalable, si ce n'est pas déjà fait.
908
				</p>
909
			</div>
910
			<div id="tpl-transmission-ko" style="display:none;">
911
				<p class="msg">
912
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
913
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
914
					et transmettre les suivantes.<br />
915
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
916
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
917
					<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
918
								  target="_blank"
919
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
920
								  le formulaire de signalement d'erreurs</a>.
921
				</p>
922
			</div>
923
 
924
			<!-- Fenêtres modales -->
925
			<div id="projet-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
926
				 aria-labelledby="projet-description-titre" aria-hidden="true">
927
				<div class="modal-header">
928
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
929
					<h1 id="projet-description-titre">Les arbres têtards</h1>
930
				</div>
931
				<div class="modal-body">
932
 
933
				</div>
934
				<div class="modal-footer dsc-clean">
935
					<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
936
				</div>
937
			</div>
938
 
939
			<!-- Stats : Google Analytics-->
940
			<script>
941
				//<![CDATA[
942
				var _gaq = _gaq || [];
943
				_gaq.push(['_setAccount', 'UA-20092557-1']);
944
				_gaq.push(['_trackPageview']);
945
 
946
				(function() {
947
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
948
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
949
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
950
				})();
951
				//]]>
952
			</script>
953
		</div>
954
	</body>
955
</html>