Subversion Repositories eFlore/Applications.cel

Rev

Rev 1240 | Rev 1249 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
1210 jpm 1 
<!DOCTYPE html>
2 
<html>
3 
	<head>
4 
		<title>Saisie simplifiée du CEL</title>
5 
 
6 
		<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7 
		<meta http-equiv="Content-style-type" content="text/css" />
8 
		<meta http-equiv="Content-script-type" content="text/javascript" />
9 
		<meta http-equiv="Content-language" content="fr" />
10 
 
11 
		<meta name="revisit-after" content="15 days" />
12 
        <meta name="robots" content="index,follow" />
13 
        <meta name="author" content="Jean-Pascal MILCENT" />
14 
        <meta name="keywords" content="Tela Botanica, CEL" />
15 
        <meta name="description" content="Widget de saisie simplifiée pour le CEL" />
16 
 
17 
		<!-- Viewport Mobile -->
18 
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
19 
 
20 
		<!-- Favicones -->
21 
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/defaut/img/favicon.ico" />
22 
 
23 
		<!-- Javascript : bibliothèques -->
24 
		<!-- Google Map v3 -->
25 
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
26 
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
27 
 
28 
		<!-- Jquery -->
1220 jpm 29 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.js"></script>
1221 jpm 30 
		<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
1232 jpm 31 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery-ui-1.8.18.custom.min.js"></script>
32 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
1210 jpm 33 
		<!-- Jquery Plugins -->
1221 jpm 34 
		<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
1239 jpm 35 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/validate/1.9.0/jquery.validate.min.js"></script>
1210 jpm 36 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
1221 jpm 37 
		<!-- Jquery Form :nécessaire pour l'upload des images -->
1210 jpm 38 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
39 
 
40 
		<!-- Bootstrap -->
1239 jpm 41 
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/bootstrap.min.js"></script>
1210 jpm 42 
 
43 
		<!-- Javascript : appli saisie -->
44 
		<script type="text/javascript">
45 
		//<![CDATA[
46 
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
47 
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
48 
			// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
49 
			var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
1235 jpm 50 
			// Mot-clé du widget/projet
51 
			var TAG_PROJET = "WidgetSaisie";
52 
			// Mots-clés à ajouter aux images
53 
			var TAG_IMG = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
54 
			// Mots-clés à ajouter aux observations
55 
			var TAG_OBS = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
1210 jpm 56 
			// URL du web service réalisant l'insertion des données dans la base du CEL.
57 
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
1215 jpm 58 
			// Code du référentiel utilisé pour les nom scientifiques.
59 
			var NOM_SCI_REFERENTIEL = "<?=$ns_referentiel?>";
60 
			// Code de la version du référentiel utilisé pour les nom scientifiques.
61 
			var NOM_SCI_VERSION = "<?=$ns_version?>";
62 
			// Nombre d'élément dans les listes d'auto-complétion
63 
			var AUTOCOMPLETION_ELEMENTS_NBRE = 20;
1210 jpm 64 
			// URL du web service permettant l'auto-complétion des noms scientifiques.
65 
			var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
66 
					"masque={masque}&"+
67 
					"recherche=etendue&"+
1239 jpm 68 
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
1215 jpm 69 
					"version.projet="+NOM_SCI_VERSION+"&"+
1232 jpm 70 
					"ns.structure=au"+"&"+
1215 jpm 71 
					"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
72 
			console.log(SERVICE_AUTOCOMPLETION_NOM_SCI_URL);
1240 jpm 73 
			// Nombre d'observations max autorisé avant transmission
74 
			var OBS_MAX_NBRE = 10;
1210 jpm 75 
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
76 
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:osm/0.1/nom-commune?lon={lon}&lat={lat}";
77 
			// URL du marqueur à utiliser dans la carte Google Map
78 
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
79 
			// URL de l'icône du chargement en cours
80 
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
81 
			// URL de l'icône du calendrier
82 
			var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
1239 jpm 83 
			// URL de l'icône du calendrier
84 
			var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
1210 jpm 85 
		//]]>
86 
		</script>
87 
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
88 
 
89 
		<!-- CSS -->
1232 jpm 90 
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
1239 jpm 91 
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
92 
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
1210 jpm 93 
		<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
94 
	</head>
95 
 
1240 jpm 96 
	<body data-spy="scroll">
1210 jpm 97 
		<div class="container">
98 
			<div class="row-fluid">
99 
				<div class="span6 page-header">
100 
					<div class="row">
1240 jpm 101 
						<div class="span6">
102 
							<h1><img class="span1" src="<?=$url_base?>/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png" alt="Tela Botanica" /> Outil de saisie simplifiée (CEL)</h1>
103 
						</div>
104 
					</div>
105 
					<div class="row">
106 
						<div class="span6">
1235 jpm 107 
							<p>
1239 jpm 108 
								Ce widget de saisie vous permet de partager simplement vos observations avec le
109 
								<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>.
1235 jpm 110 
								Complétez les champs, créez jusqu'à 10 observations (bouton "créer") puis partagez-les (bouton "transmettre").
111 
								Retrouvez ensuite facilement ces observations dans votre
112 
								<a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.
113 
							</p>
114 
							<p class="discretion">
1239 jpm 115 
								Attention : si vous actualisez la page, fermez votre navigateur... vos observations qui
116 
								ne sont pas partagées (bouton "transmettre") seront perdues.
117 
								Nous vous conseillons donc de créer un nombre limité d'observations et de les transmettre régulièrement.
1235 jpm 118 
							</p>
119 
						</div>
1210 jpm 120 
					</div>
121 
				</div>
1218 jpm 122 
 
123 
				<div class="span6">
1210 jpm 124 
					<div class="well">
125 
						<h2>Observateur</h2>
1239 jpm 126 
						<form id="form-observateur" action="#" class="" autocomplete="on">
1218 jpm 127 
							<div class="row-fluid">
128 
								<div class="span6">
129 
									<label for="courriel"
130 
										title="Veuillez saisir votre adresse courriel.">
131 
										<strong class="obligatoire">*</strong> Courriel
132 
									</label>
133 
									<div class="input-prepend">
134 
										<span class="add-on">
135 
											<i class="icon-envelope"></i>
1239 jpm 136 
										</span><input id="courriel" class="input-medium" name="courriel" type="text"/>
1218 jpm 137 
									</div>
1214 jpm 138 
								</div>
1218 jpm 139 
								<div class="span6">
1241 jpm 140 
									<label for="courriel_confirmation "
1239 jpm 141 
										title="Veuillez saisir confirmer votre adresse courriel.">
1218 jpm 142 
										<strong class="obligatoire">*</strong> Courriel (confirmation)
143 
									</label>
144 
									<div class="input-prepend">
145 
										<span class="add-on">
146 
											<i class="icon-envelope"></i>
1239 jpm 147 
										</span><input id="courriel_confirmation" class="input-medium" name="courriel_confirmation" type="text"/>
1218 jpm 148 
									</div>
149 
								</div>
1210 jpm 150 
							</div>
1241 jpm 151 
							<div id="zone-prenom-nom" class="row-fluid hidden">
152 
								<div class="span6">
153 
									<label for="prenom">Prénom</label>
154 
									<div>
155 
										<input id="prenom" name="prenom" class="span3" type="text"/>
156 
									</div>
157 
								</div>
158 
								<div class="span6">
159 
									<label for="nom">Nom</label>
160 
									<div>
161 
										<input id="nom" name="nom"  class="span3" type="text"/>
162 
									</div>
163 
								</div>
164 
							</div>
1218 jpm 165 
						</form>
1210 jpm 166 
						<div class="row-fluid">
167 
							<div class="span6">
1218 jpm 168 
								<button id="btn-aide" class="btn btn-mini btn-warning">
169 
									<span class="icon-question-sign icon-white"></span>
170 
									<span id="btn-aide-txt" >Activer l'aide</span>
171 
								</button>
1210 jpm 172 
							</div>
173 
						</div>
174 
					</div>
1218 jpm 175 
				</div>
1210 jpm 176 
			</div>
1220 jpm 177 
			<!-- Messages d'erreur du formulaire-->
178 
			<div class="row">
179 
				<div class="zone-alerte span6 offset3">
180 
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display: none;" title="">
181 
						<a class="close">×</a>
182 
						<h4 class="alert-heading">Information : copier/coller</h4>
183 
						<p>
184 
							Merci de ne pas copier/coller votre courriel.<br/>
185 
							La double saisie permet de vérifier l'absence d'erreurs.
186 
						</p>
187 
					</div>
188 
				</div>
189 
			</div>
1239 jpm 190 
			<div class="row-fluid">
191 
				<div class="span12">
1216 jpm 192 
					<div class="well">
1210 jpm 193 
						<div class="row-fluid">
1239 jpm 194 
							<div class="span6">
195 
								<div>
196 
									<div class="row-fluid">
197 
										<div class="span12">
198 
											<h2>Lieu du relevé</h2>
1216 jpm 199 
										</div>
200 
									</div>
1239 jpm 201 
									<div class="row-fluid">
202 
										<div class="span4">
203 
											<label for="map_canvas" title="Veuillez localiser l'observation">
204 
												<strong class="obligatoire">*</strong>
205 
												Géolocalisation
206 
											</label>
1216 jpm 207 
										</div>
1239 jpm 208 
										<div class="span8 droite">
209 
											<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
210 
												<div class="control-group">
211 
													<label for="carte-recherche">Rechercher</label>
212 
													<input id="carte-recherche" class="search-query" type="text" value=""
213 
														rel="tooltip"
214 
														title="Permet de centrer la carte sur le lieu recherché."
215 
														placeholder="Centrer la carte sur un lieu..."/>
216 
												</div>
217 
											</form>
218 
										</div>
1216 jpm 219 
									</div>
1239 jpm 220 
									<div class="row-fluid">
221 
										<div class="span12">
222 
											<div id="map-canvas"></div>
1216 jpm 223 
										</div>
224 
									</div>
1239 jpm 225 
									<div class="row-fluid">
226 
										<label for="coordonnees-geo" class="span7">
227 
											<a href="#" class="afficher-coord">Afficher</a>
228 
											<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
229 
											les coordonnées géographiques
230 
											<span id="lat-lon-info" class="info"
231 
												rel="tooltip"
232 
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
233 
												(WGS84)
234 
											</span>
235 
										</label>
236 
										<div id="info-commune" class="span5">
237 
								    		<span for="marqueur-commune">Commune : </span>
238 
								    		<span id="marqueur-commune">
239 
								    			<span id="commune-nom" class="commune-info"></span>
240 
								    			(<span id="commune-code-insee" class="commune-info"
241 
								    				rel="tooltip"
242 
								    				title="Code INSEE de la commune"></span>)
243 
								    		</span>
244 
							    		</div>
1214 jpm 245 
									</div>
1239 jpm 246 
									<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
247 
										<div id="coordonnees-geo" class="well" style="display:none;">
248 
											<div class="row-fluid form-inline">
249 
												<div id="coord-lat" class="span4">
250 
													<label for="latitude">Latitude</label>
251 
													<div>
252 
														<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
253 
													</div>
254 
												</div>
255 
												<div id="coord-lng" class="span4">
256 
													<label for="longitude">Longitude</label>
257 
													<div>
258 
														<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
259 
													</div>
260 
												</div>
261 
												<div class="span1">
262 
													<div>
263 
														<input id="geolocaliser" type="button" value="Voir sur la carte"
264 
															rel="tooltip"
265 
															title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
266 
													</div>
267 
												</div>
268 
									    	</div>
269 
										</div>
270 
										<div class="row-fluid">
271 
											<div class="span4" rel="tooltip" title="Le lieu-dit est la dénomination administrative du lieu que l’on peut trouver sur une carte au 1/25 000, sur le cadastre ou au dire des habitants locaux." >
272 
												<label for="lieudit">Lieu-dit</label>
273 
												<div>
274 
													<input type="text" id="lieudit" class="span2" name="lieudit"/>
275 
												</div>
276 
											</div>
277 
											<div class="span4" rel="tooltip" title="La station est la dénomination qui caractérise le lieu de la collecte d’un point de vue écologique. Il est recommandéde choisir une station qui soit homogène dans sa compositionfloristique afin de refléter le plus fidèlement possible son identité sous l’angle phytosociologique. Exemple : zone humide située au centre du près. " >
278 
												<label for="station">Station</label>
279 
												<div>
280 
													<input type="text" id="station" class="span2" name="station"/>
281 
												</div>
282 
											</div>
283 
											<div class="span4" rel="tooltip" title="Le milieu est un terme générique caractérisant la station. On peut se référer pour cela à des codes comme Corine Biotope ou le nom d’une unité phytosociologique. Exemple : prairie humide">
284 
												<label for="milieux">Milieu</label>
285 
												<div>
286 
													<input type="text" id="milieu" class="span2" name="milieu" />
287 
												</div>
288 
											</div>
289 
										</div>
290 
									</form>
1210 jpm 291 
								</div>
1239 jpm 292 
							</div>
293 
							<div class="span6">
294 
								<form id="form-obs" action="#" autocomplete="on">
295 
									<h2>Observations</h2>
296 
									<div class="row-fluid">
297 
										<div class="span4" rel="tooltip" title="Vous pouvez cliquer sur l'icône de calendrier pour sélectionner un date dans un calendrier.">
298 
											<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
299 
												<strong class="obligatoire">*</strong> Date du relevé
300 
											</label>
301 
											<div class="input-prepend">
302 
												<span id="date-icone" class="add-on"></span><input id="date"
303 
													class="input-small" name="date" type="text"
304 
													placeholder="jj/mm/aaaa" />
305 
											</div>
306 
										</div>
307 
										<div id="taxon-input-groupe" class="span8" rel="tooltip" title="Sélectionnez une espèce dans la liste déroulante." >
308 
											<label for="taxon" title="Choisissez une espèce">
309 
												<strong class="obligatoire">*</strong>
310 
												Espèce
311 
											</label>
312 
											<div class="input-prepend">
313 
												<span class="add-on">
314 
													<i class="icon-leaf"></i>
315 
												</span><input type="text" id="taxon" name="taxon" />
316 
											</div>
317 
										</div>
1214 jpm 318 
									</div>
1239 jpm 319 
									<div class="row-fluid">
320 
										<div class="span12">
321 
											<label for="notes">Commentaires</label>
322 
											<div>
323 
												<textarea id="notes" class="span6" rows="7" name="notes"
324 
													placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
325 
											</div>
326 
										</div>
1214 jpm 327 
									</div>
1239 jpm 328 
								</form>
329 
								<form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
330 
									method="post" enctype="multipart/form-data">
331 
									<div rel="tooltip" title="Ajouter une photo de votre observation. Elle doit être au format JPEG et ne doit pas excéder 5Mo.">
332 
										<label>Photo</label>
333 
										<input type="file" id="fichier" name="fichier" accept="image/jpeg" />
334 
										<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
335 
										<p id="miniature-info" class="discretion help-inline">La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p>
336 
										<div id="miniature"></div>
337 
										<button id="effacer-miniature" type="button" style="display:none;">Effacer</button>
338 
										<p id="miniature-msg" class="span12">&nbsp;</p>
1210 jpm 339 
									</div>
1239 jpm 340 
								</form>
1210 jpm 341 
							</div>
342 
							<div class="row-fluid">
1239 jpm 343 
								<div class="span12 centre">
344 
									<button id="ajouter-obs" class="btn btn-primary btn-large" type="button"
345 
										title="Ajoute l'observation courante à la liste ci-dessous.">
346 
										Créer
347 
									</button>
1210 jpm 348 
								</div>
349 
							</div>
1239 jpm 350 
						</div>
1210 jpm 351 
					</div>
1232 jpm 352 
				</div>
1210 jpm 353 
			</div>
354 
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
355 
			<div id="zone-liste-obs" class="row-fluid">
1239 jpm 356 
				<div class="span12">
357 
					<div class="well">
1232 jpm 358 
						<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
1240 jpm 359 
						<div id="liste-obs" ></div>
1239 jpm 360 
						<div class="row">
361 
							<div class="zone-alerte span6 offset3">
362 
								<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
363 
									<a class="close">×</a>
364 
									<h4 class="alert-heading">Attention : aucune observation</h4>
365 
									<p>Veuillez saisir des observations pour les transmettres.</p>
366 
								</div>
367 
 
368 
								<div id="dialogue-obs-transaction" class="alert alert-success alert-block" style="display: none;"">
369 
									<a class="close">×</a>
370 
									<h4 class="alert-heading">Information : transmission des observations</h4>
371 
									<div class="alert-txt"></div>
372 
								</div>
373 
 
374 
								<div id="dialogue-erreur" class="alert alert-error alert-block" style="display: none;">
375 
									<a class="close">×</a>
376 
									<h4 class="alert-heading">Erreur : transmission des observations</h4>
377 
									<div class="alert-txt"></div>
378 
								</div>
1220 jpm 379 
							</div>
1239 jpm 380 
						</div>
381 
						<div class="row-fluid">
382 
							<div class="span12 droite">
383 
								<button id="transmettre-obs" class="btn btn-primary btn-large" type="button" disabled="disabled"
384 
									title="Ajoute les observations à votre Carnet en Ligne et les rend publiques.">
385 
									Transmettre
386 
								</button>
1220 jpm 387 
							</div>
388 
						</div>
389 
					</div>
1239 jpm 390 
				</div>
1210 jpm 391 
			</div>
392 
 
393 
			<footer class="row-fluid">
394 
				<p class="span12">&copy; Tela Botanica 2012</p>
395 
			</footer>
396 
 
1239 jpm 397 
			<!-- Fenêtres modales -->
398 
			<div id="chargement" style="position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%;background:#777;background:rgba(90,86,93,0.7);text-align:center;display:none;">
399 
				<div id="chargement-centrage" style="position:relative;width:30%;margin:0 auto;top:30%;">
400 
					<img id="chargement-img" src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif" alt="Transfert en cours..."/>
401 
					<p id="chargement-txt" style="color:white;font-size:1.5em;">
402 
						Transfert des observations en cours...<br />
403 
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre d'observation à transférer.
404 
					</p>
405 
				</div>
1210 jpm 406 
			</div>
1239 jpm 407 
 
408 
			<!-- Stats : Google Analytics-->
409 
			<script type="text/javascript">
410 
				//<![CDATA[
411 
				var _gaq = _gaq || [];
412 
				_gaq.push(['_setAccount', 'UA-20092557-1']);
413 
				_gaq.push(['_trackPageview']);
414 
 
415 
				(function() {
416 
				  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
417 
				  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
418 
				  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
419 
				})();
420 
				//]]>
421 
			</script>
1210 jpm 422 
		</div>
423 
	</body>
424 
</html>