| 719 |
jpm |
1 |
//+---------------------------------------------------------------------------------------------------------+
|
|
|
2 |
// GÉNÉRAL
|
|
|
3 |
var DEBUG = false; // Mettre à true pour afficher les messages de débogage
|
|
|
4 |
/**
|
|
|
5 |
* Stope l'évènement courrant quand on clique sur un lien.
|
|
|
6 |
* Utile pour Chrome, Safari...
|
|
|
7 |
* @param evenement
|
|
|
8 |
* @return
|
|
|
9 |
*/
|
|
|
10 |
function arreter(evenement) {
|
|
|
11 |
if (evenement.stopPropagation) {
|
|
|
12 |
evenement.stopPropagation();
|
|
|
13 |
}
|
|
|
14 |
return false;
|
|
|
15 |
}
|
|
|
16 |
|
|
|
17 |
//+---------------------------------------------------------------------------------------------------------+
|
|
|
18 |
// FORMULAIRE
|
|
|
19 |
|
| 712 |
jpm |
20 |
$(function() {
|
| 719 |
jpm |
21 |
$("#saisie-obs").validate({
|
|
|
22 |
rules: {
|
|
|
23 |
prenom : "required",
|
|
|
24 |
nom : "required",
|
|
|
25 |
courriel : {
|
|
|
26 |
required : true,
|
|
|
27 |
email : true},
|
|
|
28 |
courriel_confirmation : {
|
|
|
29 |
required : true,
|
|
|
30 |
equalTo: "#courriel"
|
|
|
31 |
},
|
|
|
32 |
milieu : "required",
|
|
|
33 |
latitude : "required",
|
|
|
34 |
longitude : "required"
|
|
|
35 |
}
|
|
|
36 |
});
|
|
|
37 |
|
| 712 |
jpm |
38 |
$("#date").datepicker($.datepicker.regional['fr']);
|
|
|
39 |
|
|
|
40 |
$("#courriel-confirmation").bind('paste', function(e) {
|
|
|
41 |
$("#dialogue-bloquer-copier-coller").dialog();
|
|
|
42 |
return false;
|
|
|
43 |
});
|
|
|
44 |
|
| 719 |
jpm |
45 |
$("#localiser-gg-map").fancybox({
|
|
|
46 |
'modal' : true,
|
|
|
47 |
'autoDimensions' : true,
|
|
|
48 |
'titleShow' : false,
|
|
|
49 |
'onClosed' : function() {
|
|
|
50 |
$("#gg-map").hide();
|
|
|
51 |
},
|
|
|
52 |
'onStart' : function(e) {
|
|
|
53 |
arreter(e);
|
|
|
54 |
$("#gg-map-localisation").height($(window).height() - 100);
|
|
|
55 |
$("#gg-map-carte").height($(window).height() - 230);
|
|
|
56 |
$("#gg-map-localisation").width($(window).width() - 100);
|
|
|
57 |
},
|
|
|
58 |
'onComplete' : function() {
|
|
|
59 |
initialiserCarte();
|
|
|
60 |
}
|
|
|
61 |
});
|
|
|
62 |
|
|
|
63 |
$("#valider-coordonnees").click(function(e) {
|
|
|
64 |
var coordonnees = $("#marqueur-coordonnees").data('latLon');
|
|
|
65 |
if (coordonnees != undefined) {
|
|
|
66 |
$("#latitude").val(coordonnees.lat);
|
|
|
67 |
$("#longitude").val(coordonnees.lon);
|
|
|
68 |
}
|
|
|
69 |
$.fancybox.close();
|
|
|
70 |
});
|
|
|
71 |
$("#annuler-coordonnees").bind('click', function(e) {
|
|
|
72 |
$.fancybox.close();
|
|
|
73 |
});
|
|
|
74 |
|
| 712 |
jpm |
75 |
var obsNumero = 0;
|
| 719 |
jpm |
76 |
$("#ajouter-obs").bind('click', function(e) {
|
|
|
77 |
if ($("#saisie-obs").valid() == false) {
|
|
|
78 |
$("#dialogue-form-invalide").dialog();
|
|
|
79 |
} else {
|
|
|
80 |
obsNumero = obsNumero + 1;
|
|
|
81 |
$("#liste-obs tbody").append(
|
|
|
82 |
'<tr id="obs'+obsNumero+'" class="obs">'+
|
|
|
83 |
'<td>'+obsNumero+'</td>'+
|
|
|
84 |
'<td>'+$("#date").val()+'</td>'+
|
|
|
85 |
'<td>'+$("#taxon option:selected").text()+'</td>'+
|
|
|
86 |
'<td>'+$("#milieu option:selected").text()+'</td>'+
|
|
|
87 |
'<td>'+$("#latitude").val()+'</td>'+
|
|
|
88 |
'<td>'+$("#longitude").val()+'</td>'+
|
|
|
89 |
'<td>'+$("#notes").val()+'</td>'+
|
|
|
90 |
'<td><button class="supprimer-obs" value="'+obsNumero+'" title="'+obsNumero+'">Supprimer</button></td>'+
|
|
|
91 |
'</tr>');
|
|
|
92 |
var numNomSel = $("#taxon").val();
|
|
|
93 |
$("#liste-obs").data('obsId'+obsNumero, {
|
|
|
94 |
'date' : $("#date").val(),
|
|
|
95 |
'num_nom_sel' : numNomSel,
|
|
|
96 |
'nom_sel' : taxons[numNomSel]['nom_sel'],
|
|
|
97 |
'nom_ret' : taxons[numNomSel]['nom_ret'],
|
|
|
98 |
'num_nom_ret' : taxons[numNomSel]['num_nom_ret'],
|
|
|
99 |
'num_taxon' : taxons[numNomSel]['num_taxon'],
|
|
|
100 |
'famille' : taxons[numNomSel]['famille'],
|
|
|
101 |
'nom_fr' : taxons[numNomSel]['nom_fr'],
|
|
|
102 |
'milieu' : $("#milieu option:selected").val(),
|
|
|
103 |
'latitude' : $("#latitude").val(),
|
|
|
104 |
'longitude' : $("#longitude").val(),
|
|
|
105 |
'tag' : 'Biodiversite34',
|
|
|
106 |
'notes' : $("#notes").val()});
|
|
|
107 |
}
|
| 712 |
jpm |
108 |
});
|
|
|
109 |
|
|
|
110 |
$(".supprimer-obs").live('click', function() {
|
|
|
111 |
var obsId = $(this).val();
|
| 719 |
jpm |
112 |
// Problème avec IE 6 et 7
|
|
|
113 |
if (obsId == "Supprimer") {
|
|
|
114 |
obsId = $(this).attr("title");
|
|
|
115 |
}
|
|
|
116 |
|
|
|
117 |
$('#obs'+obsId).remove();
|
|
|
118 |
$("#liste-obs").removeData('obsId'+obsId)
|
| 712 |
jpm |
119 |
});
|
|
|
120 |
|
| 719 |
jpm |
121 |
$("#tramsmettre-obs").click(function(e) {
|
| 712 |
jpm |
122 |
var observations = $("#liste-obs").data();
|
| 719 |
jpm |
123 |
|
|
|
124 |
if (observations == undefined || jQuery.isEmptyObject(observations)) {
|
| 712 |
jpm |
125 |
$("#dialogue-zero-obs").dialog();
|
| 719 |
jpm |
126 |
} else if ($("#saisie-obs").valid() == false) {
|
|
|
127 |
$("#dialogue-form-invalide").dialog();
|
| 712 |
jpm |
128 |
} else {
|
| 719 |
jpm |
129 |
var utilisateur = new Object();
|
|
|
130 |
utilisateur.prenom = $("#prenom").val();
|
|
|
131 |
utilisateur.nom = $("#nom").val();
|
|
|
132 |
utilisateur.courriel = $("#courriel").val();
|
|
|
133 |
observations['utilisateur'] = utilisateur;
|
|
|
134 |
|
|
|
135 |
//"http://localhost/cel-jrest/CelWidgetSaisie"
|
|
|
136 |
$.ajax({
|
|
|
137 |
url : "http://www.tela-botanica.org/eflore-test/cel2/jrest/CelWidgetSaisie",
|
|
|
138 |
type : "POST",
|
|
|
139 |
data : observations,
|
|
|
140 |
context : document.body,
|
|
|
141 |
beforeSend : function() {
|
|
|
142 |
$("#msg").remove();
|
|
|
143 |
$("#msg-erreur").remove();
|
|
|
144 |
$("#msg-debug").remove();
|
|
|
145 |
},
|
|
|
146 |
statusCode : {
|
|
|
147 |
500 : function(jqXHR, textStatus, errorThrown) {
|
|
|
148 |
$("#dialogue-obs-transaction").append('<p id="msg">Un problème est survenu lors de la transmission de vos observations.</p>');
|
|
|
149 |
reponse = jQuery.parseJSON(jqXHR.responseText);
|
|
|
150 |
var erreurMsg = "";
|
|
|
151 |
if (reponse != null) {
|
|
|
152 |
$.each(reponse, function (cle, valeur) {
|
|
|
153 |
erreurMsg += valeur + "<br />";
|
|
|
154 |
});
|
|
|
155 |
}
|
|
|
156 |
|
|
|
157 |
$("#dialogue-obs-transaction").append('<p id="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
|
|
|
158 |
}
|
|
|
159 |
},
|
|
|
160 |
success : function(data, textStatus, jqXHR) {
|
|
|
161 |
$("#dialogue-obs-transaction").append('<p id="msg">Vos observations ont bien été transmises.</p>');
|
|
|
162 |
},
|
|
|
163 |
complete : function(jqXHR, textStatus) {
|
|
|
164 |
var debugMsg = "";
|
|
|
165 |
if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
|
|
|
166 |
debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
|
|
|
167 |
if (debugInfos != null) {
|
|
|
168 |
$.each(debugInfos, function (cle, valeur) {
|
|
|
169 |
debugMsg += valeur + "<br />";
|
|
|
170 |
});
|
|
|
171 |
$("#dialogue-obs-transaction").append('<pre id="msg-debug">Débogage : '+debugMsg+'</pre>');
|
|
|
172 |
}
|
|
|
173 |
}
|
|
|
174 |
|
|
|
175 |
$("#dialogue-obs-transaction").dialog();
|
|
|
176 |
$("#liste-obs").removeData();
|
|
|
177 |
$('.obs').remove();
|
|
|
178 |
obsNumero = 0;
|
|
|
179 |
},
|
|
|
180 |
|
| 712 |
jpm |
181 |
});
|
|
|
182 |
}
|
| 719 |
jpm |
183 |
return false;
|
|
|
184 |
});
|
|
|
185 |
});
|
| 712 |
jpm |
186 |
|
| 719 |
jpm |
187 |
//+---------------------------------------------------------------------------------------------------------+
|
|
|
188 |
// GOOGLE MAP
|
|
|
189 |
|
|
|
190 |
var geocoder;
|
|
|
191 |
var latLng;
|
|
|
192 |
var map;
|
|
|
193 |
var marker;
|
|
|
194 |
var osmMapType;
|
|
|
195 |
function initialiserCarte() {
|
|
|
196 |
geocoder = new google.maps.Geocoder();
|
|
|
197 |
latLng = new google.maps.LatLng(43.577, 3.455);
|
|
|
198 |
osmMapType = new google.maps.ImageMapType({
|
|
|
199 |
getTileUrl: function(coord, zoom) {
|
|
|
200 |
return "http://tile.openstreetmap.org/" +
|
|
|
201 |
zoom + "/" + coord.x + "/" + coord.y + ".png";
|
|
|
202 |
},
|
|
|
203 |
tileSize: new google.maps.Size(256, 256),
|
|
|
204 |
isPng: true,
|
|
|
205 |
alt: "OpenStreetMap",
|
|
|
206 |
name: "OSM",
|
|
|
207 |
maxZoom: 19
|
| 712 |
jpm |
208 |
});
|
| 719 |
jpm |
209 |
map = new google.maps.Map(document.getElementById('gg-map-carte'), {
|
|
|
210 |
zoom: 9,
|
|
|
211 |
center: latLng,
|
|
|
212 |
mapTypeId: google.maps.MapTypeId.ROADMAP,
|
|
|
213 |
mapTypeControlOptions: {
|
|
|
214 |
mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN],
|
|
|
215 |
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
|
|
|
216 |
});
|
|
|
217 |
|
|
|
218 |
map.mapTypes.set('OSM', osmMapType);
|
|
|
219 |
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
|
|
|
220 |
|
|
|
221 |
marker = new google.maps.Marker({
|
|
|
222 |
position: latLng,
|
|
|
223 |
title: 'Ma station',
|
|
|
224 |
map: map,
|
|
|
225 |
draggable: true
|
|
|
226 |
});
|
|
|
227 |
|
|
|
228 |
// Update current position info.
|
|
|
229 |
mettreAJourMarkerPosition(latLng);
|
|
|
230 |
geocoderPosition(latLng);
|
|
|
231 |
|
|
|
232 |
// Add dragging event listeners.
|
|
|
233 |
google.maps.event.addListener(marker, 'dragstart', function() {
|
|
|
234 |
mettreAJourMarkerAdresse('Marqueur de station début du déplacement...');
|
|
|
235 |
});
|
|
|
236 |
|
|
|
237 |
google.maps.event.addListener(marker, 'drag', function() {
|
|
|
238 |
mettreAJourMarkerStatut('Marqueur de station en cours de déplacement...');
|
|
|
239 |
mettreAJourMarkerPosition(marker.getPosition());
|
|
|
240 |
});
|
|
|
241 |
|
|
|
242 |
google.maps.event.addListener(marker, 'dragend', function() {
|
|
|
243 |
mettreAJourMarkerStatut('Marqueur de station déplacé (glisser/déposer).');
|
|
|
244 |
mettreAJourMarkerPosition(marker.getPosition());
|
|
|
245 |
geocoderPosition(marker.getPosition());
|
|
|
246 |
});
|
|
|
247 |
|
|
|
248 |
google.maps.event.addListener(map, 'click', function(event) {
|
|
|
249 |
deplacerMarker(event.latLng);
|
|
|
250 |
});
|
|
|
251 |
}
|
|
|
252 |
|
|
|
253 |
function geocoderPosition(pos) {
|
|
|
254 |
if (geocoder != undefined) {
|
|
|
255 |
geocoder.geocode({
|
|
|
256 |
latLng: pos
|
|
|
257 |
}, function(responses, status) {
|
|
|
258 |
if (status == google.maps.GeocoderStatus.OK) {
|
|
|
259 |
if (responses && responses.length > 0) {
|
|
|
260 |
mettreAJourMarkerAdresse(responses[0].formatted_address);
|
|
|
261 |
console.log(responses);
|
|
|
262 |
} else {
|
|
|
263 |
mettreAJourMarkerAdresse("Impossible de trouver d'adresse pour cette position.");
|
|
|
264 |
}
|
|
|
265 |
} else {
|
|
|
266 |
mettreAJourMarkerAdresse("Un problème de géolocalisation est survenu : "+status+".");
|
|
|
267 |
}
|
|
|
268 |
});
|
|
|
269 |
}
|
|
|
270 |
}
|
|
|
271 |
|
|
|
272 |
function mettreAJourMarkerStatut(str) {
|
|
|
273 |
document.getElementById('marqueur-statut').innerHTML = str;
|
|
|
274 |
}
|
|
|
275 |
|
|
|
276 |
function mettreAJourMarkerPosition(latLng) {
|
|
|
277 |
document.getElementById('marqueur-coordonnees').innerHTML = [
|
|
|
278 |
latLng.lat().toFixed(5),
|
|
|
279 |
latLng.lng().toFixed(5)
|
|
|
280 |
].join(', ');
|
|
|
281 |
$("#marqueur-coordonnees").data('latLon', {'lat' : latLng.lat().toFixed(5), 'lon' : latLng.lng().toFixed(5)});
|
|
|
282 |
}
|
|
|
283 |
|
|
|
284 |
function mettreAJourMarkerAdresse(str) {
|
|
|
285 |
document.getElementById('marqueur-adresse').innerHTML = str;
|
|
|
286 |
}
|
|
|
287 |
|
|
|
288 |
function deplacerMarker(latLon) {
|
|
|
289 |
if (marker != undefined) {
|
|
|
290 |
marker.setPosition(latLon);
|
|
|
291 |
mettreAJourMarkerStatut('Marqueur de station déplacé (clic).');
|
|
|
292 |
mettreAJourMarkerPosition(marker.getPosition());
|
|
|
293 |
geocoderPosition(marker.getPosition());
|
|
|
294 |
}
|
|
|
295 |
}
|