/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/sauvages_taxons.tpl.js |
---|
New file |
0,0 → 1,0 |
var taxons = <?=$taxons?>; |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/chargement.gif |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/chargement.gif |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/aide.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/aide.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/supprimer.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/icones/supprimer.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/chargement.gif |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/chargement.gif |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/logos/sdmr.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/logos/sdmr.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/classic.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/classic.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/debut.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/debut.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/relief.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/relief.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/panneau.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/panneau.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/fin.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/fin.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/fleur.png |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = image/png |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/marqueurs/fleur.png |
---|
New file |
Property changes: |
Added: svn:mime-type |
+image/png |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/chargement_arbre.gif |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/chargement_arbre.gif |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/favicon.ico |
---|
Cannot display: file marked as a binary type. |
svn:mime-type = application/octet-stream |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/images/favicon.ico |
---|
New file |
Property changes: |
Added: svn:mime-type |
+application/octet-stream |
\ No newline at end of property |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/css/sauvages.css |
---|
New file |
0,0 → 1,392 |
@CHARSET "UTF-8"; |
body { |
padding:0; |
margin:0; |
width:100%; |
height:100%; |
font-family:Arial; |
font-size:12px; |
background-color:#FFF; |
color:#000; |
} |
h1 { |
font-size:1.6em; |
} |
h2 { |
font-size:1.4em; |
text-transform:uppercase; |
letter-spacing:0.3em; |
padding:5px 10px; |
background:#A1CA10; |
width:250px; |
margin-bottom:0; |
margin-left:2px; |
-webkit-border-radius: 10px 10px 0 0;-moz-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0; |
line-height:2em; |
} |
a, a:active, a:visited { |
border-bottom:1px dotted #666; |
color:#181; |
text-decoration:none; |
} |
a:active { |
outline:none; |
} |
a:focus { |
outline:thin dotted; |
} |
a:hover { |
color:#56B80E; |
border-bottom:1px dotted #56B80E; |
} |
/*+-----------------------------------------------------------------------------------------------------------------+*/ |
/* Présentation des listes de définitions */ |
dl { |
width:100%; |
} |
dt { |
float:left; |
font-weight:bold; |
text-align:top left; |
margin-right:0.3em; |
} |
dd { |
width:auto; |
margin:0.5em 0; |
} |
/*+-----------------------------------------------------------------------------------------------------------------+*/ |
/* Tableau : */ |
table { |
border:1px solid gray; |
border-collapse:collapse; |
} |
table thead, table tfoot, table tbody { |
background-color:Gainsboro; |
border:1px solid gray; |
color:black; |
} |
table tbody { |
background-color:#FFF; |
} |
table th { |
font-family:monospace; |
border:1px dotted gray; |
padding:5px; |
background-color:Gainsboro; |
} |
table td { |
font-family:arial; |
border:1px dotted gray; |
padding:5px; |
text-align:left; |
} |
table caption { |
font-family:sans-serif; |
} |
legend { |
font-size:1.2em; |
color:#000; |
text-transform:uppercase; |
letter-spacing:0.2em; |
padding:5px 10px; |
} |
.colonne_milieu { |
} |
/*+--------------------------------------------------------------------------------------------------------+*/ |
/* Générique */ |
.discretion { |
color:grey; |
font-family:arial; |
font-size:11px; |
} |
.nettoyage{ |
clear:both; |
} |
hr.nettoyage{ |
visibility:hidden; |
} |
label[title]:after, th[title]:after, span[title]:after { |
content: " " url("../images/icones/aide.png"); |
} |
/*+--------------------------------------------------------------------------------------------------------+*/ |
/* Positionnement général */ |
#zone-appli { |
margin:0 auto; |
width:600px; |
} |
/*+--------------------------------------------------------------------------------------------------------+*/ |
/* Formulaire générique */ |
fieldset { |
background-color:#fff; |
} |
input[type="text"], select, textarea { |
width:240px; |
} |
/*+--------------------------------------------------------------------------------------------------------+*/ |
/* Formulaire spécifique */ |
#zone-fiche-terrain, #zone-fiche-terrain-photo{ |
background:#A1CA10; |
width:600px; |
margin-left:2px; |
padding-bottom:10px; |
} |
#zone-fiche-terrain{ |
-webkit-border-radius: 0 10px 0 0;-moz-border-radius: 0 10px 0 0;border-radius: 0 10px 0 0; |
} |
#zone-fiche-terrain-photo{ |
-webkit-border-radius: 0 0 10px 10px;-moz-border-radius: 0 0 10px 10px;border-radius: 0 0 10px 10px; |
margin-top:-10px; |
} |
#zone-liste-obs{ |
padding-bottom:25px; |
margin-top:15px; |
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; |
} |
#saisie-obs fieldset{ |
display:block; |
} |
#saisie-obs label{ |
font-weight:bold; |
} |
#partie-observation, #partie-preview, #partie-station{ |
margin-top:10px; |
} |
#partie-date * { |
position: relative; |
z-index:50; |
} |
#partie-station, #partie-observation, #partie-photo, #partie-date{ |
width:550px; |
margin-left:10px; |
background:#E5E5E5; |
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; |
} |
#partie-station legend, #partie-observation legend, #partie-photo legend, #partie-date legend{ |
background:#E5E5E5; |
-webkit-border-radius: 10px 10px 0 0 ;-moz-border-radius: 10px 10px 0 0;border-radius: 10px 10px 0 0; |
} |
#saisie-obs ul { |
list-style-type:none; |
margin:0; |
padding:0; |
} |
#saisie-obs li { |
margin:5px; |
} |
/*-------------------------------------------------------*/ |
/* Partie-identification */ |
#partie-identification, #partie-identification legend{ |
background:#A1CA10; |
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; |
} |
#partie-identification{ |
width:582px; |
} |
#partie-identification li{ |
float: left; |
margin-left: 20px; |
display:inline; |
width:250px; |
} |
#partie-identification label{ |
/*display:block;*/ |
} |
/*-------------------------------------------------------*/ |
/* Partie-station */ |
#partie-station fieldset{ |
margin-top:0; |
} |
#partie-station label { |
width: 120px; |
display:block; |
float:left; |
} |
#latitude, #longitude { |
width:70px; |
float:left; |
} |
#latitude { |
margin-right:5px; |
} |
#lat-lon-info { |
margin-left:5px; |
} |
#partie-observation label{ |
width:120px; |
float:left; |
} |
#partie-observation li{ |
margin :10px; |
} |
#partie-station #label_map_canvas { |
width: 100%; |
} |
#map-canvas { |
width:525px; |
height: 340px; |
} |
#partie-station #partie-lat-lon label.error{ |
float:left; |
width:80px; |
} |
#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: -42px; |
margin-left:50px; |
float:left; |
} |
label[for=milieu]{ |
display:block; |
width:100%; |
} |
label[for=coordonnees-geo] { |
display:block; |
width:100% !important; |
} |
ul#coordonnees-geo { |
list-style-type:none; |
float:left; |
width: 100%; |
} |
ul#coordonnees-geo li { |
float: left; |
margin: 5px; |
width: 201px; |
} |
ul#coordonnees-geo #coord-lat,ul#coordonnees-geo #coord-lng { |
width: 70px; |
} |
ul#coordonnees-geo #info-commune{ |
width: 150px; |
} |
ul#liste-milieux{ |
float:left; |
} |
ul#liste-milieux li{ |
display:inline; |
width:100px; |
} |
#notes{ |
width:400px; |
} |
#rue{ |
/**width:440px;**/ |
left: 35px; |
position: relative; |
top: 35px; |
width: 320px; |
z-index: 45; |
} |
.indication_geolocalisation { |
color:#118811; |
font-style: italic; |
font-weight: bold; |
font-weight:0.9em; |
} |
.indication_geolocalisation { |
height: 30px; |
position: relative; |
top: 15px; |
} |
/*-------------------------------------------------------*/ |
/* Photo */ |
#resultat,.resultat { |
width:20%; |
} |
.resultat { |
width:30px; |
} |
#form-upload{ |
margin-top:10px; |
} |
#miniature-info{ |
margin:0; |
} |
.b64{ |
max-width:100px; |
max-height:100px; |
} |
/*-------------------------------------------------------*/ |
/* Partie-preview */ |
#partie-preview legend, #partie-preview{ |
background:#A1CA10; |
-webkit-border-radius: 10px;-moz-border-radius: 10px;border-radius: 10px; |
} |
#partie-preview { |
width:582px; |
border:none; |
} |
.supprimer-obs{ |
background-color:transparent; |
border:none; |
padding:0; |
cursor:pointer; |
} |
.obs-miniature { |
text-align:center; |
} |
.obligatoire { |
color:red; |
} |
label.error { |
display:inline; |
float:none; |
padding-left:.5em; |
color:red; |
} |
#partie-observation label.error,#partie-station label.error { |
width:150px; |
float:right; |
} |
#ajouter-obs{ |
margin-left:407px; |
margin-top:10px; |
font-size:20px; |
background:#181; |
color:#FFF; |
-webkit-border-radius: 5x;-moz-border-radius: 5px;border-radius: 5px; |
height:35px; |
width:137px; |
} |
#transmettre-obs{ |
margin-left:400px; |
margin-top:5px; |
font-size:20px; |
background:#811; |
color:#FFF; |
-webkit-border-radius: 5x;-moz-border-radius: 5px;border-radius: 5px; |
height:35px; |
} |
/*-------------------------------------------------------*/ |
/* Autocomplete */ |
.valeur-defaut-recherche { |
color:#848484; |
font-style:italic; |
font-weight:0.9em; |
} |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/js/sauvages.js |
---|
New file |
0,0 → 1,707 |
//+---------------------------------------------------------------------------------------------------------+ |
// GÉNÉRAL |
/** |
* 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; |
} |
// TODO : voir si cette fonction est bien utile. Résoud le pb d'un warning sous chrome. |
(function(){ |
// remove layerX and layerY |
var all = $.event.props, |
len = all.length, |
res = []; |
while (len--) { |
var el = all[len]; |
if (el != 'layerX' && el != 'layerY') res.push(el); |
} |
$.event.props = res; |
}()); |
//+----------------------------------------------------------------------------------------------------------+ |
//UPLOAD PHOTO : Traitement de l'image |
$(document).ready(function() { |
$("#effacer-miniature").click(function () { |
supprimerMiniature(); |
}); |
if (HTML5 && window.File && window.FileReader && isCanvasSupported()) { |
if (DEBUG) { |
console.log("Support OK pour : API File et Canvas."); |
} |
$('#fichier').bind('change', function(e) { |
afficherMiniatureHtml5(e); |
}); |
} else { |
$("#fichier").bind('change', function (e) { |
arreter(e); |
var options = { |
success: afficherMiniature, // post-submit callback |
dataType: 'xml', // 'xml', 'script', or 'json' (expected server response type) |
resetForm: true // reset the form after successful submit |
}; |
$("#form-upload").ajaxSubmit(options); |
return false; |
}); |
} |
}); |
function isCanvasSupported(){ |
var elem = document.createElement('canvas'); |
return !!(elem.getContext && elem.getContext('2d')); |
} |
function afficherMiniatureHtml5(evt) { |
supprimerMiniature(); |
var selectedfiles = evt.target.files; |
var f = selectedfiles[0];// Nous récupérons seulement le premier fichier. |
if (f.type != 'image/jpeg') { |
var message = "Seule les images JPEG sont supportées."; |
$("#miniature-msg").append(message); |
} else if (f.size > 5242880) { |
var message = "Votre image à un poids supérieur à 5Mo."; |
$("#miniature-msg").append(message); |
} else { |
var reader = new FileReader(); |
// Lit le fichier image commune url de données |
reader.readAsDataURL(f); |
var imgNom = f.name; |
// Closure pour capturer les infos du fichier |
reader.onload = (function(theFile) { |
return function(e) { |
// Rendre la miniature |
var imageBase64 = e.target.result; |
//$("#miniature").append('<img id="miniature-img" class="miniature b64" src="'+imageBase64+'" alt="'+imgNom+'"/>'); |
// HTML5 Canvas |
var img = new Image(); |
img.src = imageBase64; |
img.alt = imgNom; |
img.onload = function() { |
transformerImgEnCanvas(this, 100, 100, false, 'white'); |
}; |
}; |
})(f); |
} |
$("#effacer-miniature").show(); |
} |
function transformerImgEnCanvas(img, thumbwidth, thumbheight, crop, background) { |
var canvas = document.createElement('canvas'); |
canvas.width = thumbwidth; |
canvas.height = thumbheight; |
var dimensions = calculerDimenssions(img.width, img.height, thumbwidth, thumbheight); |
if (crop) { |
canvas.width = dimensions.w; |
canvas.height = dimensions.h; |
dimensions.x = 0; |
dimensions.y = 0; |
} |
cx = canvas.getContext('2d'); |
if (background !== 'transparent') { |
cx.fillStyle = background; |
cx.fillRect(0, 0, thumbwidth, thumbheight); |
} |
cx.drawImage(img, dimensions.x, dimensions.y, dimensions.w, dimensions.h); |
afficherMiniatureCanvas(img, canvas); |
} |
function calculerDimensions(imagewidth, imageheight, thumbwidth, thumbheight) { |
var w = 0, h = 0, x = 0, y = 0, |
widthratio = imagewidth / thumbwidth, |
heightratio = imageheight / thumbheight, |
maxratio = Math.max(widthratio, heightratio); |
if (maxratio > 1) { |
w = imagewidth / maxratio; |
h = imageheight / maxratio; |
} else { |
w = imagewidth; |
h = imageheight; |
} |
x = (thumbwidth - w) / 2; |
y = (thumbheight - h) / 2; |
return {w:w, h:h, x:x, y:y}; |
} |
function afficherMiniatureCanvas(imgB64, canvas) { |
var url = canvas.toDataURL('image/jpeg' , 0.8); |
var alt = imgB64.alt; |
var title = Math.round(url.length / 1000 * 100) / 100 + ' KB'; |
var miniature = '<img id="miniature-img" class="miniature b64-canvas" src="'+url+'" alt="'+alt+'" title="'+title+'" />'; |
$("#miniature").append(miniature); |
$("#miniature-img").data('b64', imgB64.src); |
} |
function afficherMiniature(reponse) { |
supprimerMiniature(); |
if (DEBUG) { |
var debogage = $("debogage", reponse).text(); |
console.log("Débogage upload : "+debogage); |
} |
var message = $("message", reponse).text(); |
if (message != '') { |
$("#miniature-msg").append(message); |
} else { |
var miniatureUrl = $("miniature-url", reponse).text(); |
var imgNom = $("image-nom", reponse).text(); |
$("#miniature").append('<img id="miniature-img" class="miniature" alt="'+imgNom+'" src="'+miniatureUrl+'"/>'); |
} |
$("#effacer-miniature").show(); |
} |
function supprimerMiniature() { |
$("#miniature").empty(); |
$("#miniature-msg").empty(); |
$("#effacer-miniature").hide(); |
} |
//+----------------------------------------------------------------------------------------------------------+ |
// GOOGLE MAP |
var geocoder; |
var map; |
// marqueurs de début et fin de rue |
var marker; |
var markerFin; |
// coordonnées de début et fin de rue |
var latLng; |
var latLngFin; |
// ligne reliant les deux points de début et fin |
var ligneRue; |
// Booléen de test afin de ne pas faire apparaitre la fin de rue à la premiere localisation |
var premierDeplacement = true; |
function initialiserGoogleMap(){ |
// Carte |
latLng = new google.maps.LatLng(48.8543, 2.3483);// Paris |
if (VILLE == 'Marseille') { |
latLng = new google.maps.LatLng(43.29545, 5.37458); |
} else if (VILLE == 'Montpellier') { |
latLng = new google.maps.LatLng(43.61077, 3.87672); |
} |
latLngFin = latLng; |
var options = { |
zoom: 16, |
center: latLng, |
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 |
}); |
// 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(); |
// Marqueur google draggable |
marker = new google.maps.Marker({ |
map: map, |
draggable: true, |
title: 'Début de la portion de rue étudiée', |
icon: MARQUEUR_ICONE_DEBUT_URL, |
position: latLng |
}); |
deplacerMarker(latLng); |
// Tentative de geocalisation |
if (navigator.geolocation) { |
navigator.geolocation.getCurrentPosition(function(position) { |
var latitude = position.coords.latitude; |
var longitude = position.coords.longitude; |
latLng = new google.maps.LatLng(latitude, longitude); |
latLngFin = latLng; |
// si l'utilisateur géolocalise sa ville alors le premier déplacement doit être réinitialisé |
premierDeplacement = true; |
deplacerMarker(latLng); |
}); |
} |
} |
var valeurDefautRechercheLieu = ""; |
$(document).ready(function() { |
initialiserGoogleMap(); |
gererAffichageValeursParDefaut(); |
// Autocompletion du champ adresse |
$("#rue").autocomplete({ |
//Cette partie utilise geocoder pour extraire des valeurs d'adresse |
source: function(request, response) { |
geocoder.geocode( {'address': request.term+', France', 'region' : 'fr' }, function(results, status) { |
if (status == google.maps.GeocoderStatus.OK) { |
response($.map(results, function(item) { |
var rue = ""; |
$.each(item.address_components, function(){ |
if (this.types[0] == "route" || this.types[0] == "street_address" ) { |
rue = this.short_name; |
} |
}); |
var retour = { |
label: item.formatted_address, |
value: rue, |
latitude: item.geometry.location.lat(), |
longitude: item.geometry.location.lng() |
}; |
return retour; |
})); |
} else { |
afficherErreurGoogleMap(status); |
} |
}); |
}, |
// Cette partie est executee a la selection d'une adresse |
select: function(event, ui) { |
latLng = new google.maps.LatLng(ui.item.latitude, ui.item.longitude); |
deplacerMarker(latLng); |
afficherEtapeGeolocalisation(2); |
} |
}); |
$("#geolocaliser").click(function() { |
var latitude = $('#latitude').val(); |
var longitude = $('#longitude').val(); |
latLng = new google.maps.LatLng(latitude, longitude); |
deplacerMarker(latLng); |
}); |
google.maps.event.addListener(marker, 'dragend', function() { |
trouverCommune(marker.getPosition()); |
mettreAJourMarkerPosition(marker.getPosition()); |
deplacerMarker(marker.getPosition()); |
}); |
google.maps.event.addListener(map, 'click', function(event) { |
deplacerMarker(event.latLng); |
}); |
}); |
function gererAffichageValeursParDefaut() { |
afficherEtapeGeolocalisation(1); |
} |
function afficherEtapeGeolocalisation(numEtape) { |
$(".liste_indication_geolocalisation").children().hide(); |
$(".liste_indication_geolocalisation :nth-child("+numEtape+")").show(); |
} |
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(latLng) { |
if (marker != undefined) { |
marker.setPosition(latLng); |
map.setCenter(latLng); |
//map.setZoom(18); |
trouverCommune(latLng); |
if(!premierDeplacement) { |
if(markerFin != undefined) { |
markerFin.setMap(null); |
} |
latLngFin = new google.maps.LatLng(latLng.lat(), latLng.lng() + 0.0010); |
// Marqueur google draggable |
markerFin = new google.maps.Marker({ |
map: map, |
draggable: true, |
title: 'Fin de la portion de rue étudiée', |
icon: MARQUEUR_ICONE_FIN_URL, |
position: latLngFin |
}); |
google.maps.event.addListener(markerFin, 'dragend', function() { |
dessinerLigneRue(marker.getPosition(), markerFin.getPosition()); |
latLngFin = markerFin.getPosition(); |
latLngCentre = new google.maps.LatLng((latLngFin.lat() + latLng.lat())/2, (latLngFin.lng() + latLng.lng())/2); |
mettreAJourMarkerPosition(latLngCentre); |
afficherEtapeGeolocalisation(4); |
}); |
dessinerLigneRue(latLng, latLngFin); |
latLngCentre = new google.maps.LatLng((latLngFin.lat() + latLng.lat())/2, (latLngFin.lng() + latLng.lng())/2); |
mettreAJourMarkerPosition(latLng); |
afficherEtapeGeolocalisation(3); |
} else { |
mettreAJourMarkerPosition(latLng); |
} |
premierDeplacement = false; |
} |
} |
function dessinerLigneRue(pointDebut, pointFin) { |
if(ligneRue != undefined) { |
ligneRue.setMap(null); |
} |
ligneRue = new google.maps.Polyline({ |
path: [pointDebut, pointFin], |
strokeColor: "#FF0000", |
strokeOpacity: 1.0, |
strokeWeight: 2 |
}); |
ligneRue.setMap(map); |
} |
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(); |
if(data != null) { |
$("#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() { |
$("#date").datepicker($.datepicker.regional['fr']); |
$("form#saisie-obs").validate({ |
rules: { |
courriel : { |
required : true, |
email : true}, |
courriel_confirmation : { |
required : true, |
equalTo: "#courriel" |
}, |
rue_cote : "required", |
"milieu[]" : { |
required: true, |
minlength: 1 |
}, |
latitude : { |
required: true, |
range: [-90, 90]}, |
longitude : { |
required: true, |
range: [-180, 180]}, |
date : { |
required: true, |
date: true}, |
taxon : "required" |
}, |
messages: { |
"milieu[]": "Vous devez sélectionner au moins un milieu" |
} |
}); |
$("#courriel_confirmation").bind('paste', function(e) { |
$("#dialogue-bloquer-copier-coller").dialog(); |
return false; |
}); |
//bascule le texte d'afficher à masquer |
$("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; |
}); |
var obsNumero = 0; |
$("#ajouter-obs").bind('click', function(e) { |
if ($("#saisie-obs").valid() == false) { |
$("#dialogue-form-invalide").dialog(); |
} else { |
var milieux = []; |
$('input:checked["name=milieux[]"]').each(function() { |
milieux.push($(this).val()); |
}); |
var rue = ($("#rue").val() == valeurDefautRechercheLieu) ? 'non renseigné(e)' : $("#rue").val(); |
//rassemble les obs dans un tableau html |
obsNumero = obsNumero + 1; |
$("#liste-obs tbody").append( |
'<tr id="obs'+obsNumero+'" class="obs">'+ |
'<td>'+obsNumero+'</td>'+ |
'<td>'+$("#date").val()+'</td>'+ |
'<td>'+rue+'</td>'+ |
'<td>'+$("#taxon option:selected").text()+'</td>'+ |
'<td>'+milieux.join(',<br />')+'</td>'+ |
'<td>'+$("#latitude").val()+' / '+$("#longitude").val()+'</td>'+ |
//Ajout du champ photo |
'<td class="obs-miniature">'+ajouterImgMiniatureAuTransfert()+'</td>'+ |
'<td>'+$("#notes").val()+'</td>'+ |
'<td><button class="supprimer-obs" value="'+obsNumero+'" title="Supprimer l\'observation '+obsNumero+'">'+ |
'<img src="'+SUPPRIMER_ICONE_URL+'"/></button></td>'+ |
'</tr>'); |
//rassemble les obs dans #liste-obs |
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' : milieux.join(','), |
'latitude' : $("#latitude").val(), |
'longitude' : $("#longitude").val(), |
'commune_nom' : $("#commune-nom").text(), |
'commune_code_insee' : $("#commune-code-insee").text(), |
'lieudit' : rue, |
'station' : latLng.lat().toFixed(5)+','+latLng.lng().toFixed(5)+';'+latLngFin.lat().toFixed(5)+','+latLngFin.lng().toFixed(5)+';'+$("#rue_cote").val(), |
'notes' : $("#notes").val(), |
//Ajout des champs images |
'image_nom' : $("#miniature-img").attr('alt'), |
'image_b64' : getB64ImgOriginal() |
}); |
// retour à une sélection vide pour le taxon |
$('#taxon option[value=""]').attr("selected", "selected"); |
} |
}); |
$(".supprimer-obs").live('click', supprimerObs); |
$("#transmettre-obs").click(function(e) { |
var observations = $("#liste-obs").data(); |
if (observations == undefined || jQuery.isEmptyObject(observations)) { |
$("#dialogue-zero-obs").dialog(); |
} else if ($("#saisie-obs").valid() == false) { |
$("#dialogue-form-invalide").dialog(); |
} else { |
observations['projet'] = 'Sauvages'; |
var utilisateur = new Object(); |
utilisateur.prenom = $("#prenom").val(); |
utilisateur.nom = $("#nom").val(); |
utilisateur.courriel = $("#courriel").val(); |
observations['utilisateur'] = utilisateur; |
var erreurMsg = ""; |
$.ajax({ |
url : SERVICE_SAISIE_URL, |
type : "POST", |
data : observations, |
dataType : "json", |
beforeSend : function() { |
$(".msg").remove(); |
$(".msg-erreur").remove(); |
$(".msg-debug").remove(); |
$("#chargement").show(); |
}, |
success : function(data, textStatus, jqXHR) { |
var message = 'Merci Beaucoup! Vos observations ont bien été transmises aux chercheurs.<br />'+ |
'Elles sont désormais affichées sur la carte Sauvages de ma rue, <br />'+ |
'et s\'ajoutent aux données du Carnet en ligne (<a href="http://www.tela-botanica.org/widget:cel:carto">voir la carte</a>) de Tela Botanica <br />'+ |
'<br /> '+ |
'Bonne continuation! <br />'+ |
'<br /> '+ |
'Si vous souhaitez modifier ou supprimer vos données, vous pouvez les retrouver en vous connectant au <a href="http://www.tela-botanica.org/page:cel">Carnet en ligne</a>. <br /> '+ |
'(Attention, il est nécessaire de s\'inscrire gratuitement à Tela Botanica au préalable, si ce n\'est pas déjà fait). <br /> '+ |
'<br /> '+ |
'Pour toute question, n\'hésitez pas: notre contact: sauvages@tela-botanica.org '; |
$("#dialogue-obs-transaction").append('<p class="msg">'+message+'</p>'); |
supprimerMiniature(); |
}, |
statusCode : { |
500 : function(jqXHR, textStatus, errorThrown) { |
$("#chargement").hide(); |
erreurMsg += "Erreur 500 :\ntype : "+textStatus+' '+errorThrown+"\n"; |
if (DEBUG) { |
$("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>'); |
} |
} |
}, |
error : function(jqXHR, textStatus, errorThrown) { |
erreurMsg += "Erreur Ajax :\ntype : "+textStatus+' '+errorThrown+"\n"; |
try { |
reponse = jQuery.parseJSON(jqXHR.responseText); |
if (reponse != null) { |
$.each(reponse, function (cle, valeur) { |
erreurMsg += valeur + "\n"; |
}); |
} |
} catch(e) { |
erreurMsg += "L'erreur n'était pas en JSON."; |
} |
if (DEBUG) { |
$("#dialogue-obs-transaction").append('<pre class="msg-erreur">'+erreurMsg+'</pre>'); |
} |
}, |
complete : function(jqXHR, textStatus) { |
$("#chargement").hide(); |
var debugMsg = ''; |
if (jqXHR.getResponseHeader("X-DebugJrest-Data") != '') { |
debugInfos = jQuery.parseJSON(jqXHR.getResponseHeader("X-DebugJrest-Data")); |
if (debugInfos != null) { |
$.each(debugInfos, function (cle, valeur) { |
debugMsg += valeur + "\n"; |
}); |
} |
} |
if (erreurMsg != '') { |
$("#dialogue-obs-transaction").append('<p class="msg">'+ |
'Une erreur est survenue lors de la transmission de vos observations.'+'<br />'+ |
'Vous pouvez signaler le disfonctionnement à <a href="'+ |
'mailto:cel@tela-botanica.org'+'?'+ |
'subject=Disfonctionnement du widget de saisie Biodiversite34'+ |
"&body="+erreurMsg+"\nDébogage :\n"+debugMsg+ |
'">cel@tela-botanica.org</a>.'+ |
'</p>'); |
} |
if (DEBUG) { |
$("#dialogue-obs-transaction").append('<pre class="msg-debug">Débogage : '+debugMsg+'</pre>'); |
} |
$("#dialogue-obs-transaction").dialog(); |
$("#liste-obs").removeData(); |
$('.obs').remove(); |
obsNumero = 0; |
} |
}); |
} |
return false; |
}); |
}); |
function getB64ImgOriginal() { |
var b64 = ''; |
if ($("#miniature-img").hasClass('b64')) { |
b64 = $("#miniature-img").attr('src'); |
} else if ($("#miniature-img").hasClass('b64-canvas')) { |
b64 = $("#miniature-img").data('b64'); |
} |
return b64; |
} |
function supprimerObs() { |
var obsId = $(this).val(); |
// Problème avec IE 6 et 7 |
if (obsId == "Supprimer") { |
obsId = $(this).attr("title"); |
} |
$('#obs'+obsId).remove(); |
$("#liste-obs").removeData('obsId'+obsId); |
} |
function ajouterImgMiniatureAuTransfert() { |
var miniature = ''; |
if ($("#miniature img").length == 1) { |
var css = $("#miniature-img").hasClass('b64') ? 'miniature b64' : 'miniature'; |
var src = $("#miniature-img").attr("src"); |
var alt = $("#miniature-img").attr("alt"); |
miniature = '<img class="'+css+'" alt="'+alt+'"src="'+src+'" />'; |
} |
return miniature; |
} |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/sauvages_image.tpl.xml |
---|
New file |
0,0 → 1,7 |
<?='<?xml version="1.0" encoding="UTF-8"?>'."\n";?> |
<root> |
<miniature-url><?=$urlMiniature?></miniature-url> |
<image-nom><?=$imageNom?></image-nom> |
<message><?=$message?></message> |
<debogage><?=$debogage?></debogage> |
</root> |
/branches/v1.6-croc/widget/modules/saisie/squelettes/sauvages/sauvages.tpl.html |
---|
New file |
0,0 → 1,324 |
<!DOCTYPE html> |
<html xmlns="http://www.w3.org/1999/xhtml"> |
<head> |
<title>Sauvages de ma rue</title> |
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> |
<meta http-equiv="Content-style-type" content="text/css" /> |
<meta http-equiv="Content-script-type" content="text/javascript" /> |
<meta http-equiv="Content-language" content="fr" /> |
<meta name="revisit-after" content="15 days" /> |
<meta name="robots" content="index,follow" /> |
<meta name="author" content="Céline VIDAL, Jean-Pascal MILCENT" /> |
<meta name="keywords" content="Tela Botanica, Natural Solutions, MNHN, Sauvages de ma rue, CEL" /> |
<meta name="description" content="Widget de saisie simplifié pour le projet Sauvages de ma rue" /> |
<!-- Favicones --> |
<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/sauvages/images/favicon.ico" /> |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> |
<!-- 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?sensor=true&language=fr&region=FR"></script> |
<!-- Jquery --> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script> |
<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> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery.ui.datepicker-fr.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/jquery.validate.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script> |
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script> |
<script src="<?=$url_base?>saisie?projet=sauvages&service=taxons" type="text/javascript"></script> |
<!-- Javascript : appli saisie --> |
<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'?>; |
// La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5 |
var HTML5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>; |
// La présence du parametre 'ville' dans l'URL géolocalise |
var VILLE = "<?=isset($_GET['ville']) ? $_GET['ville'] : ''?>"; |
VILLE = <?= isset($_GET['commune']) ? "'".$_GET['commune']."'" : '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:0.1/osm/nom-commune?lon={lon}&lat={lat}"; |
// URL du marqueur à utiliser dans la carte Google Map |
var MARQUEUR_ICONE_DEBUT_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/debut.png"; |
// URL de l'icône du bouton supprimer |
var SUPPRIMER_ICONE_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/icones/supprimer.png"; |
// URL de l'icône du chargement en cours |
var CHARGEMENT_ICONE_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/icones/chargement.gif"; |
// URL de l'icône de fin de rue |
var MARQUEUR_ICONE_FIN_URL = "<?=$url_base?>/modules/saisie/squelettes/sauvages/images/marqueurs/fin.png"; |
//]]> |
</script> |
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/sauvages/js/sauvages.js"></script> |
<!-- CSS --> |
<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" /> |
<link href="<?=$url_base?>modules/saisie/squelettes/sauvages/css/<?=isset($_GET['style']) ? $_GET['style'] : 'sauvages'?>.css" rel="stylesheet" type="text/css" media="screen" /> |
</head> |
<body> |
<div id="zone-appli"> |
<?php if($titre == 'defaut' ) { ?> |
<h1 id="widget-titre"><img src="<?=$url_base?>/modules/saisie/squelettes/sauvages/images/logos/sdmr.png" alt="Sauvages de ma rue : Saisie des observations"/></h1> |
<?php } else { ?> |
<h1 id="widget-titre"><?= $titre ?></h1> |
<?php } ?> |
<form id="saisie-obs" action="#" enctype="multipart/form-data" autocomplete="on"> |
<fieldset id="partie-identification"> |
<legend>Observateur</legend> |
<ul> |
<li> |
<label for="prenom">Prénom</label> |
<input id="prenom" name="prenom" type="text" value=""/> |
</li> |
<li> |
<label for="nom">Nom</label> |
<input id="nom" name="nom" type="text" value=""/> |
</li> |
<li> |
<label for="courriel" class="oblig" |
title="Saisissez votre adresse email. Elle vous permettra de retrouver vos données, et ne sera pas utilisée à des fins commerciales."> |
<strong class="obligatoire">*</strong> Courriel |
</label> |
<input id="courriel" name="courriel" type="text" value=""/> |
</li> |
<li> |
<label for="courriel_confirmation" class="oblig" title="Saisissez à nouveau votre adresse email pour la confirmer"> |
<strong class="obligatoire">*</strong> Courriel (confirmation) |
</label> |
<input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/> |
</li> |
</ul> |
</fieldset> |
<h2>Fiche de terrain</h2> |
<div id="zone-fiche-terrain"> |
<fieldset id="partie-date"> |
<legend>Date du relevé</legend> |
<ul> |
<li> |
<label for="date" title="Indiquez la date de votre relevé (au format jj/mm/aaaa) ou utilisez le calendrier"> |
<strong class="obligatoire">*</strong> Date du relevé |
</label> |
<input id="date" name="date" type="text" value="" /> |
</li> |
</ul> |
</fieldset> |
<fieldset id="partie-station"> |
<legend>Lieu du relevé</legend> |
<ul> |
<li> |
<label id="label_map_canvas" for="map_canvas" class="oblig" title="Sur la carte ci-dessous, retracez le parcours étudié, en placant d'abord le point de début de la rue, puis le point de fin"> |
<strong class="obligatoire">*</strong> Localisation de la rue étudiée |
</label> |
</li> |
<li> |
<ul class="liste_indication_geolocalisation"> |
<li class="indication_geolocalisation">1ere étape : Entrez le nom de la rue et de la ville dans l'espace de recherche ci-dessous</li> |
<li class="indication_geolocalisation">2eme étape : Placez le drapeau vert au début de la portion de rue étudiée</li> |
<li class="indication_geolocalisation">3eme étape : Placez le drapeau rouge à la fin de la portion de rue étudiée, si vous vous êtes trompé, |
vous pouvez redéplacer le drapeau vert</li> |
<li class="indication_geolocalisation">4eme étape : Voilà ! Votre zone d'étude est localisée ! Vous pouvez passer à la saisie de l'observation.</li> |
</ul> |
<input id="rue" name="rue" type="text" placeholder="Entrez un nom de ville, de lieu ou de rue..." value="" /> |
</li> |
<li id="map-canvas"></li> |
<li> |
<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=""/> |
</li> |
<li id="info-commune"> |
<label for="marqueur-commune">Commune</label><br /> |
<span id="marqueur-commune"> |
<span id="commune-nom" class="commune-info"></span> |
(<span id="commune-code-insee" class="commune-info" title="Code INSEE de la commune"></span>) |
</span> |
</li> |
<li> |
<input id="geolocaliser" type="button" value="Voir sur la carte"/> |
</li> |
</ul> |
</li> |
<li> |
<hr class="nettoyage" /> |
</li> |
<li> |
<ul> |
<li> |
<label for="rue_cote" title="Choisissez le (ou les) côté(s) de la rue que vous avez étudié"> |
<strong class="obligatoire">*</strong> |
Côté de la rue |
</label> |
<select id="rue_cote" name="rue_cote"> |
<option value="">Sélectionner un type de côté</option> |
<option value="pair">Pair</option> |
<option value="impair">Impair</option> |
<option value="2cotes">Les deux</option> |
</select> |
</li> |
</ul> |
</li> |
</ul> |
</fieldset> |
<fieldset id="partie-observation"> |
<legend>Observations</legend> |
<ul> |
<li> |
<label for="taxon" title="Choisissez une espèce rencontrée. Si vous avez trouvé d'autres espèces non listées, n'hésitez pas à le signaler dans les notes"> |
<strong class="obligatoire">*</strong> |
Espèce |
</label> |
<select id="taxon" name="taxon"> |
<option value="">Sélectionner une espèce</option> |
<?php foreach ($taxons as $taxon) :?> |
<option <?= $taxon['nom_ret']== $taxon['nom_fr'] ? 'style="font-style:italic;"' : '' ?> value="<?=$taxon['num_nom_sel']?>" |
title="<?=$taxon['nom_ret'].($taxon['nom_fr_autre'] != '' ? ' - '.$taxon['nom_fr_autre'] : '' )?>"> |
<?=$taxon['nom_fr']?> |
</option> |
<?php endforeach; ?> |
</select> |
</li> |
<li> |
<label for="liste-milieux" title="Indiquez le (ou les) milieu(x) dans lequel (lesquels) vous avez rencontré cette espèce"> |
<strong class="obligatoire">*</strong> |
Milieu |
</label> |
<ul id="liste-milieux"> |
<?php foreach ($milieux as $milieu => $description) : ?> |
<li> |
<input type="checkbox" class="milieu" name="milieu[]" value="<?=$milieu?>" |
<?=($description != '') ? 'title="'.$description.'"': '' ?>/> |
<?=$milieu?> |
</li> |
<?php endforeach; ?> |
</ul> |
<hr class="nettoyage" /> |
</li> |
<li> |
<label for="notes">Notes</label> |
<textarea id="notes" name="notes" rows="3" cols="4" placeholder="Indiquez nous en particulier le ou les outils d'identification que vous avez utilisé, et toute autre information concernant le milieu ou l'espèce" ></textarea> |
</li> |
</ul> |
</fieldset> |
</div><!-- zone-fiche-terrain--> |
</form> |
<div id="zone-fiche-terrain-photo"> |
<form id="form-upload" action="<?=$url_base?>saisie?projet=sauvages&service=upload-image" |
method="post" enctype="multipart/form-data"> |
<fieldset id="partie-photo"> |
<legend>Ajouter une photo</legend> |
<p id="miniature-info" class="discretion">Vous pouvez ajouter une photo correspondant à cette espèce. La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p> |
<input type="file" id="fichier" name="fichier" accept="image/jpeg"/> |
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/> |
<p id="miniature-msg"> </p> |
<div id="miniature"></div> |
<button id="effacer-miniature" type="button" style="display:none;">Effacer</button> |
</fieldset> |
</form> |
<div> |
<button id="ajouter-obs" type="button">Ajouter</button> |
</div> |
</div><!-- zone-fiche-terrain-photo --> |
<!-- Affiche le tableau récapitualif des observations ajoutées --> |
<div id="zone-liste-obs"> |
<form action="#" > |
<fieldset id="partie-preview"> |
<legend>Liste des observations à transmettre</legend> |
<table id="liste-obs"> |
<thead> |
<tr> |
<th>N°</th> |
<th>Date</th> |
<th>Adresse</th> |
<th>Nom</th> |
<th>Milieu(x)</th> |
<th title="Latitude / Longitude">Lat./Long.</th> |
<th>Photo</th> |
<th>Notes</th> |
<th></th> |
</tr> |
</thead> |
<tbody></tbody> |
</table> |
<button id="transmettre-obs" type="button">Transmettre</button> |
</fieldset> |
</form> |
</div> <!-- zone-liste-obs : wrap3 --> |
</div> |
<!-- Messages d'erreur du formulaire--> |
<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> |
<div id="dialogue-google-map" style="display: none;" title="Information sur Google Map"></div> |
<div id="dialogue-erreur" style="display: none;" title="Erreur"></div> |
<div id="chargement" style="position:fixed;z-index:1000;top:0;left:0;height:100%;width:100%;background:#777;background:rgba(90,86,93,0.7);text-align:center;display:none;"> |
<div id="chargement-centrage" style="position:relative;width:30%;margin:0 auto;top:30%;"> |
<img id="chargement-img" src="<?=$url_base?>modules/saisie/squelettes/sauvages/images/chargement_arbre.gif" alt="Transfert en cours..."/> |
<p id="chargement-txt" style="color:white;font-size:1.5em;"> |
Transfert des observations en cours...<br /> |
Cela peut prendre plusieurs minutes en fonction de la taille des images et du nombre d'observation à transférer. |
</p> |
</div> |
</div> |
<!-- Stats : Google Analytics--> |
<script type="text/javascript"> |
//<![CDATA[ |
var _gaq = _gaq || []; |
_gaq.push(['_setAccount', 'UA-20092557-1']); |
_gaq.push(['_trackPageview']); |
(function() { |
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
})(); |
//]]> |
</script> |
</body> |
</html> |