New file |
0,0 → 1,334 |
<!DOCTYPE html> |
<html> |
<head> |
<title>Saisie simplifiée du CEL</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="Jean-Pascal MILCENT" /> |
<meta name="keywords" content="Tela Botanica, CEL" /> |
<meta name="description" content="Widget de saisie simplifiée pour le CEL" /> |
|
<!-- Viewport Mobile --> |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<!-- Favicones --> |
<link rel="shortcut icon" type="image/x-icon" href="<?=$url_base?>/modules/saisie/squelettes/defaut/img/favicon.ico" /> |
|
<!-- 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> |
<!-- Jquery UI --> |
<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> |
<!-- Jquery Plugins --> |
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/validate/1.9.0/jquery.validate.min.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> |
|
<!-- Bootstrap --> |
<script type="text/javascript" src=""<?=$url_base?>modules/saisie/squelettes/defaut/js/bootstrap.js"></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'?>; |
// URL du web service réalisant l'insertion des données dans la base du CEL. |
var SERVICE_SAISIE_URL = "<?=$url_ws_saisie?>"; |
// URL du web service permettant l'auto-complétion des noms scientifiques. |
var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+ |
"masque={masque}&"+ |
"recherche=etendue&"+ |
"retour.format=min&"+ |
"retour.champs=nom_retenu,num_taxonomique,nom_retenu.id&"+ |
"navigation.limite=50"; |
// 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/defaut/img/marqueurs/epingle.png"; |
// URL de l'icône du bouton supprimer |
var SUPPRIMER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/supprimer.png"; |
// URL de l'icône du chargement en cours |
var CHARGEMENT_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif"; |
// URL de l'icône du calendrier |
var CALENDRIER_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png"; |
//]]> |
</script> |
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.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/defaut/css/bootstrap.css" rel="stylesheet" type="text/css" media="screen" /> |
<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" media="screen" /> |
<link href="<?=$url_base?>modules/saisie/squelettes/defaut/css/<?=isset($_GET['style']) ? $_GET['style'] : 'defaut'?>.css" rel="stylesheet" type="text/css" media="screen" /> |
</head> |
|
<body> |
<div class="container"> |
<div class="row-fluid"> |
<div class="span6 page-header"> |
<div class="row"> |
<img class="span2" src="<?=$url_base?>/modules/saisie/squelettes/defaut/img/logos/tela_botanica.png" alt="Tela Botanica" /> |
<h1 class="span4">Saisie simplifiée des observations</h1> |
</div> |
</div> |
<form id="form-observateur" class="span6 control-group" action="#" autocomplete="on"> |
<div class="well"> |
<h2>Observateur</h2> |
<div class="row-fluid"> |
<div class="span6"> |
<label for="prenom">Prénom</label> |
<input id="prenom" name="prenom" type="text" value=""/> |
</div> |
<div class="span6"> |
<label for="nom">Nom</label> |
<input id="nom" name="nom" type="text" value=""/> |
</div> |
</div> |
<div class="row-fluid"> |
<div class="span6"> |
<label for="courriel" |
title="Veuillez saisir votre adresse courriel."> |
<strong class="obligatoire">*</strong> Courriel |
</label> |
<div class="input-prepend"> |
<span class="add-on"> |
<i class="icon-envelope"></i> |
</span> |
<input id="courriel" name="courriel" type="text" value=""/> |
</div> |
</div> |
<div class="span6"> |
<label for="courriel_confirmation" title="Veuillez saisir confirmer votre adresse courriel."> |
<strong class="obligatoire">*</strong> Courriel (confirmation) |
</label> |
<div class="input-prepend"> |
<span class="add-on"> |
<i class="icon-envelope"></i> |
</span> |
<input id="courriel_confirmation" name="courriel_confirmation" type="text" value=""/> |
</div> |
</div> |
</div> |
</div> |
</form> |
</div> |
<div class="row-fluid"> |
<div class="span6"> |
<form id="form-station" class="well control-group" action="#" enctype="multipart/form-data" autocomplete="on"> |
<h2>Lieu du relevé</h2> |
<div class="row-fluid"> |
<div class="span12"> |
<label for="map_canvas" title="Veuillez localiser l'observation"> |
<strong class="obligatoire">*</strong> |
Géolocalisation |
</label> |
<div id="map-canvas"></div> |
</div> |
</div> |
<div class="row-fluid"> |
<label for="coordonnees-geo" class="span7"> |
<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> |
<div id="info-commune" class="span5"> |
<span for="marqueur-commune">Commune : </span> |
<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> |
</div> |
</div> |
<div id="coordonnees-geo" class="well" style="display:none;"> |
<div class="row-fluid form-inline"> |
<div id="coord-lat" class="span4"> |
<label for="latitude">Latitude</label> |
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/> |
</div> |
<div id="coord-lng" class="span4"> |
<label for="longitude">Longitude</label> |
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/> |
</div> |
<div class="span1"> |
<input id="geolocaliser" type="button" value="Voir sur la carte"/> |
</div> |
</div> |
</div> |
<div class="row-fluid"> |
<div class="span4"> |
<label for="lieudit"> |
Lieu-dit |
</label> |
<input type="text" id="lieudit" class="input-medium" name="lieudit" value="" /> |
</div> |
<div class="span4"> |
<label for="station"> |
Station |
</label> |
<input type="text" id="station" class="input-medium" name="station" value="" /> |
</div> |
<div class="span4"> |
<label for="milieux"> |
Milieu |
</label> |
<input type="text" id="milieu" class="input-medium" name="milieu" value="" /> |
</div> |
</div> |
</form> |
</div> |
<div class="span6"> |
<div class="well"> |
<form id="form-obs" class="" action="#" autocomplete="on"> |
<h2>Observations</h2> |
<div class="row-fluid"> |
<div class="span4"> |
<label for="date" title="Veuillez indiquer la date du relevé au format jj/mm/aaaa"> |
<strong class="obligatoire">*</strong> Date du relevé |
</label> |
<div class="input-prepend"> |
<span id="date-icone" class="add-on"></span> |
<input id="date" class="input-small" name="date" type="text" value="" |
placeholder="jj/mm/aaaa"/> |
</div> |
</div> |
<div class="span8"> |
<label for="taxon" title="Choisissez une espèce"> |
<strong class="obligatoire">*</strong> |
Espèce |
</label> |
<div class="input-prepend"> |
<span class="add-on"> |
<i class="icon-leaf"></i> |
</span> |
<input type="text" id="taxon" name="taxon" value="" /> |
</div> |
</div> |
</div> |
<div class="row-fluid"> |
<div class="span12"> |
<label for="notes">Notes</label> |
<textarea id="notes" class="span5" rows="7" name="notes" |
placeholder="Vous pouvez éventuellement ajouter une note sur votre observation..." |
></textarea> |
</div> |
</div> |
</form> |
<form id="form-upload" class="well form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&service=upload-image" |
method="post" enctype="multipart/form-data"> |
<label>Photo</label> |
<input type="file" id="fichier" name="fichier" accept="image/jpeg"/> |
<input type="hidden" name="MAX_FILE_SIZE" value="5242880"/> |
<p id="miniature-info" class="discretion help-inline">La photo doit être au format JPEG et ne doit pas excéder 5Mo.</p> |
<div id="miniature"></div> |
<button id="effacer-miniature" type="button" style="display:none;">Effacer</button> |
<p id="miniature-msg" class="span12"> </p> |
</form> |
<div class="row-fluid"> |
<div class="span12"> |
<button id="ajouter-obs" class="btn btn-primary btn-large" type="button" |
title="Ajoute l'observation courante à la liste ci-dessous."> |
Créer |
</button> |
</div> |
</div> |
</div> |
</div> |
</div> |
<!-- Affiche le tableau récapitualif des observations ajoutées --> |
<div id="zone-liste-obs" class="row-fluid"> |
<form action="#" class="well form-horizontal"> |
<div class="row-fluid"> |
<h2>Liste des observations à transmettre</h2> |
<table id="liste-obs" class="table table-striped table-bordered table-condensed"> |
<thead> |
<tr> |
<th><i class="icon-list illustration"> </i>N°</th> |
<th><i class="icon-calendar illustration"> </i>Date</th> |
<th><i class="icon-leaf illustration"> </i>Nom</th> |
<th title="Latitude / Longitude"><i class="icon-map-marker"> </i>Lat./Long.</th> |
<th>Commune</th> |
<th>Lieu-dit</th> |
<th>Station</th> |
<th>Milieu</th> |
<th>Photo</th> |
<th>Notes</th> |
<th><i class="icon-trash icone"> </i>Action</th> |
</tr> |
</thead> |
<tbody></tbody> |
</table> |
</div> |
<div class="row-fluid"> |
<div class="span12 droite"> |
<button id="transmettre-obs" class="btn btn-primary btn-large" type="button" |
title="Ajoute les observations à votre Carnet en Ligne et les rend publiques."> |
Transmettre |
</button> |
</div> |
</div> |
</form> |
</div> |
|
<footer class="row-fluid"> |
<p class="span12">© Tela Botanica 2012</p> |
</footer> |
</div> |
|
<!-- Messages d'erreur du formulaire--> |
<div id="dialogue-bloquer-copier-coller" class="alert alert-error" 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" class="alert alert-info" style="display: none;" title="Information aucune observation"> |
<p>Veuillez saisir des observations pour les transmettres.</p> |
</div> |
|
<div id="dialogue-obs-transaction" class="alert" style="display: none;" title="Transmission des observations"></div> |
|
<div id="dialogue-erreur" class="alert alert-error" 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/img/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> |