Subversion Repositories eFlore/Applications.cel

Compare Revisions

Ignore whitespace Rev 1238 → Rev 1239

/branches/v1.5-cisaille/widget/modules/saisie/squelettes/defaut/defaut.tpl.html
32,13 → 32,13
<script type="text/javascript" src="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/js/jquery.ui.datepicker-fr.js"></script>
<!-- Jquery Plugins -->
<!-- Jquery Validate : nécessaire pour la validation des formulaires -->
<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.1/js/validate/1.9.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/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>
<!-- Jquery Form :nécessaire pour l'upload des images -->
<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="http://www.tela-botanica.org/commun/bootstrap/2.0.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://www.tela-botanica.org/commun/bootstrap/2.0.2/js/bootstrap.min.js"></script>
<!-- Javascript : appli saisie -->
<script type="text/javascript">
65,7 → 65,7
var SERVICE_AUTOCOMPLETION_NOM_SCI_URL = "<?=$url_ws_autocompletion_ns?>?"+
"masque={masque}&"+
"recherche=etendue&"+
"retour.champs=famille,nom_retenu,num_taxonomique,nom_retenu.id&"+
"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
"version.projet="+NOM_SCI_VERSION+"&"+
"ns.structure=au"+"&"+
"navigation.limite="+AUTOCOMPLETION_ELEMENTS_NBRE;
80,6 → 80,8
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";
// URL de l'icône du calendrier
var PAS_DE_PHOTO_ICONE_URL = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
//]]>
</script>
<script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/defaut.js"></script>
86,8 → 88,8
<!-- CSS -->
<link href="http://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.18/css/smoothness/jquery-ui-1.8.18.custom.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.1/css/bootstrap-responsive.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" />
<link href="http://www.tela-botanica.org/commun/bootstrap/2.0.2/css/bootstrap-responsive.min.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>
 
100,14 → 102,16
<div class="span5">
<h1>Outil de saisie simplifiée (CEL)</h1>
<p>
Ce widget de saisie vous permet de partager simplement vos observations avec le réseau Tela Botanica.
Ce widget de saisie vous permet de partager simplement vos observations avec le
<a href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>.
Complétez les champs, créez jusqu'à 10 observations (bouton "créer") puis partagez-les (bouton "transmettre").
Retrouvez ensuite facilement ces observations dans votre
<a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.
</p>
<p class="discretion">
Attention : si vos observations ne sont pas partagées (bouton "transmettre"),
elles seront perdues. Nous vous conseillons donc de partager un nombre limité d'observations.
Attention : si vous actualisez la page, fermez votre navigateur... vos observations qui
ne sont pas partagées (bouton "transmettre") seront perdues.
Nous vous conseillons donc de créer un nombre limité d'observations et de les transmettre régulièrement.
</p>
</div>
</div>
116,19 → 120,20
<div class="span6">
<div class="well">
<fieldset>
<h2>Observateur</h2>
<form id="form-observateur" class="" action="#" autocomplete="on">
<form id="form-observateur" action="#" class="" autocomplete="on">
<div class="row-fluid">
<div class="span6">
<label for="prenom">Prénom</label>
<div>
<input id="prenom" name="prenom" type="text"/>
<input id="prenom" name="prenom" class="span3" type="text"/>
</div>
</div>
<div class="span6">
<label for="nom">Nom</label>
<div>
<input id="nom" name="nom" type="text"/>
<input id="nom" name="nom" class="span3" type="text"/>
</div>
</div>
</div>
141,19 → 146,18
<div class="input-prepend">
<span class="add-on">
<i class="icon-envelope"></i>
</span>
<input id="courriel" name="courriel" type="text" value=""/>
</span><input id="courriel" class="input-medium" name="courriel" type="text"/>
</div>
</div>
<div class="span6">
<label for="courriel_confirmation" title="Veuillez saisir confirmer votre adresse courriel.">
<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=""/>
</span><input id="courriel_confirmation" class="input-medium" name="courriel_confirmation" type="text"/>
</div>
</div>
</div>
166,6 → 170,7
</button>
</div>
</div>
</fieldset>
</div>
</div>
</div>
182,268 → 187,238
</div>
</div>
</div>
<div class="row-fluid well">
<div class="span6">
<div class="row-fluid">
<div class="span12">
<div class="well">
<div class="row-fluid">
<div class="span12">
<h2>Lieu du relevé</h2>
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="map_canvas" title="Veuillez localiser l'observation">
<strong class="obligatoire">*</strong>
Géolocalisation
</label>
</div>
<div class="span8 droite">
<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
<div class="control-group">
<label for="carte-recherche">Rechercher</label>
<input id="carte-recherche" class="search-query" type="text" value=""
rel="tooltip"
title="Permet de centrer la carte sur le lieu recherché."
placeholder="Centrer la carte sur un lieu..."/>
</div>
</form>
</div>
</div>
<div class="row-fluid">
<div class="span12">
<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"
rel="tooltip"
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"
rel="tooltip"
title="Code INSEE de la commune"></span>)
</span>
</div>
</div>
<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
<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>
<div>
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
<div class="span6">
<div>
<div class="row-fluid">
<div class="span12">
<h2>Lieu du relevé</h2>
</div>
</div>
<div id="coord-lng" class="span4">
<label for="longitude">Longitude</label>
<div>
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
<div class="row-fluid">
<div class="span4">
<label for="map_canvas" title="Veuillez localiser l'observation">
<strong class="obligatoire">*</strong>
Géolocalisation
</label>
</div>
<div class="span8 droite">
<form id="form-carte-recherche" class="form-search form-horizontal" action="#" >
<div class="control-group">
<label for="carte-recherche">Rechercher</label>
<input id="carte-recherche" class="search-query" type="text" value=""
rel="tooltip"
title="Permet de centrer la carte sur le lieu recherché."
placeholder="Centrer la carte sur un lieu..."/>
</div>
</form>
</div>
</div>
<div class="span1">
<div>
<input id="geolocaliser" type="button" value="Voir sur la carte"
rel="tooltip"
title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
<div class="row-fluid">
<div class="span12">
<div id="map-canvas"></div>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4" rel="tooltip" title="Le lieu-dit est la dénomination administrative du lieu que l’on peut trouver sur une carte au 1/25 000, sur le cadastre ou au dire des habitants locaux." >
<label for="lieudit">
Lieu-dit
</label>
<div>
<input type="text" id="lieudit" class="input-medium" name="lieudit"/>
<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"
rel="tooltip"
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"
rel="tooltip"
title="Code INSEE de la commune"></span>)
</span>
</div>
</div>
<form id="form-station" class="control-group" action="#" enctype="multipart/form-data" autocomplete="on">
<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>
<div>
<input id="latitude" class="input-mini" name="latitude" type="text" value=""/>
</div>
</div>
<div id="coord-lng" class="span4">
<label for="longitude">Longitude</label>
<div>
<input id="longitude" class="input-mini" name="longitude" type="text" value=""/>
</div>
</div>
<div class="span1">
<div>
<input id="geolocaliser" type="button" value="Voir sur la carte"
rel="tooltip"
title="Centre la carte sur les coordonnées de latitude et longitude saisies."/>
</div>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span4" rel="tooltip" title="Le lieu-dit est la dénomination administrative du lieu que l’on peut trouver sur une carte au 1/25 000, sur le cadastre ou au dire des habitants locaux." >
<label for="lieudit">Lieu-dit</label>
<div>
<input type="text" id="lieudit" class="span2" name="lieudit"/>
</div>
</div>
<div class="span4" rel="tooltip" title="La station est la dénomination qui caractérise le lieu de la collecte d’un point de vue écologique. Il est recommandéde choisir une station qui soit homogène dans sa compositionfloristique afin de refléter le plus fidèlement possible son identité sous l’angle phytosociologique. Exemple : zone humide située au centre du près. " >
<label for="station">Station</label>
<div>
<input type="text" id="station" class="span2" name="station"/>
</div>
</div>
<div class="span4" rel="tooltip" title="Le milieu est un terme générique caractérisant la station. On peut se référer pour cela à des codes comme Corine Biotope ou le nom d’une unité phytosociologique. Exemple : prairie humide">
<label for="milieux">Milieu</label>
<div>
<input type="text" id="milieu" class="span2" name="milieu" />
</div>
</div>
</div>
</form>
</div>
<div class="span4" rel="tooltip" title="La station est la dénomination qui caractérise le lieu de la collecte d’un point de vue écologique. Il est recommandéde choisir une station qui soit homogène dans sa compositionfloristique afin de refléter le plus fidèlement possible son identité sous l’angle phytosociologique. Exemple : zone humide située au centre du près. " >
<label for="station">
Station
</label>
<div>
<input type="text" id="station" class="input-medium" name="station"/>
</div>
<div class="span6">
<form id="form-obs" action="#" autocomplete="on">
<h2>Observations</h2>
<div class="row-fluid">
<div class="span4" rel="tooltip" title="Vous pouvez cliquer sur l'icône de calendrier pour sélectionner un date dans un calendrier.">
<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"
placeholder="jj/mm/aaaa" />
</div>
</div>
<div id="taxon-input-groupe" class="span8" rel="tooltip" title="Sélectionnez une espèce dans la liste déroulante." >
<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" />
</div>
</div>
</div>
</div>
<div class="span4" rel="tooltip" title="Le milieu est un terme générique caractérisant la station. On peut se référer pour cela à des codes comme Corine Biotope ou le nom d’une unité phytosociologique. Exemple : prairie humide">
<label for="milieux">
Milieu
</label>
<div>
<input type="text" id="milieu" class="input-medium" name="milieu" />
<div class="row-fluid">
<div class="span12">
<label for="notes">Commentaires</label>
<div>
<textarea id="notes" class="span6" rows="7" name="notes"
placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="span6">
<div class="well">
<form id="form-obs" action="#" autocomplete="on">
<h2>Observations</h2>
<div class="row-fluid">
<div class="span4" rel="tooltip" title="Vous pouvez cliquer sur l'icône de calendrier pour sélectionner un date dans un calendrier.">
<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"
placeholder="jj/mm/aaaa" />
</form>
<form id="form-upload" class="form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
method="post" enctype="multipart/form-data">
<div rel="tooltip" title="Ajouter une photo de votre observation. Elle doit être au format JPEG et ne doit pas excéder 5Mo.">
<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">&nbsp;</p>
</div>
</div>
<div id="taxon-input-groupe" class="span8" rel="tooltip" title="Sélectionnez une espèce dans la liste déroulante." >
<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" />
</div>
</div>
</form>
</div>
<div class="row-fluid">
<div class="span12">
<label for="notes">Commentaires</label>
<div>
<textarea id="notes" class="span5" rows="7" name="notes"
placeholder="vous pouvez éventuellement ajouter des informations complémentaires à votre observation (altitude, taille de la plante...)"></textarea>
</div>
<div class="span12 centre">
<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>
</form>
<form id="form-upload" class="well form-horizontal" action="<?=$url_base?>saisie?projet=sauvages&amp;service=upload-image"
method="post" enctype="multipart/form-data">
<div rel="tooltip" title="Ajouter une photo de votre observation. Elle doit être au format JPEG et ne doit pas excéder 5Mo.">
<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">&nbsp;</p>
</div>
</form>
</div>
</div>
</div>
<div class="row-fluid">
<div class="span12 centre">
<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>
<!-- 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">
<div class="span12">
<div class="well">
<h2>Observations à transmettre : <span class="obs-nbre">0</span></h2>
<table id="liste-obs" class="table table-bordered table-condensed">
<thead>
<tr>
<th rowspan="3">Photo</th>
<th><i class="icon-leaf illustration">&nbsp;</i>Nom</th>
<th colspan="2">Commune (code INSEE) [<span title="Latitude / Longitude"><i class="icon-map-marker">&nbsp;</i>Lat./Long.</span>]</th>
<th rowspan="3">Notes</th>
<th rowspan="3"><i class="icon-trash icone">&nbsp;</i>Action</th>
</tr>
<tr>
<!-- Photo -->
<th rowspan="2"><i class="icon-calendar illustration">&nbsp;</i>Date</th>
<th>Lieu-dit</th>
<th>Station</th>
<!-- Notes -->
<!-- Action -->
</tr>
<tr>
<!-- N° -->
<!-- Photo -->
<!-- Nom scientifique & Date -->
<th colspan="2">Milieu</th>
<!-- Notes -->
<!-- Action -->
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="row">
<div class="zone-alerte span6 offset3">
<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Attention : aucune observation</h4>
<p>Veuillez saisir des observations pour les transmettres.</p>
<div id="liste-obs"></div>
<div class="row">
<div class="zone-alerte span6 offset3">
<div id="dialogue-zero-obs" class="alert alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Attention : aucune observation</h4>
<p>Veuillez saisir des observations pour les transmettres.</p>
</div>
<div id="dialogue-obs-transaction" class="alert alert-success alert-block" style="display: none;"">
<a class="close">×</a>
<h4 class="alert-heading">Information : transmission des observations</h4>
<div class="alert-txt"></div>
</div>
<div id="dialogue-erreur" class="alert alert-error alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Erreur : transmission des observations</h4>
<div class="alert-txt"></div>
</div>
</div>
<div id="dialogue-obs-transaction" class="alert alert-success alert-block" style="display: none;"">
<a class="close">×</a>
<h4 class="alert-heading">Information : transmission des observations</h4>
<div class="alert-txt"></div>
</div>
<div class="row-fluid">
<div class="span12 droite">
<button id="transmettre-obs" class="btn btn-primary btn-large" type="button" disabled="disabled"
title="Ajoute les observations à votre Carnet en Ligne et les rend publiques.">
Transmettre
</button>
</div>
<div id="dialogue-erreur" class="alert alert-error alert-block" style="display: none;">
<a class="close">×</a>
<h4 class="alert-heading">Erreur : transmission des observations</h4>
<div class="alert-txt"></div>
</div>
</div>
</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>
</div>
<footer class="row-fluid">
<p class="span12">&copy; Tela Botanica 2012</p>
</footer>
</div>
<!-- Fenêtres modales -->
<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>
<!-- Fenêtres modales -->
<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>
</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>