Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 718 → Rev 719

/trunk/widget/modules/saisie/squelettes/biodiversite34/css/biodiversite34.css
78,6 → 78,10
table caption {
font-family:sans-serif;
}
legend {
font-size:1.2em;
color:#CCC;
}
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Générique */
.nettoyage{
85,4 → 89,78
}
hr.nettoyage{
visibility:hidden;
}
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Formulaire */
fieldset {
width:600px;
}
label{
width:140px;
display:block;
float:left;
}
input, select, textarea {
width:240px;
}
#saisie-obs fieldset{
margin-top:10px;
border:0;
display:block;
}
#saisie-obs ul {
list-style-type:none;
margin:0;
padding:0;
}
#saisie-obs li {
margin:5px;
}
#partie-station label {
width:70px;
display:block;
float:left;
}
#latitude, #longitude {
width:70px;
float:left;
}
#latitude {
margin-right:5px;
}
#lat-lon-info {
margin-left:5px;
}
.obligatoire {
color:red;
}
label.error {
display:inline;
float:none;
color:red;
padding-left:.5em;
}
 
/*+-----------------------------------------------------------------------------------------------------------------+*/
/* Carte Google Map */
#gg-map-localisation {
background-color:#4A4B4C;
color:#CCC;
}
#gg-map-carte {
width:100%;
}
#gg-map-info ul {
list-style-type:none;
}
#gg-map-info li {
padding-left:0;
margin:0;
}
#gg-map-info ul, #gg-map-info button{
margin-left:5px;
}
.champ {
color:#56B80E;
font-weight:bold;
}
/trunk/widget/modules/saisie/squelettes/biodiversite34/js/biodiversite34.js
1,4 → 1,40
//+---------------------------------------------------------------------------------------------------------+
// GÉNÉRAL
var DEBUG = false; // Mettre à true pour afficher les messages de débogage
/**
* Stope l'évènement courrant quand on clique sur un lien.
* Utile pour Chrome, Safari...
* @param evenement
* @return
*/
function arreter(evenement) {
if (evenement.stopPropagation) {
evenement.stopPropagation();
}
return false;
}
 
//+---------------------------------------------------------------------------------------------------------+
// FORMULAIRE
 
$(function() {
$("#saisie-obs").validate({
rules: {
prenom : "required",
nom : "required",
courriel : {
required : true,
email : true},
courriel_confirmation : {
required : true,
equalTo: "#courriel"
},
milieu : "required",
latitude : "required",
longitude : "required"
}
});
$("#date").datepicker($.datepicker.regional['fr']);
$("#courriel-confirmation").bind('paste', function(e) {
6,37 → 42,254
return false;
});
$("#localiser-gg-map").fancybox({
'modal' : true,
'autoDimensions' : true,
'titleShow' : false,
'onClosed' : function() {
$("#gg-map").hide();
},
'onStart' : function(e) {
arreter(e);
$("#gg-map-localisation").height($(window).height() - 100);
$("#gg-map-carte").height($(window).height() - 230);
$("#gg-map-localisation").width($(window).width() - 100);
},
'onComplete' : function() {
initialiserCarte();
}
});
$("#valider-coordonnees").click(function(e) {
var coordonnees = $("#marqueur-coordonnees").data('latLon');
if (coordonnees != undefined) {
$("#latitude").val(coordonnees.lat);
$("#longitude").val(coordonnees.lon);
}
$.fancybox.close();
});
$("#annuler-coordonnees").bind('click', function(e) {
$.fancybox.close();
});
var obsNumero = 0;
$("#ajouter-obs").click(function(e) {
obsNumero = obsNumero + 1;
$("#liste-obs tbody").append(
'<tr id="obs-'+obsNumero+'">'+
'<td>'+obsNumero+'</td>'+
'<td>'+$("#date").val()+'</td>'+
'<td>'+$("#taxon option:selected").text()+'</td>'+
'<td>'+$("#notes").val()+'</td>'+
'<td><button class="supprimer-obs" value="'+obsNumero+'">Supprimer</button></td>'+
'</tr>');
$("#liste-obs").data('obs-id:'+obsNumero, {'date' : $("#date").val(), 'taxon' : $("#taxon").val()});
$("#ajouter-obs").bind('click', function(e) {
if ($("#saisie-obs").valid() == false) {
$("#dialogue-form-invalide").dialog();
} else {
obsNumero = obsNumero + 1;
$("#liste-obs tbody").append(
'<tr id="obs'+obsNumero+'" class="obs">'+
'<td>'+obsNumero+'</td>'+
'<td>'+$("#date").val()+'</td>'+
'<td>'+$("#taxon option:selected").text()+'</td>'+
'<td>'+$("#milieu option:selected").text()+'</td>'+
'<td>'+$("#latitude").val()+'</td>'+
'<td>'+$("#longitude").val()+'</td>'+
'<td>'+$("#notes").val()+'</td>'+
'<td><button class="supprimer-obs" value="'+obsNumero+'" title="'+obsNumero+'">Supprimer</button></td>'+
'</tr>');
var numNomSel = $("#taxon").val();
$("#liste-obs").data('obsId'+obsNumero, {
'date' : $("#date").val(),
'num_nom_sel' : numNomSel,
'nom_sel' : taxons[numNomSel]['nom_sel'],
'nom_ret' : taxons[numNomSel]['nom_ret'],
'num_nom_ret' : taxons[numNomSel]['num_nom_ret'],
'num_taxon' : taxons[numNomSel]['num_taxon'],
'famille' : taxons[numNomSel]['famille'],
'nom_fr' : taxons[numNomSel]['nom_fr'],
'milieu' : $("#milieu option:selected").val(),
'latitude' : $("#latitude").val(),
'longitude' : $("#longitude").val(),
'tag' : 'Biodiversite34',
'notes' : $("#notes").val()});
}
});
$(".supprimer-obs").live('click', function() {
var obsId = $(this).val();
$('#obs-'+obsId).remove();
$("#liste-obs").removeData('obs-id:'+obsId)
// Problème avec IE 6 et 7
if (obsId == "Supprimer") {
obsId = $(this).attr("title");
}
$('#obs'+obsId).remove();
$("#liste-obs").removeData('obsId'+obsId)
});
$( "#tramsmettre-obs").click(function(e) {
$("#tramsmettre-obs").click(function(e) {
var observations = $("#liste-obs").data();
if (observations == undefined) {
if (observations == undefined || jQuery.isEmptyObject(observations)) {
$("#dialogue-zero-obs").dialog();
} else if ($("#saisie-obs").valid() == false) {
$("#dialogue-form-invalide").dialog();
} else {
$.each(observations, function (obsId, value) {
$.each(value, function (key, value) {
alert(obsId+' : '+key + '=' + value);
});
var utilisateur = new Object();
utilisateur.prenom = $("#prenom").val();
utilisateur.nom = $("#nom").val();
utilisateur.courriel = $("#courriel").val();
observations['utilisateur'] = utilisateur;
//"http://localhost/cel-jrest/CelWidgetSaisie"
$.ajax({
url : "http://www.tela-botanica.org/eflore-test/cel2/jrest/CelWidgetSaisie",
type : "POST",
data : observations,
context : document.body,
beforeSend : function() {
$("#msg").remove();
$("#msg-erreur").remove();
$("#msg-debug").remove();
},
statusCode : {
500 : function(jqXHR, textStatus, errorThrown) {
$("#dialogue-obs-transaction").append('<p id="msg">Un problème est survenu 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-obs-transaction").append('<p id="msg-erreur">Erreur 500 : '+errorThrown+"<br />"+erreurMsg+'</p>');
}
},
success : function(data, textStatus, jqXHR) {
$("#dialogue-obs-transaction").append('<p id="msg">Vos observations ont bien été transmises.</p>');
},
complete : function(jqXHR, textStatus) {
var debugMsg = "";
if (DEBUG && jqXHR.getResponseHeader("X-DebugJrest-Data") != '') {
debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data"));
if (debugInfos != null) {
$.each(debugInfos, function (cle, valeur) {
debugMsg += valeur + "<br />";
});
$("#dialogue-obs-transaction").append('<pre id="msg-debug">Débogage : '+debugMsg+'</pre>');
}
}
$("#dialogue-obs-transaction").dialog();
$("#liste-obs").removeData();
$('.obs').remove();
obsNumero = 0;
},
});
}
return false;
});
});
 
//+---------------------------------------------------------------------------------------------------------+
// GOOGLE MAP
 
var geocoder;
var latLng;
var map;
var marker;
var osmMapType;
function initialiserCarte() {
geocoder = new google.maps.Geocoder();
latLng = new google.maps.LatLng(43.577, 3.455);
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('gg-map-carte'), {
zoom: 9,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControlOptions: {
mapTypeIds: ['OSM', google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID, google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.TERRAIN],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
});
map.mapTypes.set('OSM', osmMapType);
map.setMapTypeId(google.maps.MapTypeId.HYBRID);
marker = new google.maps.Marker({
position: latLng,
title: 'Ma station',
map: map,
draggable: true
});
// Update current position info.
mettreAJourMarkerPosition(latLng);
geocoderPosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker, 'dragstart', function() {
mettreAJourMarkerAdresse('Marqueur de station début du déplacement...');
});
google.maps.event.addListener(marker, 'drag', function() {
mettreAJourMarkerStatut('Marqueur de station en cours de déplacement...');
mettreAJourMarkerPosition(marker.getPosition());
});
google.maps.event.addListener(marker, 'dragend', function() {
mettreAJourMarkerStatut('Marqueur de station déplacé (glisser/déposer).');
mettreAJourMarkerPosition(marker.getPosition());
geocoderPosition(marker.getPosition());
});
google.maps.event.addListener(map, 'click', function(event) {
deplacerMarker(event.latLng);
});
}
 
function geocoderPosition(pos) {
if (geocoder != undefined) {
geocoder.geocode({
latLng: pos
}, function(responses, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (responses && responses.length > 0) {
mettreAJourMarkerAdresse(responses[0].formatted_address);
console.log(responses);
} else {
mettreAJourMarkerAdresse("Impossible de trouver d'adresse pour cette position.");
}
} else {
mettreAJourMarkerAdresse("Un problème de géolocalisation est survenu : "+status+".");
}
});
}
}
 
function mettreAJourMarkerStatut(str) {
document.getElementById('marqueur-statut').innerHTML = str;
}
 
function mettreAJourMarkerPosition(latLng) {
document.getElementById('marqueur-coordonnees').innerHTML = [
latLng.lat().toFixed(5),
latLng.lng().toFixed(5)
].join(', ');
$("#marqueur-coordonnees").data('latLon', {'lat' : latLng.lat().toFixed(5), 'lon' : latLng.lng().toFixed(5)});
}
 
function mettreAJourMarkerAdresse(str) {
document.getElementById('marqueur-adresse').innerHTML = str;
}
 
function deplacerMarker(latLon) {
if (marker != undefined) {
marker.setPosition(latLon);
mettreAJourMarkerStatut('Marqueur de station déplacé (clic).');
mettreAJourMarkerPosition(marker.getPosition());
geocoderPosition(marker.getPosition());
}
}
/trunk/widget/modules/saisie/squelettes/biodiversite34/biodiversite34.tpl.html
20,12 → 20,16
<!-- Javascript : bibliothèques -->
<!-- Google Map v3 -->
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.3&amp;sensor=true"></script>
<!-- Jquery -->
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.6/jquery-1.6.min.js"></script>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.5.1/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.13/js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.13/js/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.8.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.8.1/messages_fr.js"></script>
<script src="<?=$url_base?>saisie?projet=biodiversite34&service=taxons" type="text/javascript"></script>
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/biodiversite34/js/biodiversite34.js"></script>
<!-- CSS -->
32,7 → 36,134
<link href="<?=$url_base?>modules/saisie/squelettes/biodiversite34/css/biodiversite34.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.13/css/ui-darkness/jquery-ui-1.8.13.custom.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://www.tela-botanica.org/commun/jquery/fancybox/1.3.4/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
</head>
 
<body>
<h1>Biodiversité 34</h1>
<h2>Saisie des observations</h2>
<form id="saisie-obs" action="#">
<fieldset id="partie-identification">
<legend>1. Identification</legend>
<ul>
<li>
<label for="prenom"><span class="obligatoire" title="Champ obligatoire">*</span> Prénom</label>
<input id="prenom" name="prenom" type="text" value=""/>
</li>
<li>
<label for="nom"><span class="obligatoire" title="Champ obligatoire">*</span> NOM</label>
<input id="nom" name="nom" type="text" value=""/>
</li>
<li>
<label for="courriel"><span class="obligatoire" title="Champ obligatoire">*</span> Courriel</label>
<input id="courriel" name="courriel" type="text" value=""/>
</li>
<li>
<label for="courriel_confirmation"><span class="obligatoire" title="Champ obligatoire">*</span> Courriel (confirmation)</label>
<input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/>
</li>
</ul>
</fieldset>
<fieldset id="partie-station">
<legend>2. Station / Localisation</legend>
<ul>
<li>
<label for="milieu"><span class="obligatoire" title="Champ obligatoire">*</span> Milieu</label>
<select id="milieu" name="milieu">
<?php foreach ($milieux as $milieu => $description) : ?>
<option value="<?=$milieu?>" <?=($description != '') ? 'title="'.$description.'"': '' ?>><?=$milieu?></option>
<?php endforeach; ?>
</select>
</li>
<li><a id="localiser-gg-map" href="#gg-map-localisation">Localiser votre station sur une carte Google Map</a></li>
<li id="partie-lat-lon">
<label for="latitude"><span class="obligatoire" title="Champ obligatoire">*</span> Latitude</label>
<input id="latitude" name="latitude" type="text" value=""/>
<label for="longitude"><span class="obligatoire" title="Champ obligatoire">*</span> Longitude</label>
<input id="longitude" name="longitude" type="text" value=""/>
<span id="lat-lon-info" class="info">(WGS84)</span>
</li>
</ul>
</fieldset>
<fieldset id="partie-observation">
<legend>3. Observation</legend>
<ul>
<li>
<label for="date">Date</label>
<input id="date" name="date" type="text" value="" />
</li>
<li>
<label for="taxon">Espèce</label>
<select id="taxon" name="taxon">
<?php foreach ($taxons as $taxon) : ?>
<option value="<?=$taxon['num_nom_sel']?>" title="<?=$taxon['nom_sel'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>"><?=$taxon['nom_fr']?></option>
<?php endforeach; ?>
</select>
</li>
<li>
<label for="notes">Notes</label>
<textarea id="notes" name="notes"></textarea>
</li>
</ul>
<button id="ajouter-obs" type="button">Ajouter</button>
</fieldset>
</form>
<h2>Liste des observations à transmettre</h2>
<form action="#">
<table id="liste-obs">
<thead><tr><th>Numéro</th><th>Date</th><th>Nom</th><th>Milieu</th><th>Latitude</th><th>Longitude</th><th>Notes</th><th>Suppression</th></tr></thead>
<tbody></tbody>
</table>
<button id="tramsmettre-obs" type="button">Transmettre</button>
</form>
<div id="gg-map" style="display: none;">
<div id="gg-map-localisation">
<div id="gg-map-carte">Carte en cours de chargement...</div>
<form id="gg-map-info">
<ul>
<li>
<span class="champ">Marqueur de station</span>
<span id="marqueur-statut">Déplacer le marqueur sur le centre de votre station.</span>
</li>
<li>
<span class="champ">Coordonnées du marqueur</span>
<span id="marqueur-coordonnees"></span>
</li>
<li>
<span class="champ">Adresse correspondante la plus proche</span>
<span id="marqueur-adresse"></span>
</li>
</ul>
<button id="valider-coordonnees" type="button">Valider</button>
<button id="annuler-coordonnees" type="button">Annuler</button>
</form>
</div>
</div>
</div>
<div id="dialogue-bloquer-copier-coller" style="display: none;" title="Information copier/coller">
<p>
Merci de ne pas copier/coller votre courriel.<br/>
La double saisie permet de vérifier l'absence d'erreurs.
</p>
</div>
<div id="dialogue-zero-obs" style="display: none;" title="Information aucune observation">
<p>
Veuillez saisir des observations pour les transmettres.
</p>
</div>
<div id="dialogue-form-invalide" style="display: none;" title="Validation du formulaire">
<p>Certains champs n'ont pas été saisis correctement, veuillez vérifier les champs saisis.</p>
</div>
<div id="dialogue-obs-transaction" style="display: none;" title="Transmission des observations">
</div>
<!-- Stats : Google Analytics -->
<script type="text/javascript">
//<![CDATA[
47,73 → 178,5
})();
//]]>
</script>
</head>
 
<body>
<h1>Biodiversité 34</h1>
<h2>Saisie des observations</h2>
<form action="#">
<fieldset>
<legend>Identification</legend>
<label for="prenom">Prénom</label>
<input id="prenom" name="prenom" type="text" value="" />
<label for="nom">NOM</label>
<input id="nom" name="nom" type="text" value="" />
<label for="courriel">Courriel</label>
<input id="courriel" name="courriel" type="text" value="" />
<label for="courriel-confirmation">Courriel (confirmation)</label>
<input id="courriel-confirmation" name="courriel-confirmation" type="text" value="" />
</fieldset>
<fieldset>
<legend>Station / Localisation</legend>
<label for="milieu">Milieu</label>
<select id="milieu" name="milieu">
<option value="Trottoir">Trottoir</option>
</select>
<label for="latitude">Latitude</label>
<input id="latitude" name="latitude" type="text" value="" />
<label for="longitude">Longitude</label>
<input id="longitude" name="longitude" type="text" value="" />
<button type="button">Repérer la localisation sur une carte Google Map</button>
</fieldset>
<fieldset>
<legend>Observation</legend>
<label for="date">Date</label>
<input id="date" name="date" type="text" value="" />
<label for="taxon">Espèce</label>
<select id="taxon" name="taxon">
<?php foreach ($taxons as $taxon) : ?>
<option value="<?=$taxon['num_nom_sel']?>"><?=$taxon['nom_fr']?></option>
<?php endforeach; ?>
</select>
<label for="notes">Notes</label>
<textarea id="notes" name="notes"></textarea>
<button id="ajouter-obs" type="button">Ajouter</button>
</fieldset>
</form>
<h2>Liste des observations à transmettre</h2>
<form action="#">
<table id="liste-obs">
<thead><tr><th>Numéro</th><th>Date</th><th>Nom</th><th>Notes</th><th>Suppression</th></tr></thead>
<tbody></tbody>
</table>
<button id="tramsmettre-obs" type="button">Transmettre</button>
</form>
<div id="dialogue-bloquer-copier-coller" style="display: none;" title="Information copier/coller">
<p>
Merci de ne pas copier/coller votre courriel.<br/>
La double saisie permet de vérifier l'absence d'erreurs.
</p>
</div>
<div id="dialogue-zero-obs" style="display: none;" title="Information aucune observation">
<p>
Veuillez saisir des observations pour les transmettres.
</p>
</div>
</body>
</html>
/trunk/widget/modules/saisie/squelettes/biodiversite34/biodiversite34_taxons.tpl.js
New file
0,0 → 1,0
var taxons = <?=$taxons?>;