Subversion Repositories eFlore/Applications.cel

Rev

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