Subversion Repositories eFlore/Applications.cel

Rev

Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1346 aurelien 1
<!DOCTYPE html>
1916 jpm 2
<html lang="fr">
1054 jpm 3
	<head>
4
		<title>Sauvages de ma rue</title>
1916 jpm 5
		<meta charset="utf-8">
2408 jpm 6
 
1916 jpm 7
		<meta name="author" content="Jean-Pascal MILCENT, Aurélien PERONNET, Céline VIDAL" />
8
		<meta name="keywords" content="Sauvages de ma rue, CEL, Tela Botanica, Natural Solutions, MNHN" />
9
		<meta name="description" content="Widget de saisie pour le projet Sauvages de ma rue" />
2408 jpm 10
 
1916 jpm 11
		<!-- Viewport Mobile -->
12
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
2408 jpm 13
 
1054 jpm 14
		<!-- Favicones -->
1916 jpm 15
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/sauvages/img/favicon.ico" />
2408 jpm 16
 
1054 jpm 17
		<!-- Javascript : bibliothèques -->
18
		<!-- Google Map v3 -->
2993 mathias 19
		<script type="text/javascript" src="https://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
1054 jpm 20
		<!-- Jquery -->
2993 mathias 21
		<script type="text/javascript" src="https://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
1916 jpm 22
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
2993 mathias 23
		<script type="text/javascript" src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
24
		<script type="text/javascript" src="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
1916 jpm 25
		<!-- Jquery Plugins -->
26
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
2993 mathias 27
		<script type="text/javascript" src="https://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate-patched.min.js"></script>
28
		<script type="text/javascript" src="https://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
29
		<script type="text/javascript" src="https://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
1916 jpm 30
		<!-- Jquery Form :nécessaire pour l'upload des images -->
2993 mathias 31
		<script type="text/javascript" src="https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
1916 jpm 32
		<!-- Bootstrap -->
2993 mathias 33
		<script type="text/javascript" src="https://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
2408 jpm 34
 
1054 jpm 35
		<!-- Javascript : appli saisie -->
2700 mathias 36
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
37
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/sauvages/js/WidgetSaisieSauvages.js"></script>
1916 jpm 38
		<script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
1054 jpm 39
		<script type="text/javascript">
40
		//<![CDATA[
2709 mathias 41
        	$(document).ready(function() {
2700 mathias 42
				// Héritage !!
43
				var widget = new WidgetSaisieSauvages();
2408 jpm 44
 
2709 mathias 45
				// la variable "taxons" chargée par "service=taxons" ci-dessus n'est pas accessible dans le contexte objet
46
				widget.taxons = taxons;
47
 
2700 mathias 48
				// La présence du parametre 'debug' dans l'URL enclenche le débogage
49
				widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
50
				// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
51
				widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
52
				// Mot-clé du widget/projet
53
				widget.tagProjet = "WidgetSauvages,Sauvages";
54
				// Mots-clés à ajouter aux images
55
				widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
56
				widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
57
				widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
58
				// Mots-clés à ajouter aux observations
59
				widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
60
				widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
61
				widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
62
				// Précharger le formulaire avec les infos d'une observation
63
				widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
64
				// URL du web service réalisant l'insertion des données dans la base du CEL.
65
				widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
66
				// URL du web service permettant de récupérer les infos d'une observation du CEL.
67
				widget.serviceObsUrl = "<?=$url_ws_obs?>";
68
				// Code du référentiel utilisé pour les nom scientifiques.
69
				widget.nomSciReferentiel = "<?=$ns_referentiel?>";
70
				// Indication de la présence d'une espèce imposée
71
				widget.especeImposee = "<?=$espece_imposee; ?>";
72
				// Tableau d'informations sur l'espèce imposée
73
				widget.infosEspeceImposee = <?=$infos_espece; ?>;
74
				// Nombre d'élément dans les listes d'auto-complétion
75
				widget.autocompletionElementsNbre = 20;
76
				// Indication de la présence d'un référentiel imposé
77
				widget.referentielImpose = "<?=$referentiel_impose; ?>";
78
				// URL du web service permettant l'auto-complétion des noms scientifiques
79
				widget.serviceAutocompletionNomSciUrl = "<?=$url_ws_autocompletion_ns?>?"+
1916 jpm 80
					"masque={masque}&"+
81
					"recherche=etendue&"+
82
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
83
					"ns.structure=au"+"&"+
2700 mathias 84
					"navigation.limite=" + widget.autocompletionElementsNbre;
85
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
86
				widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
1916 jpm 87
					"masque={masque}&"+
88
					"recherche=etendue&"+
89
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
2700 mathias 90
					"retour.tri=alpharet&"+ // tri "à la CeL"
1916 jpm 91
					"ns.structure=au"+"&"+
2700 mathias 92
					"navigation.limite=" + widget.autocompletionElementsNbre;
93
				// Nombre d'observations max autorisé avant transmission
94
				widget.obsMaxNbre = 10;
95
				// Durée d'affichage en milliseconde des messages d'informations
96
				widget.dureeMessage = 15000;
97
				// Squelette d'URL du web service de l'annuaire.
98
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
2916 mathias 99
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes. @TODO configurer !!!!
2996 mathias 100
				widget.serviceNomCommuneUrl = "https://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
2700 mathias 101
				// Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
2996 mathias 102
				widget.serviceNomCommuneUrlAlt = "https://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
2700 mathias 103
				// URL de l'icône du chargement en cours
104
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
105
				// URL de l'icône du chargement en cours d'une image
106
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
107
				// URL de l'icône du calendrier
108
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
109
				// URL de l'icône pour une photo manquante
110
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
111
				// URL du marqueur de début de rue
112
				widget.googleMapMarqueurDebutUrl = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/marqueurs/debut.png";
113
				// URL du marqueur de fin de rue
114
				widget.googleMapMarqueurFinUrl = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/marqueurs/fin.png";
2916 mathias 115
 
2700 mathias 116
				// La présence du parametre 'ville' dans l'URL géolocalise
117
				widget.ville = "<?=isset($_GET['ville']) ? $_GET['ville'] : ''?>";
118
				widget.ville = <?= isset($_GET['commune']) ? "'".$_GET['commune']."'" : 'widget.ville' ?>;
2905 aurel 119
				// La zone géographique passée en paramètre dans l'URL
120
				widget.zoneGeo = "<?= $zone_geo ?>";
2916 mathias 121
				// Pareil, avec un gorupe de zones géo
122
				widget.groupeZonesGeo = "<?= $groupe_zones_geo ?>";
123
				// URL service de recherche de zones
124
				widget.serviceCoordSearchUrl = "<?=$url_ws_coord_search_tpl?>";
125
 
2700 mathias 126
				// URL de l'icône du bouton supprimer
2744 aurelien 127
				widget.supprimerIconeUrl = "<?=$url_base?>/modules/saisie/squelettes/sauvages/img/icones/supprimer.png";
128
				// URL du service de trace des rues
129
				widget.serviceTraceRueUrl = "<?=$url_ws_trace_rue_tpl?>";
2700 mathias 130
 
131
				// Go bibiche !
132
				widget.init();
133
        });
1054 jpm 134
		//]]>
135
		</script>
2408 jpm 136
 
1054 jpm 137
		<!-- CSS -->
2993 mathias 138
		<link href="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" media="screen" />
139
		<link href="https://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
140
		<link href="https://resources.tela-botanica.org/bootstrap/2.3.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
1346 aurelien 141
		<link href="<?=$url_base?>modules/saisie/squelettes/sauvages/css/<?=isset($_GET['style']) ? $_GET['style'] : 'sauvages'?>.css" rel="stylesheet" type="text/css" media="screen" />
2848 mathias 142
 
143
		<!--  Google Analytics -->
144
		<?php if($prod): ?>
145
			<?php include "analytics.html"; ?>
146
		<?php endif; ?>
1054 jpm 147
	</head>
148
 
1916 jpm 149
	<body data-spy="scroll">
150
		<div id="zone-appli" class="container">
1922 jpm 151
			<div class="row-fluid entete">
152
				<div class="span12">
2908 aurel 153
					<div class="row-fluid">
154
						<div class="span12">
155
							<?php if($logo != 'defaut' && $logo != '0') { ?>
156
								<img id="logo-titre" class="span1" src="<?= $logo ?>" alt="Logo" />
157
							<?php } else if($logo == 'defaut') { ?>
158
								<h1 id="widget-titre"><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/img/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
159
							<?php } ?>
160
						</div>
161
					</div>
162
					<div class="row-fluid">
163
						<div class="span12">
164
							<p class="discretion">
165
								Un aide interactive est à votre disposition sur l'interface.
166
								Une fois familiarisé, vous pouvez cliquer sur le bouton suivant pour la désactiver :
167
								<button id="btn-aide" class="btn btn-mini btn-success">
168
									<span class="icon-question-sign icon-white"></span>
169
									<span id="btn-aide-txt" >Désactiver l'aide</span>
170
								</button>
171
							</p>
172
						</div>
173
					</div>
1922 jpm 174
				</div>
175
			</div>
2408 jpm 176
			<div class="row-fluid">
1922 jpm 177
				<div class="span12">
178
					<form id="form-observateur" action="#" autocomplete="on">
1946 jpm 179
						<h2 id="titre-form-observateur">Observateur</h2>
180
						<div id="zone-identification">
181
							<fieldset id="partie-identification">
182
								<div class="row-fluid">
183
									<div class="span6 control-group has-tooltip" data-placement="bottom"
2742 mathias 184
										title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
2408 jpm 185
											Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
186
											ultérieurement. Des informations complémentaires vont vous être
1946 jpm 187
											demandées : prénom et nom.">
188
											<label class="control-label" for="courriel">
2408 jpm 189
												<strong class="obligatoire">*</strong>
1946 jpm 190
												Courriel
191
											</label>
192
											<div class="controls">
193
												<div class="input-prepend">
194
													<span class="add-on">
195
														<i class="icon-envelope"></i>
196
													</span>
197
													<input id="courriel" name="courriel" class="span11" type="text"/>
198
													<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
199
												</div>
200
											</div>
2408 jpm 201
 
1946 jpm 202
									</div>
2049 jpm 203
									<div id="zone-courriel-confirmation" class="span6 control-group has-tooltip"
204
										style="display:none;"
2408 jpm 205
										data-placement="bottom"
206
										title="Saisissez à nouveau votre courriel afin de le confirmer. Le
1946 jpm 207
											copier/coller est désactivé pour éviter les erreurs.">
208
										<label class="control-label" for="courriel_confirmation">
209
											<strong class="obligatoire">*</strong>
210
											Courriel (confirmation)
1922 jpm 211
										</label>
212
										<div class="controls">
213
											<div class="input-prepend">
214
												<span class="add-on">
215
													<i class="icon-envelope"></i>
216
												</span>
2408 jpm 217
												<input id="courriel_confirmation" name="courriel_confirmation"
1946 jpm 218
												 	class="span11" type="text"/>
1922 jpm 219
											</div>
220
										</div>
1946 jpm 221
									</div>
1922 jpm 222
								</div>
2049 jpm 223
								<div id="zone-prenom-nom" class="row-fluid" style="display:none;">
1946 jpm 224
									<div class="span6 control-group">
225
										<label for="prenom" class="control-label">
226
											<strong class="obligatoire">*</strong>
227
											Prénom
228
										</label>
229
										<input id="prenom" name="prenom" class="span12" type="text"/>
230
									</div>
231
									<div class="span6 control-group">
232
										<label for="nom" class="control-label">
233
											<strong class="obligatoire">*</strong>
234
											Nom
235
										</label>
236
										<div class="controls">
237
											<input id="nom" name="nom"  class="span12" type="text"/>
1922 jpm 238
										</div>
1916 jpm 239
									</div>
240
								</div>
2408 jpm 241
							</fieldset>
1946 jpm 242
						</div>
1922 jpm 243
					</form>
244
				</div>
245
			</div>
246
			<!-- Messages d'erreur du formulaire-->
247
			<div class="row-fluid">
248
				<div class="zone-alerte span12">
249
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
250
						<a class="close">×</a>
251
						<h4 class="alert-heading">Information : copier/coller</h4>
252
						<p>
253
							Merci de ne pas copier/coller votre courriel.<br/>
254
							La double saisie permet de vérifier l'absence d'erreurs.
255
						</p>
1916 jpm 256
					</div>
1922 jpm 257
					<div id="dialogue-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
258
						<a class="close">×</a>
259
						<h4 class="alert-heading">Information : courriel introuvable</h4>
260
						<p>
261
							Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
262
							Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
2408 jpm 263
							Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
1922 jpm 264
							il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
265
						</p>
1916 jpm 266
					</div>
1922 jpm 267
					<div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
268
						<a class="close">×</a>
269
						<h4 class="alert-heading">Information sur Google Map</h4>
270
						<div class="contenu"></div>
271
					</div>
272
				</div>
273
			</div>
2408 jpm 274
 
1946 jpm 275
			<!-- Fiche terrain -->
1922 jpm 276
			<form id="form-obs" class="form-inline" action="#" autocomplete="on">
1946 jpm 277
				<h2 id="titre-form-obs">Fiche de terrain</h2>
1346 aurelien 278
				<div id="zone-fiche-terrain">
279
					<fieldset id="partie-date">
1922 jpm 280
						<legend>Date du relevé</legend>
2408 jpm 281
						<div class="row-fluid">
282
							<div class="span12 control-group has-tooltip"
283
								title="Vous pouvez cliquer sur l'icône de calendrier pour
284
								sélectionner une date dans un calendrier. La date doit être au format :
1922 jpm 285
								jj/mm/aaaa">
286
								<label class="control-label">
287
									<strong class="obligatoire">*</strong>
2408 jpm 288
									Date du relevé
1922 jpm 289
									<div class="input-prepend">
290
										<span id="date-icone" class="add-on"></span>
2408 jpm 291
										<input id="date" class="input-small" name="date" type="text"
1922 jpm 292
											placeholder="jj/mm/aaaa" />
293
									</div>
1346 aurelien 294
								</label>
1922 jpm 295
							</div>
296
						</div>
1346 aurelien 297
					</fieldset>
2408 jpm 298
 
1346 aurelien 299
					<fieldset id="partie-station">
300
						<legend>Lieu du relevé</legend>
1922 jpm 301
						<div class="row-fluid">
302
							<div class="span12">
2408 jpm 303
								<label for="map_canvas" class="control-label"
1922 jpm 304
										title="Veuillez localiser l'observation">
305
									<strong class="obligatoire">*</strong>
306
									Géolocalisation
1346 aurelien 307
								</label>
1922 jpm 308
								<div class="row-fluid">
309
									<div class="span12">
310
										<ul class="unstyled liste_indication_geolocalisation">
311
											<li class="indication_geolocalisation">Étape 1/4 : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li>
312
											<li class="indication_geolocalisation">Étape 2/4 : Placez le drapeau vert au début de la portion de rue étudiée</li>
313
											<li class="indication_geolocalisation">Étape 3/4 : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé, vous pouvez redéplacer le drapeau vert</li>
2748 aurelien 314
											<li class="indication_geolocalisation">
315
												Étape 4/4 : Voilà ! Si la rue tracée entre les drapeaux rouge et vert correspond à votre inventaire,<br />
316
												Vous pouvez passer à la saisie de l'observation. Sinon vous pouvez choisir un autre tracé dans l'encadré vert sur la carte à l'aide des flèches.<br />
317
											</li>
1922 jpm 318
										</ul>
319
									</div>
320
								</div>
321
								<div class="form-search form-horizontal">
322
									<div class="control-group">
2408 jpm 323
										<input id="carte-recherche"
1922 jpm 324
											class="search-query span12 obs-chp-etendu has-tooltip"
325
											type="text"
326
											title="Permet de centrer la carte sur le lieu recherché. Il est nécessaire de sélectionner le lieu dans la liste déroulante."
327
											placeholder="Entrez un nom de ville, de lieu ou de rue..."
328
											name="adresse"
329
											data-label="Adresse"
330
											value=""/>
331
									</div>
332
								</div>
333
							</div>
334
						</div>
335
						<div class="row-fluid">
2744 aurelien 336
							<div id="indication-nom-rue">
337
								<a href="#" class="navigation-rue navigation-rue-precedent" id="indication-nom-rue-precedent">&#8592;</a>
338
								<div id="indication-nom-rue-nom">Pas de rue selectionnée</div>
339
								<a href="#" class="navigation-rue navigation-rue-suivant" id="indication-nom-rue-suivant">&#8594;</a>
340
							</div>
341
							<div class="span12" id="map-container">
2408 jpm 342
								<div id="map-canvas" class="has-tooltip"
1922 jpm 343
									title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
2408 jpm 344
										représentant votre station ou bien le glisser-déposer sur
1922 jpm 345
										le lieu souhaité."></div>
346
							</div>
347
						</div>
348
						<div id="coordonnees-geo-affichage" class="row-fluid">
349
							<label for="coordonnees-geo" class="span6">
350
								<a class="afficher-coord btn">
351
									<span class="afficher-coord-action">Afficher</span>
352
									<span class="afficher-coord-action" style="display:none;">Cacher</span>
353
									coordonnées
2408 jpm 354
									<span id="lat-lon-info" class="info has-tooltip"
1346 aurelien 355
										title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
356
										(WGS84)
357
									</span>
1922 jpm 358
								</a>
359
							</label>
360
							<div id="info-commune" class="span6">
361
								<span for="marqueur-commune">Commune : </span>
362
								<span id="marqueur-commune">
363
									<span id="commune-nom" class="commune-info"></span>
2408 jpm 364
									(<span id="commune-code-insee" class="commune-info has-tooltip"
1922 jpm 365
										title="Code INSEE de la commune"></span>)
366
								</span>
367
							</div>
368
						</div>
369
						<div id="coordonnees-geo" class="row-fluid" style="display:none;">
370
							<div class="form-inline">
371
								<div id="coord-lat" class="span4 control-group">
372
									<label for="latitude" class="control-label">
373
										<strong class="obligatoire">*</strong>
374
										Latitude
375
									</label>
376
									<div class="controls">
377
										<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
378
									</div>
379
								</div>
380
								<div id="coord-lng" class="span4">
381
									<label for="longitude" class="control-label">
382
										<strong class="obligatoire">*</strong>
383
										Longitude
384
									</label>
385
									<div class="controls">
386
										<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
387
									</div>
388
								</div>
389
								<div class="span4">
390
									<button id="geolocaliser" class="btn has-tooltip"
391
										title="Centre la carte sur les coordonnées de latitude et longitude saisies.">
392
										Voir sur la carte
393
									</button>
394
								</div>
2905 aurel 395
								<input id="longitude" class="input-mini" name="longitude" type="text" value="BLABLA" style="display:none;"/>
1922 jpm 396
							</div>
397
						</div>
2408 jpm 398
 
1946 jpm 399
						<div class="row-fluid">
2408 jpm 400
							<div class="span12 control-group has-tooltip"
1946 jpm 401
								title="Choisissez le (ou les) côté(s) de la rue que vous avez étudié.">
402
								<label class="control-label">
2408 jpm 403
									<strong class="obligatoire">*</strong>
1946 jpm 404
									Côté de la rue
2408 jpm 405
 
1956 jpm 406
									<select id="rue_cote" class="obs-chp-etendu" name="coteRue" data-label="Côté rue">
1946 jpm 407
										<option value="">Sélectionner un type de côté</option>
408
										<option value="pair">Pair</option>
409
										<option value="impair">Impair</option>
410
										<option value="2cotes">Les deux</option>
411
									</select>
412
								</label>
413
							</div>
414
						</div>
1346 aurelien 415
					</fieldset>
1922 jpm 416
 
1346 aurelien 417
					<fieldset id="partie-observation">
2408 jpm 418
						<legend>Observations</legend>
1946 jpm 419
						<div class="row-fluid">
420
							<div class="span12">
421
								<div id="taxon-liste-input-groupe" class="control-group has-tooltip"
2408 jpm 422
									title="Sélectionnez une espèce dans la liste déroulante par son nom latin
1946 jpm 423
									ou commun. Si une espèce est absente, sélectionner «Autre espèce»." >
424
									<label>
2408 jpm 425
										<strong class="obligatoire">*</strong>
1946 jpm 426
										Espèces communes
2408 jpm 427
 
1946 jpm 428
										<div class="input-prepend ">
429
											<span class="add-on">
430
												<i class="icon-leaf"></i>
431
											</span>
2408 jpm 432
 
1946 jpm 433
											<select id="taxon-liste" name="taxon-liste">
434
												<option value="" selected>Sélectionner une espèce</option>
2408 jpm 435
 
1946 jpm 436
												<optgroup id="taxon-liste-noms">
437
													<?php foreach ($taxons['sci-et-fr'] as $taxon) :?>
2408 jpm 438
														<option
439
															class="<?=$taxon['nom_type'] ?>"
440
															value="<?=$taxon['num_nom'] ?>"
1946 jpm 441
															title="<?=$taxon['nom_title'] ?>"
442
															data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
443
															>
444
															<?=$taxon['nom_a_afficher']?>
445
														</option>
446
													<?php endforeach; ?>
447
												</optgroup>
448
												<optgroup id="taxon-liste-special">
449
													<?php foreach ($taxons['speciaux'] as $taxon) :?>
2408 jpm 450
														<option
451
															class="<?=$taxon['nom_type'] ?>"
452
															value="<?=$taxon['num_nom'] ?>"
1946 jpm 453
															title="<?=$taxon['nom_title'] ?>"
454
															data-nom-a-sauver="<?=$taxon['nom_a_sauver'] ?>"
455
															>
456
															<?=$taxon['nom_a_afficher']?>
457
														</option>
458
													<?php endforeach; ?>
459
													<option value="?">Autre espèce</option>
460
												</optgroup>
461
											</select>
462
										</div>
463
									</label>
464
								</div>
465
							</div>
466
						</div>
467
						<div id="taxon-input-groupe" class="row-fluid hidden">
468
							<div class="span12">
2408 jpm 469
								<div class="control-group has-tooltip"
470
									title="Sélectionnez une espèce dans la liste déroulante pour lier
471
										votre nom au référentiel. Si vous le désirez vous pouvez aussi saisir
1946 jpm 472
										un nom absent du référentiel (Ex. : 'fleur violette' ou 'Viola sp.1')." >
473
									<label for="taxon" class="control-label" title="Choisissez l'espèce rencontrée.">
474
										Autre espèce
475
									</label>
476
									<div class="controls">
477
										<input id="taxon" name="taxon" type="text" class="span12"
2408 jpm 478
											placeholder="Autre espèce (ou indication sur la plante)"
1946 jpm 479
											value="<?= $nom_sci_espece_defaut; ?>" />
480
									</div>
481
								</div>
482
							</div>
483
						</div>
2529 aurelien 484
 
485
						<div class="row-fluid">
486
							<div class="span12 control-group has-tooltip"
487
								title="Indiquez votre certitude vis-à-vis du nom d'espèce indiqué">
488
								<label class="span3 control-label">
489
									Identification
490
								</label>
491
								<div id="certitude-controls" class="controls">
492
									<span class="span3" title="Détermination certaine">
493
										<label for="certitude-certaine">Certaine</label>
494
										<input type="radio" name="certitude" id="certitude-certaine" value="certain" />
495
									</span>
496
									<span class="span3" title="Détermination incertaine mais pas inexacte">
497
										<label for="certitude-douteuse">Douteuse</label>
498
										<input type="radio" name="certitude" id="certitude-douteuse" value="douteux" />
499
									</span>
500
									<span class="span3" title="Détermination inconnue">
2549 aurelien 501
										<label for="certitude-adeterminer">A determiner</label>
2529 aurelien 502
										<input type="radio" name="certitude" id="certitude-adeterminer" value="aDeterminer" />
503
									</span>
504
								</div>
505
							</div>
506
						</div>
2408 jpm 507
 
1946 jpm 508
						<div class="row-fluid">
2408 jpm 509
							<div class="span12 control-group has-tooltip"
1946 jpm 510
								title="Indiquez le (ou les) milieu(x) dans lequel (lesquels) vous avez rencontré cette espèce.">
511
								<label class="span2 control-label">
512
									<strong class="obligatoire">*</strong>
513
									Milieux
1346 aurelien 514
								</label>
1946 jpm 515
								<div id="milieux-controls" class="controls">
516
									<div class="input-prepend">
517
										<div class="btn-group">
518
											<button class="btn dropdown-toggle" data-toggle="dropdown">
519
												<i class="icon-globe"></i>
520
												Sélectionner un ou plusieurs milieux
521
												<span class="caret"></span>
522
											</button>
523
											<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
524
												<li>
525
													<label class="checkbox">
526
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="fissures"/>
527
														Fissures
528
													</label>
529
												</li>
530
												<li>
531
													<label class="checkbox">
532
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="pied d'arbre"/>
533
														Pied d'arbre
534
													</label>
535
												</li>
536
												<li>
537
													<label class="checkbox">
538
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="mur"/>
539
														Mur
540
													</label>
541
												</li>
542
												<li>
543
													<label class="checkbox">
544
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="pelouse"/>
545
														Pelouse
546
													</label>
547
												</li>
548
												<li>
549
													<label class="checkbox">
550
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="plate bande"/>
551
														Plate bande
552
													</label>
553
												</li>
554
												<li>
555
													<label class="checkbox">
556
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="haie"/>
557
														Haie
558
													</label>
559
												</li>
560
												<li>
561
													<label class="checkbox">
562
														<input name="milieux[]" class="cb-milieux" type="checkbox" value="chemin"/>
563
														Chemin
564
													</label>
565
												</li>
566
											</ul>
567
										</div>
568
									</div>
569
								</div>
570
							</div>
571
						</div>
2408 jpm 572
 
1946 jpm 573
						<div class="row-fluid">
574
							<div class="span12">
1346 aurelien 575
								<label for="notes">Notes</label>
1946 jpm 576
								<div>
2408 jpm 577
									<textarea id="notes" class="span12" rows="7" name="notes"
1946 jpm 578
										placeholder="Indiquez nous en particulier le ou les outils d'identification que vous avez utilisé, et toute autre information concernant le milieu ou l'espèce."></textarea>
579
								</div>
580
							</div>
581
						</div>
1346 aurelien 582
					</fieldset>
583
				</div><!-- zone-fiche-terrain-->
1578 jpm 584
			</form>
2408 jpm 585
 
586
			<div id="zone-fiche-terrain-photo">
587
				<form id="form-upload" class="form-horizontal" action="<?= $url_ws_upload ?>"
1346 aurelien 588
					method="post" enctype="multipart/form-data">
1922 jpm 589
					<div class="row-fluid">
590
						<div class="span12">
591
							<fieldset id="partie-photo">
1946 jpm 592
								<legend>Ajouter des photos</legend>
593
								<p class="miniature-info" class="discretion help-inline">
2612 aurelien 594
									Vous pouvez ajouter des photos. Celles-ci doivent être au format <strong>JPEG</strong>
595
									et ne doivent pas excéder <strong>5Mo</strong> chacunes.
596
									<a target="_blank" id="lien-tuto-photo" href="http://www.tela-botanica.org/sites/botanique/fr/documents/sauvages/Tutoriel_Photo.pdf">
597
										Comment prendre une bonne photo ?
598
									</a>
599
									<i class="icon-question-sign"></i>
1946 jpm 600
								</p>
1922 jpm 601
								<div id ="photos-conteneur">
602
									<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
2408 jpm 603
									<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
1922 jpm 604
									<div id="miniatures"></div>
605
									<p class="miniature-msg" class="span12">&nbsp;</p>
606
								</div>
607
							</fieldset>
608
						</div>
609
					</div>
1346 aurelien 610
				</form>
1922 jpm 611
				<div class="row-fluid">
2408 jpm 612
					<div class="span12 has-tooltip"
613
						title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
1922 jpm 614
							ajouter votre observation à la liste à transmettre.">
615
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
616
							Ajouter
617
						</button>
618
					</div>
619
				</div>
620
			</div>
2408 jpm 621
 
1922 jpm 622
			<!-- Messages d'erreur du formulaire-->
623
			<div class="row-fluid">
1946 jpm 624
				<div class="zone-alerte span12">
1922 jpm 625
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
626
						<a class="close">×</a>
2074 aurelien 627
						<h4 class="alert-heading">Information : <?= $max_nb_obs; ?> observations maximum</h4>
1922 jpm 628
						<p>
2074 aurelien 629
							Vous venez d'ajouter votre <?= $max_nb_obs; ?>ème observation.<br/>
1922 jpm 630
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
631
						</p>
632
					</div>
1346 aurelien 633
				</div>
1946 jpm 634
				<div class="zone-alerte span12">
1922 jpm 635
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
636
						<a class="close">×</a>
637
						<h4 class="alert-heading">Information : champs en erreur</h4>
638
						<p>
639
							Certains champs du formulaire sont mal remplis.<br/>
640
							Veuillez vérifier vos données.
641
						</p>
642
					</div>
643
				</div>
1946 jpm 644
				<div class="zone-alerte span12">
1922 jpm 645
					<div id="dialogue-form-invalide-rue" class="alert alert-warning alert-block" style="display: none;">
646
						<a class="close">×</a>
647
						<h4 class="alert-heading">Information : champs en erreur</h4>
648
						<p>
649
							Le coordonnées du début et de la fin de la rue n'ont pas été géoréférencé.<br/>
650
							Veuillez suivre les étapes indiquées dans le champ « Géolocalisation ».
651
						</p>
652
					</div>
653
				</div>
654
			</div>
2408 jpm 655
 
1346 aurelien 656
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
1946 jpm 657
			<div id="zone-liste-obs" class="hidden">
658
				<div class="row-fluid">
659
					<div class="span12">
1922 jpm 660
						<div class="row-fluid">
661
							<div class="span8">
1946 jpm 662
								<h2 id="titre-liste-obs">Liste des observations à transmettre : <span class="obs-nbre">0</span></h2>
1922 jpm 663
							</div>
664
							<div class="span4 droite">
2408 jpm 665
								<button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
1922 jpm 666
									type="button" disabled="disabled"
2408 jpm 667
									title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
1922 jpm 668
									Transmettre
669
								</button>
670
							</div>
671
						</div>
672
						<div id="liste-obs" ></div>
673
					</div>
674
				</div>
675
			</div>
2408 jpm 676
 
1922 jpm 677
			<div class="row-fluid">
1946 jpm 678
				<div class="zone-alerte span12">
1922 jpm 679
					<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
680
						<a class="close">×</a>
681
						<h4 class="alert-heading">Attention : aucune observation</h4>
682
						<p>Veuillez saisir des observations pour les transmettres.</p>
683
					</div>
2408 jpm 684
 
1922 jpm 685
					<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block" style="display: none;">
686
						<a class="close">×</a>
687
						<h4 class="alert-heading">Information : transmission des observations</h4>
688
						<div class="alert-txt"></div>
689
					</div>
2408 jpm 690
 
1922 jpm 691
					<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block" style="display: none;">
692
						<a class="close">×</a>
693
						<h4 class="alert-heading">Erreur : transmission des observations</h4>
694
						<div class="alert-txt"></div>
695
					</div>
696
				</div>
697
			</div>
1346 aurelien 698
		</div>
2408 jpm 699
 
1922 jpm 700
		<!-- Fenêtres modales -->
2408 jpm 701
		<div id="chargement" class="modal-fenetre" style="display:none;">
1922 jpm 702
			<div id="chargement-centrage" class="modal-contenu">
2117 aurelien 703
				<div class="progress progress-success progress-striped active">
704
		 			<div id="barre-progression-upload" class="bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
705
		    			<span class="sr-only">0/10 observations transmises</span>
706
		  			</div>
707
				</div>
1346 aurelien 708
				<p id="chargement-txt" style="color:white;font-size:1.5em;">
709
					Transfert des observations en cours...<br />
2408 jpm 710
					Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre
1922 jpm 711
					d'observations à transférer.
1346 aurelien 712
				</p>
713
			</div>
714
		</div>
2408 jpm 715
 
1922 jpm 716
		<!-- Templates HTML -->
717
		<div id="tpl-transmission-ok" style="display:none;">
2408 jpm 718
			<p class="msg">
1922 jpm 719
				Merci Beaucoup&nbsp;! Vos observations ont bien été transmises aux chercheurs.<br />
720
				Elles sont désormais affichées sur la carte Sauvages de ma rue,
721
				et s'ajoutent aux données du Carnet en ligne.<br />
2408 jpm 722
				Elles sont désormais consultables à travers les différents outils de visualisation
723
				du réseau Tela Botanica (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
724
				<a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
1922 jpm 725
				<a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
726
				<a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
2408 jpm 727
			</p>
1922 jpm 728
			<p>
729
				Bonne continuation&nbsp;!
730
			</p>
731
			<p>
2408 jpm 732
				Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
1922 jpm 733
				connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
2408 jpm 734
				N'oubliez pas qu'il est nécessaire de
1922 jpm 735
				<a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
736
				au préalable, si ce n'est pas déjà fait.
737
			</p>
738
			<p>
2408 jpm 739
				Pour toute question, n'hésitez pas à nous contacter à&nbsp;:
1922 jpm 740
				<a href="mailto:sauvages@tela-botanica.org">sauvages@tela-botanica.org</a>
741
			</p>
742
		</div>
743
		<div id="tpl-transmission-ko" style="display:none;">
744
			<p class="msg">
2117 aurelien 745
				Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
2408 jpm 746
				Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
2117 aurelien 747
				et transmettre les suivantes.<br />
748
				Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
2408 jpm 749
				Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
2601 mathias 750
				<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
2117 aurelien 751
							  target="_blank"
752
							  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
753
							  le formulaire de signalement d'erreurs</a>.
1922 jpm 754
			</p>
755
		</div>
1054 jpm 756
	</body>
2905 aurel 757
</html>