Subversion Repositories eFlore/Applications.cel

Rev

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

Rev Author Line No. Line
1056 jpm 1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
	<head>
4
		<title>Sauvages de ma rue</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="Céline VIDAL, Jean-Pascal MILCENT" />
14
        <meta name="keywords" content="Tela Botanica, Natural Solutions, MNHN, Sauvages de ma rue, CEL" />
15
        <meta name="description" content="Widget de saisie simplifié pour le projet Sauvages de ma rue" />
16
 
17
		<!-- Favicones -->
18
		<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/sauvages/images/favicon.ico" />
19
 
20
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
21
 
22
		<!-- Javascript : bibliothèques -->
23
		<!-- Google Map v3 -->
24
		<!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
25
		<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true&amp;language=fr&amp;region=FR"></script>
26
 
27
		<!-- Jquery -->
28
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
29
 
30
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery-ui-1.8.17.custom.min.js"></script>
31
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery.ui.datepicker-fr.js"></script>
32
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/jquery.validate.js"></script>
33
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
34
		<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
35
 
36
		<script src="<?=$url_base?>saisie?projet=sauvages&amp;service=taxons" type="text/javascript"></script>
37
 
38
		<!-- Javascript : appli saisie -->
39
		<script type="text/javascript">
40
		//<![CDATA[
1063 jpm 41
			// La présence du parametre 'debug' dans l'URL enclenche le dégogage
42
			var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
1056 jpm 43
			// URL du web service réalisant l'insertion des données dans la base du CEL.
44
			var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
45
			// URL du marqueur à utiliser dans la carte Google Map
46
			var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/fleur.png";
47
			// URL de l'icône du bouton supprimer
48
			var SUPPRIMER_ICONE_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/icones/supprimer.png";
49
			// URL de l'icône du chargement en cours
50
			var CHARGEMENT_ICONE_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/icones/chargement.gif";
51
		//]]>
52
		</script>
53
 
54
		<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/sauvages/js/sauvages.js"></script>
55
 
56
		<!-- CSS -->
57
		<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/css/ui-darkness/jquery-ui-1.8.17.custom.css" rel="stylesheet" type="text/css" media="screen" />
58
		<link href="<?=$url_base?>modules/saisie/squelettes/sauvages/css/sauvages.css" rel="stylesheet" type="text/css" media="screen" />
59
	</head>
60
 
61
	<body>
62
		<h1><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/images/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
63
 
64
		<form id="saisie-obs" action="#" enctype="multipart/form-data">
65
			<fieldset id="partie-identification">
66
				<legend>Observateur</legend>
67
				<ul>
68
					<li>
69
						<label for="prenom">Prénom</label>
70
						<input id="prenom" name="prenom" type="text" value=""/>
71
					</li>
72
					<li>
73
						<label for="nom">Nom</label>
74
						<input id="nom" name="nom" type="text" value=""/>
75
					</li>
76
					<li>
77
						<label for="courriel" class="oblig"
78
							title="Veuillez saisir votre adresse courriel. Elle ne sera pas utilisée à des fins commerciales.">
79
							<strong class="obligatoire">*</strong> Courriel
80
						</label>
81
						<input id="courriel" name="courriel" type="text" value=""/>
82
					</li>
83
					<li>
84
						<label for="courriel_confirmation" class="oblig" title="Veuillez saisir confirmer votre adresse courriel">
85
							<strong class="obligatoire">*</strong> Courriel (confirmation)
86
						</label>
87
						<input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/>
88
 
89
					</li>
90
				</ul>
91
			</fieldset>
92
 
93
			<h2>Fiche de terrain</h2>
94
			<div id="zone-fiche-terrain">
95
				<fieldset id="partie-station">
96
					<legend>Localisation</legend>
97
					<ul>
98
						<li>
99
							<ul>
100
								<li>
101
									<label for="adresse" class="oblig" title="Veuillez saisir l'adresse du relevé">
102
										<strong class="obligatoire">*</strong> Adresse
103
									</label>
104
									<input id="adresse" name="adresse" type="text" value=""/>
105
								</li>
106
								<li id="map_canvas" style="width:500px; height:240px;" ></li>
107
								<li>
108
									<span id="coordonnees-geo">Les coordonnées g&eacute;ographiques</span>
109
									<ul>
110
										<li id="masque">
111
											<label for="latitude">Latitude</label>
112
											<input id="latitude" name="latitude" type="text" value=""/>
113
											<label for="longitude">Longitude</label>
114
											<input id="longitude" name="longitude" type="text" value=""/>
115
											<span id="lat-lon-info" class="info"
116
												title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
117
												(WGS84)
118
											</span>
119
											<input type="button" value="Trouver l'adresse" onclick="codeLatLng()"/>
120
										</li>
121
									</ul>
122
								</li>
123
							</ul>
124
						</li>
125
					</ul>
126
				</fieldset>
127
				<fieldset id="partie-observation">
128
					<legend>Observation</legend>
129
					<ul>
130
						<li>
131
							<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
132
								<strong class="obligatoire">*</strong> Date du relevé
133
							</label>
134
							<input id="date" name="date" type="text" value="" />
135
						</li>
136
						<li>
137
							<label for="taxon" title="Choisissez une espèce">
138
								<strong class="obligatoire">*</strong>
139
								Espèce
140
							</label>
141
							<select id="taxon" name="taxon">
142
								<option value="">Sélectionner un taxon</option>
143
								<?php foreach ($taxons as $taxon) :?>
144
									<option value="<?=$taxon['num_nom_sel']?>"
145
										title="<?=$taxon['nom_sel'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>">
146
										<?=$taxon['nom_fr']?>
147
									</option>
148
								<?php endforeach; ?>
149
							</select>
150
						</li>
151
						<li>
152
							<label for="liste-milieux" title="Veuillez sélectionner un milieu">
153
								<strong class="obligatoire">*</strong>
154
								Milieu
155
							</label>
156
							<br />
157
							<ul id="liste-milieux">
158
								<?php foreach ($milieux as $milieu => $description) : ?>
159
								<li>
160
									<input type="radio" class="milieu" name="milieu" value="<?=$milieu?>"
161
										<?=($description != '') ? 'title="'.$description.'"': '' ?>/>
162
									<?=$milieu?>
163
								</li>
164
								<?php endforeach; ?>
165
							</ul>
166
						</li>
167
						<li>
168
							<hr class="nettoyage" />
169
						</li>
170
						<li>
171
							<label for="notes">Notes</label>
172
							<textarea id="notes" name="notes" rows="5" cols="4"></textarea>
173
						</li>
174
					</ul>
175
				</fieldset>
176
			</div><!-- zone-fiche-terrain-->
177
		</form>
178
 
179
		<div id="zone-fiche-terrain-photo">
180
			<form id="form-upload"  action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
181
				method="post" enctype="multipart/form-data">
182
				<fieldset id="partie-photo">
183
					<legend>Ajouter une photo</legend>
184
					<input type="file" id="fichier" name="fichier"/>
185
					<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
186
					<input type="submit" value="charger"/>
187
					<div id="miniature"></div>
188
					<div><button id="effacer-miniature" type="button" >Effacer</button></div>
189
				</fieldset>
190
			</form>
191
 
192
			<div>
193
				<button id="ajouter-obs" type="button"> + Ajouter</button>
194
			</div>
195
		</div><!-- zone-fiche-terrain-photo -->
196
 
197
		<!-- Affiche le tableau récapitualif des observations ajoutées -->
198
		<div id="zone-liste-obs">
199
			<form action="#" >
200
				<fieldset id="partie-preview">
201
					<legend>Liste des observations à transmettre</legend>
202
					<table id="liste-obs">
203
						<thead>
204
							<tr>
205
								<th>N&deg;</th>
206
								<th>Date</th>
207
								<th>Adresse</th>
208
								<th>Nom</th>
209
								<th>Milieu</th>
210
								<th>Latitude</th>
211
								<th>Longitude</th>
212
								<th>Photo</th>
213
								<th>Notes</th>
214
								<th></th>
215
							</tr>
216
						</thead>
217
						<tbody></tbody>
218
					</table>
219
					<button id="transmettre-obs" type="button">Transmettre</button>
220
				</fieldset>
221
			</form>
222
		</div> <!-- zone-liste-obs : wrap3 -->
223
 
224
		<!-- Messages d'erreur du formulaire-->
225
		<div id="dialogue-bloquer-copier-coller" style="display: none;" title="Information copier/coller">
226
			<p>
227
				Merci de ne pas copier/coller votre courriel.<br/>
228
				La double saisie permet de vérifier l'absence d'erreurs.
229
			</p>
230
		</div>
231
		<div id="dialogue-zero-obs" style="display: none;" title="Information aucune observation">
232
			<p>Veuillez saisir des observations pour les transmettres.</p>
233
		</div>
234
		<div id="dialogue-form-invalide" style="display: none;" title="Validation du formulaire">
235
			<p>Certains champs n'ont pas été saisis correctement, veuillez vérifier les champs saisis.</p>
236
		</div>
237
 
238
		<div id="dialogue-obs-transaction" style="display: none;" title="Transmission des observations"></div>
239
 
240
		<!-- Stats : Google Analytics-->
241
		<script type="text/javascript">
242
			//<![CDATA[
243
			var _gaq = _gaq || [];
244
			_gaq.push(['_setAccount', 'UA-20092557-1']);
245
			_gaq.push(['_trackPageview']);
246
 
247
			(function() {
248
			  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
249
			  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
250
			  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
251
			})();
252
			//]]>
253
		</script>
254
	</body>
255
</html>