Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 1092 → Rev 1093

/branches/v1.5-cisaille/widget/modules/saisie/squelettes/sauvages/js/sauvages.js
28,6 → 28,16
//+----------------------------------------------------------------------------------------------------------+
//UPLOAD PHOTO : Traitement de l'image
$(document).ready(function() {
 
$("#effacer-miniature").click(function () {
supprimerMiniature();
});
$("#fichier").bind('change', function () {
$("#form-upload").ajaxSubmit(options);
return false;
});
//prepare the form when the DOM is ready
//create service object(proxy) using SMD (generated by the json result)
var options = {
35,30 → 45,25
dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type)
resetForm: true // reset the form after successful submit
};
 
// post-submit callback
function afficherMiniature(reponse) {
// 'responseXML' is the XML document returned by the server; we use
// jQuery to extract the content of the message node from the XML doc
var miniatureUrl = $("miniature-url", reponse).text();
var imgNom = $("image-nom", reponse).text();
$("#miniature").empty();
$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>');
console.log(imgNom);
console.log(miniatureUrl);
};
$("#form-upload").submit(function() {
// inside event callbacks 'this' is the DOM element so we first
// wrap it in a jQuery object and then invoke ajaxSubmit
$(this).ajaxSubmit(options);
// !!! Important !!!
// always return false to prevent standard browser submit and page navigation
return false;
});
});
 
function afficherMiniature(reponse) {
// 'responseXML' is the XML document returned by the server; we use
// jQuery to extract the content of the message node from the XML doc
var miniatureUrl = $("miniature-url", reponse).text();
var imgNom = $("image-nom", reponse).text();
$("#miniature").empty();
$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>');
$("#effacer-miniature").show();
console.log(imgNom);
console.log(miniatureUrl);
}
 
function supprimerMiniature() {
$("#miniature").empty();
$("#effacer-miniature").hide();
}
 
//+----------------------------------------------------------------------------------------------------------+
// GOOGLE MAP
var geocoder;
66,19 → 71,39
var marker;
var latLng;
 
function initialize(){
function initialiserGoogleMap(){
// Carte
var latLng = new google.maps.LatLng(43.29545, 5.37458);
$('#adresse').val('1 rue de la canebiere, 13001');
$('#latitude').val('43.29545');
$('#longitude').val('5.37458');
if (VILLE == 'Montpellier') {
latLng = new google.maps.LatLng(43.61077, 3.87672);
} else {
console.log('Ville:'+VILLE);
}
 
var options = {
zoom: 16,
center: latLng,
mapTypeId: google.maps.MapTypeId.SATELLITE
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControlOptions: {
mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN]}
};
 
// Ajout de la couche OSM à la carte
osmMapType = new google.maps.ImageMapType({
getTileUrl: function(coord, zoom) {
return "http://tile.openstreetmap.org/" +
zoom + "/" + coord.x + "/" + coord.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
alt: 'OpenStreetMap',
name: 'OSM',
maxZoom: 19
});
map = new google.maps.Map(document.getElementById("map_canvas"), options); //affiche la google map dans la div map_canvas
// Création de la carte Google
map = new google.maps.Map(document.getElementById('map-canvas'), options); //affiche la google map dans la div map_canvas
map.mapTypes.set('OSM', osmMapType);
// Geocodeur
geocoder = new google.maps.Geocoder();
92,10 → 117,13
icon: GOOGLE_MAP_MARQUEUR_URL,
position: latLng
});
deplacerMarker(latLng);
}
 
$(document).ready(function() {
initialize();
initialiserGoogleMap();
$(function() {
// Tentative de geocalisation
107,9 → 135,8
var geocalisation = new google.maps.LatLng(latitude, longitude);
marker.setPosition(geocalisation);
map.setCenter(geocalisation);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
$('#adresse').val(codeLatLng(marker.getPosition()));
mettreAJourMarkerPosition(marker.getPosition());
});
}
117,37 → 144,42
$("#adresse").autocomplete({
//Cette partie utilise geocoder pour extraire des valeurs d'adresse
source: function(request, response) {
geocoder.geocode( {'address': request.term }, function(results, status) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
response($.map(results, function(item) {
return {
label: item.formatted_address,
value: item.formatted_address,
latitude: item.geometry.location.lat(),
longitude: item.geometry.location.lng()
}
}));
} else {
afficherErreurGoogleMap(status);
}
})
},
// Cette partie est executee a la selection d'une adresse
select: function(event, ui) {
$("#latitude").val(ui.item.latitude);
$("#longitude").val(ui.item.longitude);
var location = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
marker.setPosition(location);
map.setCenter(location);
map.setZoom(20);
remplirChampLatitude(ui.item.latitude);
remplirChampLongitude(ui.item.longitude);
var latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude);
deplacerMarker(latLng);
map.setCenter(latLng);
map.setZoom(19);
}
});
 
// Ajoute un ecouteur sur le marker pour le reverse geocoding
google.maps.event.addListener(marker, 'drag', function() {
google.maps.event.addListener(marker, 'dragend', function() {
trouverCommune(marker.getPosition());
geocoder.geocode({'latLng': marker.getPosition()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
$('#adresse').val(results[0].formatted_address);
$('#latitude').val(Math.round(marker.getPosition().lat()*100000)/100000);
$('#longitude').val(Math.round(marker.getPosition().lng()*100000)/100000);
mettreAJourMarkerPosition(marker.getPosition());
}
} else {
afficherErreurGoogleMap(status);
}
});
});
167,11 → 199,112
$('#adresse').val(results[0].formatted_address);
}
} else {
alert("Geocoder failed due to: " + status);
afficherErreurGoogleMap(status);
}
});
}
 
function afficherErreurGoogleMap(status) {
if (DEBUG) {
$("#dialogue-google-map").empty();
$("#dialogue-google-map").append('<pre class="msg-erreur">'+
"Le service de Géocodage de Google Map a échoué à cause de l'erreur : "+status+
'</pre>');
$("#dialogue-google-map").dialog();
}
}
 
function deplacerMarker(latLon) {
if (marker != undefined) {
marker.setPosition(latLon);
mettreAJourMarkerPosition(marker.getPosition());
trouverCommune(marker.getPosition());
}
}
 
function mettreAJourMarkerPosition(latLng) {
var lat = latLng.lat().toFixed(5);
var lng = latLng.lng().toFixed(5);
remplirChampLatitude(lat);
remplirChampLongitude(lng);
}
 
function remplirChampLatitude(latDecimale) {
var lat = Math.round(latDecimale*100000)/100000;
$('#latitude').val(lat);
}
 
function remplirChampLongitude(lngDecimale) {
var lng = Math.round(lngDecimale*100000)/100000;
$('#longitude').val(lng);
}
 
function trouverCommune(pos) {
$(function() {
var urlNomCommuneFormatee = SERVICE_NOM_COMMUNE_URL.replace('{lat}', pos.lat()).replace('{lon}', pos.lng());
$.ajax({
url : urlNomCommuneFormatee,
type : "GET",
dataType : "jsonp",
beforeSend : function() {
$(".commune-info").empty();
$("#dialogue-erreur").empty();
},
success : function(data, textStatus, jqXHR) {
$(".commune-info").empty();
$("#commune-nom").append(data.nom);
$("#commune-code-insee").append(data.codeINSEE);
$("#marqueur-commune").data('commune', {'nom' : data.nom, 'codeInsee' : data.codeINSEE});
},
statusCode : {
500 : function(jqXHR, textStatus, errorThrown) {
if (DEBUG) {
$("#dialogue-erreur").append('<p id="msg">Un problème est survenu lors de l\'appel au service fournissante le nom des communes.</p>');
reponse = jQuery.parseJSON(jqXHR.responseText);
var erreurMsg = "";
if (reponse != null) {
$.each(reponse, function (cle, valeur) {
erreurMsg += valeur + "<br />";
});
}
$("#dialogue-erreur").append('<p class="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
}
}
},
error : function(jqXHR, textStatus, errorThrown) {
if (DEBUG) {
$("#dialogue-erreur").append('<p class="msg">Une erreur Ajax est survenue lors de la transmission de vos observations.</p>');
reponse = jQuery.parseJSON(jqXHR.responseText);
var erreurMsg = "";
if (reponse != null) {
$.each(reponse, function (cle, valeur) {
erreurMsg += valeur + "<br />";
});
}
$("#dialogue-erreur").append('<p class="msg-erreur">Erreur Ajax : '+errorThrown+' (type : '+textStatus+') <br />'+erreurMsg+'</p>');
}
},
complete : function(jqXHR, textStatus) {
if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
var debugMsg = "";
debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
if (debugInfos != null) {
$.each(debugInfos, function (cle, valeur) {
debugMsg += valeur + "<br />";
});
$("#dialogue-erreur").append('<pre class="msg-debug msg">Débogage : '+debugMsg+'</pre>');
}
}
if ($("#dialogue-erreur .msg").length > 0) {
$("#dialogue-erreur").dialog();
}
}
});
});
}
 
//+---------------------------------------------------------------------------------------------------------+
// FORMULAIRE
$(document).ready(function() {
195,7 → 328,6
min : 1},
rue_cote : "required",
milieu : "required",
adresse : "required",
latitude : {
required: true,
range: [-90, 90]},
216,30 → 348,13
return false;
});
/*---Afficher/cacher les coordonnees geographiques----*/
var showText=" -Afficher-";
var hideText=" -Masquer- ";
//créer le lien afficher/masquer
$("#coordonnees-geo").before("<a href='#' id='toogle_link'>"+showText+"</a>")
//masquer le contenu
$("#masque").hide();
//bascule le texte d'afficher à masquer
$("a#toogle_link").click(function() {
//changer le texte du lien
if($('a#toogle_link').text()==showText){
$('a#toogle_link').text(hideText);
} else{
$('a#toogle_link').text(showText);
}
//basuler l'affichage
$('#masque').toggle('slow');
//valeur false pour que le lien ne soit pas suivi
return false
$("a.afficher-coord").click(function() {
$("a.afficher-coord").toggle();
$("#coordonnees-geo").toggle('slow');
//valeur false pour que le lien ne soit pas suivi
return false
});
 
/*------obs-----------*/
var obsNumero = 0;
$("#ajouter-obs").bind('click', function(e) {
255,10 → 370,9
'<td>'+$("#adresse").val()+'</td>'+
'<td>'+$("#taxon option:selected").text()+'</td>'+
'<td>'+$('input[name=milieu]:checked').val()+'</td>'+
'<td>'+$("#latitude").val()+'</td>'+
'<td>'+$("#longitude").val()+'</td>'+
'<td>'+$("#latitude").val()+' / '+$("#longitude").val()+'</td>'+
//Ajout du champ photo
'<td><img class="miniature" alt="'+$("#miniature-img").attr("alt")+'"src="'+$("#miniature-img").attr("src")+'" /></td>'+
'<td class="obs-miniature">'+ajouterImgMiniature()+'</td>'+
'<td>'+$("#notes").val()+'</td>'+
'<td><button class="supprimer-obs" value="'+obsNumero+'" title="Supprimer l\'observation '+obsNumero+'">'+
'<img src="'+SUPPRIMER_ICONE_URL+'"/></button></td>'+
299,10 → 413,6
$('#obs'+obsId).remove();
$("#liste-obs").removeData('obsId'+obsId)
});
 
$("#effacer-miniature").click(function () {
$("#miniature").empty();
});
// TODO : remplacer par du jquery
//document.getElementById('image_file').addEventListener('change', handleFileSelect, false);
336,6 → 446,7
},
success : function(data, textStatus, jqXHR) {
$("#dialogue-obs-transaction").append('<p class="msg">Vos observations ont bien été transmises.</p>');
supprimerMiniature();
},
statusCode : {
500 : function(jqXHR, textStatus, errorThrown) {
399,6 → 510,15
});
});
 
function ajouterImgMiniature() {
var miniature = '';
if ($("#miniature img").length == 1) {
var src = $("#miniature-img").attr("src");
var alt = $("#miniature-img").attr("alt");
miniature = '<img class="miniature" alt="'+alt+'"src="'+src+'" />';
}
return miniature;
}
 
function handleFileSelect(evt) {
// Check for the various File API support.
/branches/v1.5-cisaille/widget/modules/saisie/squelettes/sauvages/sauvages.tpl.html
39,9 → 39,13
<script type="text/javascript">
//<![CDATA[
// La présence du parametre 'debug' dans l'URL enclenche le dégogage
var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
var DEBUG = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
// La présence du parametre 'ville' dans l'URL géolocalise
var VILLE = "<?=isset($_GET['ville']) ? $_GET['ville'] : ''?>";
// URL du web service réalisant l'insertion des données dans la base du CEL.
var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>";
// Squelette d'URL du web service d'eFlore fournissant les noms de communes.
var SERVICE_NOM_COMMUNE_URL = "http://www.tela-botanica.org/service:eflore:osm/0.1/nom-commune?lon={lon}&lat={lat}";
// URL du marqueur à utiliser dans la carte Google Map
var GOOGLE_MAP_MARQUEUR_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/fleur.png";
// URL de l'icône du bouton supprimer
115,20 → 119,25
<input id="rue" name="rue" type="text" value="" />
</li>
<li>
<label for="rue_num_debut" title="Indiquer le numéro de début de la rue">
<strong class="obligatoire">*</strong>
N° début
</label>
<input id="rue_num_debut" name="rue_num_debut" type="text" value="" />
<ul id="rue_numeros">
<li>
<label for="rue_num_debut" title="Indiquer le numéro de début de la rue">
<strong class="obligatoire">*</strong>
N° début
</label>
<input id="rue_num_debut" name="rue_num_debut" type="text" value="" />
</li>
<li>
<label for="rue_num_fin" title="Indiquer le numéro de fin de la rue">
<strong class="obligatoire">*</strong>
N° fin
</label>
<input id="rue_num_fin" name="rue_num_fin" type="text" value="" />
</li>
</ul>
<hr class="nettoyage" />
</li>
<li>
<label for="rue_num_fin" title="Indiquer le numéro de fin de la rue">
<strong class="obligatoire">*</strong>
N° fin
</label>
<input id="rue_num_fin" name="rue_num_fin" type="text" value="" />
</li>
<li>
<label for="rue_cote" title="Choisissez un type de côté de rue">
<strong class="obligatoire">*</strong>
Côté
184,25 → 193,40
<strong class="obligatoire">*</strong> Géolocalisation
</label>
</li>
<li id="map_canvas" style="width:500px; height:240px;" ></li>
<li id="map-canvas"></li>
<li>
<label for="adresse" title="Information sur la localisation">
Adresse
</label>
<input id="adresse" name="adresse" type="text" value=""/>
<input id="adresse" name="adresse" type="text" value="" class="champ-long"/>
</li>
<li>
<span id="coordonnees-geo">Les coordonnées g&eacute;ographiques</span>
<ul>
<li id="masque">
<label for="coordonnees-geo">
<a href="#" class="afficher-coord">Afficher</a>
<a href="#" class="afficher-coord" style="display:none;">Cacher</a>
Les coordonnées géographiques
<span id="lat-lon-info" class="info"
title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
(WGS84)
</span>
</label>
<ul id="coordonnees-geo" style="display:none;">
<li id="coord-lat">
<label for="latitude">Latitude</label>
<input id="latitude" name="latitude" type="text" value=""/>
</li>
<li id="coord-lng">
<label for="longitude">Longitude</label>
<input id="longitude" name="longitude" type="text" value=""/>
<span id="lat-lon-info" class="info"
title="Système géodésique mondial, révision de 1984 - Coordonnées non projetées">
(WGS84)
</span>
</li>
<li id="info-commune">
<label for="marqueur-commune">Commune</label>
<span id="marqueur-commune">
<span id="commune-nom" class="commune-info">&nbsp;</span>
(<span id="commune-code-insee" class="commune-info" title="Code INSEE de la commune">?</span>)
</span>
</li>
<li>
<input type="button" value="Trouver l'adresse" onclick="codeLatLng()"/>
</li>
</ul>
226,9 → 250,8
<legend>Ajouter une photo</legend>
<input type="file" id="fichier" name="fichier"/>
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
<input type="submit" value="charger"/>
<div id="miniature"></div>
<div><button id="effacer-miniature" type="button" >Effacer</button></div>
<button id="effacer-miniature" type="button" style="display:none;">Effacer</button>
</fieldset>
</form>
250,8 → 273,7
<th>Adresse</th>
<th>Nom</th>
<th>Milieu</th>
<th>Latitude</th>
<th>Longitude</th>
<th title="Latitude / Longitude">Lat./Long.</th>
<th>Photo</th>
<th>Notes</th>
<th></th>
279,7 → 301,11
</div>
<div id="dialogue-obs-transaction" style="display: none;" title="Transmission des observations"></div>
<div id="dialogue-google-map" style="display: none;" title="Information sur Google Map"></div>
<div id="dialogue-erreur" style="display: none;" title="Erreur">
<!-- Stats : Google Analytics-->
<script type="text/javascript">
//<![CDATA[
/branches/v1.5-cisaille/widget/modules/saisie/squelettes/sauvages/css/sauvages.css
186,7 → 186,7
margin-top:0;
}
#partie-station label {
width:75px;
width:80px;
display:block;
float:left;
}
207,18 → 207,31
#partie-observation li{
margin :10px;
}
#adresse{
width:290px;
}
#map-canvas {
width:525px;
height:240px;
}
#partie-station #partie-lat-lon label.error{
float:left;
width:80px;
}
#partie-observation li li{
#partie-observation li li, #rue_numeros li{
width :150px;
float:left;
margin :5px;
}
#rue_numeros li{
width :265px;
float:left;
margin:0;
}
#rue_numeros li label{
width:80px;
float:left;
}
#rue_numeros li input{
width:175px;
}
#partie-observation li li label.error{
position: relative;
margin-top: -38px;
229,12 → 242,37
display:block;
width:100%;
}
label[for=coordonnees-geo] {
display:block;
width:100% !important;
}
ul#coordonnees-geo {
list-style-type:none;
float:left;
}
ul#coordonnees-geo li {
float: left;
margin: 5px;
width: 120px;
}
ul#coordonnees-geo #coord-lat,ul#coordonnees-geo #coord-lng {
width: 70px;
}
ul#coordonnees-geo #info-commune{
width: 150px;
}
ul#liste-milieux{
padding-top:5px;
}
#liste-milieux li{
ul#liste-milieux li{
display:inline;
}
#adresse, #notes{
width:400px;
}
#rue{
width:440px;
}
/*-------------------------------------------------------*/
/* Photo */
#resultat,.resultat {
259,8 → 297,12
.supprimer-obs{
background-color:transparent;
border:none;
padding:0;
cursor:pointer;
}
.obs-miniature {
text-align:center;
}
.obligatoire {
color:red;
}
295,10 → 337,3
}
/*-------------------------------------------------------*/
/* Autocomplete */
.ui-autocomplete {
background-color: white;
width: 300px;
border: 1px solid #cfcfcf;
list-style-type: none;
padding-left: 0px;
}