Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
3425 idir 1
<?php if ('arbres' === $squelette ) : ?>
2
	<form id="form-observation" role="form" autocomplete="on">
3
		<h2>Relevé</h2>
4
		<div id="zone-observation" class="row">
5
			<div class="col-md-6">
6
 
7
				<div class="mb-3">
8
					<label class="col-sm-12 obligatoire has-tooltip" data-toggle="tooltip" title="Localisation du relevé.">
9
						<i class="fa fa-map" aria-hidden="true"></i>&nbsp;Lieu du relevé
10
					</label>
11
					<div class="control-group">
12
						<span id="geoloc-error" class="error hidden">
13
							Le nom de la rue, ou de la commune, n'ont pas pu être correctement déterminées pour la localisation indiquée.<br>
14
							Veuillez replacer le pointeur de la carte ou indiquer manuellement le nom de la rue ou/et de la commune.
15
						</span>
16
						<div id="geoloc" class="col-sm-12 geoloc">
17
							<tb-geolocation-element
18
								id="tb-geolocation"
19
								layer='osm'
20
								zoom_init="4"
21
								lat_init="46.5"
22
								lng_init="2.9"
23
								marker="true"
24
								polyline="false"
25
								polygon="false"
26
								show_lat_lng_elevation_inputs="true"
27
								osm_class_filter=""
28
								elevation_provider="mapquest"
29
								map_quest_api_key="mG6oU5clZHRHrOSnAV0QboFI7ahnGg34"
30
							>
31
							</tb-geolocation-element>
32
						</div>
33
						<div id="geoloc-datas" class="hidden">
34
							<div class="mt-3">
35
								<label class="col-sm-8" for="rue">Rue</label>
36
								<div class="col-sm-8">
37
									<input type="text" class="form-control rue" disabled id="rue" name="rue" value="">
38
								</div>
39
							</div>
40
							<div class="mt-3">
41
								<label class="col-sm-8" for="commune-nom">Nom de commune</label>
42
								<div class="col-sm-8">
43
									<input type="text" class="form-control commune-nom" disabled id="commune-nom" name="commune-nom" value="">
44
									<input type="hidden" class="commune-insee" disabled id="commune-insee" name="commune-insee" value="">
45
								</div>
46
							</div>
3532 idir 47
							<input type="hidden" class="form-control geometry-releve" disabled id="geometry-releve" name="geometry-releve" value="" style="display:none">
3425 idir 48
							<input type="hidden" class="form-control latitude-releve" disabled id="latitude-releve" name="latitude-releve" value="" style="display:none">
49
							<input type="hidden" class="form-control longitude-releve" disabled id="longitude-releve" name="longitude-releve" value="" style="display:none">
50
							<input type="hidden" class="form-control altitude-releve" disabled id="altitude-releve" name="altitude-releve" value="" style="display:none">
51
							<div class="row pl-3 pr-3 mt-3">
52
								<div class="d-flex flex-column col-sm-4">
53
									<label for="pays">Pays</label>
54
									<div>
55
										<input type="text" class="form-control pays" disabled id="pays" name="pays" value="">
56
									</div>
57
								</div>
58
							</div>
59
						</div>
60
					</div>
61
				</div>
62
			</div>
63
 
64
			<div class="col-md-6">
65
				<h3 class="mb-3">Informations sur le relevé</h3>
66
				<div id="obs-info" class="text-justify col-sm-8">
67
					<p>
68
						<span class="warning">Attention!</span><br>
69
						Ces informations ne sont pas modifiables après la création du relevé
70
					</p>
71
	    			<p>
72
	    				Pour indiquer qu'<span class="font-weight-bold">un élément concernant le relevé ou un arbre a changé</span> ou corriger une erreur, vous devez dupliquer le relevé existant.
73
	    			</p>
74
	    			<p>
75
	    				<a target="_blank" href="https://www.tela-botanica.org/wikini/AideCarnetEnLigne/wakka.php?wiki=AideWidgetSaisie">Consultez l'aide</a> pour plus d'infos.
76
	    			</p>
77
				</div>
78
 
79
				<div class="control-group">
80
					<label for="releve-date" class="col-sm-8 obligatoire" title="">
81
						<i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;Date de relevé
82
					</label>
83
					<div class="col-sm-8 mb-3 has-tooltip" data-toggle="tooltip" title="Saisir la date de l’observation">
84
						<input type="date" id="releve-date" name="releve-date" class="form-control" max="" placeholder="jj/mm/aaaa" required>
85
					</div>
86
				</div>
87
 
88
				<?php if ('tb_lichensgo' !== $widget['projet']) : ?>
89
					<div class="control-group">
90
						<div class="col-sm-8 mb-2 list-label obligatoire">
91
							<i class="fa fa-walking" aria-hidden="true"></i>&nbsp;Zone piétonne
92
						</div>
93
						<div id="zone-pietonne" class="col-sm-8 mb-3 list">
94
							<div class="form-check form-check-inline">
95
								<input type="radio" id="pietonne" name="zone-pietonne" class="pietonne form-check-input" value="true">
96
								<label for="pietonne" class="pietonne form-check-label">Oui</label>
97
							</div>
98
							<div class="form-check form-check-inline">
99
								<input type="radio" id="non-pietonne" name="zone-pietonne" class="non-pietonne form-check-input" value="false">
100
								<label for="non-pietonne" class="non-pietonne form-check-label">Non</label>
101
							</div>
102
						</div>
103
					</div>
104
 
105
					<div class="">
106
						<div class="col-sm-8 mb-2 list-label">
107
							<i class="fa fa-lightbulb" aria-hidden="true"></i>&nbsp;Présence de lampadaires
108
						</div>
109
						<div id="pres-lampadaires" class="col-sm-8 mb-3 list">
110
							<div class="form-check form-check-inline">
111
								<input type="radio" id="lampadaires" name="pres-lampadaires" class="lampadaires form-check-input" value="true">
112
								<label for="lampadaires" class="lampadaires form-check-label">Oui</label>
113
							</div>
114
							<div class="form-check form-check-inline">
115
								<input type="radio" id="sans-lapadaires" name="pres-lampadaires" class="sans-lampadaires form-check-input" value="false">
116
								<label for="sans-lampadaires" class="sans-lampadaires form-check-label">Non</label>
117
							</div>
118
						</div>
119
					</div>
120
				<?php endif; ?>
121
 
122
				<div class="">
123
					<label for="commentaires" class="col-sm-8">
124
						<i class="fa fa-pen" aria-hidden="true"></i>&nbsp;Commentaires
125
					</label>
126
					<div class="col-sm-8 mb-3">
127
						<textarea id="commentaires" class="col-md-12" rows="7" name="commentaires"></textarea>
128
					</div>
129
				</div>
130
				<!-- Bouton création d'une obs -->
131
				<div class="col-sm-8 mb-3">
132
					<div title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour ajouter votre observation à la liste à transmettre.">
133
						<a href="" id="soumettre-releve" class="charger-carto btn btn-primary">Enregistrer</a>
134
					</div>
135
				</div>
136
			</div>
137
		</div>
138
	</form><!-- fin zone relevé -->
139
 
140
	<!-- Messages d'erreur du formulaire observateur -->
141
	<div class="zone-alerte">
142
		<div id="dialogue-geoloc-ko" class="alert alert-warning alert-block hidden">
143
			<a class="close">×</a>
144
			<h4 class="alert-heading">Information&nbsp;: mauvaise géolocalisation</h4>
145
			<p>Certaines informations de géolocalisation n'ont pas été transmises.</p>
146
		</div>
147
		<div id="dialogue-date-rue-ko" class="alert alert-warning alert-block hidden">
148
			<a class="close">×</a>
149
			<h4 class="alert-heading">Information&nbsp;: Relevé dupliqué</h4>
150
			<p>
151
				Un releve existe dejà à cette date, pour cette rue.<br>
152
				Si vous souhaitez dupliquer le relevé, veuillez actionner le bouton "Reprendre un précédent relevé" de la rubique "observateur",<br>puis choisir dans le tableau le relevé à dupliquer et entrer la date de votre nouvelle observation
153
			</p>
154
		</div>
155
	</div>
156
<?php endif; ?>
157
 
158
<?php $chaine_sq_singulier = substr($squelette, 0, -1);?>
159
<div id="zone-<?php echo $squelette;?>" class="bloc-top <?php if ('arbres' === $squelette) echo 'hidden';?>">
160
	<h2 class="mb-3">Saisie des <?php echo $squelette;?> du relevé</h2>
161
	<?php if ('arbres' === $squelette ) : ?>
162
		<?php if ('tb_lichensgo' !== $widget['projet']) : ?>
3432 idir 163
					<a href="" id="bouton-saisir-plantes" class="btn btn-info mb-3 hidden" data-load="plantes">
3425 idir 164
						<i class="fas fa-seedling"></i>&nbsp;Saisir les plantes
3432 idir 165
					</a>
3425 idir 166
		<?php endif; ?>
167
		<?php if ('tb_streets' !== $widget['projet']) : ?>
3432 idir 168
			<a href="" id="bouton-saisir-lichens" class="btn btn-info mb-3 hidden" data-load="lichens">
3425 idir 169
				<i class="far fa-snowflake"></i>&nbsp;Saisir les lichens
3432 idir 170
			</a>
3425 idir 171
		<?php endif; ?>
172
	<?php else : ?>
3432 idir 173
		<a href="" id="bouton-poursuivre" class="btn btn-success hidden mb-3" data-load="<?php echo $squelette;?>">
3425 idir 174
			<i class="far fa-plus-square"></i>&nbsp;Ajouter des <?php echo $squelette;?>
3432 idir 175
		</a>
3425 idir 176
	<?php endif; ?>
177
	<div class="row">
178
		<div id="bloc-gauche" class="col-md-6">
179
			<div id="bloc-form-<?php echo $squelette;?>" class="">
180
				<?php if ('arbres' === $squelette ) : ?>
181
					<div id="arbres-info" class="text-justify">
182
						<p>
183
							Vous devez saisir <span class="font-weight-bold">entre <?php echo ('tb_lichensgo' === $widget['projet']) ? '1 et 3' : '5 et 10'; ?> arbres</span>
184
						</p>
185
					</div>
186
				<?php endif; ?>
187
				<form id="form-<?php echo $squelette;?>" role="form" autocomplete="off">
188
					<?php if ('arbres' === $squelette ) : ?>
189
						<h3 class="mb-3">Arbre&nbsp;<span id="arbre-nb">1</span>&nbsp;:</h3>
190
					<?php else : ?>
191
						<div class="control-group">
192
							<label for="choisir-arbre" class="col-sm-8 obligatoire" title="Au pied de quel arbre du relevé ce<?php echo ('lichens' === $squelette) ? " $chaine_sq_singulier a-t-il été observé" : "tte $chaine_sq_singulier a-t-elle été observée";?> ?">
193
								<i class="fas fa-tree" aria-hidden="true"></i>&nbsp;Arbre
194
							</label>
195
							<div class="col-sm-8 mb-3">
196
								<select id="choisir-arbre" name="choisir-arbre" class="choisir-arbre form-control custom-select has-tooltip" data-toggle="tooltip"  title="Au pied de quel arbre du relevé ce<?php echo ('lichens' === $squelette) ? " $chaine_sq_singulier a-t-il été observé" : "tte $chaine_sq_singulier a-t-elle été observée";?> ?" required>
197
									<option value="" selected hidden>...Arbre numéro...</option>
198
								</select>
199
							</div>
200
						</div>
201
 
202
						<div class="control-group">
203
							<label for="obs-date" class="col-sm-8 obligatoire">
204
								<i class="fa fa-calendar" aria-hidden="true"></i>&nbsp;Date
205
							</label>
206
							<div class="col-sm-8 mb-3">
207
								<input type="date" id="obs-date" name="obs-date" class="form-control" max="" placeholder="jj/mm/aaaa" required>
208
							</div>
209
						</div>
210
					<?php endif; ?>
211
 
212
					<input id="referentiel" name="referentiel" value="<?php echo $widget['referentiel']; ?>" type="hidden">
213
 
214
					<!-- Bloc-taxon -->
215
					<div id="bloc-taxon" class="control-group">
3436 idir 216
						<label <?php echo ('arbres' !== $squelette ) ? 'for="taxon-liste"' : 'id="taxon-autocomplete-label" for="taxon"';?> class="col-sm-8 obligatoire" title="">
3425 idir 217
							<i class="fa fa-leaf" aria-hidden="true"></i>&nbsp;Espèce (<?php echo $widget['referentiel']; ?>)
218
						</label>
219
 
220
						<?php if ('arbres' === $squelette ) : ?>
221
 
222
								<div class="col-sm-8 mb-3">
223
									<input id="taxon" name="taxon" class="form-control taxon-validation has-tooltip" type="text" data-toggle="tooltip" title="Saisir le taxon observé, en utilisant l’autocomplétion autant que possible" required autocomplete="off">
224
								</div>
225
							</div><!-- fin bloc-taxon -->
226
 
227
						<?php else : ?>
228
							<!-- bloc-taxon "if('arbres' !== $squelette)" -->
229
									<div class="col-sm-8 mb-3">
230
										<?php ksort( $widget['especes']['taxons'] ); ?>
231
										<select id="taxon-liste" name="taxon-liste" class="form-control custom-select taxon-validation has-tooltip" data-toggle="tooltip" title="Choisir dans la liste le taxon observé, ou choisir &quot;autre&quot; et saisir le taxon observé, en utilisant l&apos;autocomplétion autant que possible.">
232
											<option class="choisir" value="inconnue" selected hidden>...Choisir...</option>
233
											<?php foreach ($widget['especes']['taxons'] as $taxon)  : ?>
234
												<option
235
													class="nom-sci"
236
													value="<?php echo $taxon['nom_sel'];?>"
237
													title="<?php echo $taxon['nom_fr'];?>"
238
													data-num-nom-sel="<?php echo $taxon['num_nom_sel'];?>"
239
													data-nom-ret="<?php echo $taxon['nom_ret'];?>"
240
													data-num-nom-ret="<?php echo $taxon['num_nom_ret'];?>"
241
													data-nt="<?php echo $taxon['num_taxon'];?>"
242
													data-famille="<?php echo $taxon['famille'];?>"
243
												><?php echo ( 'plantes' === $squelette) ? $taxon['nom_fr'] : $taxon['nom_sel'];?></option>
244
											<?php endforeach; ?>
245
											<option value="autre">Autre espèce</option>
246
										</select>
247
										<span for="taxon-liste" class="error" style="display: none;">
248
											Une observation doit comporter au moins une image ou un nom d'espèce
249
										</span>
250
										<input id="taxon" name="taxon" type="hidden" />
251
									</div>
252
							</div><!-- fin bloc-taxon -->
253
							<!-- input text pour l'option "autre" espèce -->
254
							<div id="taxon-input-groupe" class="control-group hidden">
3436 idir 255
								<label id="taxon-autocomplete-label" for="taxon-autre" class="col-sm-8" title="">
3425 idir 256
									<i class="fab fa-pagelines" aria-hidden="true"></i>&nbsp;Autre espèce
257
								</label>
258
								<div class="col-sm-8 mb-3">
259
									<input id="taxon-autre" name="taxon-autre" class="form-control has-tooltip" type="text" data-toggle="tooltip" title="Saisir le taxon observé, en utilisant l&apos;autocomplétion autant que possible.">
260
								</div>
261
							</div>
262
 
263
						<?php endif; ?>
264
 
265
					<div class="control-group">
266
						<label for="certitude" class="col-sm-8 obligatoire">
267
							<i class="fa fa-question" aria-hidden="true"></i>&nbsp;Certitude
268
						</label>
269
						<div class="col-sm-8 mb-3">
270
							<select id="certitude" name="certitude" class="form-control custom-select" required>
271
								<option class="choisir" hidden value="" selected>...Choisir...</option>
272
								<option class="aDeterminer" value="à determiner">À déterminer</option>
3532 idir 273
								<option class="douteux" value="douteux">Douteuse</option>
274
								<option class="certain" value="certain">Certaine</option>
3425 idir 275
							</select>
276
						</div>
277
					</div>
278
					<?php if ('lichens' === $squelette ) : ?>
279
						<div class="control-group">
280
							<div class="col-sm-8 mb-2 list-label obligatoire" title="À partir de la grille d&apos;observation, repérer où sont placés les lichens sur le tronc (bas à 1m du sol). Voir le tutoriel.">
281
								<i class="fas fa-cube" aria-hidden="true"></i>&nbsp;Localisation sur le tronc
282
							</div>
283
							<table class="table col-sm-8">
284
							  <thead>
285
								<tr>
286
								  <th scope="col">Face :</th>
287
								  <th scope="col">Nord</th>
288
								  <th scope="col">Sud</th>
289
								  <th scope="col">Est</th>
290
								  <th scope="col">Ouest</th>
291
								</tr>
292
							  </thead>
293
							  <tbody>
294
								<tr>
295
								  <th scope="row">1 (haut)</th>
296
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-n1" value="n1"></td>
297
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-s1" value="s1"></td>
298
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-e1" value="e1"></td>
299
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-o1" value="o1"></td>
300
								</tr>
301
								<tr>
302
								  <th scope="row">2</th>
303
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-n2" value="n2"></td>
304
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-s2" value="s2"></td>
305
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-e2" value="e2"></td>
306
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-o2" value="o2"></td>
307
								</tr>
308
								<tr>
309
								  <th scope="row">3</th>
310
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-n3" value="n3"></td>
311
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-s3" value="s3"></td>
312
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-e3" value="e3"></td>
313
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-o3" value="o3"></td>
314
								</tr>
315
								<tr>
316
								  <th scope="row">4</th>
317
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-n4" value="n4"></td>
318
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-s4" value="s4"></td>
319
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-e4" value="e4"></td>
320
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-o4" value="o4"></td>
321
								</tr>
322
								<tr>
323
								  <th scope="row">5 (bas)</th>
324
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-n5" value="n5"></td>
325
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-s5" value="s5"></td>
326
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-e5" value="e5"></td>
327
								  <td><input type="checkbox" name="lichens-tronc" id="lichens-tronc-o5" value="o5"></td>
328
								</tr>
329
							  </tbody>
330
							</table>
331
						</div>
332
					<?php endif; ?>
333
					<?php if ('arbres' === $squelette ) : ?>
334
						<div class="">
335
							<label class="col-sm-8 obligatoire has-tooltip" data-toggle="tooltip" title="Localisation du relevé.">
336
								<i class="fa fa-map-marked-alt " aria-hidden="true"></i>&nbsp;Localiser l'arbre
337
							</label>
338
							<div class="control-group">
339
								<div id="geoloc-datas-arbres" class="hidden">
340
									<div class="mt-3">
341
										<label class="col-sm-8" for="rue-arbres">Rue</label>
342
										<div class="col-sm-8">
343
											<input type="text" class="form-control rue-arbres" disabled id="rue-arbres" name="rue-arbres" value="">
344
										</div>
345
									</div>
3532 idir 346
									<input type="hidden" id="geometry-arbres" name="geometry-arbres" class="geometry-arbres"  value="" style="display:none">
3425 idir 347
									<div class="row pl-3 pr-3 mt-3">
348
										<div class="d-flex flex-column col-sm-4">
349
											<label class="" for="latitude-arbres">Latitude</label>
350
											<div class="">
351
												<input type="text" class="form-control latitude-arbres" disabled id="latitude-arbres" name="latitude-arbres" value="">
352
											</div>
353
										</div>
354
										<div class="d-flex flex-column col-sm-4">
355
											<label class="" for="longitude-arbres">Longitude</label>
356
											<div class="">
357
												<input type="text" class="form-control longitude-arbres" disabled id="longitude-arbres" name="longitude-arbres" value="">
358
											</div>
359
										</div>
360
									</div>
361
									<input type="hidden" id="altitude-arbres" name="altitude-arbres" class=""  value="" style="display:none">
362
								</div>
363
								<div id="geoloc-arbres" class="col-sm-8"></div>
364
							</div>
365
						</div>
366
					<?php else : ?>
367
						<div class="">
368
							<label for="commentaire" class="col-sm-8">
369
								<i class="fa fa-pen" aria-hidden="true"></i>&nbsp;Commentaires
370
							</label>
371
							<div class="col-sm-8 mb-3">
372
								<textarea id="commentaire" class="col-md-12" rows="7" name="commentaire"></textarea>
373
							</div>
374
						</div>
375
					<?php endif; ?>
376
				</form>
377
				<form id="form-upload" class="form-horizontal" action="<?php echo $url_ws_upload ?>" method="post" enctype="multipart/form-data">
378
					<div class="col-sm-8 mb-2 list-label and-help">
379
						<?php
380
							$texte_photo = '';
381
							if( 'lichens' !== $squelette ) $texte_photo = 't';
382
							if( 'plantes' === $squelette ) $texte_photo .= 'te';
383
							$texte_photo .= " $chaine_sq_singulier";
384
						?>
385
						<i class="fa fa-images" aria-hidden="true"></i>&nbsp;Photo(s) de ce<?php echo $texte_photo;?>
386
					</div>
387
					<p id="miniature-info" class="col-sm-8">
3434 idir 388
						Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacune.<br>
389
						En fonction de sa taille sur le disque le téléchargement d'une photo peut être long.<br>
390
						Pendant ce temps l'envoi de l'observation sera interrompu.<br>
391
						Vous pouvez l'annuler en cliquant sur le bouton supprimer de la photo en cours de téléchargement.
3425 idir 392
					</p>
3428 idir 393
					<div id ="photos-conteneur" class="control-group col-sm-12">
3425 idir 394
						<div id="bouton-fichier">
395
							<label for="fichier" class="label-file btn btn-large btn-info mb-3" title="Photos au format JPEG, moins de 5Mo chacune.">
396
								<span class="label-text"><i class="fas fa-download"></i>&nbsp;Ajouter une image</span>
397
								<input type="file" id="fichier" name="fichier" class="input-file" accept="image/jpeg" multiple>
398
								<input type="hidden" name="MAX_FILE_SIZE" value="5242880">
399
							</label>
400
						</div>
401
 
402
						<div id="miniatures"></div>
403
						<p class="miniature-msg" class="span12">&nbsp;</p>
404
					</div>
405
				</form>
406
				<?php if ('arbres' === $squelette ) : ?>
407
					<form id="form-arbre-fs" role="form" autocomplete="off">
408
						<div class="control-group">
409
							<label for="circonference" class="col-sm-8 obligatoire">
410
								<i class="fa fa-circle-notch" aria-hidden="true"></i>&nbsp;Circonférence (cm)
411
							</label>
412
							<div class="col-sm-8 mb-3">
413
								<input id="circonference" type="number" name="circonference" class="form-control has-tooltip" data-toggle="tooltip" title="Circonférence en cm, à 1m de hauteur" placeholder="Circonférence (cm)" step="1" min="1" required>
414
							</div>
415
						</div>
416
						<?php if ('tb_lichensgo' !== $widget['projet']) : ?>
417
							<div class="control-group">
418
								<label for="surface-pied" class="col-sm-8 obligatoire">
419
									<i class="fa fa-arrows-alt" aria-hidden="true"></i>&nbsp;Surface du pied (m²)
420
								</label>
421
								<div class="col-sm-8 mb-3">
422
									<input id="surface-pied" type="number" name="surface-pied" class="form-control has-tooltip" data-toggle="tooltip" title="Surface du pied d&apos;arbre en m² (évaluée ou mesurée avec un mètre)" placeholder="Surface du pied (m²)" step="0.01" min="0" lang="en"required>
423
								</div>
424
							</div>
425
							<div class="control-group">
426
								<label for="equipement-pied-arbre" class="col-sm-8 obligatoire">
427
									<i class="fa fa-dot-circle" aria-hidden="true"></i>&nbsp;Equipement au pied de l'arbre
428
								</label>
429
								<div class="col-sm-8 mb-3">
430
									<div class="select-wrapper add-field-select">
431
										<select id="equipement-pied-arbre" name="equipement-pied-arbre" class="equipement-pied-arbre select form-control custom-select" data-label="Equipement au pied de l&apos;arbre" data-name="equipement-pied-arbre" required>
432
											<option class="choisir" selected value="" data-name="equipement-pied-arbre" hidden>...Choisir...</option>
433
											<option value="plaque de metal" data-name="equipement-pied-arbre">Plaque de métal</option>
434
											<option value="grille" data-name="equipement-pied-arbre">Grille</option>
435
											<option value="ciment" data-name="equipement-pied-arbre">Ciment</option>
436
											<option value="gomme" data-name="equipement-pied-arbre">Gomme</option>
437
											<option value="absent" data-name="equipement-pied-arbre">Absent</option>
438
											<option class="other form-control is-select" value="other" data-name="equipement-pied-arbre" data-element="select">Autre</option>
439
										</select>
440
									</div>
441
									<span class="error hidden">Ce champ est obligatoire.</span>
442
								</div>
443
							</div>
444
							<div class="">
445
								<label for="tassement" class="col-sm-8">
446
									<i class="fas fa-sort-amount-down" aria-hidden="true"></i>&nbsp;Tassement
447
								</label>
448
								<div class="col-sm-8 mb-3">
449
									<select id="tassement" name="tassement" class="tassement form-control custom-select has-tooltip" data-toggle="tooltip" title="Évaluer le tassement du sol à l&apos;aide d'un crayon que vous enfoncez verticalement dans le sol.">
450
										<option class="choisir" selected value="" hidden>...Choisir...</option>
451
										<option value="dur">Dur (le crayon ne s&apos;enfonce pas du tout)</option>
452
										<option value="normal">Normal (le crayon s&apos;enfonce difficilement)</option>
453
										<option value="mou">Mou (le crayon s&apos;enfonce facilement)</option>
454
									</select>
455
								</div>
456
							</div>
457
							<div class="">
458
								<div class="col-sm-8 mb-2 list-label">
459
									<i class="fa fa-dog" aria-hidden="true"></i>&nbsp;Présence de déjection(s)
460
								</div>
461
								<div id="dejections" class="col-sm-8 mb-3 list">
462
									<div class="form-check form-check-inline">
463
										<input type="radio" id="dejections-oui" name="dejections" class="dejections-oui form-check-input" value="true">
464
										<label for="dejections-oui" class="dejections-oui form-check-label">Oui</label>
465
									</div>
466
									<div class="form-check form-check-inline">
467
										<input type="radio" id="dejections-non" name="dejections" class="dejections-non form-check-input" value="false">
468
										<label for="dejections-non" class="dejections-non form-check-label">Non</label>
469
									</div>
470
								</div>
471
							</div>
472
						<?php endif; ?>
473
 
474
						<?php if ('tb_streets' !== $widget['projet']) : ?>
475
							<div id="face-ombre" class="control-group">
476
								<div class="col-sm-8 mb-2 list-label obligatoire">
477
									<i class="far fa-compass" aria-hidden="true"></i>&nbsp;Une ou plusieurs faces sont-elles à l'ombre la plupart du temps? Si oui, notez lesquelles&nbsp;:
478
								</div>
479
								<div class="col-sm-8 mb-3 has-tooltip list" data-toggle="tooltip" title="Si vous estimez que le tronc est souvent à l&apos;ombre (à cause de bâtiments ou du feuillage par exemple), notez la ou les faces ombragées." required>
480
									<div class="form-check form-check-inline">
481
										<input type="checkbox" id="nord" name="face-ombre" class="nord form-check-input" value="nord">
482
										<label for="nord" class="nord form-check-label">Nord</label>
483
									</div>
484
									<div class="form-check form-check-inline">
485
										<input type="checkbox" id="sud" name="face-ombre" class="sud form-check-input" value="sud">
486
										<label for="sud" class="sud form-check-label">Sud</label>
487
									</div>
488
									<div class="form-check form-check-inline">
489
										<input type="checkbox" id="est" name="face-ombre" class="est form-check-input" value="est">
490
										<label for="est" class="est form-check-label">Est</label>
491
									</div>
492
									<div class="form-check form-check-inline">
493
										<input type="checkbox" id="ouest" name="face-ombre" class="ouest form-check-input" value="ouest">
494
										<label for="ouest" class="ouest form-check-label">Ouest</label>
495
									</div>
496
									<div class="form-check form-check-inline">
497
										<input type="checkbox" id="aucune" name="face-ombre" class="ouest form-check-input" value="aucune">
498
										<label for="aucune" class="aucune form-check-label">Aucune</label>
499
									</div>
500
								</div>
501
							</div>
502
						<?php endif; ?>
503
 
504
						<div class="">
505
							<label for="com-arbres" class="col-sm-8" title="">
506
									<i class="fa fa-pen" aria-hidden="true"></i>&nbsp;Commentaires
507
							</label>
508
							<div class="col-sm-8 mb-3">
509
									<textarea id="com-arbres" class="col-md-12" rows="7" name="com-arbres"></textarea>
510
							</div>
511
						</div>
512
					</form>
513
 
514
				<!-- Bouton création d'une obs et retour à la saisie après visualisation d'un(e) <?php $chaine_sq_singulier; ?>-->
515
				<div class="col-sm-8 mb-3">
516
					<button id="retour" class="btn btn-info has-tooltip hidden mr-2 mb-2" data-toggle="tooltip" title="Retour à la saisie">
517
						<i class="fas fa-undo-alt"></i>&nbsp;retour à la saisie
518
					</button>
519
				<?php else: ?>
520
					<div class="col-sm-8 mb-3">
521
				<?php endif; ?>
522
					<button id="ajouter-obs" class="btn btn-primary has-tooltip" data-toggle="tooltip" title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour ajouter votre observation à la liste à transmettre.">
523
						<i class="fas fa-step-forward"></i>&nbsp;Suivant
524
					</button>
525
				</div>
526
				<?php if ('arbres' === $squelette ) : ?>
527
					<div id="bloc-info-arbres">
528
						<h3 id="bloc-info-arbres-title" class="m-3 hidden">Revisualiser le formulaire pour un arbre :</h3>
529
					</div>
530
				<?php endif; ?>
531
			</div>
532
		</div><!-- fin formulaire <?php echo $squelette;?> -->
533
		<!-- zone résumé obs <?php echo $squelette;?> ( =zone de droite) -->
534
		<div id="boc-droite" class="col-md-6 mb-3">
535
			<!-- Messages d'erreur du formulaire -->
536
			<div class="row">
537
				<?php if ('arbres' !== $squelette ) : ?>
538
					<?php if ('tb_lichensgo' !== $widget['projet'] && 'plantes' !== $squelette) : ?>
3432 idir 539
						<a href="" id="bouton-saisir-plantes" class="btn btn-info mb-3" data-load="plantes">
3425 idir 540
							<i class="fas fa-seedling"></i> Saisir les plantes
3432 idir 541
						</a>
3425 idir 542
					<?php endif; ?>
543
					<?php if ('tb_streets' !== $widget['projet'] && 'lichens' !== $squelette) : ?>
3432 idir 544
						<a href="" id="bouton-saisir-lichens" class="btn btn-info mb-3" data-load="lichens">
3425 idir 545
							<i class="far fa-snowflake"></i>&nbsp;Saisir les lichens
3432 idir 546
						</a>
3425 idir 547
					<?php endif; ?>
548
				<?php endif; ?>
549
				<div class="zone-alerte">
550
					<div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block hidden">
551
						<a class="close">×</a>
552
						<h4 class="alert-heading">Information&nbsp;: 10 observations maximum</h4>
553
						<p>
554
							Vous venez d'ajouter votre 10ème observation.<br/>
555
							Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
556
						</p>
557
					</div>
3433 idir 558
					<div id="message-chargement" class="alert alert-secondary alert-block hidden">
559
							<a class="close">×</a>
560
							<h4 class="alert-heading">Image en cours de chargement</h4>
561
							<p>
562
								La création de cette observation sera à nouveau disponible dès que l'image aura été chargée.<br/>
3434 idir 563
    							Vous pouvez annuler l'action en cliquant sur le bouton supprimer de la photo en cours de téléchargement.
3433 idir 564
							</p>
565
						</div>
3425 idir 566
					<div id="dialogue-form-invalide" class="alert alert-warning alert-block hidden">
567
						<a class="close">×</a>
568
						<h4 class="alert-heading">Information&nbsp;: champs en erreur</h4>
569
						<p>
570
							Certains champs du formulaire sont mal remplis.<br>
571
							Veuillez vérifier vos données.
572
						</p>
573
					</div>
574
					<div id="dialogue-taxon-or-image" class="alert alert-warning alert-block hidden">
575
						<a class="close">×</a>
576
						<h4 class="alert-heading">Information&nbsp;: Observation incomplète</h4>
577
						<p>
578
							Une observation de <?php echo $chaine_sq_singulier;?> doit comporter au moins, un arbre, une date, et soit un nom d'espèce, soit une image
579
						</p>
580
					</div>
581
				</div>
582
			</div>
583
 
584
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
585
			<div id="zone-liste-obs" class="hidden">
586
				<div id="bloc-controle-liste-obs" class="alert alert-info">
587
					<h2 class="transmission-title"><strong>Observations à transmettre&nbsp;: <span class="obs-nbre badge badge-info">0</span></strong></h2>
588
					<button id="transmettre-obs" class="btn btn-primary has-tooltip" data-toggle="tooltip" disabled="disabled"
589
						title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques." type="button">Enregistrer</button>
590
				</div>
591
				<div id="liste-obs" ></div>
592
				<div class="row">
593
					<div class="zone-alerte">
594
						<div id="dialogue-zero-obs" class="alert alert-block hidden">
595
							<a class="close">×</a>
596
							<h4 class="alert-heading">Attention&nbsp;: aucune observation</h4>
597
							<p>
598
								Veuillez saisir des observations pour les transmettre.
599
							</p>
600
						</div>
601
						<div id="dialogue-obs-transaction-ok" class="alert alert-success alert-block hidden">
602
							<a class="close">×</a>
603
							<h4 class="alert-heading">Information&nbsp;: transmission des observations</h4>
604
							<div class="alert-txt"></div>
605
						</div>
606
						<div id="dialogue-obs-transaction-ko" class="alert alert-error alert-block hidden">
607
							<a class="close">×</a>
608
							<h4 class="alert-heading">Erreur&nbsp;: transmission des observations</h4>
609
							<div class="alert-txt"></div>
610
						</div>
611
					</div>
612
				</div>
613
			</div>
614
 
615
			<!-- Fenêtres modales -->
616
			<div id="chargement" class="modal-fenetre hidden">
617
				<div id="chargement-centrage" class="modal-contenu">
618
					<div class="progress progress-striped active">
619
						<div id="barre-progression-upload" class="progress-bar progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
620
							<span class="sr-only">0/10 observations transmises</span>
621
						</div>
622
					</div>
623
					<p id="chargement-txt">
624
						Transfert des observations en cours...<br>
625
						Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre d'observations à transférer.
626
					</p>
627
				</div>
628
			</div>
629
 
630
			<!-- Templates HTML -->
631
			<div id="tpl-transmission-ok" class="hidden">
632
				<p class="msg">
633
					Merci pour l'envoi de vos données.<br>
634
    				Vos observations ont bien été transmises.<br>
635
					Elles sont désormais consultables à travers les différents outils de visualisation du réseau (<a href="https://www.tela-botanica.org/flore/">eFlore</a>, <a href="https://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>, <a href="https://www.tela-botanica.org/appli:identiplante">identiplante</a>, <a href="https://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br>
636
    				Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous connectant à votre <a href="https://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br>
637
    				Pour toute question n'hésitez pas à nous contacter à l'adresse suivante : apa@tela-botanica.org<br>
638
    				Ces données seront utilisées par des chercheurs de Sorbonne Université et du Museum National d'Histoire Naturelle.
639
				</p>
640
			</div>
641
			<div id="tpl-transmission-ko" class="hidden">
642
				<p class="msg">
643
					Une erreur est survenue lors de la transmission d'une observation.<br>
644
    				Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer et transmettre les suivantes.<br>
645
    				Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br>
646
    				Si le problème persiste, vous pouvez signaler le dysfonctionnement sur <a href="<?php echo $url_remarques; ?>?service=cel&pageSource=<?php echo urlencode( 'http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING'] ); ?>" target="_blank" onclick="javascript: window.open( this.getAttribute( 'href' ), 'Tela Botanica - Remarques', config = 'height=700, width=640, scrollbars=yes, resizable=yes' ); return false;">le formulaire de signalement d'erreurs</a>.
647
				</p>
648
			</div>
649
		</div><!-- fin <?php echo $squelette;?> zone résumé obs ( =zone de droite ) -->
650
	</div>
651
	<!-- Connexion, bloc de prévisualisation, date -->
652
	<script type="text/javascript">
653
	//<![CDATA[
654
		var tagImg           = "<?php echo isset($_GET['tag-img']) ? $_GET['tag-img'] : ''; ?>";
655
		var separationTagImg = "<?php echo isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : ''; ?>";
656
		var tagObs           = "<?php echo isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''; ?>";
657
		var separationTagObs = "<?php echo isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : ''; ?>";
658
		var <?php echo $squelette;?>Prop = {
659
			'sujet'                             : '<?php echo $squelette;?>',
660
			// Mots-clés à ajouter aux images
661
			'tagImg'                            : <?php echo isset($_GET['motcle']) ? "'".$_GET['motcle']."' + separationTagImg + tagImg" : 'tagImg'; ?>,
662
			// Mots-clés à ajouter aux observations
663
			'tagObs'                            : <?php echo isset($_GET['projet']) ? "'".$_GET['projet']."' + separationTagObs + tagObs" : 'tagObs'; ?>,
664
			// Code du référentiel utilisé pour les nom scientifiques.
665
			'nomSciReferentiel'                 : "<?php echo strtolower( $widget['referentiel'] ); ?>",
666
			// Indication de la présence d'un référentiel imposé
667
			'referentielImpose'                 : "<?php echo $referentiel_impose; ?>"
668
		};
669
		$( document ).ready( function() {
670
			<?php echo $squelette;?> = new <?php echo ('arbres' === $squelette) ? 'ReleveASL' : 'PlantesEtLichensASL';?>(<?php echo $squelette;?>Prop,widgetProp);
671
			<?php echo $squelette;?>.init();
672
 
673
			// Fonctions de Style et Affichage des éléments "spéciaux"
674
			utils.init();
675
		});
676
	//]]>
677
	</script>
678
</div>