Subversion Repositories eFlore/Applications.cel

Rev

Rev 3163 | Go to most recent revision | Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
3120 delphine 1
<!DOCTYPE html>
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
  <head>
4
	<title><?= $widget['titre']; ?></title>
5
 
6
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7
	<meta http-equiv="Content-style-type" content="text/css" />
8
	<meta http-equiv="Content-script-type" content="text/javascript" />
9
	<meta http-equiv="Content-language" content="fr" />
10
 
11
	<meta name="revisit-after" content="15 days" />
12
    <meta name="robots" content="index,follow" />
13
    <meta name="author" content="Tela Botanica" />
14
    <meta name="keywords" content="Tela Botanica, CEL" />
15
    <meta name="description" content="Gestion des widgets de saisie du carnet en ligne" />
16
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
17
 
18
	<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
19
	<meta property="og:type" content="website" />
20
	<meta property="og:title" content="Gestion des widgets de saisie du CeL" />
21
	<meta property="og:site_name" content="Tela Botanica" />
22
	<meta property="og:description" content="Gestion des widgets de saisie du Carnet en Ligne" />
23
	<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
24
	<meta property="og:image:type" content="image/png" />
25
	<meta property="og:image:width" content="256" />
26
	<meta property="og:image:height" content="256" />
27
	<meta property="og:locale" content="fr_FR" />
28
 
29
	<!-- Favicones -->
30
	<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
31
 
32
	<!-- Jquery -->
33
	<!-- Google Map v3 -->
34
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
35
	<!-- Jquery -->
36
	<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
37
	<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
38
	<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
39
	<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
40
	<!-- Jquery Plugins -->
41
	<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
42
	<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
43
	<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
44
	<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
45
	<!-- Jquery Form :nécessaire pour l'upload des images -->
46
	<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
47
	<!-- Bootstrap -->
48
	<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
49
 
50
	<script type="text/javascript" src="<?=$url_base?>modules/saisie2/squelettes/js/WidgetSaisie.js"></script>
51
	<script type="text/javascript">
52
		//<![CDATA[
53
           $(document).ready(function() {
54
				// OMG un modèle objet !!
55
				var widget = new WidgetSaisie();
56
 
57
				// langue
58
				widget.langue = "<?= $widget['langue']; ?>";
59
				// Squelette d'URL du web service de l'annuaire.
60
				widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
61
				// URL de l'icône du chargement en cours
62
				widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
63
				// URL de l'icône du chargement en cours d'une image
64
				widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
65
				// URL de l'icône du calendrier
66
				widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
67
				// URL de l'icône pour une photo manquante
68
				widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
69
 
70
				// Code du référentiel utilisé pour les nom scientifiques.
71
				widget.nomSciReferentiel = "<?= strtolower($widget['referentiel']); ?>";
72
				// Indication de la présence d'une espèce imposée
73
				widget.especeImposee = "<?=$espece_imposee; ?>";
74
				// Tableau d'informations sur l'espèce imposée
75
				widget.infosEspeceImposee = "<?=$infos_espece; ?>";
76
				// Nombre d'élément dans les listes d'auto-complétion
77
				widget.autocompletionElementsNbre = 20;
78
				// Indication de la présence d'un référentiel imposé
79
				widget.referentielImpose = "<?=$referentiel_impose; ?>";
80
				// URL du web service permettant l'auto-complétion des noms scientifiques
81
				widget.serviceAutocompletionNomSciUrl = "<?= $widget['especes']['url_ws_autocompletion_ns']; ?>?"+
82
					"masque={masque}&"+
83
					"recherche=etendue&"+
84
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
85
					"ns.structure=au"+"&"+
86
					"navigation.limite=" + widget.autocompletionElementsNbre;
87
				// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
88
				widget.serviceAutocompletionNomSciUrlTpl = "<?= $widget['especes']['url_ws_autocompletion_ns_tpl']; ?>?"+
89
					"masque={masque}&"+
90
					"recherche=etendue&"+
91
					"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
92
					"retour.tri=alpharet&"+ // tri "à la CeL"
93
					"ns.structure=au"+"&"+
94
					"navigation.limite=" + widget.autocompletionElementsNbre;
95
 
96
 
97
				// Initialisation du bousin
98
				widget.init();
99
			});
100
		//]]>
101
	</script>
102
	<!-- Barre de navigation -->
103
	<?php if ($bar !== false): ?>
104
		<script src="<?=$url_script_navigation?>"></script>
105
	<?php endif; ?>
106
 
107
 
108
	<!-- CSS -->
109
	<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
110
	<!-- <link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" /> -->
111
	<link rel="stylesheet" type="text/css" href="<?=$url_base?>modules/saisie2/squelettes/css/bootstrap-4/css/bootstrap.min.css" />
112
	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
113
	<!--  <link id="telabotanica-style-css" rel="stylesheet" href="https://beta.tela-botanica.org/preprod/wp-content/themes/telabotanica/dist/bundle.css?ver=4.7.5" type="text/css" media="all">
114
	--><link href="<?= $url_base; ?>modules/saisie2/squelettes/css/saisie.css" rel="stylesheet" type="text/css" media="screen" />
115
	<!--  Google Analytics -->
116
	<?php if($prod): ?>
117
		<?php include "analytics.html"; ?>
118
	<?php endif; ?>
119
  </head>
120
 
121
  <body>
122
		<div id="zone-appli" class="container">
123
		<?php if ($bar !== false): ?>
124
			<div id="tb-navigation" data-courant="widget-cel-saisie" data-squelette="bootstrap4" data-mode="prod">
125
			</div>
126
			<br/>
127
		<?php endif; ?>
128
		<div class="layout-wrapper page">
129
			<div class="media">
130
				<?= '<img class="d-flex mr-3" src="'.$widget['logo'].'" alt="'.$widget['projet'].'" >';?>
131
				<div class="media-body">
132
					<h1 class="mt-0">
133
						<?= $widget['titre']; ?>
134
					</h1>
135
				</div>
136
			</div>
137
			<div class="row align-items-center">
138
				<div class="col-md-6">
139
					<div id="description"><?= $widget['description']; ?></div>
140
				</div>
141
				<div class="col-md-6">
142
					<div id="aide" class="well well-lg hidden-sm-down">
143
						<h3><?= $aide['titre']; ?></h3>
144
						<div id="aide-txt" class="hiden-sm-down">
145
							<p>
146
								Cet outil vous permet de partager simplement vos observations avec
147
								le <a target="_blank" href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
148
								(<a target="_blank" href="http://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
149
								Identifiez-vous bien pour ensuite retrouver et gérer vos données dans votre
150
								<a target="_blank" href="http://www.tela-botanica.org/appli:cel"> Carnet en ligne</a>.
151
								Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
152
								Elles apparaissent immédiatement sur les
153
								<a target="_blank" href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
154
							</p>
155
							<p class="discretion">
156
								Pour toute question ou remarque,
157
								<a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
158
									target="_blank"
159
									onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
160
									contactez-nous</a>
161
							</p>
162
						</div>
163
					</div>
164
				</div>
165
			</div>
166
			<div id="formulaire">
167
				<form id="form-observateur" role="form" autocomplete="on">
168
					<h2><?= $observateur['titre']; ?></h2>
169
					<div id="zone-courriel" class="row align-items-center">
170
						<div class="col-md-6 form-inline">
171
							<label for="courriel" class="col-sm-3" title="<?= $observateur['courriel-title']; ?>">
172
								<strong class="obligatoire">*</strong>
173
								<?= $observateur['courriel']; ?>
174
							</label>
175
							<div class="col-sm-8 mb-2 input-group">
176
								<span class="input-group-addon hidden-xs-down"><span class="fa fa-envelope"></span></span>
177
								<input id="courriel" name="courriel" class="form-control" type="email" title="<?= $observateur['courriel-title']; ?> "/>
178
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
179
							</div>
180
						</div>
181
						<div id="zone-courriel-confirmation" class="col-md-6 form-inline" style="display:none;">
182
							<label for="courriel_confirmation" class="col-sm-3" title="Veuillez confirmer le courriel.">
183
								<strong class="obligatoire">*</strong> Courriel (confirmation)
184
							</label>
185
							<div class="col-sm-8 input-group">
186
								<span class="input-group-addon hidden-xs-down"><span class="fa fa-envelope"></span></span>
187
								<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="email"/>
188
							</div>
189
						</div>
190
					</div>
191
					<div id="zone-prenom-nom" class="row align-items-center" style="display:none;">
192
						<div class="col-md-6 form-inline">
193
							<label for="prenom" class="col-sm-3"><?= $observateur['prenom']; ?></label>
194
							<div class="input-group col-sm-8">
195
								<span class="input-group-addon hidden-xs-down"><span class="fa fa-user"></span></span>
196
								<input id="prenom" name="prenom" class="form-control" type="text"/>
197
							</div>
198
						</div>
199
						<div class="col-md-6 form-inline">
200
							<label for="nom" class="col-sm-3"><?= $observateur['nom']; ?></label>
201
							<div class="input-group col-sm-8">
202
								<span class="input-group-addon hidden-xs-down"><span class="fa fa-user"></span></span>
203
								<input id="nom" name="nom" class="form-control" type="text"/>
204
							</div>
205
						</div>
206
					</div>
207
				</form>
208
				<form id="form-observation" role="form" autocomplete="on">
209
					<h2><?= $observation['titre']; ?></h2>
210
					<div id="zone-observation" class="row align-items-center">
211
						<div class="col-md-6 form-inline">
212
							<label for="courriel" class="col-sm-3" title="<?= $observateur['courriel-title']; ?>">
213
								<strong class="obligatoire">*</strong>
214
								<?= $observation['geolocalisation']; ?>
215
							</label>
216
							<div class="col-sm-8 mb-2 input-group">
217
								<span class="input-group-addon hidden-xs-down"><span class="fa fa-envelope"></span></span>
218
								<input id="courriel" name="courriel" class="form-control" type="email" title="<?= $observateur['courriel-title']; ?> "/>
219
								<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
220
							</div>
221
							<label for="milieu" class="col-sm-3">
222
								<?= $observation['milieu']; ?>
223
							</label>
224
							<div class="col-sm-8 mb-2 input-group">
225
							<span class="input-group-addon hidden-xs-down"><span class="fa fa-street-view"></span></span>
226
								<?php if ($widget['milieux'] != array()) {?>
227
									<select id="milieu" class="form-control" >
228
									<?php foreach ($widget['milieux'] as $milieu) {?>
229
										<option value="<?= $milieu; ?>"><?= $milieu; ?></option>
230
									<?php } ?>
231
									</select>
232
								<?php } else { ?>
233
									<input id="milieu" name="milieu" class="form-control" type="text" placeholder="bois, champ, falaise, ..."/>
234
								<?php } ?>
235
							</div>
236
						</div>
237
						<div class="col-md-6 form-inline">
238
							<label for="date" class="col-sm-3" title="">
239
								<strong class="obligatoire">*</strong><?= $observation['date']; ?>
240
							</label>
241
							<div class="col-sm-8 input-group date" id="datetimepicker">
242
								<span  id="date-icone" class="input-group-addon hidden-xs-down"><span class="fa fa-calendar"></span></span>
243
								<input id="date" name="date" class="form-control" type="date"/>
244
							</div>
245
							<?php if($widget['type_especes'] == "referentiel" && $widget['referentiel'] == "") { ?>
246
								<label for="referentiel" class="col-sm-3" title="">
247
									<strong class="obligatoire">*</strong><?= $observation['referentiel']; ?>
248
								</label>
249
								<div class="col-sm-8 input-group">
250
									<span class="input-group-addon hidden-xs-down"><span class="fa fa-book"></span></span>
251
									<select id="referentiel" class="form-control" >
252
										<option value="bdtfxr" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (index réduit)</option>
253
										<option value="bdtfx" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
254
										<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
255
										<option value="bdtre" title="Trachéophytes de La Réunion">Réunion (BDTRE)</option>
256
										<option value="aublet" title="Guyane">Guyane (AUBLET2)</option>
257
										<option value="florical" title="Nouvelle-Calédonie">Nouvelle-Calédonie (FLORICAL)</option>
258
										<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
259
										<option value="apd" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (APD)</option>
260
										<option value="lbf" title="Liban">Liban (LBF)</option>
261
										<option value="autre" title="Autre/Inconnu">Autre/Inconnu</option>
262
									</select>
263
								</div>
264
							<?php } else { ?><input id="referentiel" name="referentiel" value="<?= $widget['referentiel']; ?>" type="hidden" /><?php } ?>
265
 
266
							<label for="taxon" class="col-sm-3" title="">
267
								<?= $observation['espece']; ?>
268
							</label>
269
							<div class="col-sm-8 input-group date">
270
								<span class="input-group-addon hidden-xs-down"><span class="fa fa-leaf"></span></span>
271
								<input id="taxon" name="taxon" class="form-control" type="text"/>
272
							</div>
273
							<label for="certitude" class="col-sm-3" title="">
274
								<strong class="obligatoire">*</strong><?= $observation['certitude']; ?>
275
							</label>
276
							<div class="col-sm-8 input-group date" id="datetimepicker">
277
								<span class="input-group-addon hidden-xs-down"><span class="fa fa-question"></span></span>
278
								<select id="certitude" name="certitude" class="form-control">
279
									<option value="aDeterminer" ><?= $observation['certADet']; ?></option>
280
									<option value="douteuse" ><?= $observation['certDout']; ?></option>
281
									<option value="certaine" selected="selected" ><?= $observation['certCert']; ?></option>
282
								</select>
283
							</div>
284
						</div>
285
					</div>
286
				</form>
287
				<?php if (isset($widget['chpSupp']) && $widget['chpSupp'] != array()) { ?>
288
					<form id="form-supp" role="form" autocomplete="on">
289
						<div id="zone-supp" class="row align-items-center">
290
							<div class="col-md-6 form-inline">
291
								<?php print_r(implode($widget['chpSupp']));?>
292
							</div>
293
						</div>
294
					</form>
295
				<?php } ?>
296
				<div id="image" class="row align-items-center">
297
				</div>
298
			</div>
299
 
300
				<div class="row align-items-end component-tools-item-link">
301
					<a href="http://www.tela-botanica.org/appli:cel" target="" style="color: #e16e37">
302
						<span>Gestion</span>
303
					</a>
304
					<a href="http://www.tela-botanica.org/widget:cel:cartoPoint?projet=<?= $widget['projet']; ?>" target="" style="color: #918a6f">
305
						<span>Carto</span>
306
					</a>
307
					<a href="http://www.tela-botanica.org/widget:cel:photo?projet=<?= $widget['projet']; ?>" target="" style="color: #964e75">
308
						<span>Photo</span>
309
					</a>
310
					<a href="http://www.tela-botanica.org/widget:cel:observation?projet=<?= $widget['projet']; ?>" target="" style="color: #b2cb43">
311
						<span>Observation</span>
312
					</a>
313
					<a href="http://www.tela-botanica.org/widget:cel:export?projet=<?= $widget['projet']; ?>" target="" style="color: #009fb8">
314
						<span>Export</span>
315
					</a>
316
					<a href="http://www.tela-botanica.org/appli:pictoflora?projet=<?= $widget['projet']; ?>" target="" style="color: #927fa2">
317
						<span>PictoFlora</span>
318
					</a>
319
					<a href="http://www.tela-botanica.org/appli:identiplante?projet=<?= $widget['projet']; ?>" target="" style="color: #f25a52">
320
						<span>IdentiPlante</span>
321
					</a>
322
				</div>
323
 
324
		</div>
325
	</div>
326
  </body>
327
</html>