Subversion Repositories eFlore/Applications.cel

Rev

Rev 3857 | Details | Compare with Previous | Last modification | View Log | RSS feed

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