Subversion Repositories eFlore/Applications.cel

Rev

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
 
42
		<!-- Javascript : appli saisie -->
43
		<script>
44
		//<![CDATA[
45
			// Précharger le formulaire avec les infos d'une observation
46
			var OBS_ID = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
47
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
48
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
49
 
50
			// Mot-clé du widget/projet
51
			var TAG_PROJET = "WidgetSaisie,ArbresTetards";
52
			// Mots-clés à ajouter aux images
53
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
54
			var SEPARATION_TAG_IMG = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
55
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + SEPARATION_TAG_IMG + TAG_IMG" : 'TAG_IMG' ?>;
56
			// Mots-clés à ajouter aux observations
57
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
58
			var SEPARATION_TAG_OBS = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
59
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + SEPARATION_TAG_OBS + TAG_OBS" : 'TAG_OBS' ?>;
60
 
61
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
62
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
63
			// Nom du référentiel utilisé pour les nom scientifiques.
64
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
65
 
66
			// Indication de la présence d'une espèce imposée
67
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
68
			// Tableau d'informations sur l'espèce imposée
69
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
70
 
71
			// Indication des version utilisées de chaque référentiel
72
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
73
			// Nombre d'élément dans les listes d'auto-complétion
74
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
75
			// URL du web service permettant l'auto-complétion des noms scientifiques.
76
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL_TPL = "<?=$url_ws_autocompletion_ns_tpl?>?"+
77
					"masque={masque}&"+
78
					"recherche=etendue&"+
79
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
80
					"retour.tri=alpharet&"+ // tri "à la CeL"
81
					"ns.structure=au"+"&"+
82
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
83
 
84
			// Nombre d'observations max autorisé avant transmission
85
			var OBS_MAX_NBRE = 10;
86
			// Durée d'affichage en milliseconde des messages d'informations
87
			var DUREE_MESSAGE = 15000;
88
 
89
			// URL du web service permettant de récupérer les infos d'une observation du CEL.
90
			var SERVICE_OBS_URL = "<?=$url_ws_obs?>";
91
			// URL du web service réalisant l'insertion des données dans la base du CEL.
92
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
93
			// Squelette d'URL du web service de l'annuaire.
94
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
95
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
96
			var SERVICE_NOM_COMMUNE_URL = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
97
 
98
			// URL du marqueur à utiliser dans la carte Google Map
99
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/marqueurs/epingle.png";
100
			// URL de l'icône du chargement en cours
101
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement.gif";
102
			// URL de l'icône du chargement en cours d'une image
103
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/chargement-image.gif";
104
			// URL de l'icône du calendrier
105
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/calendrier.png";
106
			// URL de l'icône du calendrier
107
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/arbres-tetards/img/icones/pasdephoto.png";
108
 
109
		//]]>
110
		</script>
111
		<script src="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/js/arbres-tetards.js"></script>
112
 
113
		<!-- CSS -->
114
		<link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" />
115
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" />
116
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" />
117
		<link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/modal/2.2.5/css/bootstrap-modal.css" />
118
		<link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/arbres-tetards/css/<?=isset($_GET['style']) ? $_GET['style'] : 'arbres-tetards'?>.css" />
119
 
120
	</head>
121
 
122
	<body data-spy="scroll">
123
		<div class="container">
124
			<div class="row-fluid page-header">
125
				<div>
126
					<h1>
127
						<img id="logo-titre" class="span1" src="<?=$url_base?>/modules/saisie/squelettes/arbres-tetards/img/logos/gentiana.png" alt="Gentiana" />
128
						Arbres têtards de l'Isère
129
					</h1>
130
				</div>
131
			</div>
132
			<div class="row-fluid">
133
				<div class="span6">
134
					<div class="row-fluid">
135
						<div id="intro" class ="well collapse in">
136
							<a class="fermer" data-toggle="collapse" data-target="#intro">
137
								<h3 class="titre">
138
									Le projet
139
									<i class="icone icon-plus-sign"></i>
140
								</h3>
141
							</a>
142
							<p>
143
								Les arbres têtards (trognes), sont des arbres taillés exploités depuis des siècles
144
								pour leurs branches ou leurs feuilles.
145
							</p>
146
							<p>
147
								La taille consiste à couper la tête de l’arbre à environ 2m du sol. Les branches
148
								repoussent en couronne au sommet du tronc et sont taillées au même endroit tous
149
								les 5 à 12 ans. De nombreuses espèces de feuillus peuvent être taillées en têtard,
150
								les plus fréquentes sont les saules, les frênes, les peupliers et aussi les muriers.
151
							</p>
152
							<p>
153
								Ces arbres, témoins d’anciennes pratiques agricoles, embellissent le paysage,
154
								retiennent les berges, participent au maintien des zones humides et abritent de
155
								nombreuses espèces végétales et animales dont beaucoup sont menacées.<br />
156
								Victimes de la modernisation de l’agriculture et de l’urbanisation des zones
157
								rurales, ces arbres remarquables disparaissent !
158
							</p>
159
							<p>
160
								C’est pourquoi <a href="http://www.gentiana.org/" target="_blank">Gentiana</a>
161
								a lancé un programme de suivi, de sauvegarde et de restauration des arbres têtards
162
								en Isère. Ce projet a pour but de mieux faire connaître ces arbres, de les entretenir,
163
								de restaurer les arbres à l’abandon et d’en replanter.
164
							</p>
165
							<p>
166
								La première chose à faire est un état des lieux des arbres têtards sur tout le
167
								département de l’Isère.<br />
168
								<strong>Nous avons besoin de vous pour améliorer notre connaissance !</strong><br />
169
								Vous pouvez nous aider en nous signalant les arbres têtards que vous connaissez
170
								à l’aide du formulaire suivant.
171
							</p>
172
						</div>
173
					</div>
174
				</div>
175
 
176
				<div class="span6">
177
					<div class="row-fluid">
178
						<div id="aide" class="well collapse in">
179
							<a class="fermer" data-toggle="collapse" data-target="#aide">
180
								<h3 class="titre">
181
									Aide
182
									<i class="icone icon-plus-sign"></i>
183
								</h3>
184
							</a>
185
							<p>
186
								Cet outil vous permet de partager simplement vos observations avec
187
								<a href="http://www.gentiana.org/" target="_blank">Gentiana</a> et le
188
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
189
								(sous <a href="http://www.tela-botanica.org/page:licence?langue=fr">licence CC-BY-SA</a>).
190
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
191
								<a href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
192
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
193
								Elles apparaissent immédiatement sur les
194
								<a href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
195
							</p>
196
							<p class="discretion">
197
								Pour toute question ou remarque,
198
								<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
199
									target="_blank"
200
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
201
									contactez-nous</a>
202
							</p>
203
							<p class="discretion">
204
								Une fois familiarisé avec l'interface vous pouvez cliquer sur ce bouton pour désactiver l'aide.
205
								<button id="btn-aide" class="btn btn-mini btn-success">
206
									<span class="icon-question-sign icon-white"></span>
207
									<span id="btn-aide-txt" >Désactiver l'aide</span>
208
								</button>
209
							</p>
210
						</div>
211
					</div>
212
				</div>
213
			</div>
214
			<div class="row-fluid">
215
				<div class="well">
216
					<h2>Observateur</h2>
217
					<form id="form-observateur" action="#" class="" autocomplete="on">
218
						<div class="row-fluid">
219
							<div class="span6 control-group has-tooltip" data-placement="right"
220
								title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
221
									Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
222
									ultérieurement. Des informations complémentaires vont vous être
223
									demandées : prénom et nom.">
224
								<label for="courriel"  class="control-label"
225
									title="Veuillez saisir votre adresse courriel.">
226
									<strong class="obligatoire">*</strong> Courriel
227
								</label>
228
								<div class="input-prepend">
229
									<span class="add-on">
230
										<i class="icon-envelope"></i>
231
									</span>
232
									<input id="courriel" name="courriel" type="text"/>
233
									<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
234
								</div>
235
							</div>
236
							<div id="zone-courriel-confirmation" class="span6 control-group hidden">
237
								<label for="courriel_confirmation" class="control-label"
238
									title="Veuillez saisir confirmer le courriel.">
239
									<strong class="obligatoire">*</strong> Courriel (confirmation)
240
								</label>
241
								<div class="input-prepend">
242
									<span class="add-on">
243
										<i class="icon-envelope"></i>
244
									</span>
245
									<input id="courriel_confirmation" name="courriel_confirmation" type="text"/>
246
								</div>
247
							</div>
248
						</div>
249
						<div id="zone-prenom-nom" class="row-fluid hidden">
250
							<div class="span6">
251
								<label for="prenom">Prénom</label>
252
								<div>
253
									<input id="prenom" name="prenom" type="text"/>
254
								</div>
255
							</div>
256
							<div class="span6">
257
								<label for="nom">Nom</label>
258
								<div>
259
									<input id="nom" name="nom"  type="text"/>
260
								</div>
261
							</div>
262
						</div>
263
					</form>
264
				</div>
265
			</div>
266
			<!-- Messages d'erreur du formulaire-->
267
			<div class="row">
268
				<div class="zone-alerte span6 offset3">
269
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
270
						<a class="close">×</a>
271
						<h4 class="alert-heading">Information : copier/coller</h4>
272
						<p>
273
							Merci de ne pas copier/coller votre courriel.<br/>
274
							La double saisie permet de vérifier l'absence d'erreurs.
275
						</p>
276
					</div>
277
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
278
						<a class="close">×</a>
279
						<h4 class="alert-heading">Information : courriel introuvable</h4>
280
						<p>
281
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
282
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
283
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
284
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
285
						</p>
286
					</div>
287
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
288
						<a class="close">×</a>
289
						<h4 class="alert-heading">Information sur Google Map</h4>
290
						<div class="contenu"></div>
291
					</div>
292
				</div>
293
			</div>
294
			<div class="row-fluid">
295
				<div class="span12">
296
					<div class="well">
297
						<div class="row-fluid">
298
							<div class="span6">
299
								<div>
300
									<div class="row-fluid">
301
										<div class="span12">
302
											<h2>Lieu du relevé</h2>
303
										</div>
304
									</div>
305
									<div class="row-fluid">
306
										<div class="span4">
307
											<label for="map_canvas" title="Veuillez localiser l'observation">
308
												Géolocalisation
309
											</label>
310
										</div>
311
										<div class="span8 droite">
312
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
313
												<div class="control-group">
314
													<label for="carte-recherche">Rechercher</label>
315
													<input id="carte-recherche" class="search-query has-tooltip" type="text" value=""
316
														title="Permet de centrer la carte sur le lieu recherché."
317
														placeholder="Centrer la carte sur un lieu..."/>
318
												</div>
319
											</form>
320
										</div>
321
									</div>
322
									<div class="row-fluid">
323
										<div class="span12">
324
											<div id="map-canvas" class="has-tooltip"
325
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
326
													représentant votre station ou bien le glisser-déposer sur
327
													le lieu souhaité."></div>
328
										</div>
329
									</div>
330
									<div class="row-fluid">
331
										<label class="span7 control-label">
332
											<a href="#" class="afficher-coord">Afficher</a>
333
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
334
											les coordonnées géographiques
335
											<span id="lat-lon-info" class="info has-tooltip"
336
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
337
												(WGS84)
338
											</span>
339
										</label>
340
										<div id="info-commune" class="span5">
341
											<span for="marqueur-commune">Commune : </span>
342
											<span id="marqueur-commune">
343
												<span id="commune-nom" class="commune-info"></span>
344
												(<span id="commune-code-insee" class="commune-info has-tooltip"
345
								    				title="Code INSEE de la commune"></span>)
346
											</span>
347
										</div>
348
									</div>
349
									<form id="form-station" action="#" enctype="multipart/form-data" autocomplete="on">
350
										<div id="coordonnees-geo" class="well" style="display:none;">
351
											<div class="row-fluid form-inline">
352
												<div id="coord-lat" class="span4">
353
													<label for="latitude">Latitude</label>
354
													<div>
355
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
356
													</div>
357
												</div>
358
												<div id="coord-lng" class="span4">
359
													<label for="longitude">Longitude</label>
360
													<div>
361
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
362
													</div>
363
												</div>
364
												<div class="span1">
365
													<div>
366
														<input id="geolocaliser" type="button" value="Voir sur la carte"
367
															class="has-tooltip"
368
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
369
													</div>
370
												</div>
371
									    	</div>
372
										</div>
373
										<div class="row-fluid">
374
											<div class="span6 control-group has-tooltip"
375
												title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
376
												<label class="control-label">
377
													Lieu-dit
378
													<input type="text" id="lieudit" class="" name="lieudit"/>
379
												</label>
380
											</div>
381
											<div class="span6 control-group has-tooltip"
382
												title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
383
												<label class="control-label">
384
													Station
385
													<input type="text" id="station" class="" name="station"/>
386
												</label>
387
											</div>
388
										</div>
389
 
390
										<div class="row-fluid">
391
											<div class="span12 control-group" >
392
												<label class="span12 control-label">
393
													<strong class="obligatoire">*</strong>
394
													Milieu
395
													<select id="milieu" class="span8" name="milieu">
396
														<option selected value="">Sélectionnez un milieu</option>
397
														<?php foreach ($milieux as $milieu => $description) : ?>
398
														<option value="<?=strtolower($milieu)?>">
399
															<?=$milieu?> <?=($description != '') ? "($description)" : '' ?>
400
														</option>
401
														<?php endforeach; ?>
402
														<option value="">Autre : préciser dans les commentaires.</option>
403
													</select>
404
												</label>
405
											</div>
406
										</div>
407
 
408
 
409
										<div class="row-fluid">
410
											<div class="span12 control-group has-tooltip"
411
												title="Indiquez la surface en m² de la station au sein de laquelle la plante est présente.">
412
												<label class="span12 control-label">
413
													<strong class="obligatoire">*</strong>
414
													Surface de la station
415
													<select id="station-surface" class="span8 obs-chp-etendu" name="stationSurface"
416
															data-label="Surface couverte dans la station">
417
														<option selected value="">Sélectionnez une surface</option>
418
														<option value="0-5">&lt;5 m²</option>
419
														<option value="5-10">5-10 m²</option>
420
														<option value="10-50">10-50 m²</option>
421
														<option value="50-100">50-100 m²</option>
422
														<option value="100-500">100-500 m²</option>
423
														<option value="500-1000">500-1000 m²</option>
424
														<option value="1000+">&gt; 1000 m²</option>
425
													</select>
426
												</label>
427
											</div>
428
										</div>
429
 
430
 
431
										<div class="row-fluid">
432
											<div class="span12">
433
												<label for="milieuCommentaire">Commentaires sur le milieu</label>
434
												<div>
435
													<textarea id="milieu-commentaire" class="span12 obs-chp-etendu" rows="7"
436
														name="milieuCommentaire" data-label="Commentaires sur le milieu"
437
														placeholder="Vous pouvez éventuellement ajouter des informations complémentaires concernant le milieu"></textarea>
438
												</div>
439
											</div>
440
										</div>
441
									</form>
442
								</div>
443
							</div>
444
							<div class="span6">
445
								<form id="form-obs" action="#" autocomplete="on">
446
									<h2>Observation</h2>
447
									<input id="referentiel" type="hidden" value="bdtfx" />
448
 
449
									<div class="row-fluid">
450
										<div id="taxon-input-groupe" class="span8 has-tooltip"
451
											title="Sélectionnez une espèce dans la liste déroulante pour lier
452
												votre nom au référentiel selectionné. Si vous
453
												le désirez vous pouvez aussi saisir un nom absent du référentiel
454
												(Ex. : 'fleur violette' ou 'viola sinensis???')." >
455
											<label class="span12 control-label">Espèce
456
												<div class="input-prepend">
457
													<span class="add-on"><i class="icon-leaf"></i></span>
458
													<input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
459
												</div>
460
											</label>
461
										</div>
462
									</div>
463
 
464
									<div class="row-fluid">
465
										<div class="span12 control-group has-tooltip"
466
												title="Vous pouvez cliquer sur l'icône de calendrier pour
467
													sélectionner une date dans un calendrier.">
468
											<label class="span12 control-label"  title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
469
												<strong class="obligatoire">*</strong>
470
												Date du relevé
471
												<div class="input-prepend">
472
													<span id="date-icone" class="add-on"></span>
473
													<input id="date" name="date" type="text" placeholder="jj/mm/aaaa" />
474
												</div>
475
											</label>
476
										</div>
477
									</div>
478
 
479
									<div class="row-fluid">
480
										<div class="span12 control-group has-tooltip"
481
												title="Indiquez ici le pourcentage de recouvrement par la plante sur la surface de la station.">
482
											<label class="span12 control-label">
483
												<strong class="obligatoire">*</strong>
484
												Recouvrement par la plante de la surface de la station
485
												<select id="recouvrement" class="span8 obs-chp-etendu" name="recouvrement"
486
														data-label="Recouvrement au sein de la surface couverte dans la station">
487
													<option selected value="">Sélectionnez un recouvrement</option>
488
													<option value="+">&lt;1 %</option>
489
													<option value="1">1-5 %</option>
490
													<option value="2">5-25 %</option>
491
													<option value="3">25-50 %</option>
492
													<option value="4">50-75 %</option>
493
													<option value="5">75-100 %</option>
494
												</select>
495
											</label>
496
										</div>
497
									</div>
498
 
499
									<div class="row-fluid">
500
										<div class="span12">
501
											<label for="notes">Notes</label>
502
											<div>
503
												<textarea id="notes" class="span12" rows="7" name="notes"
504
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
505
											</div>
506
										</div>
507
									</div>
508
 
509
								</form>
510
								<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>?projet=<?=isset($_GET['projet']) ? $_GET['projet'] : 'defaut'?>"
511
									method="post" enctype="multipart/form-data">
512
									<h2>Image(s) de cette plante</h2>
513
									<strong>Ajouter une image</strong>
514
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
515
									<div id ="photos-conteneur">
516
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
517
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
518
										<div id="miniatures">
519
										</div>
520
										<p class="miniature-msg" class="span12">&nbsp;</p>
521
									</div>
522
								</form>
523
							</div>
524
							<div class="row-fluid">
525
								<div class="span12 centre has-tooltip"
526
									title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
527
										ajouter votre observation à la liste à transmettre.">
528
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
529
										Créer
530
									</button>
531
								</div>
532
							</div>
533
						</div>
534
					</div>
535
				</div>
536
			</div>
537
 
538
			<!-- Messages d'erreur du formulaire-->
539
			<div class="row">
540
				<div class="zone-alerte span6 offset3">
541
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
542
						<a class="close">×</a>
543
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
544
						<p>
545
							Vous venez d'ajouter votre 10ème observation.<br/>
546
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
547
						</p>
548
					</div>
549
				</div>
550
				<div class="zone-alerte span6 offset3">
551
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
552
						<a class="close">×</a>
553
						<h4 class="alert-heading">Information : champs en erreur</h4>
554
						<p>
555
							Certains champs du formulaire sont mal remplis.<br/>
556
							Veuillez vérifier vos données.
557
						</p>
558
					</div>
559
				</div>
560
			</div>
561
 
562
			<!-- Affiche le tableau récapitulatif des observations ajoutées -->
563
			<div id="zone-liste-obs" class="row-fluid">
564
				<div class="span12">
565
					<div class="well">
566
						<div class="row-fluid">
567
							<div class="span8">
568
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
569
							</div>
570
							<div class="span4 droite">
571
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
572
									type="button" disabled="disabled"
573
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
574
									Transmettre
575
								</button>
576
							</div>
577
						</div>
578
						<div id="liste-obs" ></div>
579
						<div class="row">
580
							<div class="zone-alerte span6 offset3">
581
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
582
									<a class="close">×</a>
583
									<h4 class="alert-heading">Attention : aucune observation</h4>
584
									<p>Veuillez saisir des observations pour les transmettres.</p>
585
								</div>
586
 
587
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
588
									<a class="close">×</a>
589
									<h4 class="alert-heading">Information : transmission des observations</h4>
590
									<div class="alert-txt"></div>
591
								</div>
592
 
593
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
594
									<a class="close">×</a>
595
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
596
									<div class="alert-txt"></div>
597
								</div>
598
							</div>
599
						</div>
600
 
601
					</div>
602
				</div>
603
			</div>
604
 
605
			<footer class="row-fluid">
606
				<p class="span12">&copy; Tela Botanica 2014</p>
607
			</footer>
608
 
609
			<!-- Fenêtres modales -->
610
			<div id="chargement" class="modal-fenetre" style="display:none;">
611
				<div id="chargement-centrage" class="modal-contenu">
612
					<div class="progress progress-striped active">
613
						<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
614
							<span class="sr-only">0/10 observations transmises</span>
615
						</div>
616
					</div>
617
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
618
						Transfert des observations en cours...<br />
619
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
620
						d'observations à transférer.
621
					</p>
622
				</div>
623
			</div>
624
 
625
			<!-- Templates HTML -->
626
			<div id="tpl-transmission-ok" style="display:none;">
627
				<p class="msg">
628
					Vos observations ont bien été transmises.<br />
629
					Elles sont désormais consultables à travers les différents outils de visualisation
630
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
631
					<a href="http://www.tela-botanica.org/page:cel_galerie">galeries d'images</a>,
632
					<a href="http://www.tela-botanica.org/appli:test:del">identiplante</a>,
633
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
634
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
635
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
636
					N'oubliez pas qu'il est nécessaire de
637
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
638
					au préalable, si ce n'est pas déjà fait.
639
				</p>
640
			</div>
641
			<div id="tpl-transmission-ko" style="display:none;">
642
				<p class="msg">
643
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
644
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
645
					et transmettre les suivantes.<br />
646
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
647
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
648
					<a href="<?= $url_remarques ?>?email=cel_remarques@tela-botanica.org&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
649
								  target="_blank"
650
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
651
								  le formulaire de signalement d'erreurs</a>.
652
				</p>
653
			</div>
654
 
655
			<!-- Fenêtres modales -->
656
			<div id="projet-description" class="modal hide fade modal-fullscreen" tabindex="-1" role="dialog"
657
				 aria-labelledby="projet-description-titre" aria-hidden="true">
658
				<div class="modal-header">
659
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
660
					<h1 id="projet-description-titre">Les arbres têtards</h1>
661
				</div>
662
				<div class="modal-body">
663
 
664
				</div>
665
				<div class="modal-footer dsc-clean">
666
					<button class="btn" data-dismiss="modal" aria-hidden="true">Fermer</button>
667
				</div>
668
			</div>
669
 
670
			<!-- Stats : Google Analytics-->
671
			<script>
672
				//<![CDATA[
673
				var _gaq = _gaq || [];
674
				_gaq.push(['_setAccount', 'UA-20092557-1']);
675
				_gaq.push(['_trackPageview']);
676
 
677
				(function() {
678
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
679
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
680
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
681
				})();
682
				//]]>
683
			</script>
684
		</div>
685
	</body>
686
</html>