Subversion Repositories eFlore/Applications.cel

Rev

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