Subversion Repositories eFlore/Applications.cel

Rev

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