Rev 3120 | Blame | Compare with Previous | Last modification | View Log | RSS feed
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title><?= $widget['titre']; ?></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-style-type" content="text/css" />
<meta http-equiv="Content-script-type" content="text/javascript" />
<meta http-equiv="Content-language" content="fr" />
<meta name="revisit-after" content="15 days" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Tela Botanica" />
<meta name="keywords" content="Tela Botanica, CEL" />
<meta name="description" content="Gestion des widgets de saisie du carnet en ligne" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<!-- OpenGraph pour Facebook, Pinterest, Google+ -->
<meta property="og:type" content="website" />
<meta property="og:title" content="Gestion des widgets de saisie du CeL" />
<meta property="og:site_name" content="Tela Botanica" />
<meta property="og:description" content="Gestion des widgets de saisie du Carnet en Ligne" />
<meta property="og:image" content="http://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="256" />
<meta property="og:image:height" content="256" />
<meta property="og:locale" content="fr_FR" />
<!-- Favicones -->
<link rel="shortcut icon" type="image/x-icon" href="http://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
<!-- Jquery -->
<!-- Google Map v3 -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?language=fr&region=FR"></script>
<!-- Jquery -->
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/1.11.1/jquery-1.11.1.min.js"></script>
<!-- Jquery UI : nécessaire pour le minicalendrier et l'auto-complétion -->
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
<script type="text/javascript" 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 type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/validate/1.11.1/messages_fr.js"></script>
<!-- Jquery Form :nécessaire pour l'upload des images -->
<script type="text/javascript" src="http://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
<!-- Bootstrap -->
<script type="text/javascript" src="http://resources.tela-botanica.org/bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="<?=$url_base?>modules/saisie2/squelettes/js/WidgetSaisie.js"></script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
// OMG un modèle objet !!
var widget = new WidgetSaisie();
// langue
widget.langue = "<?= $widget['langue']; ?>";
// Squelette d'URL du web service de l'annuaire.
widget.serviceAnnuaireIdUrl = "<?=$url_ws_annuaire?>";
// URL de l'icône du chargement en cours
widget.chargementIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement.gif";
// URL de l'icône du chargement en cours d'une image
widget.chargementImageIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/chargement-image.gif";
// URL de l'icône du calendrier
widget.calendrierIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/calendrier.png";
// URL de l'icône pour une photo manquante
widget.pasDePhotoIconeUrl = "<?=$url_base?>modules/saisie/squelettes/defaut/img/icones/pasdephoto.png";
// Code du référentiel utilisé pour les nom scientifiques.
widget.nomSciReferentiel = "<?= strtolower($widget['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;
// Indication de la présence d'un référentiel imposé
widget.referentielImpose = "<?=$referentiel_impose; ?>";
// URL du web service permettant l'auto-complétion des noms scientifiques
widget.serviceAutocompletionNomSciUrl = "<?= $widget['especes']['url_ws_autocompletion_ns']; ?>?"+
"masque={masque}&"+
"recherche=etendue&"+
"retour.champs=famille,nom_retenu,nom_retenu_complet,num_taxonomique,nom_retenu.id&"+
"ns.structure=au"+"&"+
"navigation.limite=" + widget.autocompletionElementsNbre;
// Squelette d'URL du web service permettant l'auto-complétion des noms scientifiques
widget.serviceAutocompletionNomSciUrlTpl = "<?= $widget['especes']['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;
// Initialisation du bousin
widget.init();
});
//]]>
</script>
<!-- Barre de navigation -->
<?php if ($bar !== false): ?>
<script src="<?=$url_script_navigation?>"></script>
<?php endif; ?>
<!-- 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.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" media="screen" /> -->
<link rel="stylesheet" type="text/css" href="<?=$url_base?>modules/saisie2/squelettes/css/bootstrap-4/css/bootstrap.min.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- <link id="telabotanica-style-css" rel="stylesheet" href="https://beta.tela-botanica.org/preprod/wp-content/themes/telabotanica/dist/bundle.css?ver=4.7.5" type="text/css" media="all">
--><link href="<?= $url_base; ?>modules/saisie2/squelettes/css/saisie.css" rel="stylesheet" type="text/css" media="screen" />
<!-- Google Analytics -->
<?php if($prod): ?>
<?php include "analytics.html"; ?>
<?php endif; ?>
</head>
<body>
<div id="zone-appli" class="container">
<?php if ($bar !== false): ?>
<div id="tb-navigation" data-courant="widget-cel-saisie" data-squelette="bootstrap4" data-mode="prod">
</div>
<br/>
<?php endif; ?>
<div class="layout-wrapper page">
<div class="media">
<?= '<img class="d-flex mr-3" src="'.$widget['logo'].'" alt="'.$widget['projet'].'" >';?>
<div class="media-body">
<h1 class="mt-0">
<?= $widget['titre']; ?>
</h1>
</div>
</div>
<div class="row align-items-center">
<div class="col-md-6">
<div id="description"><?= $widget['description']; ?></div>
</div>
<div class="col-md-6">
<div id="aide" class="well well-lg hidden-sm-down">
<h3><?= $aide['titre']; ?></h3>
<div id="aide-txt" class="hiden-sm-down">
<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>
(<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 votre
<a target="_blank" href="http://www.tela-botanica.org/appli:cel"> 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>
</div>
</div>
</div>
</div>
<div id="formulaire">
<form id="form-observateur" role="form" autocomplete="on">
<h2><?= $observateur['titre']; ?></h2>
<div id="zone-courriel" class="row align-items-center">
<div class="col-md-6 form-inline">
<label for="courriel" class="col-sm-3" title="<?= $observateur['courriel-title']; ?>">
<strong class="obligatoire">*</strong>
<?= $observateur['courriel']; ?>
</label>
<div class="col-sm-8 mb-2 input-group">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-envelope"></span></span>
<input id="courriel" name="courriel" class="form-control" type="email" title="<?= $observateur['courriel-title']; ?> "/>
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
</div>
</div>
<div id="zone-courriel-confirmation" class="col-md-6 form-inline" style="display:none;">
<label for="courriel_confirmation" class="col-sm-3" title="Veuillez confirmer le courriel.">
<strong class="obligatoire">*</strong> Courriel (confirmation)
</label>
<div class="col-sm-8 input-group">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-envelope"></span></span>
<input id="courriel_confirmation" name="courriel_confirmation" class="form-control" type="email"/>
</div>
</div>
</div>
<div id="zone-prenom-nom" class="row align-items-center" style="display:none;">
<div class="col-md-6 form-inline">
<label for="prenom" class="col-sm-3"><?= $observateur['prenom']; ?></label>
<div class="input-group col-sm-8">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-user"></span></span>
<input id="prenom" name="prenom" class="form-control" type="text"/>
</div>
</div>
<div class="col-md-6 form-inline">
<label for="nom" class="col-sm-3"><?= $observateur['nom']; ?></label>
<div class="input-group col-sm-8">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-user"></span></span>
<input id="nom" name="nom" class="form-control" type="text"/>
</div>
</div>
</div>
</form>
<form id="form-observation" role="form" autocomplete="on">
<h2><?= $observation['titre']; ?></h2>
<div id="zone-observation" class="row align-items-center">
<div class="col-md-6 form-inline">
<label for="courriel" class="col-sm-3" title="<?= $observateur['courriel-title']; ?>">
<strong class="obligatoire">*</strong>
<?= $observation['geolocalisation']; ?>
</label>
<div class="col-sm-8 mb-2 input-group">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-envelope"></span></span>
<input id="courriel" name="courriel" class="form-control" type="email" title="<?= $observateur['courriel-title']; ?> "/>
<input id="id_utilisateur" name="id_utilisateur" type="hidden"/>
</div>
<label for="milieu" class="col-sm-3">
<?= $observation['milieu']; ?>
</label>
<div class="col-sm-8 mb-2 input-group">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-street-view"></span></span>
<?php if ($widget['milieux'] != array()) {?>
<select id="milieu" class="form-control" >
<?php foreach ($widget['milieux'] as $milieu) {?>
<option value="<?= $milieu; ?>"><?= $milieu; ?></option>
<?php } ?>
</select>
<?php } else { ?>
<input id="milieu" name="milieu" class="form-control" type="text" placeholder="bois, champ, falaise, ..."/>
<?php } ?>
</div>
</div>
<div class="col-md-6 form-inline">
<label for="date" class="col-sm-3" title="">
<strong class="obligatoire">*</strong><?= $observation['date']; ?>
</label>
<div class="col-sm-8 input-group date" id="datetimepicker">
<span id="date-icone" class="input-group-addon hidden-xs-down"><span class="fa fa-calendar"></span></span>
<input id="date" name="date" class="form-control" type="date"/>
</div>
<?php if($widget['type_especes'] == "referentiel" && $widget['referentiel'] == "") { ?>
<label for="referentiel" class="col-sm-3" title="">
<strong class="obligatoire">*</strong><?= $observation['referentiel']; ?>
</label>
<div class="col-sm-8 input-group">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-book"></span></span>
<select id="referentiel" class="form-control" >
<option value="bdtfxr" selected="selected" title="Trachéophytes de France métropolitaine">Métropole (index réduit)</option>
<option value="bdtfx" title="Trachéophytes de France métropolitaine">Métropole (BDTFX)</option>
<option value="bdtxa" title="Trachéophytes des Antilles">Antilles françaises (BDTXA)</option>
<option value="bdtre" title="Trachéophytes de La Réunion">Réunion (BDTRE)</option>
<option value="aublet" title="Guyane">Guyane (AUBLET2)</option>
<option value="florical" title="Nouvelle-Calédonie">Nouvelle-Calédonie (FLORICAL)</option>
<option value="isfan" title="Afrique du Nord">Afrique du Nord (ISFAN)</option>
<option value="apd" title="Afrique de l'Ouest et du Centre">Afrique de l'Ouest et du Centre (APD)</option>
<option value="lbf" title="Liban">Liban (LBF)</option>
<option value="autre" title="Autre/Inconnu">Autre/Inconnu</option>
</select>
</div>
<?php } else { ?><input id="referentiel" name="referentiel" value="<?= $widget['referentiel']; ?>" type="hidden" /><?php } ?>
<label for="taxon" class="col-sm-3" title="">
<?= $observation['espece']; ?>
</label>
<div class="col-sm-8 input-group date">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-leaf"></span></span>
<input id="taxon" name="taxon" class="form-control" type="text"/>
</div>
<label for="certitude" class="col-sm-3" title="">
<strong class="obligatoire">*</strong><?= $observation['certitude']; ?>
</label>
<div class="col-sm-8 input-group date" id="datetimepicker">
<span class="input-group-addon hidden-xs-down"><span class="fa fa-question"></span></span>
<select id="certitude" name="certitude" class="form-control">
<option value="aDeterminer" ><?= $observation['certADet']; ?></option>
<option value="douteuse" ><?= $observation['certDout']; ?></option>
<option value="certaine" selected="selected" ><?= $observation['certCert']; ?></option>
</select>
</div>
</div>
</div>
</form>
<?php if (isset($widget['chpSupp']) && $widget['chpSupp'] != array()) { ?>
<form id="form-supp" role="form" autocomplete="on">
<div id="zone-supp" class="row align-items-center">
<div class="col-md-6 form-inline">
<?php print_r(implode($widget['chpSupp']));?>
</div>
</div>
</form>
<?php } ?>
<div id="image" class="row align-items-center">
</div>
</div>
<div class="row align-items-end component-tools-item-link">
<a href="http://www.tela-botanica.org/appli:cel" target="" style="color: #e16e37">
<span>Gestion</span>
</a>
<a href="http://www.tela-botanica.org/widget:cel:cartoPoint?projet=<?= $widget['projet']; ?>" target="" style="color: #918a6f">
<span>Carto</span>
</a>
<a href="http://www.tela-botanica.org/widget:cel:photo?projet=<?= $widget['projet']; ?>" target="" style="color: #964e75">
<span>Photo</span>
</a>
<a href="http://www.tela-botanica.org/widget:cel:observation?projet=<?= $widget['projet']; ?>" target="" style="color: #b2cb43">
<span>Observation</span>
</a>
<a href="http://www.tela-botanica.org/widget:cel:export?projet=<?= $widget['projet']; ?>" target="" style="color: #009fb8">
<span>Export</span>
</a>
<a href="http://www.tela-botanica.org/appli:pictoflora?projet=<?= $widget['projet']; ?>" target="" style="color: #927fa2">
<span>PictoFlora</span>
</a>
<a href="http://www.tela-botanica.org/appli:identiplante?projet=<?= $widget['projet']; ?>" target="" style="color: #f25a52">
<span>IdentiPlante</span>
</a>
</div>
</div>
</div>
</body>
</html>