Subversion Repositories eFlore/Applications.cel

Rev

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