Subversion Repositories eFlore/Applications.cel

Rev

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

<?php echo "<noscript>Activer javascript et recharger la page</noscript>";?>
<!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="robots" content="noindex, nofollow, noarchive, nosnippet, noodp">
    <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" />

    <!-- Favicones -->
    <link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
    <!-- Jquery-ui custom 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">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous" />
    <!-- <link rel="stylesheet" type="text/css" href="https://resources.tela-botanica.org/bootstrap/3.1.0/css/bootstrap.min.css" /> -->
    <!-- Fontawesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous" />
    <!-- STYLE MANAGER CREATION -->
    <link rel="stylesheet" type="text/css" href="<?= $url_base; ?>modules/manager/squelettes/css/manager.css" media="screen" />

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

  <body>
    <div id="zone-appli" class="container">
      <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">

          <div id="left-block" class="widget-blocks">

            <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" method="post" enctype="multipart/form-data">

              <div class="register-section row" id="basic-details-section">
                <h2>Meta-données</h2>

                <input type="text" name="email" id="email" placeholder="Your email" title="laisser ce champ vide" autocomplete="off" tabindex="-1" />

                <div class="col-sm-12 mb-3">
                  <label for="projet">Projet *</label>
                  <input type="text" name="projet" id="projet" class="form-control" pattern="[a-z]+" <?= ( $mode === 'modification' ) ? 'value="' . $widget['projet'] . '" readonly' : 'required'; ?> title="Champ obligatoire : pas d'espace">
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="motscles">Autres mots-clés</label>
                  <input type="text" name="motscles" id="motscles" class="form-control" <?= ( $mode === 'modification' ) ? 'value="' . $widget['motscles'] . '"' : ""; ?> />
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="type">Type de widget</label>
                  <select  id="type" name="type" class="form-control custom-select">
                    <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>


                  <div class="col-sm-12 radio mb-3">
                    <label for="est_type" class="radio-label">
                      <input type="checkbox" name="est_type" id="est_type" <?php echo ( isset( $widget['est_type'] ) && $projet['est_type'] === '1' ) ? 'checked="checked"' : ''; ?>>
                      Ce widget est un widget type
                    </label>
                  </div>

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


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

                <div class="input-file-row row">
                  <div class="input-file-container col-sm-10">
                    <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> Aide dans le titre</label>
                  </div>
                  <div class="btn btn-danger btn-sm remove-file" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
                  <div class="file-return info hidden"></div>
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="description">Description</label>
                  <textarea name="description" id="description" class="form-control"><?php echo isset( $widget['description'] ) ? $widget['description'] : ''; ?></textarea>
                </div>

                <div class="input-file-row row">
                  <div class="input-file-container col-sm-10">

                    <?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="btn btn-danger btn-sm remove-file" 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>

                <div class="input-file-row row">
                  <div class="input-file-container col-sm-10">
                    <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="btn btn-danger btn-sm remove-file" 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>

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

              <div class="register-section row" id="profile-details-fields-section">
                <h2>Champs</h2>

                <div class="col-sm-12 mb-3">
                  <label for="type_localisation">Type de localisation</label>
                  <select  id="type_localisation" name="type_localisation" class="form-control custom-select">
                    <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>

                <div class="col-sm-12 mb-3">
                  <label for="localisation">Zoom</label>
                  <input type="text" name="localisation" id="localisation" class="form-control" value="<?php echo isset( $widget['localisation'] ) ? $widget['localisation'] : ''; ?>"  />
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="milieux">Milieux</label>
                  <p class="message">
                    Liste de milieux séparés par un ";".
                    <br>
                    Pour ajouter une option autre ajoutez le mot "autre" dans votre liste de milieux.
                    <br>
                    <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>&nbsp;Les options apparaitront dans l'ordre de saisie de cette liste.
                  </p>
                  <input type="text" name="milieux" id="milieux" class="form-control" value="<?php echo isset( $widget['milieux'] ) ? $widget['milieux'] : ''; ?>">
                </div>

                <div class="col-sm-12 mb-3">
                  <label for="type_especes">Type liste espèce *</label>
                  <select  id="type_especes" name="type_especes" required class="form-control custom-select">
                    <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>

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

                <!-- Bouton fichier-type à compléter -->
                <div class="input-file-row row">
                  <div class="input-file-container col-sm-10">
                    <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>.csv</span>)</label>
                    <p class="message mt-2">
                      <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
                      &nbsp;Format : CSV UTF-8.<br>Séparateur : Tabulation.
                    </p>
                  </div>
                  <div class="btn btn-danger btn-sm remove-file" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
                  <div class="file-return especes hidden"></div>
                </div>
                <div class="col-sm-12 mb-3">
                  <a href="<?= $url_base; ?>modules/manager/squelettes/img/fichier_type/especes.csv" class="button fichier-type" download><i class="fas fa-file-alt" aria-hidden="true"></i> Fichier type</a>
                </div>
              </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" disabled="disabled"><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 id="new-fields-buttons" 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>

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

          <div id="right-block" class="widget-blocks">
            <div class="widget-renderer">
              <div id="preview-background"></div>

              <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-6">
                  <div class="">
                    <p class="preview-description"></p>
                  </div>

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

                <div id="preview-aide" class="col-md-6">
                  <div class="">
                    <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 class="row">
                    <div id="bouton-connexion" class="col-md-6 col-sm-8">
                      <label for="bouton-connexion">Je me connecte à mon compte&nbsp;:</label>
                      <div class="btn btn-success mr-1 mb-1">Connexion</div>
                      <div class="btn btn-success mr-1 mb-1">Inscription</div>
                    </div>
                    <div id="creation-compte" class="col-md-6 col-sm-8">
                      <label for="creation-compte">Je ne souhaite pas m'inscrire&nbsp;:</label>
                      <div class="btn btn-info mr-1 mb-1">Observation sans inscription</div>
                    </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 row">
                      <div class="col-md-12">
                        <label for="geolocalisation" id="label-geolocalisation" title="Veuillez saisir votre adresse courriel.">
                          <i class="fa fa-envelope"></i> Geolocalisation
                        </label>
                        <div id="geolocalisation">
                          <img src="<?= $url_base?>/modules/manager/squelettes/img/geoloc/geoloc.png" alt="geolocalisation" width="90%">
                        </div>
                      </div>

                      <div class="col-md-12">
                        <label for="milieu" id="label-milieu">
                          <i class="fa fa-street-view"></i> Milieu
                        </label>
                        <input type="text" id="milieu" name="milieu" class="form-control" placeholder="bois, champ, falaise, ...">
                      </div>
                    </div>

                    <div class="col-md-6 row">
                      <div class="col-md-12">
                        <label for="date" id="label-date" title="">
                          <i class="fa fa-calendar"></i> Date de relevé
                        </label>
                        <div class="date">
                          <input type="date" id="date" class="form-control" name="date" title="jj/mm/aaaa" required>
                        </div>
                      </div>

                      <div class="col-md-12">
                        <label for="taxon" id="label-taxon" title="">
                          <i class="fa fa-leaf"></i> Espèce<span></span>
                        </label>
                        <div class="taxon">
                          <input type="text" name="taxon" id="taxon" class="form-control">
                        </div>
                      </div>

                      <div class="col-md-12">
                        <label for="certitude" id="label-certitude" title="">
                          <i class="fa fa-question"></i> Certitude
                        </label>
                        <select id="certitude" name="certitude" class="form-control custom-select" required>
                          <option value="" >À déterminer</option>
                          <option value="" >Douteuse</option>
                          <option value="" selected="selected" >Certaine</option>
                        </select>
                      </div>

                      <div class="col-md-12">
                        <label for="notes" id="label-notes" title="">
                          <i class="fa fa-pen" aria-hidden="true"></i> Notes
                        </label>
                        <div class="notes">
                            <textarea id="notes" name="notes" class="form-control" placeholder="Vous pouvez éventuellement ajouter des informations complémentaires à votre observation."></textarea>
                        </div>
                      </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 row"></div>
                  </div>
                </form>

                <!-- formulaire d'upload d'images -->
                <form id="form-upload" class="" action="" method="" enctype="multipart/form-data">
                  <h2>Image(s) de cette plante</h2>
                  <p class="miniature-info" class="discretion help-inline">
                    Les photos doivent être au format JPEG et ne doivent pas excéder 5Mo chacunes.
                  </p>
                  <div>
                      <div class="btn btn-large btn-info mb-3">
                        <span class=""><i class="fas fa-download"></i> Ajouter une image</span>
                      </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">&times;</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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <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>