Subversion Repositories eFlore/Applications.cel

Rev

Rev 1130 | Rev 1207 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 1130 Rev 1206
Line 63... Line 63...
63 
		<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" />
 63 
		<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" />
64 
		<link href="<?=$url_base?>modules/saisie/squelettes/sauvages/css/<?=isset($_GET['style']) ? $_GET['style'] : 'sauvages'?>.css" rel="stylesheet" type="text/css" media="screen" />
 64 
		<link href="<?=$url_base?>modules/saisie/squelettes/sauvages/css/<?=isset($_GET['style']) ? $_GET['style'] : 'sauvages'?>.css" rel="stylesheet" type="text/css" media="screen" />
65 
	</head>
 65 
	</head>
Line 66... Line 66...
66 
 
 66 
 
- 
 
 67 
	<body>
67 
	<body>
 68 
		<div id="zone-appli">
68 
		<h1><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/images/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
 69 
			<h1><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/images/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1>
69
70
70 
		<form id="saisie-obs" action="#" enctype="multipart/form-data" autocomplete="on">
 71 
			<form id="saisie-obs" action="#" enctype="multipart/form-data" autocomplete="on">
71 
			<fieldset id="partie-identification">
 72 
				<fieldset id="partie-identification">
72 
				<legend>Observateur</legend>
 - 
 
73 
				<ul>
 - 
 
74 
					<li>
 - 
 
75 
						<label for="prenom">Prénom</label>
 - 
 
76 
						<input id="prenom" name="prenom" type="text" value=""/>
 - 
 
77 
					</li>
 - 
 
78 
					<li>
 - 
 
79 
						<label for="nom">Nom</label>
 - 
 
80 
						<input id="nom" name="nom" type="text" value=""/>
 - 
 
81 
					</li>
 - 
 
82 
					<li>
 - 
 
83 
						<label for="courriel" class="oblig"
- 
 
84 
							title="Veuillez saisir votre adresse courriel. Elle ne sera pas utilisée à des fins commerciales.">
 - 
 
85 
							<strong class="obligatoire">*</strong> Courriel
 - 
 
86 
						</label>
 - 
 
87 
						<input id="courriel" name="courriel" type="text" value=""/>
 - 
 
88 
					</li>
 - 
 
89 
					<li>
 - 
 
90 
						<label for="courriel_confirmation" class="oblig" title="Veuillez saisir confirmer votre adresse courriel">
 - 
 
91 
							<strong class="obligatoire">*</strong> Courriel (confirmation)
 - 
 
92 
						</label>
 - 
 
93 
						<input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/>
 - 
 
94 
					</li>
 - 
 
95 
				</ul>
 - 
 
96 
			</fieldset>
 - 
 
97
- 
 
98 
			<h2>Fiche de terrain</h2>
 - 
 
99 
			<div id="zone-fiche-terrain">
 - 
 
100 
				<fieldset id="partie-date">
 - 
 
101 
					<legend>Date du relevé</legend>
- 
 
102 
					<ul>
 - 
 
103 
						<li>
 - 
 
104 
							<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
 - 
 
105 
								<strong class="obligatoire">*</strong> Date du relevé
 - 
 
106 
							</label>
 - 
 
107 
							<input id="date" name="date" type="text" value="" />
 - 
 
108 
						</li>
 - 
 
109 
					</ul>
 - 
 
110 
				</fieldset>
 - 
 
111 
				<fieldset id="partie-station">
 - 
 
112 
					<legend>Lieu du relevé</legend>
 - 
 
113 
					<ul>
 - 
 
114 
						<li>
 - 
 
115 
							<ul>
 - 
 
116 
								<li>
 - 
 
117 
									<label for="rue" title="Indiquer le nom de la rue">
 - 
 
118 
										<strong class="obligatoire">*</strong>
- 
 
119 
										Rue
 - 
 
120 
									</label>
 - 
 
121 
									<input id="rue" name="rue" type="text" value="" />
 - 
 
122 
								</li>
 - 
 
123 
								<li>
 - 
 
124 
									<ul id="rue_numeros">
 - 
 
125 
										<li>
 - 
 
126 
											<label for="rue_num_debut" title="Indiquer le numéro de début de la rue">
 - 
 
127 
												<strong class="obligatoire">*</strong>
- 
 
128 
												N° début
 - 
 
129 
											</label>
 - 
 
130 
											<input id="rue_num_debut" name="rue_num_debut" type="text" value="" />
 - 
 
131 
										</li>
 - 
 
132 
										<li>
 - 
 
133 
											<label for="rue_num_fin" title="Indiquer le numéro de fin de la rue">
 - 
 
134 
												<strong class="obligatoire">*</strong>
- 
 
135 
												N° fin
 - 
 
136 
											</label>
 - 
 
137 
											<input id="rue_num_fin" name="rue_num_fin" type="text" value="" />
 - 
 
138 
										</li>
 - 
 
139 
									</ul>
 - 
 
140 
									<hr class="nettoyage" />
 - 
 
141 
								</li>
 - 
 
142 
								<li>
 - 
 
143 
									<label for="rue_cote" title="Choisissez un type de côté de rue">
 - 
 
144 
										<strong class="obligatoire">*</strong>
- 
 
145 
										Côté
 - 
 
146 
									</label>
 - 
 
147 
									<select id="rue_cote" name="rue_cote">
 - 
 
148 
										<option value="">Sélectionner un type de côté</option>
 - 
 
149 
									 	<option value="pair">Pair</option>
 - 
 
150 
									 	<option value="impair">Impair</option>
 - 
 
151 
									 	<option value="2cotes">Les deux</option>
 - 
 
152 
									</select>
- 
 
153 
								</li>
 - 
 
154 
							</ul>
 - 
 
155 
						</li>
 - 
 
156 
					</ul>
 - 
 
157 
				</fieldset>
 - 
 
158 
				<fieldset id="partie-observation">
 - 
 
159 
					<legend>Observations</legend>
73 
					<legend>Observateur</legend>
160 
					<ul>
 74 
					<ul>
161 
						<li>
 75 
						<li>
162 
							<label for="taxon" title="Choisissez une espèce">
 - 
 
163 
								<strong class="obligatoire">*</strong>
- 
 
164 
								Espèce
 - 
 
165 
							</label>
 76 
							<label for="prenom">Prénom</label>
166 
							<select id="taxon" name="taxon">
 - 
 
167 
								<option value="">Sélectionner un taxon</option>
 - 
 
168 
								<?php foreach ($taxons as $taxon) :?>
 - 
 
169 
									<option value="<?=$taxon['num_nom_sel']?>"
- 
 
170 
										title="<?=$taxon['nom_sel'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>">
 - 
 
171 
										<?=$taxon['nom_fr']?>
 - 
 
172 
									</option>
 - 
 
173 
								<?php endforeach; ?>
- 
 
174 
							</select>
77 
							<input id="prenom" name="prenom" type="text" value=""/>
175 
						</li>
 78 
						</li>
176 
						<li>
 - 
 
177 
							<label for="liste-milieux" title="Veuillez sélectionner un milieu">
 - 
 
178 
								<strong class="obligatoire">*</strong>
- 
 
179 
								Milieu
 - 
 
180 
							</label>
 79 
						<li>
181 
							<ul id="liste-milieux">
 - 
 
182 
								<?php foreach ($milieux as $milieu => $description) : ?>
 - 
 
183 
								<li>
 80 
							<label for="nom">Nom</label>
184 
									<input type="radio" class="milieu" name="milieu" value="<?=$milieu?>"
- 
 
185 
										<?=($description != '') ? 'title="'.$description.'"': '' ?>/>
 - 
 
186 
									<?=$milieu?>
 - 
 
187 
								</li>
 - 
 
188 
								<?php endforeach; ?>
 - 
 
189 
							</ul>
 - 
 
190 
							<hr class="nettoyage" />
 81 
							<input id="nom" name="nom" type="text" value=""/>
191 
						</li>
 82 
						</li>
192 
						<li>
 83 
						<li>
- 
 
 84 
							<label for="courriel" class="oblig"
193 
							<label for="map_canvas" class="oblig" title="Veuillez localiser l'observation">
 85 
								title="Veuillez saisir votre adresse courriel. Elle ne sera pas utilisée à des fins commerciales.">
194 
								<strong class="obligatoire">*</strong> Géolocalisation
 86 
								<strong class="obligatoire">*</strong> Courriel
- 
 
 87 
							</label>
195 
							</label>
 88 
							<input id="courriel" name="courriel" type="text" value=""/>
196 
						</li>
 - 
 
197 
						<li id="map-canvas"></li>
 89 
						</li>
198 
						<li>
 - 
 
199 
							<label for="coordonnees-geo">
 - 
 
200 
								<a href="#" class="afficher-coord">Afficher</a>
 90 
						<li>
201 
								<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
 - 
 
202 
								Les coordonnées géographiques
 91 
							<label for="courriel_confirmation" class="oblig" title="Veuillez saisir confirmer votre adresse courriel">
203 
								<span id="lat-lon-info" class="info"
- 
 
204 
									title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
 - 
 
205 
									(WGS84)
 - 
 
206 
								</span>
 92 
								<strong class="obligatoire">*</strong> Courriel (confirmation)
207 
							</label>
 - 
 
208 
							<ul id="coordonnees-geo" style="display:none;">
 - 
 
209 
								<li id="coord-lat">
- 
 
210 
									<label for="latitude">Latitude</label>
 - 
 
211 
									<input id="latitude" name="latitude" type="text" value=""/>
 - 
 
212 
								</li>
 - 
 
213 
								<li id="coord-lng">
 - 
 
214 
									<label for="longitude">Longitude</label>
 93 
							</label>
215 
									<input id="longitude" name="longitude" type="text" value=""/>
 - 
 
216 
								</li>
 - 
 
217 
								<li id="info-commune">
 - 
 
218 
						    		<label for="marqueur-commune">Commune</label>
 - 
 
219 
						    		<span id="marqueur-commune">
 - 
 
220 
						    			<span id="commune-nom" class="commune-info"></span>
 - 
 
221 
						    			(<span id="commune-code-insee" class="commune-info" title="Code INSEE de la commune"></span>)
 - 
 
222 
						    		</span>
 - 
 
223 
					    		</li>
 - 
 
224 
								<li>
 - 
 
225 
									<input id="geolocaliser" type="button" value="Voir sur la carte"/>
 - 
 
226 
								</li>
 - 
 
227 
							</ul>
 - 
 
228 
						</li>
 - 
 
229 
						<li>
 - 
 
230 
							<hr class="nettoyage" />
 - 
 
231 
						</li>
 - 
 
232 
						<li>
 - 
 
233 
							<label for="notes">Notes</label>
 - 
 
234 
							<textarea id="notes" name="notes" rows="3" cols="4"></textarea>
 94 
							<input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/>
235 
						</li>
 95 
						</li>
236 
					</ul>
 96 
					</ul>
237 
				</fieldset>
 - 
 
238 
			</div><!-- zone-fiche-terrain-->
 - 
 
239 
		</form>
- 
 
240
- 
 
241 
		<div id="zone-fiche-terrain-photo">
 - 
 
242 
			<form id="form-upload"  action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
- 
 
243 
				method="post" enctype="multipart/form-data">
 - 
 
244 
				<fieldset id="partie-photo">
 - 
 
245 
					<legend>Ajouter une photo</legend>
 - 
 
246 
					<p id="miniature-info" class="discretion">La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p>
- 
 
247 
					<input type="file" id="fichier" name="fichier" accept="image/jpeg"/>
 - 
 
248 
					<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
 - 
 
249 
					<p id="miniature-msg">&nbsp;</p>
 - 
 
250 
					<div id="miniature"></div>
 - 
 
251 
					<button id="effacer-miniature" type="button" style="display:none;">Effacer</button>
 - 
 
252 
				</fieldset>
 - 
 
Line -... Line 97...
- 
 
 97 
				</fieldset>
- 
 
 98
- 
 
 99 
				<h2>Fiche de terrain</h2>
- 
 
 100 
				<div id="zone-fiche-terrain">
- 
 
 101 
					<fieldset id="partie-date">
- 
 
 102 
						<legend>Date du relevé</legend>
- 
 
 103 
						<ul>
- 
 
 104 
							<li>
- 
 
 105 
								<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
- 
 
 106 
									<strong class="obligatoire">*</strong> Date du relevé
- 
 
 107 
								</label>
- 
 
 108 
								<input id="date" name="date" type="text" value="" />
- 
 
 109 
							</li>
- 
 
 110 
						</ul>
- 
 
 111 
					</fieldset>
- 
 
 112 
					<fieldset id="partie-station">
- 
 
 113 
						<legend>Lieu du relevé</legend>
- 
 
 114 
						<ul>
- 
 
 115 
							<li>
- 
 
 116 
								<ul>
- 
 
 117 
									<li>
- 
 
 118 
										<label for="rue" title="Indiquer le nom de la rue">
- 
 
 119 
											<strong class="obligatoire">*</strong>
- 
 
 120 
											Rue
- 
 
 121 
										</label>
- 
 
 122 
										<input id="rue" name="rue" type="text" value="" />
- 
 
 123 
									</li>
- 
 
 124 
									<li>
- 
 
 125 
										<ul id="rue_numeros">
- 
 
 126 
											<li>
- 
 
 127 
												<label for="rue_num_debut" title="Indiquer le numéro de début de la rue">
- 
 
 128 
													<strong class="obligatoire">*</strong>
- 
 
 129 
													N° début
- 
 
 130 
												</label>
- 
 
 131 
												<input id="rue_num_debut" name="rue_num_debut" type="text" value="" />
- 
 
 132 
											</li>
- 
 
 133 
											<li>
- 
 
 134 
												<label for="rue_num_fin" title="Indiquer le numéro de fin de la rue">
- 
 
 135 
													<strong class="obligatoire">*</strong>
- 
 
 136 
													N° fin
- 
 
 137 
												</label>
- 
 
 138 
												<input id="rue_num_fin" name="rue_num_fin" type="text" value="" />
- 
 
 139 
											</li>
- 
 
 140 
										</ul>
- 
 
 141 
										<hr class="nettoyage" />
- 
 
 142 
									</li>
- 
 
 143 
									<li>
- 
 
 144 
										<label for="rue_cote" title="Choisissez un type de côté de rue">
- 
 
 145 
											<strong class="obligatoire">*</strong>
- 
 
 146 
											Côté
- 
 
 147 
										</label>
- 
 
 148 
										<select id="rue_cote" name="rue_cote">
- 
 
 149 
											<option value="">Sélectionner un type de côté</option>
- 
 
 150 
										 	<option value="pair">Pair</option>
- 
 
 151 
										 	<option value="impair">Impair</option>
- 
 
 152 
										 	<option value="2cotes">Les deux</option>
- 
 
 153 
										</select>
- 
 
 154 
									</li>
- 
 
 155 
								</ul>
- 
 
 156 
							</li>
- 
 
 157 
						</ul>
- 
 
 158 
					</fieldset>
- 
 
 159 
					<fieldset id="partie-observation">
- 
 
 160 
						<legend>Observations</legend>
- 
 
 161 
						<ul>
- 
 
 162 
							<li>
- 
 
 163 
								<label for="taxon" title="Choisissez une espèce">
- 
 
 164 
									<strong class="obligatoire">*</strong>
- 
 
 165 
									Espèce
- 
 
 166 
								</label>
- 
 
 167 
								<select id="taxon" name="taxon">
- 
 
 168 
									<option value="">Sélectionner un taxon</option>
- 
 
 169 
									<?php foreach ($taxons as $taxon) :?>
- 
 
 170 
										<option value="<?=$taxon['num_nom_sel']?>"
- 
 
 171 
											title="<?=$taxon['nom_sel'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>">
- 
 
 172 
											<?=$taxon['nom_fr']?>
- 
 
 173 
										</option>
- 
 
 174 
									<?php endforeach; ?>
- 
 
 175 
								</select>
- 
 
 176 
							</li>
- 
 
 177 
							<li>
- 
 
 178 
								<label for="liste-milieux" title="Veuillez sélectionner un milieu">
- 
 
 179 
									<strong class="obligatoire">*</strong>
- 
 
 180 
									Milieu
- 
 
 181 
								</label>
- 
 
 182 
								<ul id="liste-milieux">
- 
 
 183 
									<?php foreach ($milieux as $milieu => $description) : ?>
- 
 
 184 
									<li>
- 
 
 185 
										<input type="radio" class="milieu" name="milieu" value="<?=$milieu?>"
- 
 
 186 
											<?=($description != '') ? 'title="'.$description.'"': '' ?>/>
- 
 
 187 
										<?=$milieu?>
- 
 
 188 
									</li>
- 
 
 189 
									<?php endforeach; ?>
- 
 
 190 
								</ul>
- 
 
 191 
								<hr class="nettoyage" />
- 
 
 192 
							</li>
- 
 
 193 
							<li>
- 
 
 194 
								<label for="map_canvas" class="oblig" title="Veuillez localiser l'observation">
- 
 
 195 
									<strong class="obligatoire">*</strong> Géolocalisation
- 
 
 196 
								</label>
253 
			</form>
 197 
							</li>
- 
 
 198 
							<li id="map-canvas"></li>
- 
 
 199 
							<li>
- 
 
 200 
								<label for="coordonnees-geo">
- 
 
 201 
									<a href="#" class="afficher-coord">Afficher</a>
- 
 
 202 
									<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
- 
 
 203 
									Les coordonnées géographiques
- 
 
 204 
									<span id="lat-lon-info" class="info"
- 
 
 205 
										title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
- 
 
 206 
										(WGS84)
- 
 
 207 
									</span>
- 
 
 208 
								</label>
- 
 
 209 
								<ul id="coordonnees-geo" style="display:none;">
- 
 
 210 
									<li id="coord-lat">
- 
 
 211 
										<label for="latitude">Latitude</label>
- 
 
 212 
										<input id="latitude" name="latitude" type="text" value=""/>
- 
 
 213 
									</li>
- 
 
 214 
									<li id="coord-lng">
- 
 
 215 
										<label for="longitude">Longitude</label>
- 
 
 216 
										<input id="longitude" name="longitude" type="text" value=""/>
- 
 
 217 
									</li>
- 
 
 218 
									<li id="info-commune">
- 
 
 219 
							    		<label for="marqueur-commune">Commune</label>
- 
 
 220 
							    		<span id="marqueur-commune">
- 
 
 221 
							    			<span id="commune-nom" class="commune-info"></span>
- 
 
 222 
							    			(<span id="commune-code-insee" class="commune-info" title="Code INSEE de la commune"></span>)
- 
 
 223 
							    		</span>
254
224 
						    		</li>
- 
 
 225 
									<li>
- 
 
 226 
										<input id="geolocaliser" type="button" value="Voir sur la carte"/>
- 
 
 227 
									</li>
- 
 
 228 
								</ul>
- 
 
 229 
							</li>
- 
 
 230 
							<li>
- 
 
 231 
								<hr class="nettoyage" />
- 
 
 232 
							</li>
- 
 
 233 
							<li>
255 
			<div>
 234 
								<label for="notes">Notes</label>
- 
 
 235 
								<textarea id="notes" name="notes" rows="3" cols="4"></textarea>
- 
 
 236 
							</li>
256 
				<button id="ajouter-obs" type="button">Ajouter</button>
 237 
						</ul>
- 
 
 238 
					</fieldset>
Line -... Line 239...
- 
 
 239 
				</div><!-- zone-fiche-terrain-->
- 
 
 240 
			</form>
- 
 
 241
- 
 
 242 
			<div id="zone-fiche-terrain-photo">
- 
 
 243 
				<form id="form-upload"  action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
- 
 
 244 
					method="post" enctype="multipart/form-data">
- 
 
 245 
					<fieldset id="partie-photo">
- 
 
 246 
						<legend>Ajouter une photo</legend>
- 
 
 247 
						<p id="miniature-info" class="discretion">La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p>
- 
 
 248 
						<input type="file" id="fichier" name="fichier" accept="image/jpeg"/>
- 
 
 249 
						<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
- 
 
 250 
						<p id="miniature-msg">&nbsp;</p>
- 
 
 251 
						<div id="miniature"></div>
- 
 
 252 
						<button id="effacer-miniature" type="button" style="display:none;">Effacer</button>
- 
 
 253 
					</fieldset>
- 
 
 254 
				</form>
- 
 
 255
- 
 
 256 
				<div>
- 
 
 257 
					<button id="ajouter-obs" type="button">Ajouter</button>
257 
			</div>
 258 
				</div>
258 
		</div><!-- zone-fiche-terrain-photo -->
 259 
			</div><!-- zone-fiche-terrain-photo -->
259
260
260 
		<!-- Affiche le tableau récapitualif des observations ajoutées -->
 261 
			<!-- Affiche le tableau récapitualif des observations ajoutées -->
261 
		<div id="zone-liste-obs">
 262 
			<div id="zone-liste-obs">
262 
			<form action="#" >
 263 
				<form action="#" >
263 
				<fieldset id="partie-preview">
 264 
					<fieldset id="partie-preview">
264 
					<legend>Liste des observations à transmettre</legend>
 265 
						<legend>Liste des observations à transmettre</legend>
265 
					<table id="liste-obs">
 266 
						<table id="liste-obs">
266 
						<thead>
 267 
							<thead>
267 
							<tr>
 268 
								<tr>
268 
								<th>N&deg;</th>
 269 
									<th>N&deg;</th>
269 
								<th>Date</th>
 270 
									<th>Date</th>
270 
								<th>Adresse</th>
 271 
									<th>Adresse</th>
271 
								<th>Nom</th>
 272 
									<th>Nom</th>
272 
								<th>Milieu</th>
 273 
									<th>Milieu</th>
273 
								<th title="Latitude / Longitude">Lat./Long.</th>
 274 
									<th title="Latitude / Longitude">Lat./Long.</th>
274 
								<th>Photo</th>
 275 
									<th>Photo</th>
275 
								<th>Notes</th>
 276 
									<th>Notes</th>
276 
								<th></th>
 277 
									<th></th>
277 
							</tr>
 278 
								</tr>
278 
						</thead>
 279 
							</thead>
279 
						<tbody></tbody>
 280 
							<tbody></tbody>
280 
					</table>
 281 
						</table>
281 
					<button id="transmettre-obs" type="button">Transmettre</button>
 282 
						<button id="transmettre-obs" type="button">Transmettre</button>
- 
 
 283 
					</fieldset>
Line 282... Line 284...
282 
				</fieldset>
 284 
				</form>
283 
			</form>
 285 
			</div> <!-- zone-liste-obs : wrap3 -->
284 
		</div> <!-- zone-liste-obs : wrap3 -->
 286 
		</div>
285
287