Subversion Repositories eFlore/Applications.cel

Rev

Rev 1526 | Rev 1540 | 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">
6
 
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">
13
 
14
		<!-- Favicones -->
1537 jpm 15
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/florileges/img/favicon.ico" />
1526 jpm 16
 
17
		<!-- Javascript : bibliothèques -->
18
		<!-- Google Map v3 -->
19
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
20
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
21
 
22
		<!-- Jquery -->
23
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.9.1/jquery-1.9.1.js"></script>
24
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
25
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/js/jquery-ui-1.10.2.custom.min.js"></script>
26
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/js/jquery.ui.datepicker-fr.min.js"></script>
27
		<!-- Jquery Plugins -->
28
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
29
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/jquery.validate.min.js"></script>
30
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.11.1/messages_fr.js"></script>
31
		<!-- Jquery Form :nécessaire pour l'upload des images -->
32
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/3.32/jquery.form.min.js"></script>
33
 
34
		<!-- Bootstrap -->
35
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.3.1/js/bootstrap.min.js"></script>
36
 
37
		<!-- Javascript : appli saisie -->
1537 jpm 38
		<script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
1526 jpm 39
		<script type="text/javascript">
40
		//<![CDATA[
41
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
42
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
43
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
44
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
45
			// Mot-clé du widget/projet
46
			var TAG_PROJET = "WidgetFlorileges";
47
			// Mots-clés à ajouter aux images
48
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
49
			TAG_IMG = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."'" : 'TAG_IMG' ?>;
50
			// Mots-clés à ajouter aux observations
51
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
52
			TAG_OBS = <?=isset($_GET['projet']) ? "'".$_GET['projet']."'" : 'TAG_OBS' ?>;
53
			// URL du web service réalisant l'insertion des données dans la base du CEL.
54
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
55
			// Code du référentiel utilisé pour les nom scientifiques (de la forme nom:code).
56
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
57
			// Nom du référentiel utilisé pour les nom scientifiques.
58
			var NOM_SCI_PROJET = "<?=$ns_projet?>";
59
			// Code de la version du référentiel utilisé pour les nom scientifiques.
60
			var NOM_SCI_VERSION = "<?=$ns_version?>";
1537 jpm 61
			// Indication de la présence d'une espèce imposée
62
			var ESPECE_IMPOSEE = "<?=$espece_imposee; ?>";
63
			// Tableau d'informations sur l'espèce imposée
64
			var INFOS_ESPECE_IMPOSEE = <?=$infos_espece; ?>;
1526 jpm 65
			// Nombre d'élément dans les listes d'auto-complétion
66
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
67
			// Indication de la présence d'un référentiel imposé
68
			var REFERENTIEL_IMPOSE = "<?=$referentiel_impose; ?>";
69
			// Indication des version utilisées de chaque référentiel
70
			var PROJETS_VERSIONS = <?=json_encode($projets_versions)?>;
71
			// URL du web service permettant l'auto-complétion des noms scientifiques.
72
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
73
					"masque={masque}&"+
74
					"recherche=etendue&"+
75
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
76
					//"version.projet="+NOM_SCI_VERSION+"&"+
77
					"ns.structure=au"+"&"+
78
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
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
					//"version.projet="+NOM_SCI_VERSION+"&"+
85
					"ns.structure=au"+"&"+
86
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
87
			// Nombre d'observations max autorisé avant transmission
88
			var OBS_MAX_NBRE = 10;
89
			// Durée d'affichage en milliseconde des messages d'informations
90
			var DUREE_MESSAGE = 15000;
1537 jpm 91
			// Squelette d'URL du web service de l'annuaire.
92
			var SERVICE_ANNUAIRE_ID_URL = "<?=$url_ws_annuaire?>";
1526 jpm 93
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
94
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
95
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
96
			var SERVICE_NOM_COMMUNE_URL_ALT = "http://www.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
97
			// URL du marqueur à utiliser dans la carte Google Map
1537 jpm 98
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/epingle.png";
1526 jpm 99
			// URL de l'icône du chargement en cours
1537 jpm 100
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement.gif";
1526 jpm 101
			// URL de l'icône du chargement en cours d'une image
1537 jpm 102
			var CHARGEMENT_IMAGE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/chargement-image.gif";
1526 jpm 103
			// URL de l'icône du calendrier
1537 jpm 104
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/calendrier.png";
1526 jpm 105
			// URL de l'icône du calendrier
1537 jpm 106
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/florileges/img/icones/pas_de_photo.png";
1526 jpm 107
		//]]>
108
		</script>
1537 jpm 109
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/florileges/js/florileges.js"></script>
1526 jpm 110
 
111
		<!-- CSS -->
112
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.10.2/css/smoothness/jquery-ui-1.10.2.custom.css" rel="stylesheet" type="text/css" media="screen" />
113
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
114
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
1537 jpm 115
		<link href="<?=$url_base?>modules/saisie/squelettes/florileges/css/<?=isset($_GET['style']) ? $_GET['style'] : 'florileges'?>.css" rel="stylesheet" type="text/css" media="screen" />
1526 jpm 116
	</head>
117
 
118
	<body data-spy="scroll">
119
		<div class="container">
1537 jpm 120
			<div class="row-fluid page-header">
121
				<div class="span6">
122
					<div class="well intro">
123
						<h1>Florilèges</h1>
124
						<p>
125
							Bienvenue sur l'interface de saisie en ligne des données
126
							"Florilèges"-RUES. Cette interface vous permet d'enregistrer vos
127
							observations de terrain et de les partager simplement
128
							(sous <a href="http://creativecommons.org/licenses/by-sa/2.0/fr/">licence CC-BY-SA</a>)
129
							avec <a href="http://www.plante-et-cite.fr">Plante & Cité</a>,
130
							<a href="http://www.tela-botanica.org/site:accueil">le réseau Tela Botanica</a>
131
							et <a href="http://sauvagesdemarue.mnhn.fr">le programme Sauvage de ma Rue</a>.
132
						</p>
133
						<p>
134
							En vous identifiant, vous pourrez retrouver et consulter l'ensemble de
135
							vos observations dans <a href="http://www.tela-botanica.org/appli:cel">le Carnet en ligne</a>.<br />
136
							Renseignez tout d'abord les caractéristiques et l'itinéraire technique mis en place
137
							sur le site des relevés, puis détaillez ensuite les espèces observées sur ce site.
138
							Ajoutez chaque observation à la liste à transmettre à l'aide du bouton
139
							«&nbsp;Créer&nbsp;».
140
						</p>
141
						<p>
142
							L'interface de saisie vous permet de renseigner jusqu'à 10 observations à des dates
143
							différentes pour un même site.
144
							Partagez-les avec le bouton «&nbsp;Transmettre&nbsp;».
145
							Elles apparaissent immédiatement sur
146
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la carte</a> et
147
							<a href="http://www.tela-botanica.org/site:botanique?langue=fr">la galerie photos</a>
148
							du projet.
149
						</p>
150
						<p>
151
							Pour toute question, <a href="mailto:contact@florileges.info">contactez les animateurs du programme Florilèges</a>.
152
						</p>
153
						<p class="discretion">
154
							Un aide intéractive est à votre disposition sur l'interface.
155
							Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
156
							<button id="btn-aide" class="btn btn-mini btn-success">
157
								<span class="icon-question-sign icon-white"></span>
158
								<span id="btn-aide-txt" >Désactiver l'aide</span>
159
							</button>
160
						</p>
1526 jpm 161
					</div>
162
				</div>
163
 
164
				<div class="span6">
165
					<div class="well">
166
						<h2>Observateur</h2>
167
						<form id="form-observateur" action="#" class="" autocomplete="on">
168
							<div class="row-fluid">
169
								<div class="span6" rel="tooltip" data-placement="right"
170
									title="Saisissez le courriel avec lequel vous être inscrit à Tela Botanica.
171
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
172
										ultérieurement. Des informations complémentaires vont vous être
173
										demandées : prénom et nom.">
174
									<label for="courriel"
175
										title="Veuillez saisir votre adresse courriel.">
176
										<strong class="obligatoire">*</strong> Courriel
177
									</label>
178
									<div class="input-prepend">
179
										<span class="add-on">
180
											<i class="icon-envelope"></i>
181
										</span>
1537 jpm 182
										<input id="courriel" class="span12" name="courriel" type="text"/>
1526 jpm 183
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
184
									</div>
185
								</div>
186
								<div id="zone-courriel-confirmation" class="span6 hidden">
1537 jpm 187
									<label for="courriel_confirmation"
1526 jpm 188
										title="Veuillez saisir confirmer le courriel.">
1537 jpm 189
										<strong class="obligatoire">*</strong>
190
										Courriel (confirmation)
1526 jpm 191
									</label>
192
									<div class="input-prepend">
193
										<span class="add-on">
194
											<i class="icon-envelope"></i>
1537 jpm 195
										</span>
196
										<input id="courriel_confirmation" class="span12" name="courriel_confirmation" type="text"/>
1526 jpm 197
									</div>
198
								</div>
199
							</div>
200
							<div id="zone-prenom-nom" class="row-fluid hidden">
201
								<div class="span6">
202
									<label for="prenom">Prénom</label>
203
									<div>
1537 jpm 204
										<input id="prenom" name="prenom" class="span12" type="text"/>
1526 jpm 205
									</div>
206
								</div>
207
								<div class="span6">
208
									<label for="nom">Nom</label>
209
									<div>
1537 jpm 210
										<input id="nom" name="nom"  class="span12" type="text"/>
1526 jpm 211
									</div>
212
								</div>
213
							</div>
1537 jpm 214
							<div id="zone-personne-complement" >
215
								<div class="row-fluid">
216
									<div class="span12">
217
										<label for="structure">Structure</label>
218
										<div>
219
											<input id="structure" name="personneStructure" class="span12 " type="text"/>
220
										</div>
221
									</div>
222
								</div>
223
								<div class="row-fluid">
224
									<div class="span12">
225
										<label for="service">Service</label>
226
										<div>
227
											<input id="service" name="personneService" class="span12" type="text"/>
228
										</div>
229
									</div>
230
								</div>
231
								<div class="row-fluid">
232
									<div class="span12">
233
										<label for="fonction">Fonction</label>
234
										<div>
235
											<input id="fonction" name="personneFonction" class="span12" type="text"/>
236
										</div>
237
									</div>
238
								</div>
239
							</div>
1526 jpm 240
						</form>
241
					</div>
242
				</div>
243
			</div>
244
			<!-- Messages d'erreur du formulaire-->
1537 jpm 245
			<div class="row-fluid">
1526 jpm 246
				<div class="zone-alerte span6 offset3">
247
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
248
						<a class="close">×</a>
249
						<h4 class="alert-heading">Information : copier/coller</h4>
250
						<p>
251
							Merci de ne pas copier/coller votre courriel.<br/>
252
							La double saisie permet de vérifier l'absence d'erreurs.
253
						</p>
254
					</div>
255
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
256
						<a class="close">×</a>
257
						<h4 class="alert-heading">Information : courriel introuvable</h4>
258
						<p>
259
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
260
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
261
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
262
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
263
						</p>
264
					</div>
265
				</div>
266
			</div>
267
			<div class="row-fluid">
268
				<div class="span12">
269
					<div class="well">
270
						<div class="row-fluid">
1537 jpm 271
							<div class="span4">
272
								<div class="row-fluid">
273
									<div class="span12">
274
										<h2>Site</h2>
275
									</div>
276
								</div>
277
								<div class="row-fluid">
278
									<div class="span12" rel="tooltip"
279
										title="Nom du site." >
280
										<label for="station">Nom</label>
281
										<div>
282
											<input type="text" id="station" class="span12" name="station"/>
1526 jpm 283
										</div>
284
									</div>
1537 jpm 285
								</div>
286
								<div class="well">
1526 jpm 287
									<div class="row-fluid">
288
										<div class="span4">
289
											<label for="map_canvas" title="Veuillez localiser l'observation">
290
												Géolocalisation
291
											</label>
292
										</div>
293
										<div class="span8 droite">
1537 jpm 294
											<form id="form-carte-recherche" class="form-search form-horizontal">
1526 jpm 295
												<div class="control-group">
296
													<input id="carte-recherche" class="search-query" type="text" value=""
297
														rel="tooltip"
1537 jpm 298
														title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
1526 jpm 299
														placeholder="Centrer la carte sur un lieu..."/>
300
												</div>
301
											</form>
302
										</div>
303
									</div>
304
									<div class="row-fluid">
305
										<div class="span12">
306
											<div id="map-canvas" rel="tooltip"
307
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
308
													représentant votre station ou bien le glisser-déposer sur
309
													le lieu souhaité."></div>
310
										</div>
311
									</div>
312
									<div class="row-fluid">
313
										<label for="coordonnees-geo" class="span7">
314
											<a href="#" class="afficher-coord">Afficher</a>
315
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
316
											les coordonnées géographiques
317
											<span id="lat-lon-info" class="info"
318
												rel="tooltip"
319
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
320
												(WGS84)
321
											</span>
322
										</label>
323
										<div id="info-commune" class="span5">
1537 jpm 324
											<span for="marqueur-commune">Commune : </span>
325
											<span id="marqueur-commune">
326
												<span id="commune-nom" class="commune-info"></span>
327
												(<span id="commune-code-insee" class="commune-info"
328
													rel="tooltip"
329
													title="Code INSEE de la commune"></span>)
330
											</span>
331
										</div>
1526 jpm 332
									</div>
333
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
334
										<div id="coordonnees-geo" class="well" style="display:none;">
335
											<div class="row-fluid form-inline">
1537 jpm 336
												<div id="coord-lat" class="span4">
337
													<label>
338
														Latitude
1526 jpm 339
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
1537 jpm 340
													</label>
1526 jpm 341
												</div>
342
												<div id="coord-lng" class="span4">
1537 jpm 343
													<label>
344
														Longitude
1526 jpm 345
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
1537 jpm 346
													</label>
1526 jpm 347
												</div>
1537 jpm 348
												<div class="span4">
349
													<button id="geolocaliser" class="btn"
350
														rel="tooltip"
351
														title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
352
														Voir sur la carte
353
													</button>
1526 jpm 354
												</div>
1537 jpm 355
											</div>
1526 jpm 356
										</div>
1537 jpm 357
									</form>
358
								</div>
359
							</div>
360
							<div class="span4">
361
								<div class="row-fluid">
362
									<div class="span12">
363
										<h2>Typologie du site</h2>
364
									</div>
365
								</div>
366
								<div class="row-fluid">
367
									<div class="span12" rel="tooltip"
368
										title="Typologie du site. Vous pouvez en cliquant dans la zone de saisie puis en appuyant sur la touche «flêche bas», ouvrir la liste des choix disponibles." >
369
										<label>
370
											Typologie
371
											<select id="typo-urbaine" class="span12" name="typoUrbaine">
372
												<option>centre ville</option>
373
												<option>faubourg</option>
374
												<option>quartier résidentiel</option>
375
												<option>zone commerciale</option>
376
												<option>zone d'activités</option>
377
											</select>
378
										</label>
379
									</div>
380
								</div>
381
								<div class="row-fluid">
382
									<div class="span12" rel="tooltip"
383
										title="Type de revêtement de sol." >
384
										<label>
385
											Revêtement de sol
386
											<select id="revetement-sol" class="span12" name="revetementSol">
387
												<option>asphalte et enrobés</option>
388
												<option>pavés</option>
389
												<option>stabilisés, aires sablées</option>
390
												<option>graviers</option>
391
												<option>terre</option>
392
											</select>
393
										</label>
394
									</div>
395
								</div>
396
								<div class="row-fluid">
397
									<div class="span12" rel="tooltip"
398
										title="Présence de zones végétalisés autour du site (haie, aménagement paysager, parcs et jardins, ...)." >
399
										<label>
400
											Présence de zones végétalisés
401
											<select id="presence-zone-vegetalise">
402
												<option>nulle</option>
403
												<option>faible</option>
404
												<option>moyenne</option>
405
												<option>importante</option>
406
											</select>
407
										</label>
408
									</div>
409
								</div>
410
								<div class="row-fluid">
411
									<div class="span12" rel="tooltip"
412
										title="Hauteur des bâtiments avoisinants (en étages)." >
413
										<label>
414
											Hauteur des bâtiments
415
											<select id="hauteur-batiment-avoisinant">
416
												<option>0</option>
417
												<option>1</option>
418
												<option>2</option>
419
												<option>3</option>
420
												<option>4</option>
421
												<option>5 et +</option>
422
											</select>
423
										</label>
424
									</div>
425
								</div>
426
							</div>
427
							<div class="span4">
428
								<div class="row-fluid">
429
									<div class="span12">
430
										<h2>Itinéraire technique</h2>
431
									</div>
432
								</div>
433
								<div class="row-fluid">
434
									<div class="span12" rel="tooltip"
435
										title="Intensité de gestion." >
436
										<label>
437
											Intensité de gestion
438
											<select id="intensite-gestion" class="span12">
439
												<option>extensive</option>
440
												<option>intermédiaire</option>
441
												<option>intensive</option>
442
											</select>
443
										</label>
444
									</div>
445
								</div>
446
								<div class="row-fluid">
447
									<div class="span12">
1526 jpm 448
										<div class="row-fluid">
1537 jpm 449
											<div class="span12" rel="tooltip"
450
												title="Utilisation de produits phytosanitaires sur le site." >
451
												<label>
452
													Utilisation de produits phytosanitaires
453
													<select id="periodicite-traitement-phyto">
454
														<option value="régulière">régulière</option>
455
														<option value="occasionnelle">occasionnelle</option>
456
														<option value="rare">rare</option>
457
														<option value="jamais">jamais</option>
458
													</select>
459
												</label>
1526 jpm 460
											</div>
1537 jpm 461
										</div>
462
										<div id="datp-zone" class="row-fluid hidden">
463
											<div class="span12" rel="tooltip"
464
													title="Date approximative de l'arrêt des traitements.
465
													Vous pouvez cliquer sur l'icône de calendrier pour
466
													sélectionner une date dans un calendrier.">
467
												<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
468
													Date d'arrêt des traitements
469
													<div class="input-prepend">
470
														<span id="date-arret-traitement-phyto-icone" class="add-on"></span>
471
														<input id="date-arret-traitement-phyto" class="input-small"
472
															name="date-arret-traitement-phyto" type="text"
473
															placeholder="jj/mm/aaaa" />
474
													</div>
475
												</label>
1526 jpm 476
											</div>
1537 jpm 477
										</div>
478
									</div>
479
								</div>
480
								<div class="row-fluid">
481
									<div class="span12" rel="tooltip"
482
										title="Description de l'itinéraire de gestion (type de traitement, matériel utilisé, fréquence de passage, ...)." >
483
										<label>
484
											Description de l'itinéraire de gestion
485
											<textarea id="itineraire-gestion" class="span12" rows="7" name="itineraireGestion"></textarea>
486
										</label>
487
									</div>
488
								</div>
489
							</div>
490
						</div>
491
					</div>
492
				</div>
493
			</div>
494
			<div class="row-fluid">
495
				<div class="span12 well">
496
					<div class="row-fluid">
497
						<div class="span4">
498
							<h2 id="obs-titre">Observations</h2>
499
						</div>
500
						<form id="form-date" class="form-inline">
501
							<div class="span4" rel="tooltip"
502
								title="Vous pouvez cliquer sur l'icône de calendrier pour
503
								sélectionner une date dans un calendrier.">
504
								<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
505
									Date du relevé
506
									<div class="input-prepend">
507
										<span id="date-icone" class="add-on"></span>
508
										<input id="date" class="input-small" name="date" type="text"
509
											placeholder="jj/mm/aaaa" />
510
									</div>
511
								</label>
512
							</div>
513
							<div class="span4" rel="tooltip"
514
								title="Date approximative de la dernière intervention." >
515
								<label for="date-derniere-intervention">Dernière intervention</label>
516
								<select id="date-derniere-intervention">
517
									<option value="inconnue">ne sais pas</option>
518
									<option>plus de 3 ans</option>
519
									<option>entre 1 et 3 ans</option>
520
									<option>moins d'1 an</option>
521
									<option>au cours du dernier semestre</option>
522
									<option>au cours du dernier trimestre</option>
523
									<option>au cours des 30 derniers jours</option>
524
									<option>au cours des 7 derniers jours</option>
525
								</select>
526
							</div>
527
						</form>
528
					</div>
529
					<form id="form-obs" action="#" autocomplete="on">
530
 
531
						<div class="row-fluid">
532
							<div class="well span6">
533
								<div class="row-fluid">
534
									<div class="span12">
535
										<div id="taxon-liste-input-groupe" rel="tooltip"
536
											title="Sélectionnez une espèce dans la liste déroulante par son nom latin
537
											ou commun. Si une espèce est abscente, sélectionner «Autre espèce»." >
538
											<label title="Choisissez l'espèce rencontrée.">
539
												<strong class="obligatoire">*</strong>
540
												Espèces les plus communes
541
												<div class="input-prepend">
542
													<span class="add-on">
543
														<i class="icon-leaf"></i>
544
													</span>
545
													<select id="taxon-liste" class="span12" name="taxon-liste">
546
														<option value="" selected="selected">Sélectionner une espèce</option>
547
														<option value="?">Autre espèce</option>
548
														<?php foreach ($taxons as $taxon) :?>
549
															<option <?= $taxon['nom_ret']== $taxon['nom_fr'] ? 'style="font-style:italic;"' : '' ?> value="<?=$taxon['num_nom_sel']?>"
550
																title="<?=$taxon['nom_ret'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>">
551
																<?=$taxon['nom_fr']?>
552
															</option>
553
														<?php endforeach; ?>
554
													</select>
1526 jpm 555
												</div>
1537 jpm 556
											</label>
557
										</div>
558
									</div>
559
								</div>
560
								<div id="taxon-input-groupe" class="row-fluid hidden">
561
									<div class="span12">
562
										<div rel="tooltip"
563
											title="Sélectionnez une espèce dans la liste déroulante pour lier
564
												votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
565
												un nom absent du référentiel (Ex. : 'fleur violette' ou 'viola sinensis???')." >
566
											<label title="Choisissez l'espèce rencontrée.">
567
												Autre espèce
568
												<input id="taxon" name="taxon" type="text" class="span12"
569
													placeholder="Autre espèce (ou indication sur la plante)"
570
													value="<?= $nom_sci_espece_defaut; ?>" />
571
											</label>
572
										</div>
573
									</div>
574
								</div>
575
								<div class="row-fluid">
576
									<div class="span12" rel="tooltip"
577
										title="Sélectionner un ou plusieurs milieux dans lesquels l'espèce est présente sur le site.">
578
										<label class="span2">
579
											Milieux
580
										</label>
581
										<div class="input-prepend">
582
											<div class="btn-group">
583
												<button class="btn dropdown-toggle" data-toggle="dropdown">
584
													<i class="icon-globe"></i>
585
													Sélectionner un ou plusieurs milieux
586
													<span class="caret"></span>
587
												</button>
588
												<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
589
													<li>
590
														<label class="checkbox">
591
															<input name="milieux" type="checkbox" value="chemin"/>
592
															chemin
593
														</label>
594
													</li>
595
													<li>
596
														<label class="checkbox">
597
															<input name="milieux" type="checkbox" value="fissures"/>
598
															fissures
599
														</label>
600
													</li>
601
													<li>
602
														<label class="checkbox">
603
															<input name="milieux" type="checkbox" value="haie"/>
604
															haie
605
														</label>
606
													</li>
607
													<li>
608
														<label class="checkbox">
609
															<input name="milieux" type="checkbox" value="mur"/>
610
															mur
611
														</label>
612
													</li>
613
													<li>
614
														<label class="checkbox">
615
															<input name="milieux" type="checkbox" value="pelouse"/>
616
															pelouse
617
														</label>
618
													</li>
619
													<li>
620
														<label class="checkbox">
621
															<input name="milieux" type="checkbox" value="pied d'arbre"/>
622
															pied d'arbre
623
														</label>
624
													</li>
625
													<li>
626
														<label class="checkbox">
627
															<input name="milieux" type="checkbox" value="plate bande"/>
628
															plate bande
629
														</label>
630
													</li>
631
												</ul>
1526 jpm 632
											</div>
633
										</div>
1537 jpm 634
									</div>
1526 jpm 635
								</div>
1537 jpm 636
 
637
								<div class="row-fluid">
638
									<div class="span12" rel="tooltip"
639
										title="Hauteur maximum en centimètre de la plante sur le site.">
640
										<label >
641
											Hauteux max. (en cm) de la plante
642
											<input id="hauteur-plante" class="span2" name="hauteurPlante" type="number" />
643
										</label>
644
									</div>
645
								</div>
646
 
647
								<div class="row-fluid">
648
									<div class="span12">
649
										<label for="notes">Commentaires</label>
650
										<div>
651
											<textarea id="notes" class="span12" rows="7" name="notes"
652
												placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
653
										</div>
654
									</div>
655
								</div>
1526 jpm 656
							</div>
657
							<div class="span6">
1537 jpm 658
								<div class="well">
659
									<div class="row-fluid">
660
										<div class="span12" rel="tooltip"
661
											title="Résistance/Résilience face aux traitements utilisés." >
662
											<label>
663
												Résistance/Résilience
664
												<select id="resistance-traitement-phyto" name="resistanceTraitementPhyto">
665
													<option>Pas de traitement</option>
666
													<option>faible</option>
667
													<option>intermédiaire</option>
668
													<option>forte</option>
669
													<option>très forte</option>
670
												</select>
671
											</label>
1526 jpm 672
										</div>
1537 jpm 673
									</div>
674
 
1526 jpm 675
									<div class="row-fluid">
1537 jpm 676
										<div class="span12" rel="tooltip"
677
											title="Vitesse de croissance sur site." >
678
											<label>
679
												Croissance
680
												<select id="vitesse-croissance" name="vitesseCroissance">
681
													<option>nulle</option>
682
													<option>lente</option>
683
													<option>moyenne</option>
684
													<option>rapide</option>
685
													<option>trop rapide</option>
686
												</select>
1526 jpm 687
											</label>
688
										</div>
1537 jpm 689
									</div>
690
								</div>
691
								<div class="well">
692
									<div class="row-fluid">
693
										<div class="span12" rel="tooltip"
694
											title="Perception globale de l'espèce par l'équipe technique.">
695
											<label class="span4">
696
												Perceptions par l'équipe
1526 jpm 697
											</label>
698
											<div class="input-prepend">
1537 jpm 699
												<div class="btn-group">
700
													<button class="btn dropdown-toggle" data-toggle="dropdown">
701
														<i class="icon-heart"></i>
702
														Sélectionner une ou plusieurs perceptions
703
														<span class="caret"></span>
704
													</button>
705
													<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
706
														<li>
707
															<label class="checkbox">
708
																<input name="milieux" type="checkbox" value="ne connaissais pas la plante avant l'étude"/>
709
																ne connaissais pas la plante avant l'étude
710
															</label>
711
														</li>
712
														<li>
713
															<label class="checkbox">
714
																<input name="milieux" type="checkbox" value="discrète ne pose pas de problème"/>
715
																discrète ne pose pas de problème
716
															</label>
717
														</li>
718
														<li>
719
															<label class="checkbox">
720
																<input name="milieux" type="checkbox" value="visible et esthétique"/>
721
																visible et esthétique
722
															</label>
723
														</li>
724
														<li>
725
															<label class="checkbox">
726
																<input name="milieux" type="checkbox" value="gênante, difficile à gérer"/>
727
																gênante, difficile à gérer
728
															</label>
729
														</li>
730
														<li>
731
															<label class="checkbox">
732
																<input name="milieux" type="checkbox" value="envahissante, cause des dégâts"/>
733
																envahissante, cause des dégâts
734
															</label>
735
														</li>
736
													</ul>
737
												</div>
1526 jpm 738
											</div>
739
										</div>
740
									</div>
1537 jpm 741
 
1526 jpm 742
									<div class="row-fluid">
1537 jpm 743
										<div class="span12" rel="tooltip"
744
											title="Mauvaise perception de la plante par les riverains." >
745
											<label>
746
												Mauvaise perception par les riverains ?
747
												<select id="perception-riverain" name="perceptionRiverain">
748
													<option>inconnue</option>
749
													<option>oui</option>
750
													<option>non</option>
751
												</select>
752
											</label>
1526 jpm 753
										</div>
754
									</div>
1537 jpm 755
								</div>
756
							</div>
757
						</div>
758
 
759
						</form>
760
						<form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
761
							method="post" enctype="multipart/form-data">
762
							<div class="row-fluid">
763
								<div class="span12 well">
1526 jpm 764
									<strong>Cliquez sur l'icone pour ajouter une image</strong>
765
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
766
									<div id ="photos-conteneur">
767
										<div id="photo-placeholder" rel="tooltip"
768
										title="Cliquez pour ajouter une photo de votre observation. Elle doit être au
769
											format JPEG et ne doit pas excéder 5Mo."></div>
770
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
771
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
772
										<div id="miniatures">
773
										</div>
774
										<p class="miniature-msg" class="span12">&nbsp;</p>
775
									</div>
1537 jpm 776
								</div>
1526 jpm 777
							</div>
1537 jpm 778
						</form>
779
						<div class="row-fluid">
780
							<div class="span12 centre" rel="tooltip"
781
								title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
782
									ajouter votre observation à la liste à transmettre.">
783
								<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
784
									Créer
785
								</button>
786
							</div>
787
						</div>
788
					</div>
789
				</div>
790
 
791
				<!-- Affiche le tableau récapitualif des observations ajoutées -->
792
				<div id="zone-liste-obs" class="row-fluid">
793
					<div class="span12">
794
						<div class="well">
1526 jpm 795
							<div class="row-fluid">
1537 jpm 796
								<div class="span8">
797
									<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
798
								</div>
799
								<div class="span4 droite">
800
									<button id="transmettre-obs" class="btn btn-primary btn-large"
801
										type="button" disabled="disabled" rel="tooltip"
802
										title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
803
										Transmettre
1526 jpm 804
									</button>
805
								</div>
806
							</div>
1537 jpm 807
							<div id="liste-obs" ></div>
808
							<div class="row">
809
								<div class="zone-alerte span6 offset3">
810
									<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
811
										<a class="close">×</a>
812
										<h4 class="alert-heading">Attention : aucune observation</h4>
813
										<p>Veuillez saisir des observations pour les transmettres.</p>
814
									</div>
815
 
816
									<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
817
										<a class="close">×</a>
818
										<h4 class="alert-heading">Information : transmission des observations</h4>
819
										<div class="alert-txt"></div>
820
									</div>
821
 
822
									<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
823
										<a class="close">×</a>
824
										<h4 class="alert-heading">Erreur : transmission des observations</h4>
825
										<div class="alert-txt"></div>
826
									</div>
827
								</div>
828
							</div>
829
 
1526 jpm 830
						</div>
831
					</div>
1537 jpm 832
				</div>
833
 
834
				<footer class="row-fluid">
835
					<p class="span12">&copy; Tela Botanica 2013</p>
836
				</footer>
1526 jpm 837
			</div>
1537 jpm 838
 
1526 jpm 839
			<!-- Messages d'erreur du formulaire-->
840
			<div class="row">
841
				<div class="zone-alerte span6 offset3">
842
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
843
						<a class="close">×</a>
844
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
845
						<p>
846
							Vous venez d'ajouter votre 10ème observation.<br/>
847
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
848
						</p>
849
					</div>
850
				</div>
851
				<div class="zone-alerte span6 offset3">
852
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
853
						<a class="close">×</a>
854
						<h4 class="alert-heading">Information : champs en erreur</h4>
855
						<p>
856
							Certains champs du formulaire sont mal remplis.<br/>
857
							Veuillez vérifier vos données.
858
						</p>
859
					</div>
860
				</div>
861
			</div>
862
 
863
			<!-- Fenêtres modales -->
864
			<div id="chargement" class="modal-fenetre" style="display:none;">
865
				<div id="chargement-centrage" class="modal-contenu">
866
					<img id="chargement-img"
867
						src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif"
868
						alt="Transfert en cours..."/>
869
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
870
						Transfert des observations en cours...<br />
871
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
872
						d'observations à transférer.
873
					</p>
874
				</div>
875
			</div>
876
 
877
			<!-- Templates HTML -->
878
			<div id="tpl-transmission-ok" style="display:none;">
879
				<p class="msg">
880
					Vos observations ont bien été transmises.<br />
881
					Elles sont désormais consultables à travers les différents outils de visualisation
1537 jpm 882
					du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
883
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
884
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
1526 jpm 885
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
886
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
887
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
888
					N'oubliez pas qu'il est nécessaire de
889
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
890
					au préalable, si ce n'est pas déjà fait.
891
				</p>
892
			</div>
893
			<div id="tpl-transmission-ko" style="display:none;">
894
				<p class="msg">
895
					Une erreur est survenue lors de la transmission de vos observations.<br />
896
					Vous pouvez signaler le dysfonctionnement à
897
					<a class="courriel-erreur" href="mailto:">cel_remarques@tela-botanica.org</a>.
898
				</p>
899
			</div>
900
 
901
			<!-- Stats : Google Analytics-->
902
			<script type="text/javascript">
903
				//<![CDATA[
904
				var _gaq = _gaq || [];
905
				_gaq.push(['_setAccount', 'UA-20092557-1']);
906
				_gaq.push(['_trackPageview']);
907
 
908
				(function() {
909
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
910
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
911
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
912
				})();
913
				//]]>
914
			</script>
915
		</div>
916
	</body>
917
</html>