Subversion Repositories eFlore/Applications.cel

Rev

Rev 3233 | Rev 3241 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title><?= $mode; ?> de widget de saisie du CeL</title>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta http-equiv="Content-style-type" content="text/css" />
    <meta http-equiv="Content-script-type" content="text/javascript" />
    <meta http-equiv="Content-language" content="fr" />
    <meta name="revisit-after" content="15 days" />
    <meta name="robots" content="index,follow" />
    <meta name="author" content="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="https://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="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />

    <!-- CSS -->
    <link href="https://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 rel="stylesheet" type="text/css" href="https://resources.tela-botanica.org/bootstrap/3.1.0/css/bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="<?= $url_base; ?>modules/manager/squelettes/css/manager.css" media="screen" />
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous" />

    <!--  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-export" data-squelette="bootstrap3" data-mode="prod"></div>
      <br/>
    <?php endif; ?>
      <h1 id="widget-titre" class="widget-titre"><?php echo ucfirst( $mode ); ?> de widget de saisie du CEL</h1>
      <div id="register-page">
        <div id="group-settings-form" class="row">

          <div class="widget-blocks col-md-4">

            <p class="message">
              <?php if ( $mode === 'modification' ) : ?>
                Attention vous modifiez un widget déjà existant, le tag et la langue ne peuvent pas être changés.
                S'il s'agit d'un projet type, en modifiant ce widget vous modifiez tous les widgets de ce type.
              <?php else : ?>
                Vous créez un widget, si vous choississez de le mettre dans un type, certains champs deviendront
                obligatoires et la localisation (point ou rue) sera automatiquement déterminée.
              <?php endif; ?>
            </p>

            <form action="<?= $url_base; ?>manager?mode=<?= $mode.$params; ?>" id="basic-widget-form" class="standard-form component component-text" method="post" enctype="multipart/form-data">
              <div class="register-section" id="basic-details-section">

                <h2>Meta-données</h2>

                <?php // var_dump($widget); ?>
                <label for="projet">Projet *</label>
                <input type="text" name="projet" id="projet" pattern="[a-z]+" <?= ( $mode === 'modification' ) ? 'value="' . $widget['projet'] . '" readonly' : 'required'; ?> title="Champ obligatoire : pas d'espace">

                <label for="motscles">Autres mots-clés</label>
                <input type="text" name="motscles" id="motscles" value="" />

                <label for="type">Type de widget</label>
                <div class="select-wrapper">
                  <select  id="type" name="type">
                    <option value=""> ----</option>
                    <?php foreach ( $type as $id => $projet ) : ?>
                      <option <?php echo ( isset( $widget['projet'] ) && $projet['projet'] === $widget['projet'] ) ? 'selected="selected"' : ''; ?> value="<?= $projet['projet']; ?>"><?= $projet['projet']; ?></option>
                    <?php endforeach; ?>
                  </select>
                </div>

                <label for="est_type">Ce widget est un widget type</label>
                <input type="checkbox" name="est_type" id="est_type" <?php echo ( isset( $widget['est_type'] ) && $projet['est_type'] === '1' ) ? 'checked="checked"' : ''; ?>>

                <label for="langue">Langue</label>
                <?php if ( $mode === 'modification' ) : ?>
                  <input id="langue" name="langue" readonly value="<?= $widget['langue']; ?>">
                <?php else : ?>
                  <div class="select-wrapper">
                    <select id="langue" name="langue">
                    <?php foreach ( $langues as $code => $langue ) : ?>
                      <option value="<?= $code; ?>" <?= ( $code === 'fr' ) ? 'selected' : '';?>><?= $langue['nom']; ?></option>
                    <?php endforeach; ?>
                    </select>
                  </div>
                <?php endif; ?>
              </div><!-- end #basic-details-section -->


              <div class="register-section" id="profile-details-description-section">
                <h2>Description</h2>
                <label for="titre">Titre</label>
                <input type="text" name="titre" id="titre" value="<?php echo isset( $widget['titre'] ) ? $widget['titre'] : ''; ?>">

                <div class="input-file-container">
                  <input type="file" class="input-file" name="info" id="info" value="<?= $widget['titre']; ?>" accept="image/*">
                  <label for="info" class="label-file"><i class="fas fa-download"></i> Image d'aide dans le titre</label>
                </div>
                <div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
                <div class="file-return info hidden"></div>

                <label for="description">Description</label>
                <textarea name="description" id="description"><?php echo isset( $widget['description'] ) ? $widget['description'] : ''; ?></textarea>

                <div class="input-file-container">

                  <?php
                    if( isset( $widget['logo'] ) ) :
                      $logo_src = $widget['logo'];
                      $logo_img =
                        '<img id="pre-existent-logo" src="' . $logo_src . '"><br>Pour changer, télécharger un nouveau fichier.';
                      $logo_hidden = '';
                      $logo_file_name = array_reverse( explode( '/', $logo_src ) );
                    else :
                      $logo_src = '';
                      $logo_img = '';
                      $logo_hidden = ' hidden';
                      $logo_file_name = [];
                    endif;
                  ?>

                  <input type="file" class="input-file" name="logo" id="logo"  accept="image/*" value="">
                  <label for="logo" class="label-file"><i class="fas fa-download"></i> Logo</label>
                </div>
                <div class="remove-file button" name="remove-file" title="Supprimer le fichier">
                  <i class="fas fa-times" aria-hidden="true"></i>
                </div>
                <div class="file-return logo<?= $logo_hidden; ?>">
                  <?= $logo_file_name[0]; ?>
                  <?= $logo_img; ?>
                </div>


                <div class="input-file-container">
                    <input type="file" class="input-file" name="image_fond" id="image_fond" value="<?= $widget['titre']; ?>" accept="image/*">
                    <label for="image_fond" class="label-file"><i class="fas fa-download"></i> Image de fond</label>
                </div>
                <div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
                <div class="file-return image_fond hidden"></div>

              </div><!-- end #profile-details-description-section -->

              <div class="register-section" id="profile-details-fields-section">
                <h2>Champs</h2>
                <label for="type_localisation">Type de localisation</label>
                <div class="select-wrapper">
                  <select  id="type_localisation" name="type_localisation" >
                    <option value="<?php echo ( isset( $widget['type_localisation'] ) ) ? $widget['type_localisation'] : 'point'; ?>"><?php echo ( isset( $widget['type_localisation'] ) ) ? $widget['type_localisation'] : 'point'; ?></option>
                    <option value="<?php echo ( isset( $widget['type_localisation'] ) && $widget['type_localisation'] === 'rue' ) ? 'point' : 'rue'; ?>"><?php echo ( isset( $widget['type_localisation'] ) && $widget['type_localisation'] === 'rue') ? 'point' : 'rue'; ?></option>
                  </select>
                </div>

                <label for="localisation">Zoom</label>
                <input type="text" name="localisation" id="localisation" value="<?php echo isset( $widget['localisation'] ) ? $widget['localisation'] : ''; ?>"  />

                <label for="milieux">Milieux</label>
                <input type="text" name="milieux" id="milieux" value="<?php echo isset( $widget['milieux'] ) ? $widget['milieux'] : ''; ?>">

                <label for="type_especes">Type liste espèce *</label>
                <div class="select-wrapper">
                  <select  id="type_especes" name="type_especes" required>
                    <option selected="selected" value="referentiel">Référentiel</option>
                    <option value="liste">Liste</option>
                    <option value="liste" title="remplir référentiel + envoyer csv">Liste + autres</option>
                    <option value="fixe">Espèce fixée</option>
                  </select>
                </div>

                <label for="referentiel">Référentiel *</label>
                <input type="text" name="referentiel" id="referentiel" required pattern="([a-z]+?)*" title="Nom du référentiel ex. bdtfx" value="<?php echo isset( $widget['referentiel'] ) ? $widget['referentiel'] : ''; ?>">

                <!-- Bouton fichier-type à compléter -->
                <div class="input-file-container">
                  <input type="file" class="input-file" name="especes" id="especes">
                  <label for="especes"class="label-file"><i class="fas fa-download"></i> Espèces (<span style="text-transform:lowercase;">.csv</span>)</label>
                </div>
                <div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
                <div class="file-return especes hidden"></div>
                <a href="#" class="button fichier-type"><i class="fas fa-file-alt" aria-hidden="true"></i> Fichier type</a>
              </div><!-- end #profile-details-fields-section -->

              <!--Submit-->
              <div class="submit complete-registration" id="submit-button">
                <button href="#" type="submit" name="signup_submit" id="signup_submit" class="button" target="" title="Soumettre le nouveau widget"><i class="fas fa-trophy" aria-hidden="true"></i>&nbsp;Terminer</button>
              </div>
              <!--Submit-->

            </form><!-- end #new-widget-form -->

            <form id="new-fields" autocomplete="off">
                <h2>Ajouter des champs</h2>
                <p class="message">
                  <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
                  &nbsp;Attention :
                  <br>
                  <i class="fa fa-bolt" aria-hidden="true"  style="color:#B3C954"></i>
                  &nbsp;Le bouton "Valider" sert à valider les champs supplémentaires uniquement
                  <br>
                  <i class="fas fa-trophy" aria-hidden="true"  style="color:#B3C954"></i>
                  &nbsp;Le bouton "Terminer" sert à envoyer la totalité du nouveau widget
                </p>
            </form><!-- #new-fields = fomulaire oû viennent s'insérer les champs supplémentaires -->

            <div class="row">
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
                <label class="add-fields">Ajouter</label>
                <div class="button" id="add-fields" title="Ajouter un champ"><i class="fa fa-plus" aria-hidden="true"></i></div>
              </div>
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
                <label for="preview-field">Prévisualiser</label>
                <div class="button" id="preview-field" name="preview-field" title="prévisualiser"><i class="fa fa-magic" aria-hidden="true"></i></div>
              </div>
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
                <label class="validate-new-fields">Valider</label>
                <div class="button" id="validate-new-fields" title="Valider les champs supplémentaires"><i class="fa fa-bolt" aria-hidden="true"></i></div>
              </div>
            </div>

            <hr>

          </div><!-- end .widget-blocks = tout le bloc de gauche-->

          <div class="widget-blocks col-md-8">
            <div class="widget-renderer">

              <div id="preview-header" class="row">
                  <div id="preview-logo" class="col-md-4"></div>
                  <div id="preview-title" class="col-md-8">
                    <h1></h1>
                  </div>
              </div>

              <div id="preview-messages" class="row">

                <div id="preview-description" class="col-md-7">
                  <div class="message">
                    <h3>
                      <span>Projet : </span>
                      <span class="projet-description"></span>
                    </h3>
                    <p class="preview-description"></p>
                  </div>

                </div><!-- end #preview-description -->

                <div id="preview-aide" class="col-md-5">
                  <div class="message">
                    <h3>Aide</h3>
                    <p>
                      Cet outil vous permet de partager simplement vos observations avec
                      le <a target="_blank" href="https://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
                      (<a target="_blank" href="https://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="https://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="https://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
                    </p>
                    <p class="discretion">
                      Pour toute question ou remarque,
                      <a href="https://www.tela-botanica.org/widget:reseau:remarques?service=cel&pageSource=<?= $url_base; ?>manager?mode=<?php echo $mode . $params; ?>" 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><!-- end #preview-aide -->

              <div id="preview-formulaire" class="row">

                <form id="preview-form-observateur" role="form" autocomplete="on">

                  <h2>Observateur</h2>

                  <div id="zone-courriel" class="row">

                    <div class="col-md-6">
                      <label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
                        <i class="fa fa-envelope"></i> Courriel *
                      </label>
                      <input type="email" id="courriel" name="courriel" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" title="Veuillez saisir votre adresse courriel." required>
                      <input type="hidden" id="id_utilisateur" name="id_utilisateur">
                    </div>

                    <div id="zone-courriel-confirmation" class="col-md-6 ">
                      <label for="courriel_confirmation" class="" title="Veuillez confirmer le courriel.">
                        <i class="fa fa-envelope"></i> Courriel * (confirmation)
                      </label>
                      <input type="email" id="courriel_confirmation" name="courriel_confirmation" pattern="^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" title="Veuillez saisir votre adresse courriel." required>
                    </div>

                  </div>

                  <div id="zone-prenom-nom" class="row">

                    <div class="col-md-6">
                      <label for="prenom" class=""><i class="fa fa-user"></i> Prénom</label>
                      <input type="text" id="prenom" name="prenom" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð'-]+" title="Veuillez saisir votre prénom">
                    </div>

                    <div class="col-md-6 ">
                      <label for="nom" class=""><i class="fa fa-user"></i> Nom</label>
                      <input type="text" id="nom" name="nom" pattern="[a-zA-ZàáâäãåąčćęèéêëėįìíîïłńòóôöõøùúûüųūÿýżźñçčšžÀÁÂÄÃÅĄĆČĖĘÈÉÊËÌÍÎÏĮŁŃÒÓÔÖÕØÙÚÛÜŲŪŸÝŻŹÑßÇŒÆČŠŽ∂ð'-]+" title="Veuillez saisir votre nom">
                    </div>

                  </div>

                </form>

                <form id="form-observation" role="form" autocomplete="on">

                  <h2>Observation</h2>

                  <div id="zone-observation" class="row">

                    <div class="col-md-6 ">
                      <label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
                        <i class="fa fa-envelope"></i> Geolocalisation *
                      </label>
                      <input type="email" id="courriel" name="courriel" title="Veuillez saisir votre adresse courriel. "  required>
                      <input type="hidden" id="id_utilisateur" name="id_utilisateur">

                      <label for="milieu" class=""><i class="fa fa-street-view"></i> Milieu</label>
                      <input type="text" id="milieu" name="milieu" placeholder="bois, champ, falaise, ..." pattern="[\D]+">
                    </div>

                    <div class="col-md-6">
                      <label for="date" class="" title="">
                        <i class="fa fa-calendar"></i> Date de relevé *
                      </label>
                      <div class="date" id="datetimepicker">
                        <input type="date" id="date" name="date" class="hasDatepicker" pattern="(^(((0[1-9]|1[0-9]|2[0-8])[\/](0[1-9]|1[012]))|((29|30|31)[\/](0[13578]|1[02]))|((29|30)[\/](0[4,6,9]|11)))[\/](19|[2-9][0-9])\d\d$)|(^29[\/]02[\/](19|[2-9][0-9])(00|04|08|12|16|20|24|28|32|36|40|44|48|52|56|60|64|68|72|76|80|84|88|92|96)$)" title="jj/mm/aaaa" required>
                      </div>

                      <label for="referentiel" class="" title="">
                        <i class="fa fa-book"></i> Référentiel *
                      </label>
                      <div class="select-wrapper add-field-select">
                        <select id="referentiel" name="referentiel"  required>
                          <option value="" selected="" title="">-</option>
                        </select>
                      </div>

                      <label for="taxon" class="" title=""><i class="fa fa-leaf"></i> Espèce</label>
                      <div class="date">
                        <input type="text" name="taxon" id="taxon" >
                      </div>

                      <label for="certitude" class="" title="">
                        <i class="fa fa-question"></i> Certitude *
                      </label>
                      <div class="select-wrapper add-field-select">
                        <select id="certitude" name="certitude"  required>
                          <option value="">-</option>
                        </select>
                      </div>
                    </div>

                  </div>

                </form>

                <!-- formulaire d'affichage des bouveaux champs -->
                <form id="form-supp" role="form" autocomplete="on">
                  <div id="zone-supp" class="row align-items-center">
                    <div class="col-md-6 preview-container"></div>
                  </div>
                </form>

              </div><!-- end #preview-formulaire -->

            </div><!-- end #widget-renderer-->

          </div><!-- #widget-blocks = tout le bloc de droite-->

        </div>
      </div>
    </div>
    <div id="help-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="help-modal-label" style="display: none;" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="help-modal-label"></h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body" id="print_content"></div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Jquery -->
    <script type="text/javascript" src="https://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="https://resources.tela-botanica.org/jquery/jquery-ui/1.11.0/js/jquery-ui.min.js"></script>
    <!-- <script type="text/javascript" src="https://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="https://resources.tela-botanica.org/jquery/validate/1.11.1/jquery.validate.min.js"></script>
    <script type="text/javascript" src="https://resources.tela-botanica.org/jquery/validate/1.11.1/additional-methods.min.js"></script>
    <script type="text/javascript" src="https://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="https://resources.tela-botanica.org/jquery/form/3.51/jquery.form.min.js"></script>
    <!-- Bootstrap -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
    <script type="text/javascript" src="<?= $url_base; ?>modules/manager/squelettes/js/manager.js"></script>
      <!-- Barre de navigation -->
    <?php if ( $bar !== false ) : ?>
      <script src="<?= $url_script_navigation; ?>"></script>
    <?php endif; ?>
  </body>
</html>