Subversion Repositories eFlore/Applications.cel

Rev

Rev 1232 | 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 -->
1211 jpm 35
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.1/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 -->
1218 jpm 41
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.1/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&"+
1218 jpm 68
					"retour.champs=famille,nom_retenu,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);
1210 jpm 73
			// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
74
			var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:osm/0.1/nom-commune?lon={lon}&lat={lat}";
75
			// URL du marqueur à utiliser dans la carte Google Map
76
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/marqueurs/epingle.png";
77
			// URL de l'icône du bouton supprimer
78
			var SUPPRIMER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/supprimer.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";
83
		//]]>
84
		</script>
85
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
86
 
87
		<!-- CSS -->
1232 jpm 88
		<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" />
1211 jpm 89
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
1214 jpm 90
		<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.1/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
1210 jpm 91
		<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" />
92
	</head>
93
 
94
	<body>
95
		<div class="container">
96
			<div class="row-fluid">
97
				<div class="span6 page-header">
98
					<div class="row">
1235 jpm 99
						<img class="span1" src="<?=$url_base?>/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png" alt="Tela Botanica" />
100
						<div class="span5">
101
							<h1>Outil de saisie simplifiée (CEL)</h1>
102
							<p>
103
								Ce widget de saisie vous permet de partager simplement vos observations avec le réseau Tela Botanica.
104
								Complétez les champs, créez jusqu'à 10 observations (bouton "créer") puis partagez-les (bouton "transmettre").
105
								Retrouvez ensuite facilement ces observations dans votre
106
								<a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.
107
							</p>
108
							<p class="discretion">
109
								Attention : si vos observations ne sont pas partagées (bouton "transmettre"),
110
								elles seront perdues. Nous vous conseillons donc de partager un nombre limité d'observations.
111
							</p>
112
						</div>
1210 jpm 113
					</div>
1235 jpm 114
 
1210 jpm 115
				</div>
1218 jpm 116
 
117
				<div class="span6">
1210 jpm 118
					<div class="well">
119
						<h2>Observateur</h2>
1218 jpm 120
						<form id="form-observateur" class="" action="#" autocomplete="on">
121
							<div class="row-fluid">
122
								<div class="span6">
123
									<label for="prenom">Prénom</label>
124
									<div>
1235 jpm 125
										<input id="prenom" name="prenom" type="text"/>
1218 jpm 126
									</div>
1214 jpm 127
								</div>
1218 jpm 128
								<div class="span6">
129
									<label for="nom">Nom</label>
130
									<div>
1235 jpm 131
										<input id="nom" name="nom" type="text"/>
1218 jpm 132
									</div>
133
								</div>
1210 jpm 134
							</div>
1218 jpm 135
							<div class="row-fluid">
136
								<div class="span6">
137
									<label for="courriel"
138
										title="Veuillez saisir votre adresse courriel.">
139
										<strong class="obligatoire">*</strong> Courriel
140
									</label>
141
									<div class="input-prepend">
142
										<span class="add-on">
143
											<i class="icon-envelope"></i>
144
										</span>
145
										<input id="courriel" name="courriel" type="text" value=""/>
146
									</div>
1214 jpm 147
								</div>
1218 jpm 148
								<div class="span6">
149
									<label for="courriel_confirmation" title="Veuillez saisir confirmer votre adresse courriel.">
150
										<strong class="obligatoire">*</strong> Courriel (confirmation)
151
									</label>
152
									<div class="input-prepend">
153
										<span class="add-on">
154
											<i class="icon-envelope"></i>
155
										</span>
156
										<input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/>
157
									</div>
158
								</div>
1210 jpm 159
							</div>
1218 jpm 160
						</form>
1210 jpm 161
						<div class="row-fluid">
162
							<div class="span6">
1218 jpm 163
								<button id="btn-aide" class="btn btn-mini btn-warning">
164
									<span class="icon-question-sign icon-white"></span>
165
									<span id="btn-aide-txt" >Activer l'aide</span>
166
								</button>
1210 jpm 167
							</div>
168
						</div>
169
					</div>
1218 jpm 170
				</div>
1210 jpm 171
			</div>
1220 jpm 172
			<!-- Messages d'erreur du formulaire-->
173
			<div class="row">
174
				<div class="zone-alerte span6 offset3">
175
					<div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display: none;" title="">
176
						<a class="close">×</a>
177
						<h4 class="alert-heading">Information : copier/coller</h4>
178
						<p>
179
							Merci de ne pas copier/coller votre courriel.<br/>
180
							La double saisie permet de vérifier l'absence d'erreurs.
181
						</p>
182
					</div>
183
				</div>
184
			</div>
1232 jpm 185
			<div class="row-fluid well">
1210 jpm 186
				<div class="span6">
1216 jpm 187
					<div class="well">
1210 jpm 188
						<div class="row-fluid">
189
							<div class="span12">
1216 jpm 190
								<h2>Lieu du relevé</h2>
191
							</div>
192
						</div>
193
						<div class="row-fluid">
194
							<div class="span4">
1210 jpm 195
								<label for="map_canvas" title="Veuillez localiser l'observation">
196
									<strong class="obligatoire">*</strong>
197
									Géolocalisation
198
								</label>
1216 jpm 199
							</div>
200
							<div class="span8 droite">
201
								<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
202
									<div class="control-group">
203
										<label for="carte-recherche">Rechercher</label>
204
										<input id="carte-recherche" class="search-query" type="text" value=""
1218 jpm 205
											rel="tooltip"
206
											title="Permet de centrer la carte sur le lieu recherché."
1216 jpm 207
											placeholder="Centrer la carte sur un lieu..."/>
208
									</div>
209
								</form>
210
							</div>
211
						</div>
212
						<div class="row-fluid">
213
							<div class="span12">
1210 jpm 214
								<div id="map-canvas"></div>
215
							</div>
216
						</div>
217
						<div class="row-fluid">
218
							<label for="coordonnees-geo" class="span7">
219
								<a href="#" class="afficher-coord">Afficher</a>
220
								<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
1218 jpm 221
								les coordonnées géographiques
1210 jpm 222
								<span id="lat-lon-info" class="info"
1218 jpm 223
									rel="tooltip"
1210 jpm 224
									title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
225
									(WGS84)
226
								</span>
227
							</label>
228
							<div id="info-commune" class="span5">
229
					    		<span for="marqueur-commune">Commune : </span>
230
					    		<span id="marqueur-commune">
231
					    			<span id="commune-nom" class="commune-info"></span>
1218 jpm 232
					    			(<span id="commune-code-insee" class="commune-info"
233
					    				rel="tooltip"
234
					    				title="Code INSEE de la commune"></span>)
1210 jpm 235
					    		</span>
236
				    		</div>
237
						</div>
1216 jpm 238
						<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
239
							<div id="coordonnees-geo" class="well" style="display:none;">
240
								<div class="row-fluid form-inline">
241
									<div id="coord-lat" class="span4">
242
										<label for="latitude">Latitude</label>
243
										<div>
244
											<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
245
										</div>
246
									</div>
247
									<div id="coord-lng" class="span4">
248
										<label for="longitude">Longitude</label>
249
										<div>
250
											<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
251
										</div>
252
									</div>
253
									<div class="span1">
254
										<div>
1218 jpm 255
											<input id="geolocaliser" type="button" value="Voir sur la carte"
256
												rel="tooltip"
257
												title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
1216 jpm 258
										</div>
259
									</div>
260
						    	</div>
261
							</div>
262
							<div class="row-fluid">
1235 jpm 263
								<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." >
1216 jpm 264
									<label for="lieudit">
265
										Lieu-dit
266
									</label>
1214 jpm 267
									<div>
1235 jpm 268
										<input type="text" id="lieudit" class="input-medium" name="lieudit"/>
1214 jpm 269
									</div>
1210 jpm 270
								</div>
1235 jpm 271
								<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. " >
1216 jpm 272
									<label for="station">
273
										Station
274
									</label>
1214 jpm 275
									<div>
1235 jpm 276
										<input type="text" id="station" class="input-medium" name="station"/>
1214 jpm 277
									</div>
1210 jpm 278
								</div>
1235 jpm 279
								<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">
1216 jpm 280
									<label for="milieux">
281
										Milieu
282
									</label>
1214 jpm 283
									<div>
1235 jpm 284
										<input type="text" id="milieu" class="input-medium" name="milieu" />
1214 jpm 285
									</div>
1210 jpm 286
								</div>
287
							</div>
1216 jpm 288
						</form>
289
					</div>
1210 jpm 290
				</div>
291
				<div class="span6">
292
					<div class="well">
1218 jpm 293
						<form id="form-obs" action="#" autocomplete="on">
1210 jpm 294
							<h2>Observations</h2>
295
							<div class="row-fluid">
1235 jpm 296
								<div class="span4" rel="tooltip" title="Vous pouvez cliquer sur l'icône de calendrier pour sélectionner un date dans un calendrier.">
1210 jpm 297
									<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
298
										<strong class="obligatoire">*</strong> Date du relevé
299
									</label>
300
									<div class="input-prepend">
301
										<span id="date-icone" class="add-on"></span>
1235 jpm 302
										<input id="date" class="input-small" name="date" type="text"
303
											placeholder="jj/mm/aaaa" />
1210 jpm 304
									</div>
305
								</div>
1235 jpm 306
								<div id="taxon-input-groupe" class="span8" rel="tooltip" title="Sélectionnez une espèce dans la liste déroulante." >
1210 jpm 307
									<label for="taxon" title="Choisissez une espèce">
308
										<strong class="obligatoire">*</strong>
309
										Espèce
310
									</label>
311
									<div class="input-prepend">
312
										<span class="add-on">
313
											<i class="icon-leaf"></i>
314
										</span>
1235 jpm 315
										<input type="text" id="taxon" name="taxon" />
1210 jpm 316
									</div>
317
								</div>
318
							</div>
319
							<div class="row-fluid">
320
								<div class="span12">
1235 jpm 321
									<label for="notes">Commentaires</label>
1216 jpm 322
									<div>
323
										<textarea id="notes" class="span5" rows="7" name="notes"
1235 jpm 324
											placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
1216 jpm 325
									</div>
1210 jpm 326
								</div>
327
							</div>
328
						</form>
329
						<form id="form-upload" class="well form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
330
							method="post" enctype="multipart/form-data">
1235 jpm 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>
339
							</div>
1210 jpm 340
						</form>
341
					</div>
1232 jpm 342
				</div>
343
				<div class="row-fluid">
344
					<div class="span12 centre">
345
						<button id="ajouter-obs" class="btn btn-primary btn-large" type="button"
346
							title="Ajoute l'observation courante à la liste ci-dessous.">
347
							Créer
348
						</button>
349
					</div>
350
				</div>
1210 jpm 351
			</div>
352
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
353
			<div id="zone-liste-obs" class="row-fluid">
354
				<form action="#" class="well form-horizontal">
355
					<div class="row-fluid">
1232 jpm 356
						<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
1215 jpm 357
						<table id="liste-obs" class="table table-bordered table-condensed">
1210 jpm 358
							<thead>
359
								<tr>
1215 jpm 360
									<th rowspan="3">Photo</th>
1210 jpm 361
									<th><i class="icon-leaf illustration">&nbsp;</i>Nom</th>
1215 jpm 362
									<th colspan="2">Commune (code INSEE) [<span title="Latitude / Longitude"><i class="icon-map-marker">&nbsp;</i>Lat./Long.</span>]</th>
363
									<th rowspan="3">Notes</th>
364
									<th rowspan="3"><i class="icon-trash icone">&nbsp;</i>Action</th>
365
								</tr>
366
								<tr>
367
									<!-- Photo -->
368
									<th rowspan="2"><i class="icon-calendar illustration">&nbsp;</i>Date</th>
1210 jpm 369
									<th>Lieu-dit</th>
370
									<th>Station</th>
1215 jpm 371
									<!-- Notes -->
372
									<!-- Action -->
1210 jpm 373
								</tr>
1215 jpm 374
								<tr>
375
									<!-- N° -->
376
									<!-- Photo -->
377
									<!-- Nom scientifique & Date -->
378
									<th colspan="2">Milieu</th>
379
									<!-- Notes -->
380
									<!-- Action -->
381
								</tr>
1210 jpm 382
							</thead>
383
							<tbody></tbody>
384
						</table>
385
					</div>
1220 jpm 386
					<div class="row">
387
						<div class="zone-alerte span6 offset3">
388
							<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
389
								<a class="close">×</a>
390
								<h4 class="alert-heading">Attention : aucune observation</h4>
391
								<p>Veuillez saisir des observations pour les transmettres.</p>
392
							</div>
393
 
394
							<div id="dialogue-obs-transaction" class="alert alert-success alert-block" style="display: none;"">
395
								<a class="close">×</a>
396
								<h4 class="alert-heading">Information : transmission des observations</h4>
397
								<div class="alert-txt"></div>
398
							</div>
399
 
400
							<div id="dialogue-erreur" class="alert alert-error alert-block" style="display: none;">
401
								<a class="close">×</a>
402
								<h4 class="alert-heading">Erreur : transmission des observations</h4>
403
								<div class="alert-txt"></div>
404
							</div>
405
						</div>
406
					</div>
1210 jpm 407
					<div class="row-fluid">
408
						<div class="span12 droite">
409
							<button id="transmettre-obs" class="btn btn-primary btn-large" type="button"
410
								title="Ajoute les observations à votre Carnet en Ligne et les rend publiques.">
411
								Transmettre
412
							</button>
413
						</div>
414
					</div>
415
				</form>
416
			</div>
417
 
418
			<footer class="row-fluid">
419
				<p class="span12">&copy; Tela Botanica 2012</p>
420
			</footer>
421
		</div>
422
 
1220 jpm 423
		<!-- Fenêtres modales -->
1210 jpm 424
		<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;">
425
			<div id="chargement-centrage" style="position:relative;width:30%;margin:0 auto;top:30%;">
1232 jpm 426
				<img id="chargement-img" src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif" alt="Transfert en cours..."/>
1210 jpm 427
				<p id="chargement-txt" style="color:white;font-size:1.5em;">
428
					Transfert des observations en cours...<br />
429
					Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre d'observation à transférer.
430
				</p>
431
			</div>
432
		</div>
433
 
434
		<!-- Stats : Google Analytics-->
435
		<script type="text/javascript">
436
			//<![CDATA[
437
			var _gaq = _gaq || [];
438
			_gaq.push(['_setAccount', 'UA-20092557-1']);
439
			_gaq.push(['_trackPageview']);
440
 
441
			(function() {
442
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
443
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
444
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
445
			})();
446
			//]]>
447
		</script>
448
	</body>
449
</html>