Subversion Repositories eFlore/Applications.cel

Rev

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