Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

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