Subversion Repositories eFlore/Applications.cel

Rev

Rev 3166 | Rev 3171 | 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 -->
182
              <label class="add-fields">Ajouter Champ</label>
183
              <div class="button" id="add-fields" title="Ajouter un champ"><i class="fa fa-plus" aria-hidden="true"></i></div>
184
            </div>
185
 
186
          </div><!-- end .widget-blocks = tout le bloc de gauche-->
187
 
188
          <div class="widget-blocks col-md-8 project">
189
            <p class="message">
190
              <?php if ($mode === 'modification') : ?>
191
                Attention vous modifiez un widget déjà existant, le tag et la langue ne peuvent pas être changer.
192
                S'il s'agit d'un projet type, en modifiant ce widget vous modifiez tous les widgets de ce type.
193
              <?php else : ?>
194
                Vous créez un widget, si vous choississez de le mettre dans un type, certains champs deviendront
195
                obligatoires et la localisation (point ou rue) sera automatiquement déterminée.
196
              <?php endif; ?>
197
            </p>
198
<!-- <iframe src="http://localhost/widget:cel:saisie2?projet=<?php echo isset($widget['projet'])?$widget['projet']:'base'; ?>" class="widget-renderer" height="100%" width="100%" ></iframe> -->
199
            <div class="widget-renderer">
200
 
201
              <div class="row">
202
 
203
                <div class="col-md-4">
204
                  <img id="preview-logo" src="" alt="">
205
                  <div id="preview-title" class="col-md-8">
206
                    <h1></h1>
207
                  </div>
3164 idir 208
                </div>
3167 idir 209
 
210
              </div>
211
 
212
              <div class="row">
213
 
214
                <div id="preview-description" class="col-md-6">
215
                  <div class="preview-description message"></div>
216
                </div><!-- end #preview-description -->
217
 
218
                <div id="preview-aide" class="message col-md-6">
219
                  <h3>Aide</h3>
220
                  <p>
221
                    Cet outil vous permet de partager simplement vos observations avec
222
                    le <a target="_blank" href="https://www.tela-botanica.org/site:accueil">réseau Tela Botanica</a>
223
                    (<a target="_blank" href="https://www.tela-botanica.org/page:licence">licence CC-BY-SA</a>).
224
                    Identifiez-vous bien pour ensuite retrouver et gérer vos données dans votre
225
                    <a target="_blank" href="https://www.tela-botanica.org/appli:cel"> Carnet en ligne</a>.
226
                    Créez jusqu'à 10 observations (avec 10Mo max d'images) puis partagez-les avec le bouton 'transmettre'.
227
                    Elles apparaissent immédiatement sur les
228
                    <a target="_blank" href="https://www.tela-botanica.org/site:botanique">cartes et galeries photos </a> du site.
229
                  </p>
230
                  <p class="discretion">
231
                    Pour toute question ou remarque,
232
                    <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=
233
                    "
234
                      javascript:window.open(
235
                        this.getAttribute('href'),
236
                        'Tela Botanica - Remarques',
237
                        config='height=700, width=640, scrollbars=yes, resizable=yes'
238
                      );
239
                      return false;
240
                    ">contactez-nous</a>
241
                  </p>
242
                </div>
243
              </div><!-- end #preview-aide -->
244
 
245
              <div id="preview-formulaire" class="row">
246
 
247
                <form id="preview-form-observateur" role="form" autocomplete="on">
248
 
249
                  <h2>Observateur</h2>
250
 
251
                  <div id="zone-courriel" class="row align-items-center">
252
 
253
                    <div class="col-md-6">
254
                      <label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
255
                        <strong class="obligatoire">*</strong>Courriel
256
                      </label>
257
                      <div class="input-group">
258
                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
259
                        <input type="email" id="courriel" name="courriel" class="form-control" title="Veuillez saisir votre adresse courriel. ">
260
                        <input type="hidden" id="id_utilisateur" name="id_utilisateur">
261
                      </div>
262
                    </div>
263
 
264
                    <div id="zone-courriel-confirmation" class="col-md-6 ">
265
                      <label for="courriel_confirmation" class="" title="Veuillez confirmer le courriel.">
266
                        <strong class="obligatoire">*</strong> Courriel (confirmation)
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_confirmation" name="courriel_confirmation" class="form-control">
271
                      </div>
272
                    </div>
273
 
274
                  </div>
275
 
276
                  <div id="zone-prenom-nom" class="row align-items-center">
277
 
278
                    <div class="col-md-6 ">
279
                      <label for="prenom" class="">Prénom</label>
280
                      <div class="input-group">
281
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
282
                        <input type="text" id="prenom" name="prenom" class="form-control">
283
                      </div>
284
                    </div>
285
 
286
                    <div class="col-md-6 ">
287
                      <label for="nom" class="">Nom</label>
288
                      <div class="input-group">
289
                        <span class="input-group-addon"><i class="fa fa-user"></i></span>
290
                        <input type="text" id="nom" name="nom" class="form-control">
291
                      </div>
292
                    </div>
293
 
294
                  </div>
295
 
296
                </form>
297
 
298
                <form id="form-observation" role="form" autocomplete="on">
299
 
300
                  <h2>Observation</h2>
301
 
302
                  <div id="zone-observation" class="row align-items-center">
303
 
304
                    <div class="col-md-6 ">
305
                      <label for="courriel" class="" title="Veuillez saisir votre adresse courriel.">
306
                        <strong class="obligatoire">*</strong>Geolocalisation
307
                      </label>
308
                      <div class="input-group">
309
                        <span class="input-group-addon"><i class="fa fa-envelope"></i></span>
310
                        <input type="email" id="courriel" name="courriel" class="form-control" title="Veuillez saisir votre adresse courriel. ">
311
                        <input type="hidden" id="id_utilisateur" name="id_utilisateur">
312
                      </div>
313
                      <label for="milieu" class="">Milieu</label>
314
                      <div class=" input-group">
315
                        <span class="input-group-addon"><i class="fa fa-street-view"></i></span>
316
                        <input type="text" id="milieu" name="milieu" class="form-control" placeholder="bois, champ, falaise, ...">
317
                      </div>
318
                    </div>
319
 
320
                    <div class="col-md-6">
321
                      <label for="date" class="" title="">
322
                        <strong class="obligatoire">*</strong>Date de relevé
323
                      </label>
324
                      <div class=" input-group date" id="datetimepicker">
325
                        <span id="date-icone" class="input-group-addon"><i class="fa fa-calendar"></i></span>
326
                        <input type="date" id="date" name="date" class="form-control hasDatepicker">
327
                      </div>
328
                      <label for="referentiel" class="" title="">
329
                        <strong class="obligatoire">*</strong>Référentiel
330
                      </label>
331
                      <div class=" input-group">
332
                        <span class="input-group-addon"><i class="fa fa-book"></i></span>
333
                        <select id="referentiel" name="referentiel" class="form-control">
334
                          <option value="" selected="" title="">-</option>
335
                        </select>
336
                      </div>
337
                      <label for="taxon" class="" title="">Espèce</label>
338
                      <div class=" input-group date">
339
                        <span class="input-group-addon"><i class="fa fa-leaf"></i></span>
340
                        <input type="text" name="taxon" class="form-control" id="taxon" >
341
                      </div>
342
                      <label for="certitude" class="" title="">
343
                        <strong class="obligatoire">*</strong>Certitude
344
                      </label>
345
                      <div class="input-group date" id="datetimepicker">
346
                        <span class="input-group-addon"><i class="fa fa-question"></i></span>
347
                        <select id="certitude" name="certitude" class="form-control">
348
                          <option value="">-</option>
349
                        </select>
350
                      </div>
351
                    </div>
352
 
353
                  </div>
354
 
355
                </form>
356
 
357
                <form id="form-supp" role="form" autocomplete="on">
358
                  <div id="zone-supp" class="row align-items-center">
359
                    <div class="col-md-6"></div>
360
                  </div>
361
                </form>
362
 
363
                <div id="image" class="row align-items-center"></div>
364
 
365
              </div><!-- end #preview-formulaire -->
366
 
367
            </div><!-- end #widget-renderer-->
368
 
369
          </div><!-- #widget-blocks = tout le bloc de droite-->
370
 
3164 idir 371
        </div>
3167 idir 372
      </div>
373
    </div>
374
    <script type="text/javascript" src="<?php echo $url_base; ?>modules/manager/squelettes/js/manager.js"></script>
375
    <script type="text/javascript" src="<?php echo $url_base; ?>modules/manager/squelettes/js/manger-submit-values.js"></script>
376
  </body>
3164 idir 377
</html>