Subversion Repositories eFlore/Applications.cel

Rev

Rev 3185 | Rev 3191 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
3122 delphine 1
<!DOCTYPE html>
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
  <head>
3167 idir 4
    <title><?php echo $mode; ?> de widget de saisie du CeL</title>
3122 delphine 5
 
3167 idir 6
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
7
    <meta http-equiv="Content-style-type" content="text/css" />
8
    <meta http-equiv="Content-script-type" content="text/javascript" />
9
    <meta http-equiv="Content-language" content="fr" />
10
    <meta name="revisit-after" content="15 days" />
11
    <meta name="robots" content="index,follow" />
12
    <meta name="author" content="Tela Botanica" />
13
    <meta name="keywords" content="Tela Botanica, CEL" />
14
    <meta name="description" content="Gestion des widgets de saisie du carnet en ligne" />
15
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
3122 delphine 16
 
3167 idir 17
    <!-- OpenGraph pour Facebook, Pinterest, Google+ -->
18
    <meta property="og:type" content="website" />
19
    <meta property="og:title" content="Gestion des widgets de saisie du CeL" />
20
    <meta property="og:site_name" content="Tela Botanica" />
21
    <meta property="og:description" content="Gestion des widgets de saisie du Carnet en Ligne" />
22
    <meta property="og:image" content="https://resources.tela-botanica.org/tb/img/256x256/carre_englobant.png" />
23
    <meta property="og:image:type" content="image/png" />
24
    <meta property="og:image:width" content="256" />
25
    <meta property="og:image:height" content="256" />
26
    <meta property="og:locale" content="fr_FR" />
3122 delphine 27
 
3167 idir 28
    <!-- Favicones -->
29
    <link rel="shortcut icon" type="image/x-icon" href="https://resources.tela-botanica.org/tb/img/16x16/favicon.ico" />
3164 idir 30
 
3175 idir 31
    <!-- Jquery -->
3176 idir 32
    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/1.7.1/jquery-1.7.1.min.js"></script>
33
    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery-ui-1.8.17.custom.min.js"></script>
34
    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/jquery-ui/1.8.17/js/jquery.ui.datepicker-fr.js"></script>
35
    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/validate/1.9.0/jquery.validate.js"></script>
36
    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/validate/1.9.0/messages_fr.js"></script>
37
    <script type="text/javascript" src="https://www.tela-botanica.org/commun/jquery/form/2.95/jquery.form.min.js"></script>
38
    <script src="https://resources.tela-botanica.org/bootstrap/3.1.0/js/bootstrap.min.js"></script>
3164 idir 39
 
3175 idir 40
    <!-- Barre de navigation -->
41
    <?php if ($bar !== false): ?>
3176 idir 42
            <script src="<?php echo $url_script_navigation; ?>"></script>
3175 idir 43
    <?php endif; ?>
3164 idir 44
 
3175 idir 45
    <!-- CSS -->
3176 idir 46
    <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" />
47
    <link rel="stylesheet" type="text/css" href="https://resources.tela-botanica.org/bootstrap/3.1.0/css/bootstrap.min.css" />
3175 idir 48
    <link rel="stylesheet" type="text/css" href="<?php echo $url_base; ?>modules/manager/squelettes/css/manager.css" media="screen" />
49
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css" integrity="sha384-O8whS3fhG2OnA5Kas0Y9l3cfpmYjapjI0E4theH4iuMD+pLhbf6JI0jIMfYcK3yZ" crossorigin="anonymous">
50
 
3167 idir 51
    <!--  Google Analytics -->
52
    <?php if($prod): ?>
53
      <?php include "analytics.html"; ?>
54
    <?php endif; ?>
3122 delphine 55
  </head>
56
 
57
  <body>
3167 idir 58
    <div id="zone-appli" class="container">
59
    <?php if ($bar !== false): ?>
60
      <div id="tb-navigation" data-courant="widget-cel-export" data-squelette="bootstrap3" data-mode="prod"></div>
61
      <br/>
62
    <?php endif; ?>
63
      <h1 id="widget-titre" class="widget-titre"><?php echo ucfirst($mode); ?> de widget de saisie du CEL</h1>
64
      <div id="register-page">
3174 idir 65
        <div id="group-settings-form" class="row">
3164 idir 66
 
3167 idir 67
          <div class="widget-blocks col-md-4">
3164 idir 68
 
3174 idir 69
            <p class="message">
70
              <?php if ($mode === 'modification') : ?>
3181 idir 71
                Attention vous modifiez un widget déjà existant, le tag et la langue ne peuvent pas être changés.
3174 idir 72
                S'il s'agit d'un projet type, en modifiant ce widget vous modifiez tous les widgets de ce type.
73
              <?php else : ?>
74
                Vous créez un widget, si vous choississez de le mettre dans un type, certains champs deviendront
75
                obligatoires et la localisation (point ou rue) sera automatiquement déterminée.
76
              <?php endif; ?>
77
            </p>
3164 idir 78
 
3174 idir 79
            <form action="http://localhost/cel/widget/manager?mode=<?php echo $mode; ?>" id="basic-widget-form" class="standard-form component component-text" method="post" enctype="multipart/form-data">
80
              <div class="register-section" id="basic-details-section">
3164 idir 81
 
3174 idir 82
                <h2>Meta-données</h2>
3164 idir 83
 
3174 idir 84
                <?php //var_dump($widget); ?>
85
                <label for="projet">Projet *</label>
86
                <input type="text" name="projet" id="projet" pattern="[a-z]*" <?php echo ($mode === 'modification') ? 'value="'.$widget['projet'].'" readonly' : 'required'; ?> title="Champ obligatoire : pas d'espace" />
3164 idir 87
 
3174 idir 88
                <label for="motscles">Autres mots-clés</label>
89
                <input type="text" name="motscles" id="motscles" value="" />
3164 idir 90
 
3174 idir 91
                <label for="type">Type de widget</label>
92
                <div class="select-wrapper">
93
                  <select  id="type" name="type" >
94
                    <?php foreach ($type as $id => $projet) : ?>
95
                      <option <?php echo (isset($widget['projet']) && $projet['projet']== $widget['projet']) ? 'selected="selected"' : ''; ?> value="<?php echo $projet['projet']; ?>"><?php echo $projet['projet']; ?></option>
3167 idir 96
                    <?php endforeach; ?>
3174 idir 97
                    <option value=""> ----</option>
98
                  </select>
99
                </div>
3164 idir 100
 
3174 idir 101
                <label for="est_type">Ce widget est un widget type</label>
102
                <input type="checkbox" name="est_type" id="est_type" <?php echo (isset($widget['est_type']) && $projet['est_type']=== '1') ? 'checked="checked"' : ''; ?>>
3164 idir 103
 
3174 idir 104
                <label for="langue">Langue</label>
105
                <?php if ($mode === 'modification') : ?>
106
                  <input id="langue" name="langue" readonly value="<?php echo $widget['langue']; ?>">
107
                <?php else : ?>
3185 idir 108
                  <div class="select-wrapper">
109
                    <select id="langue" name="langue">
110
                    <?php foreach ($langues as $code => $langue) : ?>
111
                      <option value="<?php echo $code; ?>" <?php echo $code === 'fr' ? 'selected' : '';?>><?php echo $langue['nom']; ?></option>
112
                    <?php endforeach; ?>
113
                    </select>
114
                  </div>
3174 idir 115
                <?php endif; ?>
116
              </div><!-- end #basic-details-section -->
3164 idir 117
 
118
 
3174 idir 119
              <div class="register-section" id="profile-details-description-section">
120
                <h2>Description</h2>
121
                <label for="titre">Titre</label>
122
                <input type="text" name="titre" id="titre" value="<?php echo isset($widget['titre']) ? $widget['titre'] : ''; ?>">
3164 idir 123
 
3174 idir 124
                <label for="description">Description</label>
125
                <textarea name="description" id="description"><?php echo isset($widget['description']) ? $widget['description'] : ''; ?></textarea>
3164 idir 126
 
3174 idir 127
                <div class="input-file-container">
3176 idir 128
 
129
                  <?php
130
                    if( isset( $widget['logo'] ) ) :
131
                      $logo_src = $widget['logo'];
132
                      $logo_img =
133
                        '<img id="pre-existent-logo" src="' . $logo_src . '"><br>Pour changer, télécharger un nouveau fichier.';
134
                      $logo_hidden = '';
135
                      $logo_file_name = array_reverse(explode('/', $logo_src));
136
                    else :
137
                      $logo_src = '';
138
                      $logo_img = '';
139
                      $logo_hidden = ' hidden';
140
                      $logo_file_name = [];
141
                    endif;
142
                  ?>
143
 
144
                  <input type="file" class="input-file" name="logo" id="logo"  accept="image" value="<?php echo $logo_src; ?>">
145
                  <label for="logo" class="label-file"><i class="fas fa-download"></i> Logo</label>
3174 idir 146
                </div>
3176 idir 147
                <div class="remove-file button" name="remove-file" title="Supprimer le fichier">
148
                  <i class="fas fa-times" aria-hidden="true"></i>
149
                </div>
150
                <div class="file-return logo<?php echo $logo_hidden; ?>">
151
                  <?php echo $logo_file_name[0]; ?>
152
                  <?php echo $logo_img; ?>
153
                </div>
3164 idir 154
 
155
 
3174 idir 156
                <div class="input-file-container">
157
                    <input type="file" class="input-file" name="fond" id="fond" value="<?php echo $widget['titre']; ?>">
158
                    <label for="fond" class="label-file"><i class="fas fa-download"></i> Image de fond</label>
159
                </div>
160
                <div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
161
                <div class="file-return fond hidden"></div>
162
              </div><!-- end #profile-details-description-section -->
3164 idir 163
 
3174 idir 164
              <div class="register-section" id="profile-details-fields-section">
165
                <h2>Champs</h2>
166
                <label for="type_localisation">Type de localisation</label>
167
                <div class="select-wrapper">
168
                  <select  id="type_localisation" name="type_localisation" >
169
                    <option value="<?php echo (isset($widget['type_localisation'])) ? $widget['type_localisation'] : 'point'; ?>"><?php echo (isset($widget['type_localisation'])) ? $widget['type_localisation'] : 'point'; ?></option>
170
                    <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>
171
                  </select>
172
                </div>
3164 idir 173
 
3174 idir 174
                <label for="localisation">Zoom</label>
175
                <input type="text" name="localisation" id="localisation" value="<?php echo isset($widget['localisation']) ? $widget['localisation'] : ''; ?>"  />
3164 idir 176
 
3174 idir 177
                <label for="milieux">Milieux</label>
178
                <input type="text" name="milieux" id="milieux" value="<?php echo isset($widget['milieux']) ? $widget['milieux'] : ''; ?>">
3167 idir 179
 
3174 idir 180
                <label for="type_especes">Type liste espèce *</label>
181
                <div class="select-wrapper">
182
                  <select  id="type_especes" name="type_especes" required>
183
                    <option selected="selected" value="referentiel">Référentiel</option>
184
                    <option value="liste">Liste</option>
185
                    <option value="liste" title="remplir référentiel + envoyer csv">Liste + autres</option>
186
                    <option value="fixe">Espèce fixée</option>
187
                  </select>
3164 idir 188
                </div>
3167 idir 189
 
3174 idir 190
                <label for="referentiel">Référentiel *</label>
191
                <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'] : ''; ?>">
3167 idir 192
 
3174 idir 193
                <!-- Bouton fichier-type à compléter -->
194
                <div class="input-file-container">
195
                  <input type="file" class="input-file" name="especes" id="especes">
196
                  <label for="especes"class="label-file"><i class="fas fa-download"></i> Espèces</label>
197
                </div>
198
                <div class="remove-file button" name="remove-file" title="Supprimer le fichier"><i class="fas fa-times" aria-hidden="true"></i></div>
199
                <a href="#" class="button fichier-type"><i class="fas fa-file-alt" aria-hidden="true"></i> Fichier type</a>
200
                <div class="file-return especes hidden"></div>
201
              </div><!-- end #profile-details-fields-section -->
3171 idir 202
 
3174 idir 203
              <!--Submit-->
204
              <div class="submit complete-registration" id="submit-button">
205
                <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>
3171 idir 206
              </div>
3174 idir 207
              <!--Submit-->
3171 idir 208
 
3174 idir 209
            </form><!-- end #new-widget-form -->
210
 
211
            <form id="new-fields" autocomplete="off">
212
                <h2>Ajouter des champs</h2>
213
                <p class="message">
214
                  <i class="fa fa-exclamation-triangle" aria-hidden="true" style="color:#ff5d55"></i>
215
                  &nbsp;Attention :
216
                  <br>
217
                  <i class="fa fa-bolt" aria-hidden="true"  style="color:#B3C954"></i>
218
                  &nbsp;Le bouton "Valider" sert à valider les champs supplémentaires uniquement
219
                  <br>
220
                  <i class="fas fa-trophy" aria-hidden="true"  style="color:#B3C954"></i>
221
                  &nbsp;Le bouton "Terminer" sert à envoyer la totalité du nouveau widget
222
                </p>
223
            </form><!-- #new-fields = fomulaire oû viennent s'insérer les champs supplémentaires -->
224
 
225
            <div class="row">
226
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
227
                <label class="add-fields">Ajouter</label>
228
                <div class="button" id="add-fields" title="Ajouter un champ"><i class="fa fa-plus" aria-hidden="true"></i></div>
229
              </div>
230
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
231
                <label for="preview-field">Prévisualiser</label>
232
                <div class="button" id="preview-field" name="preview-field" title="prévisualiser"><i class="fa fa-magic" aria-hidden="true"></i></div>
233
              </div>
234
              <div class="col-md-4 col-sm-4 col-xs-4 buttons">
235
                <label class="validate-new-fields">Valider</label>
236
                <div class="button" id="validate-new-fields" title="Valider les champs supplémentaires"><i class="fa fa-bolt" aria-hidden="true"></i></div>
237
              </div>
3167 idir 238
            </div>
239
 
3174 idir 240
            <hr>
241
 
3167 idir 242
          </div><!-- end .widget-blocks = tout le bloc de gauche-->
243
 
3174 idir 244
          <div class="widget-blocks col-md-8">
3167 idir 245
<!-- <iframe src="http://localhost/widget:cel:saisie2?projet=<?php echo isset($widget['projet'])?$widget['projet']:'base'; ?>" class="widget-renderer" height="100%" width="100%" ></iframe> -->
3185 idir 246
            <div class="widget-renderer">
3167 idir 247
 
3174 idir 248
              <div id="preview-header" class="row">
3189 idir 249
                  <div id="preview-logo" class="col-md-4"></div>
3167 idir 250
                  <div id="preview-title" class="col-md-8">
251
                    <h1></h1>
252
                  </div>
253
 
254
              </div>
255
 
3174 idir 256
              <div id="preview-messages" class="row">
3167 idir 257
 
3174 idir 258
                <div id="preview-description" class="col-md-7">
259
                  <div class="message">
260
                    <h3>
261
                      <span>Projet : </span>
262
                      <span class="projet-description"></span>
263
                    </h3>
264
                    <p class="preview-description"></p>
265
                  </div>
3167 idir 266
                </div><!-- end #preview-description -->
267
 
3174 idir 268
                <div id="preview-aide" class="col-md-5">
269
                  <div class="message">
270
                    <h3>Aide</h3>
271
                    <p>
272
                      Cet outil vous permet de partager simplement vos observations avec
273
                      le <a target="_blank" href="https://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
274
                      (<a target="_blank" href="https://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
275
                      Identifiez-vous bien pour ensuite retrouver et gérer vos données dans votre
276
                      <a target="_blank" href="https://www.tela-botanica.org/appli:cel"> Carnet en ligne</a>.
277
                      Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
278
                      Elles apparaissent immédiatement sur les
279
                      <a target="_blank" href="https://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
280
                    </p>
281
                    <p class="discretion">
282
                      Pour toute question ou remarque,
283
                      <a href="https://www.tela-botanica.org/widget:reseau:remarques?service=cel&pageSource=http%3A%2F%2Flocalhost%2Fcel%2Fwidget%2Findex.php%2F%3Fprojet%3Dbase" target="_blank" onclick=
284
                      "
285
                        javascript:window.open(
286
                          this.getAttribute('href'),
287
                          'Tela Botanica - Remarques',
288
                          config='height=700, width=640, scrollbars=yes, resizable=yes'
289
                        );
290
                        return false;
291
                      ">contactez-nous</a>
292
                    </p>
293
                  </div>
3167 idir 294
                </div>
295
              </div><!-- end #preview-aide -->
296
 
297
              <div id="preview-formulaire" class="row">
298
 
299
                <form id="preview-form-observateur" role="form" autocomplete="on">
300
 
301
                  <h2>Observateur</h2>
302
 
3185 idir 303
                  <div id="zone-courriel" class="row">
3167 idir 304
 
305
                    <div class="col-md-6">
306
                      <label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
3185 idir 307
                        <i class="fa fa-envelope"></i> Courriel *
3167 idir 308
                      </label>
3185 idir 309
                      <input type="email" id="courriel" name="courriel" title="Veuillez saisir votre adresse courriel. ">
310
                      <input type="hidden" id="id_utilisateur" name="id_utilisateur">
3167 idir 311
                    </div>
312
 
313
                    <div id="zone-courriel-confirmation" class="col-md-6 ">
314
                      <label for="courriel_confirmation" class="" title="Veuillez confirmer le courriel.">
3185 idir 315
                        <i class="fa fa-envelope"></i> Courriel * (confirmation)
3167 idir 316
                      </label>
3185 idir 317
                      <input type="email" id="courriel_confirmation" name="courriel_confirmation">
3167 idir 318
                    </div>
319
 
320
                  </div>
321
 
3185 idir 322
                  <div id="zone-prenom-nom" class="row">
3167 idir 323
 
3185 idir 324
                    <div class="col-md-6">
325
                      <label for="prenom" class=""><i class="fa fa-user"></i> Prénom</label>
326
                      <input type="text" id="prenom" name="prenom">
3167 idir 327
                    </div>
328
 
329
                    <div class="col-md-6 ">
3185 idir 330
                      <label for="nom" class=""><i class="fa fa-user"></i> Nom</label>
331
                      <input type="text" id="nom" name="nom">
3167 idir 332
                    </div>
333
 
334
                  </div>
335
 
336
                </form>
337
 
338
                <form id="form-observation" role="form" autocomplete="on">
339
 
340
                  <h2>Observation</h2>
341
 
3185 idir 342
                  <div id="zone-observation" class="row">
3167 idir 343
 
344
                    <div class="col-md-6 ">
345
                      <label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
3185 idir 346
                        <i class="fa fa-envelope"></i> Geolocalisation *
3167 idir 347
                      </label>
3185 idir 348
                      <input type="email" id="courriel" name="courriel" title="Veuillez saisir votre adresse courriel. ">
349
                      <input type="hidden" id="id_utilisateur" name="id_utilisateur">
350
 
351
                      <label for="milieu" class=""><i class="fa fa-street-view"></i> Milieu</label>
352
                      <input type="text" id="milieu" name="milieu" placeholder="bois, champ, falaise, ...">
3167 idir 353
                    </div>
354
 
355
                    <div class="col-md-6">
356
                      <label for="date" class="" title="">
3185 idir 357
                        <i class="fa fa-calendar"></i> Date de relevé *
3167 idir 358
                      </label>
3185 idir 359
                      <div class="date" id="datetimepicker">
3167 idir 360
                        <input type="date" id="date" name="date" class="form-control hasDatepicker">
361
                      </div>
3185 idir 362
 
3167 idir 363
                      <label for="referentiel" class="" title="">
3185 idir 364
                        <i class="fa fa-book"></i> Référentiel *
3167 idir 365
                      </label>
3185 idir 366
                      <div class="select-wrapper add-field-select">
367
                        <select id="referentiel" name="referentiel">
368
                          <option value="" selected="" title="">-</option>
369
                        </select>
3167 idir 370
                      </div>
3185 idir 371
 
372
                      <label for="taxon" class="" title=""><i class="fa fa-leaf"></i> Espèce</label>
373
                      <div class="date">
374
                        <input type="text" name="taxon" id="taxon" >
3167 idir 375
                      </div>
3185 idir 376
 
3167 idir 377
                      <label for="certitude" class="" title="">
3185 idir 378
                        <i class="fa fa-question"></i> Certitude *
3167 idir 379
                      </label>
3185 idir 380
                      <div class="date select-wrapper add-field-select id="datetimepicker">
381
                        <select id="certitude" name="certitude">
382
                          <option value="">-</option>
383
                        </select>
3167 idir 384
                      </div>
385
                    </div>
386
 
387
                  </div>
388
 
389
                </form>
390
 
3185 idir 391
                <!-- formulaire d'affichage des bouveaux champs -->
3167 idir 392
                <form id="form-supp" role="form" autocomplete="on">
393
                  <div id="zone-supp" class="row align-items-center">
3174 idir 394
                    <div class="col-md-6 preview-container"></div>
3167 idir 395
                  </div>
396
                </form>
397
 
398
                <div id="image" class="row align-items-center"></div>
399
 
400
              </div><!-- end #preview-formulaire -->
401
 
402
            </div><!-- end #widget-renderer-->
403
 
404
          </div><!-- #widget-blocks = tout le bloc de droite-->
405
 
3164 idir 406
        </div>
3167 idir 407
      </div>
408
    </div>
3174 idir 409
    <div id="help-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="help-modal-label" style="display: none;" aria-hidden="true">
410
      <div class="modal-dialog modal-dialog-centered" role="document">
411
        <div class="modal-content">
412
          <div class="modal-header">
413
            <h5 class="modal-title" id="help-modal-label"></h5>
414
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
415
              <span aria-hidden="true">×</span>
416
            </button>
417
          </div>
418
          <div class="modal-body" id="print_content"></div>
419
          <div class="modal-footer">
420
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
421
          </div>
422
        </div>
423
      </div>
424
    </div>
3167 idir 425
    <script type="text/javascript" src="<?php echo $url_base; ?>modules/manager/squelettes/js/manager.js"></script>
426
  </body>
3164 idir 427
</html>