Subversion Repositories eFlore/Applications.cel

Rev

Details | Last modification | View Log | RSS feed

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