Subversion Repositories eFlore/Applications.cel

Rev

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