Subversion Repositories eFlore/Applications.cel

Rev

Rev 2875 | Blame | Compare with Previous | Last modification | View Log | RSS feed

<?php 
        if (!isset($_GET['mission'])) {
                $projets = explode(',', $_GET['projet']);
                if(count($projets) > 1) {
                        $_GET['mission'] = $projets[1];
                }
        }
?>
<?php $mission = isset($_GET['mission']) ? strtolower($_GET['mission']) : null; ?>
<?php $missionMotCle = isset($_GET['mission']) ? $_GET['mission'] : 'Inconnue'; ?>
<?php $missionNom = isset($_GET['mission']) ? $nom_mission : 'Inconnue'; ?>
<!DOCTYPE html>
<html lang="fr">
        <head>
                <?php if (isset($_GET['mission'])) :?>
                        <?php if (isset($titre)) :?>
                                <title><?=$titre ?></title>
                        <?php endif; ?>
                <?php else : ?>
                        <title>Mission flore inconnue !</title>
                <?php endif; ?>

                <meta charset="utf-8">

                <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="Projet Missions Flore - 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="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />

                <!-- Javascript : bibliothèques -->
                <!-- Google Map v3 -->
                <!--<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>-->
                <script src="http://maps.google.com/maps/api/js?language=fr&amp;region=FR"></script>
                <!-- Proj4js -->
                <script type="text/javascript" src="http://resources.tela-botanica.org/proj4js/2.2.1/proj4.js"></script>

                <!-- Jquery -->
                <script src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
                <!-- Jquery UI : nécessaire pour le mini-calendrier et l'auto-complétion -->
                <script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
                <script src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/datepicker-fr.js"></script>
                <!-- Jquery Plugins -->
                <!-- Jquery Validate : nécessaire pour la validation des formulaires -->
                <script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/jquery.validate.min.js"></script>
                <script src="http://resources.tela-botanica.org/jquery/validate/1.13.0/localization/messages_fr.js"></script>
                <!-- Jquery Form :nécessaire pour l'upload des images -->
                <script src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>

                <!-- Bootstrap -->
                <script src="http://resources.tela-botanica.org/bootstrap/3.2.0/js/bootstrap.min.js"></script>

                <!-- Javascript : appli saisie -->
                <script type="text/javascript" src="<?=$url_base?>modules/saisie/squelettes/defaut/js/WidgetSaisie.js"></script>
                <script src="<?=$url_base?>modules/saisie/squelettes/missions-flore/js/WidgetSaisieMissionsFlore.js"></script>
                <script>
                //<![CDATA[
                $(document).ready(function() {
                                var widget = new WidgetSaisieMissionsFlore();

                                // La présence du parametre 'debug' dans l'URL enclenche le débogage
                                widget.debug = <?=isset($_GET['debug']) ? 'true' : 'false'?>;
                                // La présence du parametre 'html5' dans l'URL enclenche les fonctions avancées HTML5
                                widget.html5 = <?=isset($_GET['html5']) ? 'true' : 'false'?>;
                                // Mot-clé du widget/projet
                                widget.tagProjet = "WidgetSaisie,Missions-Flore,<?=$missionMotCle?>";
                                // Mots-clés à ajouter aux images
                                widget.tagImg = "<?=isset($_GET['tag-img']) ? $_GET['tag-img'] : ''?>";
                                widget.separationTagImg = "<?= isset($_GET['motcle']) && isset($_GET['tag-img']) ? ',' : '' ?>";
                                widget.tagImg = <?=isset($_GET['motcle']) ? "'".$_GET['motcle']."' + widget.separationTagImg + widget.tagImg" : 'widget.tagImg' ?>;
                                // Mots-clés à ajouter aux observations
                                widget.tagObs = "<?=isset($_GET['tag-obs']) ? $_GET['tag-obs'] : ''?>";
                                widget.separationTagObs = "<?= isset($_GET['projet']) && isset($_GET['tag-obs']) ? ',' : '' ?>";
                                widget.tagObs = <?=isset($_GET['projet']) ? "'".$_GET['projet']."' + widget.separationTagObs + widget.tagObs" : 'widget.tagObs' ?>;
                                // Précharger le formulaire avec les infos d'une observation
                                widget.obsId = "<?=isset($_GET['id-obs']) ? $_GET['id-obs'] : ''?>";
                                // URL du web service réalisant l'insertion des données dans la base du CEL.
                                widget.serviceSaisieUrl = "<?=$url_ws_saisie?>";
                                // URL du web service permettant de récupérer les infos d'une observation du CEL.
                                widget.serviceObsUrl = "<?=$url_ws_obs?>";
                                // Code du référentiel utilisé pour les nom scientifiques.
                                widget.nomSciReferentiel = "<?=$ns_referentiel?>";
                                // Indication de la présence d'une espèce imposée
                                widget.especeImposee = "<?=$espece_imposee; ?>";
                                // Tableau d'informations sur l'espèce imposée
                                widget.infosEspeceImposee = <?=$infos_espece; ?>;
                                // Nombre d'élément dans les listes d'auto-complétion
                                widget.autocompletionElementsNbre = 20;
                                // Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
                                widget.serviceAutocompletionNomSciUrlTpl = "<?=$url_ws_autocompletion_ns_tpl?>?"+
                                        "masque={masque}&"+
                                        "recherche=etendue&"+
                                        "retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
                                        "retour.tri=alpharet&"+ // tri "à la CeL"
                                        "ns.structure=au"+"&"+
                                        "navigation.limite=" + widget.autocompletionElementsNbre;
                                // Nombre d'observations max autorisé avant transmission
                                widget.obsMaxNbre = 10;
                                // Durée d'affichage en milliseconde des messages d'informations
                                widget.dureeMessage = 15000;
                                // Squelette d'URL du web service de l'annuaire.
                                widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
                                // Squelette d'URL du web service d'eFlore fournissant les noms de communes.
                                widget.serviceNomCommuneUrl = "http://api.tela-botanica.org/service:eflore:0.1/osm/nom-commune?lon={lon}&lat={lat}";
                                // Squelette d'URL du web service d'eFlore fournissant les noms de communes hors de France (localisation approximative).
                                //widget.serviceNomCommuneUrlAlt = "http://api.tela-botanica.org/service:eflore:0.1/wikipedia/nom-commune?lon={lon}&lat={lat}&nbre=1";
                                // Squelette d'URL du web service d'eFlore fournissant l'altitude
                                widget.serviceAltitudeUrl = "http://api.tela-botanica.org/service:eflore:0.1/nasa-srtm/altitude?lon={lon}&lat={lat}";
                                // URL du marqueur à utiliser dans la carte Google Map
                                widget.googleMapMarqueurUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/marqueurs/epingle.png";
                                // URL de l'icône du chargement en cours
                                widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement.gif";
                                // URL de l'icône du chargement en cours d'une image
                                widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/chargement-image.gif";
                                // URL de l'icône du calendrier
                                widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/calendrier.png";
                                // URL de l'icône pour une photo manquante
                                widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/missions-flore/img/icones/pasdephoto.png";

                                // Initialisation du bousin
                                widget.init();
                        });
                //]]>
                </script>

                <!-- CSS -->
                <link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/jquery-ui.min.css" />
                <link rel="stylesheet" href="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/css/themes/smoothness/theme.css" />
                <link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap.min.css" />
                <link rel="stylesheet" href="http://resources.tela-botanica.org/bootstrap/3.2.0/css/bootstrap-theme.min.css" />
                <link rel="stylesheet" href="<?=$url_base?>modules/saisie/squelettes/missions-flore/css/<?=isset($_GET['style']) ? $_GET['style'] : 'missions-flore'?>.css" />

                <!--  Google Analytics -->
                <?php if($prod): ?>
                        <?php include "analytics.html"; ?>
                <?php endif; ?>
        </head>

        <body data-spy="scroll">
                <div class="container">
                        <div class="page-header">
                                <?php if (isset($_GET['mission'])) :?>
                                        <?php if (file_exists('./modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html')) :?>
                                                <?php include_once './modules/saisie/squelettes/missions-flore/squelettes/'.$_GET['mission'].'/titre.tpl.html'; ?>
                                        <?php endif; ?>
                                <?php else : ?>
                                        <img id="logo-titre" class="span1" src="http://resources.tela-botanica.org/tb/img/256x256/logo_sans_mots.png" alt="Tela Botanica" />
                                        Mission flore inconnue !
                                <?php endif; ?>
                        </div>
                        <div class="row">
                                <div class="col-md-6">
                                        <div id="intro" class ="well well-lg">
                                                <a class="fermer" data-toggle="collapse" data-target="#intro-txt">
                                                        <h3 class="titre">
                                                                La mission «&nbsp;<?=$missionNom ?>&nbsp;»
                                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                                        </h3>
                                                </a>
                                                <div id="intro-txt" class="collapse in">
                                                        <?php if (file_exists("./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html")) :?>
                                                                <?php include_once "./modules/saisie/squelettes/missions-flore/squelettes/$mission/projet.tpl.html"; ?>
                                                        <?php else : ?>
                                                                <p>Mission flore inconnue !</p>
                                                        <?php endif; ?>
                                                </div>
                                        </div>
                                </div>

                                <div class="col-md-6">
                                        <div id="aide" class="well well-lg">
                                                <a class="fermer" data-toggle="collapse" data-target="#aide-txt">
                                                        <h3 class="titre">
                                                                Aide
                                                                <span class="glyphicon glyphicon-plus-sign"></span>
                                                        </h3>
                                                </a>
                                                <div id="aide-txt" class="collapse in">
                                                        <p>
                                                                Cet outil vous permet de partager simplement vos observations avec
                                                                le <a target="_blank" href="http://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
                                                                (sous <a target="_blank" href="http://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
                                                                Identifiez-vous bien pour ensuite retrouver et gérer vos données dans
                                                                <a target="_blank" href="http://www.tela-botanica.org/appli:cel">votre Carnet en ligne</a>.
                                                                Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
                                                                Elles apparaissent immédiatement sur les
                                                                <a target="_blank" href="http://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
                                                        </p>
                                                        <p class="discretion">
                                                                Pour toute question ou remarque,
                                                                <a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
                                                                        target="_blank"
                                                                        onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
                                                                        contactez-nous</a>
                                                        </p>
                                                        <p class="discretion">
                                                                Une fois familiarisé avec l'interface vous pouvez cliquer sur le bouton suivant pour désactiver l'aide&nbsp;:
                                                                <button id="btn-aide" class="btn btn-xs btn-success">
                                                                        <span class="glyphicon glyphicon-question-sign icon-white"></span>
                                                                        <span id="btn-aide-txt">Désactiver l'aide</span>
                                                                </button>
                                                        </p>
                                                </div>
                                        </div>
                                </div>
                        </div>

                        <div class="well well-lg">
                                <h2>Observateur</h2>
                                <form id="form-observateur" role="form" autocomplete="on">
                                        <div class="row">
                                                <div class="col-md-6 form-group has-tooltip" data-placement="right"
                                                        title="Saisissez le courriel avec lequel vous êtes inscrit à Tela Botanica.
                                                                Si vous n'êtes pas inscrit, ce n'est pas grave, vous pourrez le faire
                                                                ultérieurement. Des informations complémentaires vont vous être
                                                                demandées : prénom et nom.">
                                                        <label for="courriel"  title="Veuillez saisir votre adresse courriel.">
                                                                <strong class="obligatoire">*</strong>
                                                                Courriel
                                                        </label>
                                                        <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                                                                <input id="courriel" name="courriel" class="form-control" type="text"/>
                                                                <input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
                                                        </div>
                                                </div>
                                                <div id="zone-courriel-confirmation" class="col-md-6 form-group has-feedback hidden">
                                                        <label for="courriel_confirmation" title="Veuillez saisir confirmer le courriel.">
                                                                <strong class="obligatoire">*</strong> Courriel (confirmation)
                                                        </label>
                                                        <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-envelope"></span></span>
                                                                <input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="text"/>
                                                        </div>
                                                </div>
                                        </div>
                                        <div id="zone-prenom-nom" class="row hidden">
                                                <div class="col-md-6 form-group">
                                                        <label for="prenom">Prénom</label>
                                                        <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                                                <input id="prenom" name="prenom" class="form-control" type="text"/>
                                                        </div>
                                                </div>
                                                <div class="col-md-6 form-group">
                                                        <label for="nom">Nom</label>
                                                        <div class="input-group">
                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
                                                                <input id="nom" name="nom" class="form-control" type="text"/>
                                                        </div>
                                                </div>
                                        </div>
                                </form>
                        </div>

                        <!-- Messages d'erreur du formulaire-->
                        <div class="row">
                                <div class="zone-alerte col-md-6 col-md-offset-3">
                                        <div id="dialogue-bloquer-copier-coller" class="alert alert-info alert-block" style="display:none;">
                                                <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="alert-heading">Information : copier/coller</h4>
                                                <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-courriel-introuvable" class="alert alert-info alert-block" style="display:none;">
                                                <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="alert-heading">Information : courriel introuvable</h4>
                                                <p>
                                                        Vous n'êtes pas inscrit à Tela Botanica avec ce courriel.<br/>
                                                        Veuillez compléter les champs supplémentaires ou indiquer votre courriel d'inscription.<br/>
                                                        Pour retrouver vos observations dans le <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>,
                                                        il sera nécesaire de <a href="http://www.tela-botanica.org/page:inscription">vous inscrire à Tela Botanica</a>.
                                                </p>
                                        </div>
                                        <div id="dialogue-google-map" class="alert alert-info alert-block" style="display: none;">
                                                <button type="button" class="close"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                                                <h4 class="alert-heading">Information sur Google Map</h4>
                                                <div class="contenu"></div>
                                        </div>
                                </div>
                        </div>

                        <div class="well well-lg">
                                <div class="row">
                                        <div class="col-md-12">
                                                <h2>Lieu et date du relevé</h2>
                                        </div>
                                </div>
                                <div class="row">
                                        <div class="col-md-6">
                                                <form id="form-obs-date" class="form-horizontal" role="form">
                                                        <div class="form-group has-tooltip"
                                                                        title="Vous pouvez cliquer sur l'icône de calendrier pour
                                                                                sélectionner une date dans un calendrier.">
                                                                <label for="date" class="col-sm-3 control-label"
                                                                                title="Veuillez indiquer la date du relevé au format jj/mm/aaaa">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Date du relevé
                                                                </label>
                                                                <div class="col-sm-9">
                                                                        <div class="input-group">
                                                                                <span id="date-icone" class="input-group-addon add-on"></span>
                                                                                <input id="date" name="date" class="form-control" type="text" placeholder="jj/mm/aaaa" />
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </form>
                                        </div>
                                        <hr />
                                </div>

                                <div class="row">
                                        <div class="col-md-6">
                                                <div class="row">
                                                        <div class="col-md-3">
                                                                <strong title="Veuillez localiser l'observation">Géolocalisation</strong>
                                                        </div>
                                                        <div class="col-md-9 text-right">
                                                                <form id="form-carte-recherche" class="form-horizontal" role="form">
                                                                        <div class="form-group">
                                                                                <label for="carte-recherche" class="sr-only">Rechercher</label>
                                                                                <div class="col-md-12">
                                                                                        <div class="input-group">
                                                                                                <input id="carte-recherche" class="form-control has-tooltip" type="search" value=""
                                                                                                                title="Permet de centrer la carte sur le lieu recherché. Sélectionner un lieu dans la liste déroulante pour centrer la carte."
                                                                                                                placeholder="Centrer la carte sur un lieu..."/>
                                                                                                <span class="input-group-addon"><span class="glyphicon glyphicon-search"></span></span>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </form>
                                                        </div>
                                                </div>
                                                <div class="row">
                                                        <div class="col-md-12">
                                                                <div id="map-canvas" class="has-tooltip"
                                                                        title="Vous pouvez cliquer sur la carte pour déplacer le marqueur
                                                                                représentant votre station ou bien le glisser-déposer sur
                                                                                le lieu souhaité."></div>
                                                        </div>
                                                </div>
                                                <div class="row">
                                                        <div id="info-altitude" class="col-md-5">
                                                                <span>Altitude : </span>
                                                                <span id="marqueur-altitude"><span id="altitude"></span> m</span>
                                                        </div>

                                                        <div id="info-commune" class="col-md-7">
                                                                <span>Commune : </span>
                                                                <span id="marqueur-commune">
                                                                        <span id="commune-nom" class="commune-info"></span>
                                                                        (<span id="commune-code-insee" class="commune-info has-tooltip"
                                                                                title="Code INSEE de la commune"></span>)
                                                                </span>
                                                        </div>
                                                </div>
                                        </div>
                                        <div class="col-md-6">
                                                <form id="form-station" class="form-horizontal" role="form" autocomplete="on">
                                                        <div class="form-group has-tooltip"
                                                                title="Toponyme plus précis que la commune, utilisé localement et se trouvant souvent sur les cartes au 1/25 000." >
                                                                <label for="lieudit" class="col-sm-2 control-label">
                                                                        Lieu-dit
                                                                </label>
                                                                <div class="col-sm-10">
                                                                        <input id="lieudit" class="form-control" name="lieudit" type="text" />
                                                                </div>
                                                        </div>

                                                        <div class="span6 form-group has-tooltip"
                                                                title="Lieu précis de l'observation définissant une unité écologique homogène (ex: le pré derrière la maison)." >
                                                                <label for="station" class="col-sm-2 control-label">
                                                                        Station
                                                                </label>
                                                                <div class="col-sm-10">
                                                                        <input id="station" class="form-control" name="station" type="text" />
                                                                </div>
                                                        </div>

                                                        <div class="row">
                                                                <div class="col-md-12">
                                                                        <button class="afficher-coord btn-coord btn btn-default"
                                                                                        data-toggle-text="Cacher les coordonnées (WGS 84 et Lambert 93)">
                                                                                Afficher les coordonnées (WGS 84 et Lambert 93)
                                                                        </button>
                                                                        <div id="coordonnees-geo" class="well hidden">
                                                                                <div class="row">
                                                                                        <div class="col-md-4">
                                                                                                <div id="coord-lat" class="form-group form-group-sm">
                                                                                                        <label for="latitude" class="col-sm-4 control-label">Latitude</label>
                                                                                                        <div class="col-sm-8">
                                                                                                                <input id="latitude" class="form-control" name="latitude" type="text"
                                                                                                                        title="Latitude (WGS 84)" value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="col-md-5">
                                                                                                <div id="coord-lng" class="form-group form-group-sm">
                                                                                                        <label for="latitude" class="col-sm-4 control-label">Longitude</label>
                                                                                                        <div class="col-sm-8">
                                                                                                                <input id="longitude" class="form-control" name="longitude" type="text"
                                                                                                                        title="Longitude (WGS 84)" value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="col-md-2">
                                                                                                <div id="coord-lng" class="form-group form-group-sm">
                                                                                                        <input type="button" id="geolocaliser"
                                                                                                                class="btn btn-default btn-sm has-tooltip"
                                                                                                                title="Centre la carte sur les coordonnées de latitude et longitude saisies."
                                                                                                                value="Voir sur la carte"/>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>

                                                                                <div class="row">
                                                                                        <div class="col-md-6">
                                                                                                <div id="coord-l93-x" class="form-group">
                                                                                                        <label for="l93-x" class="col-sm-6 control-label">X Lambert 93</label>
                                                                                                        <div class="col-sm-5">
                                                                                                                <input id="l93-x" disabled type="text" class="input-sm form-control obs-chp-etendu"
                                                                                                                                name="coordonneeLambert93X"
                                                                                                                                data-label="Lambert 93 X"
                                                                                                                                value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                        <div class="col-md-6">
                                                                                                <div id="coord-l93-y" class="form-group">
                                                                                                        <label for="l93-y" class="col-sm-6 control-label">Y Lambert 93</label>
                                                                                                        <div class="col-sm-5">
                                                                                                                <input id="l93-y" disabled type="text" class="input-sm form-control obs-chp-etendu"
                                                                                                                                name="coordonneeLambert93Y"
                                                                                                                                data-label="Lambert 93 Y"
                                                                                                                                value=""/>
                                                                                                        </div>
                                                                                                </div>
                                                                                        </div>
                                                                                </div>
                                                                        </div>
                                                                </div>
                                                        </div>
                                                </form>
                                        </div>
                                </div>
                        </div>

                        <div class="well well-lg">
                                <div class="row">
                                        <div class="col-md-6">
                                                <form id="form-station-detail" class="form-horizontal" role="form" autocomplete="on">
                                                        <h2>Caractéristiques de la station</h2>

                                                        <div class="form-group has-tooltip"
                                                                title="Type d'habitat plus ou moins standardisé dans les codes Corine ou Catminat (ex: prairie, pelouse, lisière, friche...)." >
                                                                <label for="milieu" class="col-sm-4 control-label">
                                                                        Type de milieu
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <input id="milieu" class="form-control" name="milieu" type="text" />
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez l'exposition principale de la station.">
                                                                <label for="station-exposition" class="col-sm-4 control-label">
                                                                        Exposition du terrain
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <select id="station-exposition" class="form-control obs-chp-etendu" name="stationExposition">
                                                                                <option selected value="">Sélectionnez l'exposition du terrain</option>
                                                                                <option value="Plat">Terrain plat</option>
                                                                                <option value="N">Nord</option>
                                                                                <option value="N-O">Nord-Ouest</option>
                                                                                <option value="N-E">Nord-Est</option>
                                                                                <option value="E">Est</option>
                                                                                <option value="O">Ouest</option>
                                                                                <option value="S">Sud</option>
                                                                                <option value="S-O">Sud-Ouest</option>
                                                                                <option value="S-E">Sud-Est</option>
                                                                        </select>
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez le pourcentage de la pente de la station.">
                                                                <label for="station-pente" class="col-sm-4 control-label">
                                                                        Pente du terrain
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <select id="station-pente" class="form-control obs-chp-etendu" name="stationPente">
                                                                                <option selected value="">Sélectionnez la pente du terrain</option>
                                                                                <option value="0-9%">entre 0 et 9% (0 à 5°)</option>
                                                                                <option value="10-19%">entre 10 et 19% (5 à 9°)</option>
                                                                                <option value="20-29%">entre 20 et 29% (10 à 14°)</option>
                                                                                <option value="+30%">&gt; à 30% (&gt; à 15°)</option>
                                                                        </select>
                                                                </div>
                                                        </div>

                                                </form>
                                        </div>

                                        <div class="col-md-6">
                                                <form id="form-obs" class="form-horizontal" role="form" autocomplete="on">
                                                        <h2>Relevé de la plante</h2>

                                                        <input id="referentiel" type="hidden" value="bdtfx" />

                                                        <div id="taxon-input-groupe" class="form-group has-tooltip"
                                                                title="Sélectionnez une espèce dans la liste déroulante pour lier
                                                                        votre nom au référentiel selectionné. Si vous
                                                                        le désirez vous pouvez aussi saisir un nom absent du référentiel
                                                                        (Ex. : 'fleur violette' ou 'viola sinensis???')." >
                                                                <label for="taxon"  class="col-sm-4 control-label">
                                                                        <strong class="obligatoire">*</strong>
                                                                        Espèce <?= $referentiel_impose ? '('.$ns_referentiel.')' : '' ?>
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <div class="input-group">
                                                                                <span class="input-group-addon">
                                                                                        <span class="glyphicon glyphicon-leaf"></span>
                                                                                </span>
                                                                                <input id="taxon" name="taxon" type="text" class="form-control"
                                                                                        value="<?= $nom_sci_espece_defaut; ?>" />
                                                                        </div>
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez le type de taille de l'arbre.">
                                                                <label for="taille-type" class="col-sm-4 control-label">
                                                                        Phénologie
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <select id="phenologie" class="form-control" name="phenologie">
                                                                                <option selected value="">Sélectionnez l'état de la plante</option>
                                                                                <option value="10-19: développement des feuilles">En feuille</option>
                                                                                <option value="50-59: apparition de l'inflorescence, épiaison">En bouton</option>
                                                                                <option value="60-69: floraison">En fleur</option>
                                                                                <option value="70-79: fructification">En fruit</option>
                                                                                <option value="90-99: sénescence et dormance">En sénescence ou dormance</option>
                                                                        </select>
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Estimation de l'abondance de la plante sur une surface donnée. Surface inventoriée
                                                                        limitée par la présence d'un autre milieu ou distancé par au moins 500m d'une autre
                                                                        zone où la plante est observée.">
                                                                <label for="abondance" class="col-sm-4 control-label">
                                                                        Abondance
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <select id="abondance" class="form-control" name="abondance">
                                                                                <option selected value="">Sélectionnez l'abondance</option>
                                                                                <option value="1-4 individus">1-4 individus</option>
                                                                                <option value="5-9 individus">5-9 individus</option>
                                                                                <option value="10-49 individus">10-49 individus</option>
                                                                                <option value="50-99 individus">50-99 individus</option>
                                                                                <option value="100-499 individus">100-499 individus</option>
                                                                                <option value=">500 individus">&gt; à 500 individus</option>
                                                                        </select>
                                                                </div>
                                                        </div>

                                                        <div id="individus-nbre-groupe" class="form-group has-tooltip hidden"
                                                                title="Indiquez le nombre d'individus." >
                                                                <label for="individus-nbre" class="col-sm-4 control-label">
                                                                        Nombre d'individus
                                                                </label>
                                                                <div class="col-sm-4">
                                                                        <input id="individus-nbre" class="form-control obs-chp-etendu" name="individusNombre"
                                                                                min="0"
                                                                                type="number"
                                                                                value="" />
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez si le relevé effectué vis à acquérir de nouvelle observation ou
                                                                                viser à confirmer la présence de la plante vis à vis d'une observation historique.">
                                                                <label for="releve-type" class="col-sm-4 control-label">
                                                                        Type de relevé
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <select id="releve-type" class="form-control obs-chp-etendu" name="releveType">
                                                                                <option selected value="">Sélectionnez le type de relevé</option>
                                                                                <option value="nouveau">Acquisition d'une nouvelle donnée</option>
                                                                                <option value="confirmation">Confirmation d'une donnée historique (précisez laquelle dans les notes)</option>
                                                                        </select>
                                                                </div>
                                                        </div>

                                                        <div class="form-group has-tooltip"
                                                                        title="Indiquez le code ISBN de l'ouvrage de détermination utilisé.
                                                                                L'ISBN est un numéro international qui permet d’identifier, de manière unique,
                                                                                chaque édition de chaque livre publié, que son support soit numérique ou sur papier.
                                                                                Ce code est généralement présent à l'endos d'un livre (à proximité du code barre)
                                                                                ou sur la page des droits d'auteur et de publication.
                                                                                Si votre navigateur le supporte, vous pouvez sélectionner le code ISBN
                                                                                d'une flore dans la liste qui s'ouvrira en cliquant dans le champ ou en
                                                                                utilisant la touche «Flêche bas» (↓). Sinon, indiquez le code ISBN de la
                                                                                flore ou de l'ouvrage principal ayant servi à la détermination
                                                                                (Ex. : ISBN-13:978-3-642-11746-6, ISBN:978-3-642-11746-6, 3-642-11746-5 ).">
                                                                <label for="determination-source-isbn" class="col-sm-4 control-label">
                                                                        Source détermination
                                                                </label>
                                                                <div class="col-sm-8">
                                                                        <input id="determination-source" class="form-control obs-chp-etendu" list="flores"
                                                                                name="determinationSource"
                                                                                type="text" >
                                                                        <datalist id="flores">
                                                                                <option value="ISBN:978-2-909-71790-6">TISON J-M. &amp; JAUZEIN P., 2014. Flore de la France méditerranéenne continentale. Naturalia publications. ISBN:978-2909717906. 2078p.</option>
                                                                                <option value="ISBN:978-2-853-67058-6">COSTE H. (ABBE), 1937. Flore descriptive et illustrée de la France, de la Corse et des contrées limitrophes. Albert Blanchard, éditeur. ISBN:978-2853670586. 1850p.</option>
                                                                                <option value="ISBN:978-2-100-05463-3">FOURNIER P-V., 1934-1940. Les quatres flores de France, Corse comprise. ISBN:978-2100054633. 1103p.</option>
                                                                                <option value="ISBN:978-2-701-11000-4">BONNIER G. &amp; DE LAYENS G., 1909. La végétation de la France, Suisse et Belgique. Librairie Générale de l'enseignement, Paris. ISBN:978-2701110004. 425p.</option>
                                                                        </datalist>
                                                                </div>
                                                        </div>
                                                </form>
                                        </div>
                                </div>


                                <div class="row">
                                        <div class="col-md-6">
                                                <div class="row">
                                                        <div class="col-md-12">
                                                                <h2>Notes</h2>
                                                                <textarea id="notes" form="form-obs" class="form-control col-md-12" rows="7" name="notes"
                                                                        placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation. Indiquez ici l'éventuelle donnée historique ayant servi de base au relevé."></textarea>
                                                        </div>
                                                </div>
                                        </div>

                                        <div class="col-md-6">
                                                <div class="row">
                                                        <form id="form-upload" class="form form-horizontal" role="form" action="<?= $url_ws_upload ?>"
                                                                method="post" enctype="multipart/form-data">
                                                                <div class="col-md-12">
                                                                        <h2>Image(s) de la plante</h2>
                                                                        <strong>Ajouter une image</strong>
                                                                        <p class="miniature-info discretion help-inline">Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.</p>
                                                                        <div id ="photos-conteneur" class="form-group">
                                                                                <div class="col-sm-12">
                                                                                        <input type="file" id="fichier" name="fichier" class="form-control" accept="image/jpeg" />
                                                                                        <input type="hidden" name="MAX_FILE_SIZE" value="5242880"/>
                                                                                </div>
                                                                                <div id="miniatures"></div>
                                                                                <p class="miniature-msg col-md-12">&nbsp;</p>
                                                                        </div>
                                                                </div>
                                                        </form>
                                                </div>
                                        </div>
                                </div>

                                <div class="row">
                                        <div class="col-md-12 centre has-tooltip"
                                                title="Une fois les champs remplis, vous pouvez cliquer sur ce bouton pour
                                                        ajouter votre observation à la liste à transmettre.">
                                                <button id="ajouter-obs" class="btn btn-primary btn-large" type="button">
                                                        Créer
                                                </button>
                                        </div>
                                </div>
                        </div>


                <!-- Messages d'erreur du formulaire-->
                        <div class="row">
                                <div class="zone-alerte col-md-6 col-md-offset-3">
                                        <div id="dialogue-bloquer-creer-obs" class="alert alert-warning alert-block" style="display: none;">
                                                <a class="close">×</a>
                                                <h4 class="alert-heading">Information : 10 observations maximum</h4>
                                                <p>
                                                        Vous venez d'ajouter votre 10ème observation.<br/>
                                                        Pour en ajouter de nouvelles, il est nécessaire de les transmettre en cliquant sur le bouton ci-dessous.
                                                </p>
                                        </div>
                                </div>
                                <div class="zone-alerte col-md-6 col-md-offset-3">
                                        <div id="dialogue-form-invalide" class="alert alert-warning alert-block" style="display: none;">
                                                <a class="close">×</a>
                                                <h4 class="alert-heading">Information : champs en erreur</h4>
                                                <p>
                                                        Certains champs du formulaire sont mal remplis.<br/>
                                                        Veuillez vérifier les données saisies dans le formulaire.
                                                </p>
                                        </div>
                                </div>
                        </div>

                        <!-- Affiche le tableau récapitulatif des observations ajoutées -->
                        <div id="zone-liste-obs" class="row">
                                <div class="col-md-12">
                                        <div class="well well-lg">
                                                <div class="row">
                                                        <div class="col-md-10">
                                                                <h2>
                                                                        Observations
                                                                        <?=!empty($nom_sci_espece_defaut) ? "de<i> {$nom_sci_espece_defaut}</i> " : ''; ?>
                                                                        à transmettre :
                                                                        <span class="obs-nbre">0</span>
                                                                </h2>
                                                        </div>
                                                        <div class="col-md-2 text-right">
                                                                <button id="transmettre-obs" class="btn btn-primary btn-large has-tooltip"
                                                                        type="button" disabled="disabled"
                                                                        title="Ajoute les observations ci-dessous à votre Carnet en Ligne et les rend publiques.">
                                                                        Transmettre
                                                                </button>
                                                        </div>
                                                </div>
                                                <div id="liste-obs" ></div>
                                                <div class="row">
                                                        <div class="zone-alerte col-md-6 col-md-offset-3">
                                                                <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-ok" 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-obs-transaction-ko" 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>
                                </div>
                        </div>

                        <footer class="row">
                                <p class="col-md-12 ">Réalisation &amp; hébergement : <a href="http://www.tela-botanica.org" target="_blank">Tela Botanica</a> 2014</p>
                        </footer>

                        <!-- Templates HTML -->
                        <div id="tpl-transmission-ok" style="display:none;">
                                <p class="msg">
                                        Vos observations ont bien été transmises.<br />
                                        Elles sont désormais consultables à travers les différents outils de visualisation
                                        du réseau (<a href="http://www.tela-botanica.org/site:botanique">eFlore</a>,
                                        <a href="http://www.tela-botanica.org/appli:pictoflora">galeries d'images</a>,
                                        <a href="http://www.tela-botanica.org/appli:identiplante">identiplante</a>,
                                        <a href="http://www.tela-botanica.org/widget:cel:cartoPoint">cartographie (widget)</a>...)<br />
                                        Si vous souhaitez les modifier ou les supprimer, vous pouvez les retrouver en vous
                                        connectant à votre <a href="http://www.tela-botanica.org/appli:cel">Carnet en ligne</a>.<br />
                                        N'oubliez pas qu'il est nécessaire de
                                        <a href="http://www.tela-botanica.org/page:inscription">s'inscrire à Tela Botanica</a>
                                        au préalable, si ce n'est pas déjà fait.
                                </p>
                        </div>
                        <div id="tpl-transmission-ko" style="display:none;">
                                <p class="msg">
                                        Une erreur est survenue lors de la transmission d'une observation (indiquée en rouge).<br />
                                        Vous pouvez tenter de la retransmettre en cliquant à nouveau sur le bouton transmettre ou bien la supprimer
                                        et transmettre les suivantes.<br />
                                        Néanmoins, les observations n'apparaissant plus dans la liste "observations à transmettre", ont bien été transmises lors de votre précédente tentative. <br />
                                        Si le problème persiste, vous pouvez signaler le dysfonctionnement sur
                                        <a href="<?= $url_remarques ?>?service=cel&pageSource=<?php echo urlencode('http://'.$_SERVER['HTTP_HOST'].$_SERVER['PHP_SELF'].'?'.$_SERVER['QUERY_STRING']); ?>"
                                                                  target="_blank"
                                                                  onclick="javascript:window.open(this.getAttribute('href'), 'Tela Botanica - Remarques', config='height=700, width=640, scrollbars=yes, resizable=yes'); return false;">
                                                                  le formulaire de signalement d'erreurs</a>.
                                </p>
                        </div>

                        <!-- Fenêtres modales -->
                        <div id="chargement" class="modal-fenetre" style="display:none;">
                                <div id="chargement-centrage" class="modal-contenu">
                                        <div class="progress">
                                                <div id="barre-progression-upload" class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="10" style="">
                                                        <span class="sr-only">0/10 observations transmises</span>
                                                </div>
                                        </div>

                                        <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'observations à transférer.
                                        </p>
                                </div>
                        </div>
                </div>
        </body>
</html>