Subversion Repositories eFlore/Applications.cel

Rev

Rev 2850 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
2850 aurel 1
<!DOCTYPE html>
2
<html>
3
	<head>
4
 
5
		<title>Messicoles</title>
6
 
7
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
8
		<meta http-equiv="Content-style-type" content="text/css" />
9
		<meta http-equiv="Content-script-type" content="text/javascript" />
10
		<meta http-equiv="Content-language" content="fr" />
11
 
12
		<meta name="revisit-after" content="15 days" />
13
		<meta name="robots" content="index,follow" />
14
		<meta name="author" content="Tela Botanica" />
15
		<meta name="keywords" content="Messicoles, Tela Botanica, CEL" />
16
		<meta name="description" content="Widget de saisie pour le projet Messicoles" />
17
 
18
		<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
19
		<meta property="og:type" content="website" />
20
		<meta property="og:title" content="Saisie rapide d'observations" />
21
		<meta property="og:site_name" content="Tela Botanica" />
22
		<meta property="og:description" content="Saisissez et partagez facilement vos observations de plantes sauvages grâce au Widget de saisie du Carnet en Ligne (Licence CC-BY-SA)" />
23
		<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
24
		<meta property="og:image:type" content="image/png" />
25
		<meta property="og:image:width" content="256" />
26
		<meta property="og:image:height" content="256" />
27
		<meta property="og:locale" content="fr_FR" />
28
 
29
		<!-- Viewport Mobile -->
30
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
31
 
32
		<!-- Favicones -->
33
		<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
34
 
35
		<!-- Javascript : bibliothèques -->
36
		<!-- Google Map v3 -->
2851 mathias 37
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
2850 aurel 38
		<!-- Jquery -->
39
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
40
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
41
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
42
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
43
		<!-- Jquery Plugins -->
44
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
45
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
46
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
47
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
48
		<!-- Jquery Form :nécessaire pour l'upload des images -->
49
		<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
50
		<!-- Bootstrap -->
51
		<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
52
 
53
 
54
 
55
 
56
 
57
		<!-- Javascript : appli saisie -->
58
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
59
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/messicoles/js/WidgetSaisieMessicoles.js"></script>
60
		<script type="text/javascript">
61
		//<![CDATA[
62
           $(document).ready(function() {
63
 
64
				// Héritage
65
				var widget = new WidgetSaisieMessicoles();
66
 
67
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
68
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
69
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
70
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
71
				// Mot-clé du widget/projet
72
				widget.tagProjet = "WidgetSaisie";
73
				// Mots-clés à ajouter aux images
74
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
75
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
76
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
77
				// Mots-clés à ajouter aux observations
78
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
79
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
80
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
81
				// Précharger le formulaire avec les infos d'une observation
82
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
83
				// URL du web service réalisant l'insertion des données dans la base du CEL.
84
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
85
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
86
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
87
				// Code du référentiel utilisé pour les nom scientifiques.
88
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
89
				// Indication de la présence d'une espèce imposée
90
				widget.especeImposee = "<?=$espece_imposee; ?>";
91
				// Tableau d'informations sur l'espèce imposée
92
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
93
				// Nombre d'élément dans les listes d'auto-complétion
94
				widget.autocompletionElementsNbre = 20;
95
				// Indication de la présence d'un référentiel imposé
96
				widget.referentielImpose = "<?=$referentiel_impose; ?>";
97
				// URL du web service permettant l'auto-complétion des noms scientifiques
98
				widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
99
					"masque={masque}&"+
100
					"recherche=etendue&"+
101
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
102
					"ns.structure=au"+"&"+
103
					"navigation.limite=" + widget.autocompletionElementsNbre;
104
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
105
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
106
					"masque={masque}&"+
107
					"recherche=etendue&"+
108
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
109
					"retour.tri=alpharet&"+ // tri "à la CeL"
110
					"ns.structure=au"+"&"+
111
					"navigation.limite=" + widget.autocompletionElementsNbre;
112
				// Nombre d'observations max autorisé avant transmission
113
				widget.obsMaxNbre = 10;
114
				// Durée d'affichage en milliseconde des messages d'informations
115
				widget.dureeMessage = 15000;
116
				// Squelette d'URL du web service de l'annuaire.
117
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
118
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
119
				widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
120
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
121
				widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
122
				// URL du marqueur à utiliser dans la carte Google Map
123
				widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
124
				// URL de l'icône du chargement en cours
125
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
126
				// URL de l'icône du chargement en cours d'une image
127
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
128
				// URL de l'icône du calendrier
129
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
130
				// URL de l'icône pour une photo manquante
131
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
132
 
133
				// Initialisation du bousin
134
				widget.init();
135
			});
136
		//]]>
137
		</script>
138
 
139
		<!-- CSS -->
140
		<link href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
141
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
142
		<link href="http://resources.tela-botanica.org/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
143
		<link href="<?=$url_base?>modules/saisie/squelettes/messicoles/css/<?=isset($_GET['style']) ? $_GET['style'] : 'messicoles'?>.css" rel="stylesheet" type="text/css" media="screen" />
144
 
145
		<!--  Google Analytics -->
146
		<?php if($prod): ?>
147
			<?php include "analytics.html"; ?>
148
		<?php endif; ?>
149
	</head>
150
 
151
	<body data-spy="scroll">
152
		<div class="container">
153
 
154
			<!-- Observateur -->
155
			<div class="row-fluid">
156
				<div class="span12">
157
					<div class="well">
158
						<form id="form-observateur" action="#" class="" autocomplete="on">
159
						<h2 id="titre-form-observateur">Observateur</h2>
160
							<div class="row-fluid">
161
								<div class="span6 has-tooltip" data-placement="right"
162
									title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
163
										Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
164
										ultérieurement. Des informations complémentaires vont vous être
165
										demandées : prénom et nom.">
166
									<label for="courriel"
167
										title="Veuillez saisir votre adresse courriel.">
168
										<strong class="obligatoire">*</strong>
169
										Courriel
170
									</label>
171
									<div class="input-prepend">
172
										<span class="add-on"><i class="icon-envelope"></i></span>
173
										<input id="courriel" class="input-large" name="courriel" type="text"/>
174
										<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
175
									</div>
176
								</div>
177
								<div id="zone-courriel-confirmation" class="span6 hidden">
178
									<label for="courriel_confirmation"
179
										title="Veuillez saisir confirmer le courriel.">
180
										<strong class="obligatoire">*</strong>
181
										Courriel (confirmation)
182
									</label>
183
									<div class="input-prepend">
184
										<span class="add-on">
185
											<i class="icon-envelope"></i>
186
										</span><input id="courriel_confirmation" class="input-large" name="courriel_confirmation" type="text"/>
187
									</div>
188
								</div>
189
							</div>
190
							<div id="zone-prenom-nom" class="row-fluid hidden">
191
								<div class="span6">
192
									<label for="prenom">Prénom</label>
193
									<div>
194
										<input id="prenom" name="prenom" class="span3" type="text"/>
195
									</div>
196
								</div>
197
								<div class="span6">
198
									<label for="nom">Nom</label>
199
									<div>
200
										<input id="nom" name="nom"  class="span3" type="text"/>
201
									</div>
202
								</div>
203
							</div>
204
						</form>
205
					</div>
206
				</div>
207
			</div>
208
 
209
 
210
			<!-- Messages d'erreur du formulaire-->
211
			<div class="row">
212
				<div class="zone-alerte span6 offset3">
213
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
214
						<a class="close">×</a>
215
						<h4 class="alert-heading">Information : copier/coller</h4>
216
						<p>
217
							Merci de ne pas copier/coller votre courriel.<br/>
218
							La double saisie permet de vérifier l'absence d'erreurs.
219
						</p>
220
					</div>
221
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
222
						<a class="close">×</a>
223
						<h4 class="alert-heading">Information : courriel introuvable</h4>
224
						<p>
225
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
226
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
227
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
228
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
229
						</p>
230
					</div>
231
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
232
						<a class="close">×</a>
233
						<h4 class="alert-heading">Information sur Google Maps</h4>
234
						<div class="contenu"></div>
235
					</div>
236
				</div>
237
			</div>
238
 
239
 
240
 
241
			<!-- Fiche terrain -->
242
			<div class="row-fluid">
243
				<div class="span12">
244
					<div class="well">
245
 
246
						<!-- Formulaire Relevé -->
247
						<form id="form-releve" class="form" action="#" autocomplete="on">
248
 
249
							<!-- Titre Relevé -->
250
							<h2 id="titre-form-releve">Relevé</h2>
251
 
252
							<!-- Date du relevé -->
253
							<div class="span12 has-tooltip"
254
								title="Vous pouvez cliquer sur l'icône de calendrier pour
255
									sélectionner une date dans un calendrier.">
256
								<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
257
									<h4>Date du relevé</h4>
258
								</label>
259
								<div class="input-prepend">
260
									<span id="date-icone" class="add-on"></span><input id="date"
261
										class="input-small" name="date" type="text"
262
										placeholder="jj/mm/aaaa" />
263
								</div>
264
							</div>
265
 
266
							<!-- Lieu du relevé -->
267
							<div class="span12 has-tooltip control-group"
268
								title="Vous pouvez sélectionner un type de culture parmi la liste ou en saisir un manuellement via l'option Autres">
269
								<label for="type_culture" title="Veuillez indiquer le type de culture">
270
									<h4>Lieu du relevé</h4>
271
								</label>
272
								<!-- Céréale -->
273
								<label for="cereale" class="radio">
274
									<input type="radio" id="cereale" name="type-culture" value="cereale" />
275
									Céréale	<img src="img/icones/aide.png">
276
								</label>
277
								<!-- Friche -->
278
								<label for="friche" class="radio">
279
									<input type="radio" id="friche" name="type-culture" value="friche" />
280
									Friche	<img src="img/icones/aide.png">
281
								</label>
282
								<!-- Légumineuse -->
283
								<label for="legumineuse" class="radio">
284
									<input type="radio" id="legumineuse" name="type-culture" value="legumineuse" />
285
									Légumineuse	<img src="img/icones/aide.png">
286
								</label>
287
								<!-- Vigne -->
288
								<label for="vigne" class="radio">
289
									<input type="radio" id="friche" name="type-culture" value="vigne" />
290
									Vigne <img src="img/icones/aide.png">
291
								</label>
292
								<!-- Verger -->
293
								<label for="verger" class="radio">
294
									<input type="radio" id="verger" name="type-culture" value="verger" />
295
									Verger <img src="img/icones/aide.png">
296
								</label>
297
								<!-- Autres -->
298
								<label for="autres" class="radio">
299
									<input type="radio" id="autres" name="type-culture" value="autres" />
300
									Autres <img src="img/icones/aide.png">
301
									<input type="text" id="culture-autres" name="culture-autres">
302
								</label>
303
 
304
								<!-- Définition de la culture (photo) -->
305
								<div class="span12 has-tooltip droite">
306
									<img id="test" src="" alt="">
307
								</div>
308
 
309
							</div>
310
 
311
						</form>
312
 
313
 
314
 
315
						<!-- Formulaire Observations -->
316
						<form id="form-observations" class="form" action="#" autocomplete="on">
317
 
318
							<!-- Titre Observations -->
319
							<h2 id="titre-form-obervations">Observations</h2>
320
 
321
							<!-- Espèce -->
322
							<div id="taxon-input-groupe" class="span8 has-tooltip"
323
								title="Sélectionnez une espèce dans la liste déroulante pour lier
324
									votre nom au référentiel selectionné. Si vous
325
									le désirez vous pouvez aussi saisir un nom absent du référentiel
326
									(Ex. : 'fleur violette' ou 'viola sinensis???')." >
327
								<label for="taxon" title="Choisissez une espèce">
328
									<strong class="obligatoire">
329
										<h4>Espèce</h4>
330
									</strong>
331
								</label>
332
								<div class="input-prepend">
333
									<span class="add-on">
334
										<i class="icon-leaf"></i>
335
									</span><input type="text" id="taxon" name="taxon" value="<?= $nom_sci_espece_defaut; ?>" />
336
								</div>
337
								<?php if(!$referentiel_impose && !$espece_imposee) : ?>
338
								<div class="row-fluid">
339
									<div class="has-tooltip"
340
										title="Sélectionnez le référentiel associé à votre relevé">
341
										<label for="referentiel" title="Réferentiel">
342
											<h4>Référentiel</h4>
343
										</label>
344
										<span class="input-prepend">
345
											<span id="referentiel-icone" class="add-on"><i class="icon-book"></i></span>
346
											<select id="referentiel" autocomplete="off">
347
												<option value="bdtfx" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
348
												<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
349
												<option value="bdtre" title="Trachéophytes de La Réunion">Réunion (BDTRE)</option>
350
												<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
351
												<option value="apd" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (APD)</option>
352
												<option value="lbf" title="Liban">Liban (LBF)</option>
353
												<option value="autre" title="Autre/Inconnu">Autre/Inconnu</option>
354
											</select>
355
										</span>
356
									</div>
357
								</div>
358
							<?php endif; ?>
359
							</div>
360
 
361
							<!-- Identification -->
362
							<div class="row-fluid">
363
								<div class="span12 control-group has-tooltip"
364
									title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
365
									<label class="span12 control-label">
366
										<h4>Identification</h4>
367
									</label>
368
									<div id="certitude-controls" class="controls">
369
										<span class="span12" title="Détermination certaine">
370
											<input type="radio" name="certitude" id="certitude-certaine" value="certain" />
371
											<label for="certitude-certaine">Certaine</label>
372
										</span>
373
										<span class="span12" title="Détermination incertaine mais pas inexacte">
374
											<input type="radio" name="certitude" id="certitude-douteuse" value="douteux" />
375
											<label for="certitude-douteuse">Douteuse</label>
376
										</span>
377
										<span class="span12" title="Détermination inconnue">
378
											<input type="radio" name="certitude" id="certitude-adeterminer" value="aDeterminer" />
379
											<label for="certitude-adeterminer">A determiner</label>
380
										</span>
381
									</div>
382
								</div>
383
							</div>
384
 
385
							<!-- Abondance -->
386
							<div class="row-fluid">
387
								<div class="span12 control-group has-tooltip"
388
									title="Indiquez l'abondance du nom d'espèce indiqué">
389
									<label class="span12 control-label">
390
										<h4>Abondance</h4>
391
									</label>
392
									<div id="abondance-controls" class="controls">
393
										<span class="span12" title="Abondance faible">
394
											<input type="radio" name="abondance" id="abondance-certaine" value="certain" />
395
											<label for="abondance-certaine">1 à 10 spécimens</label>
396
										</span>
397
										<span class="span12" title="Abondance modérée">
398
											<input type="radio" name="abondance" id="abondance-douteuse" value="douteux" />
399
											<label for="abondance-douteuse">10 à 100 spécimens</label>
400
										</span>
401
										<span class="span12" title="Détermination inconnue">
402
											<input type="radio" name="abondance" id="abondance-adeterminer" value="aDeterminer" />
403
											<label for="abondance-adeterminer">100 à 1000 spécimens</label>
404
										</span>
405
									</div>
406
								</div>
407
							</div>
408
 
409
							<!-- Zone du champs -->
410
							<div class="row-fluid">
411
								<div class="span12 control-group has-tooltip"
412
								title="Indiquez la ou les zone(s) du champs où l'espèce saisie a été observée">
413
									<label class="span12 control-label">
414
										<h4>Zone du champs</h4>
415
									</label>
416
									<div id="zoneChamps-controls" class="controls">
417
										<!-- Bordure -->
418
										<div class="checkbox" for="bordure">
419
											<input type="checkbox" name="zoneChamps" id="bordure" value="bordure" />
420
											<label for="bordure">Bordure</label>
421
											<img src="img/icones/aide.png">
422
										</span>
423
										<!-- Coeur-->
424
										<span class="checkbox">
425
											<input type="checkbox" name="zoneChamps" id="coeur" value="coeur" />
426
											<label for="coeur">Coeur du champs</label>
427
											<img src="img/icones/aide.png">
428
										</span>
429
										<!-- Délaissée -->
430
										<span class="checkbox">
431
											<input type="checkbox" name="zoneChamps" id="delaissee" value="delaissee" />
432
											<label for="delaissee">Zone délaissée</label>
433
											<img class="aide" src="img/icones/aide.png">
434
										</span>
435
									</div>
436
								</div>
437
							</div>
438
 
439
							<!-- Notes -->
440
							<div class="row-fluid">
441
								<div class="span12">
442
									<label for="notes"><h4>Notes</h4></label>
443
									<div>
444
										<textarea id="notes" class="span6" rows="7" name="notes"
445
											placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
446
									</div>
447
								</div>
448
							</div>
449
						</form>
450
 
451
						<!--Photos -->
452
						<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
453
							method="post" enctype="multipart/form-data">
454
							<h2>Image(s) de cette plante</h2>
455
							<strong>Ajouter une image</strong>
456
							<p class="miniature-info" class="discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
457
							<div id ="photos-conteneur">
458
								<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
459
								<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
460
								<div id="miniatures">
461
								</div>
462
								<p class="miniature-msg" class="span12">&nbsp;</p>
463
							</div>
464
						</form>
465
 
466
						<!-- Bouton créer -->
467
						<div class="row-fluid">
468
							<div class="span12 centre has-tooltip"
469
								title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
470
									ajouter votre observation à la liste à transmettre.">
471
								<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
472
									Créer
473
								</button>
474
							</div>
475
						</div>
476
 
477
					</div>
478
				</div>
479
			</div>
480
			<!-- Fin -->
481
 
482
 
483
 
484
			<!-- Messages d'erreur du formulaire-->
485
			<div class="row">
486
				<div class="zone-alerte span6 offset3">
487
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
488
						<a class="close">×</a>
489
						<h4 class="alert-heading">Information : 10 observations maximum</h4>
490
						<p>
491
							Vous venez d'ajouter votre 10ème observation.<br/>
492
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
493
						</p>
494
					</div>
495
				</div>
496
				<div class="zone-alerte span6 offset3">
497
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
498
						<a class="close">×</a>
499
						<h4 class="alert-heading">Information : champs en erreur</h4>
500
						<p>
501
							Certains champs du formulaire sont mal remplis.<br/>
502
							Veuillez vérifier vos données.
503
						</p>
504
					</div>
505
				</div>
506
			</div>
507
 
508
 
509
 
510
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
511
			<div id="zone-liste-obs" class="row-fluid">
512
				<div class="span12">
513
					<div class="well">
514
						<div class="row-fluid">
515
							<div class="span8">
516
								<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
517
							</div>
518
							<div class="span4 droite">
519
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
520
									type="button" disabled="disabled"
521
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
522
									Transmettre
523
								</button>
524
							</div>
525
						</div>
526
						<div id="liste-obs" ></div>
527
						<div class="row">
528
							<div class="zone-alerte span6 offset3">
529
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
530
									<a class="close">×</a>
531
									<h4 class="alert-heading">Attention : aucune observation</h4>
532
									<p>Veuillez saisir des observations pour les transmettres.</p>
533
								</div>
534
 
535
								<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;"">
536
									<a class="close">×</a>
537
									<h4 class="alert-heading">Information : transmission des observations</h4>
538
									<div class="alert-txt"></div>
539
								</div>
540
 
541
								<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
542
									<a class="close">×</a>
543
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
544
									<div class="alert-txt"></div>
545
								</div>
546
							</div>
547
						</div>
548
 
549
					</div>
550
				</div>
551
			</div>
552
 
553
			<!-- Footer -->
554
			<footer class="row-fluid">
555
				<p class="span12">&copy; Tela Botanica 2015</p>
556
			</footer>
557
 
558
			<!-- Fenêtres modales -->
559
			<div id="chargement" class="modal-fenetre" style="display:none;">
560
				<div id="chargement-centrage" class="modal-contenu">
561
					<div class="progress progress-striped active">
562
			 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
563
			    			<span class="sr-only">0/10 observations transmises</span>
564
			  			</div>
565
					</div>
566
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
567
						Transfert des observations en cours...<br />
568
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
569
						d'observations à transférer.
570
					</p>
571
				</div>
572
			</div>
573
 
574
			<!-- Templates HTML -->
575
			<div id="tpl-transmission-ok" style="display:none;">
576
				<p class="msg">
577
					Vos observations ont bien été transmises.<br />
578
					Elles sont désormais consultables à travers les différents outils de visualisation
579
					du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
580
					<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
581
					<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
582
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
583
					Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
584
					connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
585
					N'oubliez pas qu'il est nécessaire de
586
					<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
587
					au préalable, si ce n'est pas déjà fait.
588
				</p>
589
			</div>
590
			<div id="tpl-transmission-ko" style="display:none;">
591
				<p class="msg">
592
					Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
593
					Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
594
					et transmettre les suivantes.<br />
595
					Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
596
					Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
597
					<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
598
								  target="_blank"
599
								  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
600
								  le formulaire de signalement d'erreurs</a>.
601
				</p>
602
			</div>
603
		</div>
604
	</body>
605
</html>