Subversion Repositories eFlore/Applications.cel

Rev

Rev 1537 | 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">
1540 jpm 121
				<div class="span7">
1537 jpm 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
 
1540 jpm 164
				<div class="span5">
165
					<div class="well forcer-colonne">
1526 jpm 166
						<h2>Observateur</h2>
167
						<form id="form-observateur" action="#" class="" autocomplete="on">
168
							<div class="row-fluid">
1540 jpm 169
								<div class="span6 control-group" rel="tooltip" data-placement="bottom"
1526 jpm 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.">
1540 jpm 174
										<label class="control-label" for="courriel">
175
											<strong class="obligatoire">*</strong>
176
											Courriel
177
										</label>
178
										<div class="controls">
179
											<div class="input-prepend">
180
												<span class="add-on">
181
													<i class="icon-envelope"></i>
182
												</span>
183
												<input id="courriel" name="courriel" class="span11" type="text"/>
184
												<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
185
											</div>
186
										</div>
187
 
1526 jpm 188
								</div>
1540 jpm 189
								<div id="zone-courriel-confirmation" class="span6 hidden control-group">
190
									<label class="control-label" for="courriel_confirmation">
1537 jpm 191
										<strong class="obligatoire">*</strong>
192
										Courriel (confirmation)
1526 jpm 193
									</label>
1540 jpm 194
									<div class="controls">
195
										<div class="input-prepend">
196
											<span class="add-on">
197
												<i class="icon-envelope"></i>
198
											</span>
199
											<input id="courriel_confirmation" name="courriel_confirmation"
200
											 	class="span11" type="text"/>
201
										</div>
1526 jpm 202
									</div>
203
								</div>
204
							</div>
205
							<div id="zone-prenom-nom" class="row-fluid hidden">
206
								<div class="span6">
1540 jpm 207
									<label for="prenom">
208
										Prénom
209
									</label>
210
									<input id="prenom" name="prenom" class="span12" type="text"/>
1526 jpm 211
								</div>
212
								<div class="span6">
1540 jpm 213
									<label for="nom">
214
										Nom
215
									</label>
216
									<input id="nom" name="nom"  class="span12" type="text"/>
1526 jpm 217
								</div>
218
							</div>
1540 jpm 219
							<div id="zone-personne-complement" class="forcer-colonne">
1537 jpm 220
								<div class="row-fluid">
1540 jpm 221
									<div class="span6">
222
										<label for="structure">
223
											Structure
224
										</label>
225
										<input id="structure" name="personneStructure" class="span12 " type="text"/>
1537 jpm 226
									</div>
1540 jpm 227
									<div class="span6">
228
										<label for="service">
229
											Service
230
										</label>
231
										<input id="service" name="personneService" class="span12" type="text"/>
1537 jpm 232
									</div>
233
								</div>
234
								<div class="row-fluid">
235
									<div class="span12">
1540 jpm 236
										<label for="fonction">
237
											Fonction
238
										</label>
239
										<input id="fonction" name="personneFonction" class="span12" type="text"/>
1537 jpm 240
									</div>
241
								</div>
242
							</div>
1526 jpm 243
						</form>
244
					</div>
245
				</div>
246
			</div>
247
			<!-- Messages d'erreur du formulaire-->
1537 jpm 248
			<div class="row-fluid">
1526 jpm 249
				<div class="zone-alerte span6 offset3">
250
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
251
						<a class="close">×</a>
252
						<h4 class="alert-heading">Information : copier/coller</h4>
253
						<p>
254
							Merci de ne pas copier/coller votre courriel.<br/>
255
							La double saisie permet de vérifier l'absence d'erreurs.
256
						</p>
257
					</div>
258
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
259
						<a class="close">×</a>
260
						<h4 class="alert-heading">Information : courriel introuvable</h4>
261
						<p>
262
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
263
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
264
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
265
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
266
						</p>
267
					</div>
268
				</div>
269
			</div>
270
			<div class="row-fluid">
271
				<div class="span12">
272
					<div class="well">
273
						<div class="row-fluid">
1537 jpm 274
							<div class="span4">
275
								<div class="row-fluid">
276
									<div class="span12">
277
										<h2>Site</h2>
278
									</div>
279
								</div>
280
								<div class="row-fluid">
281
									<div class="span12" rel="tooltip"
282
										title="Nom du site." >
283
										<label for="station">Nom</label>
284
										<div>
285
											<input type="text" id="station" class="span12" name="station"/>
1526 jpm 286
										</div>
287
									</div>
1537 jpm 288
								</div>
1540 jpm 289
								<div class="forcer-colonne well">
1526 jpm 290
									<div class="row-fluid">
291
										<div class="span4">
292
											<label for="map_canvas" title="Veuillez localiser l'observation">
293
												Géolocalisation
294
											</label>
295
										</div>
296
										<div class="span8 droite">
1537 jpm 297
											<form id="form-carte-recherche" class="form-search form-horizontal">
1526 jpm 298
												<div class="control-group">
299
													<input id="carte-recherche" class="search-query" type="text" value=""
300
														rel="tooltip"
1537 jpm 301
														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 302
														placeholder="Centrer la carte sur un lieu..."/>
303
												</div>
304
											</form>
305
										</div>
306
									</div>
307
									<div class="row-fluid">
308
										<div class="span12">
309
											<div id="map-canvas" rel="tooltip"
310
												title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
311
													représentant votre station ou bien le glisser-déposer sur
312
													le lieu souhaité."></div>
313
										</div>
314
									</div>
1540 jpm 315
									<div id="coordonnees-geo-affichage" class="row-fluid">
316
										<label for="coordonnees-geo" class="span6">
317
											<a class="afficher-coord btn">
318
												<span class="afficher-coord-action">Afficher</span>
319
												<span class="afficher-coord-action" style="display:none;">Cacher</span>
320
												coordonnées
321
												<span id="lat-lon-info" class="info"
322
													rel="tooltip"
323
													title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
324
													(WGS84)
325
												</span>
326
											</a>
1526 jpm 327
										</label>
1540 jpm 328
										<div id="info-commune" class="span6">
1537 jpm 329
											<span for="marqueur-commune">Commune : </span>
330
											<span id="marqueur-commune">
331
												<span id="commune-nom" class="commune-info"></span>
332
												(<span id="commune-code-insee" class="commune-info"
333
													rel="tooltip"
334
													title="Code INSEE de la commune"></span>)
335
											</span>
336
										</div>
1526 jpm 337
									</div>
1540 jpm 338
									<div id="coordonnees-geo" class="row-fluid" style="display:none;">
339
										<form id="form-station" class="control-group form-inline">
340
											<div id="coord-lat" class="span4">
341
												<label>
342
													Latitude
343
													<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
344
												</label>
1537 jpm 345
											</div>
1540 jpm 346
											<div id="coord-lng" class="span4">
347
												<label>
348
													Longitude
349
													<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
350
												</label>
351
											</div>
352
											<div class="span4">
353
												<button id="geolocaliser" class="btn"
354
													rel="tooltip"
355
													title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
356
													Voir sur la carte
357
												</button>
358
											</div>
359
										</form>
360
									</div>
1537 jpm 361
								</div>
362
							</div>
363
							<div class="span4">
364
								<div class="row-fluid">
365
									<div class="span12">
366
										<h2>Typologie du site</h2>
367
									</div>
368
								</div>
369
								<div class="row-fluid">
370
									<div class="span12" rel="tooltip"
371
										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." >
372
										<label>
373
											Typologie
374
											<select id="typo-urbaine" class="span12" name="typoUrbaine">
375
												<option>centre ville</option>
376
												<option>faubourg</option>
377
												<option>quartier résidentiel</option>
378
												<option>zone commerciale</option>
379
												<option>zone d'activités</option>
380
											</select>
381
										</label>
382
									</div>
383
								</div>
384
								<div class="row-fluid">
385
									<div class="span12" rel="tooltip"
386
										title="Type de revêtement de sol." >
387
										<label>
388
											Revêtement de sol
389
											<select id="revetement-sol" class="span12" name="revetementSol">
390
												<option>asphalte et enrobés</option>
391
												<option>pavés</option>
392
												<option>stabilisés, aires sablées</option>
393
												<option>graviers</option>
394
												<option>terre</option>
395
											</select>
396
										</label>
397
									</div>
398
								</div>
399
								<div class="row-fluid">
400
									<div class="span12" rel="tooltip"
401
										title="Présence de zones végétalisés autour du site (haie, aménagement paysager, parcs et jardins, ...)." >
402
										<label>
403
											Présence de zones végétalisés
404
											<select id="presence-zone-vegetalise">
405
												<option>nulle</option>
406
												<option>faible</option>
407
												<option>moyenne</option>
408
												<option>importante</option>
409
											</select>
410
										</label>
411
									</div>
412
								</div>
413
								<div class="row-fluid">
414
									<div class="span12" rel="tooltip"
415
										title="Hauteur des bâtiments avoisinants (en étages)." >
416
										<label>
417
											Hauteur des bâtiments
418
											<select id="hauteur-batiment-avoisinant">
419
												<option>0</option>
420
												<option>1</option>
421
												<option>2</option>
422
												<option>3</option>
423
												<option>4</option>
424
												<option>5 et +</option>
425
											</select>
426
										</label>
427
									</div>
428
								</div>
429
							</div>
430
							<div class="span4">
431
								<div class="row-fluid">
432
									<div class="span12">
433
										<h2>Itinéraire technique</h2>
434
									</div>
435
								</div>
436
								<div class="row-fluid">
437
									<div class="span12" rel="tooltip"
438
										title="Intensité de gestion." >
439
										<label>
440
											Intensité de gestion
441
											<select id="intensite-gestion" class="span12">
442
												<option>extensive</option>
443
												<option>intermédiaire</option>
444
												<option>intensive</option>
445
											</select>
446
										</label>
447
									</div>
448
								</div>
449
								<div class="row-fluid">
450
									<div class="span12">
1526 jpm 451
										<div class="row-fluid">
1537 jpm 452
											<div class="span12" rel="tooltip"
453
												title="Utilisation de produits phytosanitaires sur le site." >
454
												<label>
455
													Utilisation de produits phytosanitaires
456
													<select id="periodicite-traitement-phyto">
457
														<option value="régulière">régulière</option>
458
														<option value="occasionnelle">occasionnelle</option>
459
														<option value="rare">rare</option>
460
														<option value="jamais">jamais</option>
461
													</select>
462
												</label>
1526 jpm 463
											</div>
1537 jpm 464
										</div>
465
										<div id="datp-zone" class="row-fluid hidden">
466
											<div class="span12" rel="tooltip"
467
													title="Date approximative de l'arrêt des traitements.
468
													Vous pouvez cliquer sur l'icône de calendrier pour
469
													sélectionner une date dans un calendrier.">
470
												<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
471
													Date d'arrêt des traitements
472
													<div class="input-prepend">
473
														<span id="date-arret-traitement-phyto-icone" class="add-on"></span>
474
														<input id="date-arret-traitement-phyto" class="input-small"
475
															name="date-arret-traitement-phyto" type="text"
476
															placeholder="jj/mm/aaaa" />
477
													</div>
478
												</label>
1526 jpm 479
											</div>
1537 jpm 480
										</div>
481
									</div>
482
								</div>
483
								<div class="row-fluid">
484
									<div class="span12" rel="tooltip"
485
										title="Description de l'itinéraire de gestion (type de traitement, matériel utilisé, fréquence de passage, ...)." >
486
										<label>
487
											Description de l'itinéraire de gestion
488
											<textarea id="itineraire-gestion" class="span12" rows="7" name="itineraireGestion"></textarea>
489
										</label>
490
									</div>
491
								</div>
492
							</div>
493
						</div>
494
					</div>
495
				</div>
496
			</div>
497
			<div class="row-fluid">
498
				<div class="span12 well">
499
					<div class="row-fluid">
500
						<div class="span4">
501
							<h2 id="obs-titre">Observations</h2>
502
						</div>
1540 jpm 503
						<div class="span8">
504
							<form id="form-date" class="form-inline">
505
								<div class="span6" rel="tooltip"
506
									title="Vous pouvez cliquer sur l'icône de calendrier pour
507
									sélectionner une date dans un calendrier.">
508
									<label title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
509
										Date du relevé
510
										<div class="input-prepend">
511
											<span id="date-icone" class="add-on"></span>
512
											<input id="date" class="input-small" name="date" type="text"
513
												placeholder="jj/mm/aaaa" />
514
										</div>
515
									</label>
516
								</div>
517
								<div class="span6" rel="tooltip"
518
									title="Date approximative de la dernière intervention." >
519
									<label>
520
										Dernière intervention
521
										<select id="date-derniere-intervention">
522
											<option value="inconnue">ne sais pas</option>
523
											<option>plus de 3 ans</option>
524
											<option>entre 1 et 3 ans</option>
525
											<option>moins d'1 an</option>
526
											<option>au cours du dernier semestre</option>
527
											<option>au cours du dernier trimestre</option>
528
											<option>au cours des 30 derniers jours</option>
529
											<option>au cours des 7 derniers jours</option>
530
										</select>
531
									</label>
532
								</div>
533
							</form>
534
						</div>
1537 jpm 535
					</div>
1540 jpm 536
					<form id="form-obs" autocomplete="on">
1537 jpm 537
						<div class="row-fluid">
538
							<div class="well span6">
539
								<div class="row-fluid">
540
									<div class="span12">
1540 jpm 541
										<div id="taxon-liste-input-groupe" class="control-group" rel="tooltip"
1537 jpm 542
											title="Sélectionnez une espèce dans la liste déroulante par son nom latin
543
											ou commun. Si une espèce est abscente, sélectionner «Autre espèce»." >
1540 jpm 544
											<label class="control-label" for="taxon-liste" title="Choisissez l'espèce rencontrée.">
1537 jpm 545
												<strong class="obligatoire">*</strong>
546
												Espèces les plus communes
1540 jpm 547
											</label>
548
											<div class="controls">
549
												<div class="input-prepend ">
1537 jpm 550
													<span class="add-on">
551
														<i class="icon-leaf"></i>
552
													</span>
553
													<select id="taxon-liste" class="span12" name="taxon-liste">
1540 jpm 554
														<option value="" selected>Sélectionner une espèce</option>
1537 jpm 555
														<option value="?">Autre espèce</option>
556
														<?php foreach ($taxons as $taxon) :?>
1540 jpm 557
															<option
558
																class="<?=($taxon['nom_ret'] == $taxon['nom_fr']) ? 'nom-sci' : 'nom-fr' ?>"
559
																value="<?=$taxon['num_nom_sel']?>"
560
																title="<?=$taxon['nom_ret'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>"
561
																>
1537 jpm 562
																<?=$taxon['nom_fr']?>
563
															</option>
564
														<?php endforeach; ?>
565
													</select>
1526 jpm 566
												</div>
1540 jpm 567
											</div>
1537 jpm 568
										</div>
569
									</div>
570
								</div>
571
								<div id="taxon-input-groupe" class="row-fluid hidden">
572
									<div class="span12">
1540 jpm 573
										<div class="control-group" rel="tooltip"
1537 jpm 574
											title="Sélectionnez une espèce dans la liste déroulante pour lier
575
												votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
576
												un nom absent du référentiel (Ex. : 'fleur violette' ou 'viola sinensis???')." >
1540 jpm 577
											<label class="control-label" for="taxon" title="Choisissez l'espèce rencontrée.">
1537 jpm 578
												Autre espèce
1540 jpm 579
											</label>
580
											<div class="controls">
1537 jpm 581
												<input id="taxon" name="taxon" type="text" class="span12"
582
													placeholder="Autre espèce (ou indication sur la plante)"
583
													value="<?= $nom_sci_espece_defaut; ?>" />
1540 jpm 584
											</div>
1537 jpm 585
										</div>
586
									</div>
587
								</div>
588
								<div class="row-fluid">
589
									<div class="span12" rel="tooltip"
590
										title="Sélectionner un ou plusieurs milieux dans lesquels l'espèce est présente sur le site.">
591
										<label class="span2">
592
											Milieux
593
										</label>
594
										<div class="input-prepend">
595
											<div class="btn-group">
596
												<button class="btn dropdown-toggle" data-toggle="dropdown">
597
													<i class="icon-globe"></i>
598
													Sélectionner un ou plusieurs milieux
599
													<span class="caret"></span>
600
												</button>
601
												<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
602
													<li>
603
														<label class="checkbox">
604
															<input name="milieux" type="checkbox" value="chemin"/>
605
															chemin
606
														</label>
607
													</li>
608
													<li>
609
														<label class="checkbox">
610
															<input name="milieux" type="checkbox" value="fissures"/>
611
															fissures
612
														</label>
613
													</li>
614
													<li>
615
														<label class="checkbox">
616
															<input name="milieux" type="checkbox" value="haie"/>
617
															haie
618
														</label>
619
													</li>
620
													<li>
621
														<label class="checkbox">
622
															<input name="milieux" type="checkbox" value="mur"/>
623
															mur
624
														</label>
625
													</li>
626
													<li>
627
														<label class="checkbox">
628
															<input name="milieux" type="checkbox" value="pelouse"/>
629
															pelouse
630
														</label>
631
													</li>
632
													<li>
633
														<label class="checkbox">
634
															<input name="milieux" type="checkbox" value="pied d'arbre"/>
635
															pied d'arbre
636
														</label>
637
													</li>
638
													<li>
639
														<label class="checkbox">
640
															<input name="milieux" type="checkbox" value="plate bande"/>
641
															plate bande
642
														</label>
643
													</li>
644
												</ul>
1526 jpm 645
											</div>
646
										</div>
1537 jpm 647
									</div>
1526 jpm 648
								</div>
1537 jpm 649
 
650
								<div class="row-fluid">
651
									<div class="span12" rel="tooltip"
652
										title="Hauteur maximum en centimètre de la plante sur le site.">
653
										<label >
654
											Hauteux max. (en cm) de la plante
1540 jpm 655
											<input id="hauteur-plante" class="span2" name="hauteurPlante"
656
												type="number" min="0" step="1" />
1537 jpm 657
										</label>
658
									</div>
659
								</div>
660
 
661
								<div class="row-fluid">
662
									<div class="span12">
663
										<label for="notes">Commentaires</label>
664
										<div>
665
											<textarea id="notes" class="span12" rows="7" name="notes"
666
												placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
667
										</div>
668
									</div>
669
								</div>
1526 jpm 670
							</div>
671
							<div class="span6">
1537 jpm 672
								<div class="well">
673
									<div class="row-fluid">
674
										<div class="span12" rel="tooltip"
675
											title="Résistance/Résilience face aux traitements utilisés." >
676
											<label>
677
												Résistance/Résilience
678
												<select id="resistance-traitement-phyto" name="resistanceTraitementPhyto">
679
													<option>Pas de traitement</option>
680
													<option>faible</option>
681
													<option>intermédiaire</option>
682
													<option>forte</option>
683
													<option>très forte</option>
684
												</select>
685
											</label>
1526 jpm 686
										</div>
1537 jpm 687
									</div>
688
 
1526 jpm 689
									<div class="row-fluid">
1537 jpm 690
										<div class="span12" rel="tooltip"
691
											title="Vitesse de croissance sur site." >
692
											<label>
693
												Croissance
694
												<select id="vitesse-croissance" name="vitesseCroissance">
695
													<option>nulle</option>
696
													<option>lente</option>
697
													<option>moyenne</option>
698
													<option>rapide</option>
699
													<option>trop rapide</option>
700
												</select>
1526 jpm 701
											</label>
702
										</div>
1537 jpm 703
									</div>
704
								</div>
705
								<div class="well">
706
									<div class="row-fluid">
707
										<div class="span12" rel="tooltip"
708
											title="Perception globale de l'espèce par l'équipe technique.">
709
											<label class="span4">
710
												Perceptions par l'équipe
1526 jpm 711
											</label>
712
											<div class="input-prepend">
1537 jpm 713
												<div class="btn-group">
714
													<button class="btn dropdown-toggle" data-toggle="dropdown">
1540 jpm 715
														<i class="icon-eye-open"></i>
1537 jpm 716
														Sélectionner une ou plusieurs perceptions
717
														<span class="caret"></span>
718
													</button>
719
													<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
720
														<li>
721
															<label class="checkbox">
722
																<input name="milieux" type="checkbox" value="ne connaissais pas la plante avant l'étude"/>
723
																ne connaissais pas la plante avant l'étude
724
															</label>
725
														</li>
726
														<li>
727
															<label class="checkbox">
728
																<input name="milieux" type="checkbox" value="discrète ne pose pas de problème"/>
729
																discrète ne pose pas de problème
730
															</label>
731
														</li>
732
														<li>
733
															<label class="checkbox">
734
																<input name="milieux" type="checkbox" value="visible et esthétique"/>
735
																visible et esthétique
736
															</label>
737
														</li>
738
														<li>
739
															<label class="checkbox">
740
																<input name="milieux" type="checkbox" value="gênante, difficile à gérer"/>
741
																gênante, difficile à gérer
742
															</label>
743
														</li>
744
														<li>
745
															<label class="checkbox">
746
																<input name="milieux" type="checkbox" value="envahissante, cause des dégâts"/>
747
																envahissante, cause des dégâts
748
															</label>
749
														</li>
750
													</ul>
751
												</div>
1526 jpm 752
											</div>
753
										</div>
754
									</div>
1537 jpm 755
 
1526 jpm 756
									<div class="row-fluid">
1537 jpm 757
										<div class="span12" rel="tooltip"
758
											title="Mauvaise perception de la plante par les riverains." >
759
											<label>
760
												Mauvaise perception par les riverains ?
761
												<select id="perception-riverain" name="perceptionRiverain">
762
													<option>inconnue</option>
763
													<option>oui</option>
764
													<option>non</option>
765
												</select>
766
											</label>
1526 jpm 767
										</div>
768
									</div>
1537 jpm 769
								</div>
770
							</div>
771
						</div>
772
 
773
						</form>
774
						<form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
775
							method="post" enctype="multipart/form-data">
776
							<div class="row-fluid">
777
								<div class="span12 well">
1526 jpm 778
									<strong>Cliquez sur l'icone pour ajouter une image</strong>
779
									<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
780
									<div id ="photos-conteneur">
781
										<div id="photo-placeholder" rel="tooltip"
782
										title="Cliquez pour ajouter une photo de votre observation. Elle doit être au
783
											format JPEG et ne doit pas excéder 5Mo."></div>
784
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
785
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
786
										<div id="miniatures">
787
										</div>
788
										<p class="miniature-msg" class="span12">&nbsp;</p>
789
									</div>
1537 jpm 790
								</div>
1526 jpm 791
							</div>
1537 jpm 792
						</form>
793
						<div class="row-fluid">
794
							<div class="span12 centre" rel="tooltip"
795
								title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
796
									ajouter votre observation à la liste à transmettre.">
797
								<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
798
									Créer
799
								</button>
800
							</div>
801
						</div>
1540 jpm 802
 
1537 jpm 803
					</div>
804
				</div>
805
 
1540 jpm 806
				<!-- Messages d'erreur du formulaire-->
807
				<div class="row-fluid">
808
					<div class="zone-alerte span6 offset3">
809
						<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
810
							<a class="close">×</a>
811
							<h4 class="alert-heading">Information : 10 observations maximum</h4>
812
							<p>
813
								Vous venez d'ajouter votre 10ème observation.<br/>
814
								Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
815
							</p>
816
						</div>
817
					</div>
818
					<div class="zone-alerte span6 offset3">
819
						<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
820
							<a class="close">×</a>
821
							<h4 class="alert-heading">Information : champs en erreur</h4>
822
							<p>
823
								Certains champs du formulaire sont mal remplis.<br/>
824
								Veuillez vérifier vos données.
825
							</p>
826
						</div>
827
					</div>
828
				</div>
829
 
1537 jpm 830
				<!-- Affiche le tableau récapitualif des observations ajoutées -->
831
				<div id="zone-liste-obs" class="row-fluid">
832
					<div class="span12">
833
						<div class="well">
1526 jpm 834
							<div class="row-fluid">
1537 jpm 835
								<div class="span8">
836
									<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
837
								</div>
838
								<div class="span4 droite">
839
									<button id="transmettre-obs" class="btn btn-primary btn-large"
840
										type="button" disabled="disabled" rel="tooltip"
841
										title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
842
										Transmettre
1526 jpm 843
									</button>
844
								</div>
845
							</div>
1537 jpm 846
							<div id="liste-obs" ></div>
847
							<div class="row">
848
								<div class="zone-alerte span6 offset3">
849
									<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
850
										<a class="close">×</a>
851
										<h4 class="alert-heading">Attention : aucune observation</h4>
852
										<p>Veuillez saisir des observations pour les transmettres.</p>
853
									</div>
854
 
855
									<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
856
										<a class="close">×</a>
857
										<h4 class="alert-heading">Information : transmission des observations</h4>
858
										<div class="alert-txt"></div>
859
									</div>
860
 
861
									<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
862
										<a class="close">×</a>
863
										<h4 class="alert-heading">Erreur : transmission des observations</h4>
864
										<div class="alert-txt"></div>
865
									</div>
866
								</div>
867
							</div>
868
 
1526 jpm 869
						</div>
870
					</div>
1537 jpm 871
				</div>
872
 
873
				<footer class="row-fluid">
874
					<p class="span12">&copy; Tela Botanica 2013</p>
875
				</footer>
1526 jpm 876
			</div>
877
 
878
			<!-- Fenêtres modales -->
879
			<div id="chargement" class="modal-fenetre" style="display:none;">
880
				<div id="chargement-centrage" class="modal-contenu">
881
					<img id="chargement-img"
882
						src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif"
883
						alt="Transfert en cours..."/>
884
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
885
						Transfert des observations en cours...<br />
886
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
887
						d'observations à transférer.
888
					</p>
889
				</div>
890
			</div>
891
 
892
			<!-- Templates HTML -->
893
			<div id="tpl-transmission-ok" style="display:none;">
894
				<p class="msg">
895
					Vos observations ont bien été transmises.<br />
896
					Elles sont désormais consultables à travers les différents outils de visualisation
1537 jpm 897
					du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
898
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
899
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
1526 jpm 900
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
901
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
902
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
903
					N'oubliez pas qu'il est nécessaire de
904
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
905
					au préalable, si ce n'est pas déjà fait.
906
				</p>
907
			</div>
908
			<div id="tpl-transmission-ko" style="display:none;">
909
				<p class="msg">
910
					Une erreur est survenue lors de la transmission de vos observations.<br />
911
					Vous pouvez signaler le dysfonctionnement à
912
					<a class="courriel-erreur" href="mailto:">cel_remarques@tela-botanica.org</a>.
913
				</p>
914
			</div>
915
 
916
			<!-- Stats : Google Analytics-->
917
			<script type="text/javascript">
918
				//<![CDATA[
919
				var _gaq = _gaq || [];
920
				_gaq.push(['_setAccount', 'UA-20092557-1']);
921
				_gaq.push(['_trackPageview']);
922
 
923
				(function() {
924
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
925
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
926
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
927
				})();
928
				//]]>
929
			</script>
930
		</div>
931
	</body>
932
</html>