Subversion Repositories eFlore/Applications.cel

Rev

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