Subversion Repositories eFlore/Applications.cel

Rev

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