Subversion Repositories eFlore/Applications.cel

Rev

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