Subversion Repositories eFlore/Applications.cel

Rev

Rev 3183 | Rev 3189 | 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">
249
                  <div id="preview-logo" class="col-md-4">
250
                    <img src="" alt="" width="75%">
251
                  </div>
3167 idir 252
                  <div id="preview-title" class="col-md-8">
253
                    <h1></h1>
254
                  </div>
255
 
256
              </div>
257
 
3174 idir 258
              <div id="preview-messages" class="row">
3167 idir 259
 
3174 idir 260
                <div id="preview-description" class="col-md-7">
261
                  <div class="message">
262
                    <h3>
263
                      <span>Projet : </span>
264
                      <span class="projet-description"></span>
265
                    </h3>
266
                    <p class="preview-description"></p>
267
                  </div>
3167 idir 268
                </div><!-- end #preview-description -->
269
 
3174 idir 270
                <div id="preview-aide" class="col-md-5">
271
                  <div class="message">
272
                    <h3>Aide</h3>
273
                    <p>
274
                      Cet outil vous permet de partager simplement vos observations avec
275
                      le <a target="_blank" href="https://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
276
                      (<a target="_blank" href="https://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
277
                      Identifiez-vous bien pour ensuite retrouver et gérer vos données dans votre
278
                      <a target="_blank" href="https://www.tela-botanica.org/appli:cel"> Carnet en ligne</a>.
279
                      Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
280
                      Elles apparaissent immédiatement sur les
281
                      <a target="_blank" href="https://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
282
                    </p>
283
                    <p class="discretion">
284
                      Pour toute question ou remarque,
285
                      <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=
286
                      "
287
                        javascript:window.open(
288
                          this.getAttribute('href'),
289
                          'Tela Botanica - Remarques',
290
                          config='height=700, width=640, scrollbars=yes, resizable=yes'
291
                        );
292
                        return false;
293
                      ">contactez-nous</a>
294
                    </p>
295
                  </div>
3167 idir 296
                </div>
297
              </div><!-- end #preview-aide -->
298
 
299
              <div id="preview-formulaire" class="row">
300
 
301
                <form id="preview-form-observateur" role="form" autocomplete="on">
302
 
303
                  <h2>Observateur</h2>
304
 
3185 idir 305
                  <div id="zone-courriel" class="row">
3167 idir 306
 
307
                    <div class="col-md-6">
308
                      <label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
3185 idir 309
                        <i class="fa fa-envelope"></i> Courriel *
3167 idir 310
                      </label>
3185 idir 311
                      <input type="email" id="courriel" name="courriel" title="Veuillez saisir votre adresse courriel. ">
312
                      <input type="hidden" id="id_utilisateur" name="id_utilisateur">
3167 idir 313
                    </div>
314
 
315
                    <div id="zone-courriel-confirmation" class="col-md-6 ">
316
                      <label for="courriel_confirmation" class="" title="Veuillez confirmer le courriel.">
3185 idir 317
                        <i class="fa fa-envelope"></i> Courriel * (confirmation)
3167 idir 318
                      </label>
3185 idir 319
                      <input type="email" id="courriel_confirmation" name="courriel_confirmation">
3167 idir 320
                    </div>
321
 
322
                  </div>
323
 
3185 idir 324
                  <div id="zone-prenom-nom" class="row">
3167 idir 325
 
3185 idir 326
                    <div class="col-md-6">
327
                      <label for="prenom" class=""><i class="fa fa-user"></i> Prénom</label>
328
                      <input type="text" id="prenom" name="prenom">
3167 idir 329
                    </div>
330
 
331
                    <div class="col-md-6 ">
3185 idir 332
                      <label for="nom" class=""><i class="fa fa-user"></i> Nom</label>
333
                      <input type="text" id="nom" name="nom">
3167 idir 334
                    </div>
335
 
336
                  </div>
337
 
338
                </form>
339
 
340
                <form id="form-observation" role="form" autocomplete="on">
341
 
342
                  <h2>Observation</h2>
343
 
3185 idir 344
                  <div id="zone-observation" class="row">
3167 idir 345
 
346
                    <div class="col-md-6 ">
347
                      <label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
3185 idir 348
                        <i class="fa fa-envelope"></i> Geolocalisation *
3167 idir 349
                      </label>
3185 idir 350
                      <input type="email" id="courriel" name="courriel" title="Veuillez saisir votre adresse courriel. ">
351
                      <input type="hidden" id="id_utilisateur" name="id_utilisateur">
352
 
353
                      <label for="milieu" class=""><i class="fa fa-street-view"></i> Milieu</label>
354
                      <input type="text" id="milieu" name="milieu" placeholder="bois, champ, falaise, ...">
3167 idir 355
                    </div>
356
 
357
                    <div class="col-md-6">
358
                      <label for="date" class="" title="">
3185 idir 359
                        <i class="fa fa-calendar"></i> Date de relevé *
3167 idir 360
                      </label>
3185 idir 361
                      <div class="date" id="datetimepicker">
3167 idir 362
                        <input type="date" id="date" name="date" class="form-control hasDatepicker">
363
                      </div>
3185 idir 364
 
3167 idir 365
                      <label for="referentiel" class="" title="">
3185 idir 366
                        <i class="fa fa-book"></i> Référentiel *
3167 idir 367
                      </label>
3185 idir 368
                      <div class="select-wrapper add-field-select">
369
                        <select id="referentiel" name="referentiel">
370
                          <option value="" selected="" title="">-</option>
371
                        </select>
3167 idir 372
                      </div>
3185 idir 373
 
374
                      <label for="taxon" class="" title=""><i class="fa fa-leaf"></i> Espèce</label>
375
                      <div class="date">
376
                        <input type="text" name="taxon" id="taxon" >
3167 idir 377
                      </div>
3185 idir 378
 
3167 idir 379
                      <label for="certitude" class="" title="">
3185 idir 380
                        <i class="fa fa-question"></i> Certitude *
3167 idir 381
                      </label>
3185 idir 382
                      <div class="date select-wrapper add-field-select id="datetimepicker">
383
                        <select id="certitude" name="certitude">
384
                          <option value="">-</option>
385
                        </select>
3167 idir 386
                      </div>
387
                    </div>
388
 
389
                  </div>
390
 
391
                </form>
392
 
3185 idir 393
                <!-- formulaire d'affichage des bouveaux champs -->
3167 idir 394
                <form id="form-supp" role="form" autocomplete="on">
395
                  <div id="zone-supp" class="row align-items-center">
3174 idir 396
                    <div class="col-md-6 preview-container"></div>
3167 idir 397
                  </div>
398
                </form>
399
 
400
                <div id="image" class="row align-items-center"></div>
401
 
402
              </div><!-- end #preview-formulaire -->
403
 
404
            </div><!-- end #widget-renderer-->
405
 
406
          </div><!-- #widget-blocks = tout le bloc de droite-->
407
 
3164 idir 408
        </div>
3167 idir 409
      </div>
410
    </div>
3174 idir 411
    <div id="help-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="help-modal-label" style="display: none;" aria-hidden="true">
412
      <div class="modal-dialog modal-dialog-centered" role="document">
413
        <div class="modal-content">
414
          <div class="modal-header">
415
            <h5 class="modal-title" id="help-modal-label"></h5>
416
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
417
              <span aria-hidden="true">×</span>
418
            </button>
419
          </div>
420
          <div class="modal-body" id="print_content"></div>
421
          <div class="modal-footer">
422
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button>
423
          </div>
424
        </div>
425
      </div>
426
    </div>
3167 idir 427
    <script type="text/javascript" src="<?php echo $url_base; ?>modules/manager/squelettes/js/manager.js"></script>
428
  </body>
3164 idir 429
</html>