LeClubInfo / 10p5-server

Blame view

index.html 18.7 KB
Edit Raw Normal View History
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
1
2
3
4
5
6
7
8
9
 
  <!DOCTYPE html>
  <html lang="fr">
  
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0" />
      <title>10⁵</title>
  
      <!-- CSS  -->
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
10
11
12
13
14
 
      <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
  </head>
  
  <body>
      <!-- Réutilisable -->
2146d35a   Geoffrey PREUD'HOMME   Vue interactive 
15
16
17
18
19
20
21
22
23
 
      <div id="modalErreur" class="modal">
          <div class="modal-content">
              <h4>{{ erreurTitre }}</h4>
              <p v-if="modalGeneriqueContenu">{{ erreurMessage }}</p>
          </div>
          <div class="modal-footer">
              <a class="modal-action modal-close waves-effect btn-flat">Ça marche</a>
          </div>
      </div>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
      <ul id="menuUtilisateur" class="dropdown-content">
          <li><a>Se déconnecter</a></li>
          <li><a>Changer de mot de passe</a></li>
          <li><a>Changer de carte</a></li>
          <li class="prezSeul"><a>Gestion des utilisateurs</a></li>
      </ul>
      <div id="passerCarte" class="modal">
          <div class="modal-content">
              <h4>Passez la carte du client</h4>
              <p>Veuillez passer la carte du client concerné pour finaliser l'action suivante : <strong>recharger 10 €</strong>.</p>
          </div>
          <div class="modal-footer">
              <a class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
          </div>
      </div>
      <div id="soldeInsuffisant" class="modal">
          <div class="modal-content">
              <h4>Solde insuffisant</h4>
              <p>
                  Le solde de la carte <strong>QUAELUY1RO</strong> n'est pas suffisant pour effectuer un paiement de 3,50 €.<br/> Solde actuel : 2,70 €<br/> Manquant : 0,80 €<br/>
              </p>
          </div>
          <div class="modal-footer">
              <a href="#rechargement" class="modal-action modal-close waves-effect waves-green btn-flat">Recharger</a>
              <a class="modal-action modal-close waves-effect waves-red btn-flat">Annuler</a>
          </div>
      </div>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
52
 
      <!-- Page -->
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
53
 
      <nav role="navigation">
958e6af7   Geoffrey PREUD'HOMME   Corrections du CSS 
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
 
          <div>
              <div>
                  <a class="brand-logo" v-if="page == 'connexion'">10⁵</a>
                  <div class="left" v-else>
                      <a class="breadcrumb">10⁵</a>
                      <a class="breadcrumb" v-if="page == 'operations'">Opérations</a>
                      <a class="breadcrumb" v-if="page == 'gestion'">Gestion</a>
                  </div>
                  <ul class="right hide-on-med-and-down">
                      <li v-if="connecte">
                          <a class="dropdown-button" data-activates="menuUtilisateur">
                              <i class="material-icons">perm_identity</i> {{ login }} (<i class="material-icons">timer</i> {{ timer }})
                          </a>
                      </li>
                      <li v-if="connecte && page == 'operations'">
                          <a @click="page = 'gestion'">
                              <i class="material-icons">settings</i> Gestion
                          </a>
                      </li>
                      <li v-if="connecte && page == 'gestion'">
                          <a @click="page = 'operations'">
                              <i class="material-icons">play_arrow</i> Opérations
                          </a>
                      </li>
                  </ul>
              </div>
              <div>
                  <ul class="tabs" v-show="page == 'operations'">
                      <li class="tab col s3"><a href="#creation">Création</a></li>
                      <li class="tab col s3"><a href="#rechargement">Rechargement</a></li>
                      <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li>
                      <li class="tab col s3"><a href="#vidange">Vidange</a></li>
                  </ul>
                  <ul class="tabs" v-show="page == 'gestion'">
                      <li class="tab col s3"><a href="#clients">Clients</a></li>
                      <li class="tab col s3"><a href="#transactions">Transactions</a></li>
                      <li class="tab col s3"><a href="#utilisateurs">Utilisateurs</a></li>
                      <li class="tab col s3"><a href="#statistiques">Statistiques</a></li>
                  </ul>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
93
 
              </div>
c450b12e   Geoffrey PREUD'HOMME   Annulation + ombres 
94
 
              <ul class="side-nav">
c85f3520   Geoffrey PREUD'HOMME   Modification des ... 
95
 
                  <todo></todo>
c450b12e   Geoffrey PREUD'HOMME   Annulation + ombres 
96
 
              </ul>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
97
98
99
 
          </div>
      </nav>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
100
 
      <div id="main">
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
101
 
          <div class="container" v-show="page == 'connexion'">
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
102
 
              <h4>Se connecter</h4>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
103
104
105
106
 
              <div>
                  <h5>Avec votre identifiant et votre mot de passe</h5>
                  <form @submit="connecter">
                      <div class="input-field">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
107
 
                          <i class="material-icons prefix">account_circle</i>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
108
109
 
                          <input type="text" name="login" v-model="login">
                          <label for="login">Identifiant</label>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
110
 
                      </div>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
111
 
                      <div class="input-field">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
112
 
                          <i class="material-icons prefix">vpn_key</i>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
113
114
 
                          <input type="password" name="mdp" v-model="mdp">
                          <label for="mdp">Mot de passe</label>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
115
 
                      </div>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
116
 
                      <button :disabled="!login || !mdp">Se connecter</button>
d0fe5751   Geoffrey PREUD'HOMME   Liste des transac... 
117
 
                  </form>
2146d35a   Geoffrey PREUD'HOMME   Vue interactive 
118
 
              </div>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
119
120
121
122
 
          </div>
          <div v-if="PEUT_NFC">
              <h5>Avec votre carte étudiant</h5>
              <p>Passez-la simplement devant le lecteur.</p>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
123
 
          </div>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
124
125
 
  
          <div class="container" v-show="page == 'operations'">
d0fe5751   Geoffrey PREUD'HOMME   Liste des transac... 
126
 
              <div class="row">
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
127
 
                  <div id="creation">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
128
 
                      <h4>Créer un nouveau client</h4>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
129
130
 
                      <form @submit="creer">
                          <div class="input-field" v-if="!PEUT_NFC">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
131
132
 
                              <i class="material-icons prefix">credit_card</i>
                              <input type="text" name="idCarte" length="8" v-model="idCarte">
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
133
134
135
 
                              <label for="idCarte">Identifiant de la carte</label>
                          </div>
                          <div class="input-field">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
136
 
                              <i class="material-icons prefix">trending_flat</i>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
137
138
139
 
                              <input type="number" name="solde" v-model="solde">
                              <label for="solde">Solde initial (€)</label>
                          </div>
958e6af7   Geoffrey PREUD'HOMME   Corrections du CSS 
140
 
                          <div class="row" v-if="droit >= 3">
9868802a   Geoffrey PREUD'HOMME   Liste des clients 
141
142
143
144
145
146
147
148
149
150
 
                              <strong>Découvert autorisé</strong>
                              <div class="switch">
                                  <label>
                                      Non
                                      <input v-model="decouvert" type="checkbox">
                                      <span class="lever"></span>
                                      Oui
                                  </label>
                              </div>
                          </div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac... 
151
 
                          <button type="submit" :disabled="!solde || (!PEUT_NFC && !idCarte)">Créer</button>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
152
 
                      </form>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
153
154
 
                  </div>
                  <div id="rechargement">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
155
 
                      <h4>Recharger un client</h4>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
156
157
 
                      <form @submit="recharger">
                          <div class="input-field" v-if="!PEUT_NFC">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
158
159
 
                              <i class="material-icons prefix">credit_card</i>
                              <input type="text" name="idCarte" length="8" v-model="idCarte">
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
160
161
162
 
                              <label for="idCarte">Identifiant de la carte</label>
                          </div>
                          <div class="input-field">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
163
 
                              <i class="material-icons prefix">trending_up</i>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
164
165
166
 
                              <input type="number" name="credit" v-model="credit">
                              <label for="credit">Crédit (€)</label>
                          </div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac... 
167
 
                          <button type="submit" :disabled="!credit || (!PEUT_NFC && !idCarte)">Recharger</button>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
168
 
                      </form>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
169
170
 
                  </div>
                  <div id="paiement">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
171
 
                      <h4>Vendre à un client</h4>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac... 
172
 
                      <form>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
173
 
                          <div class="input-field" v-if="!PEUT_NFC">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
174
175
 
                              <i class="material-icons prefix">credit_card</i>
                              <input type="text" name="idCarte" length="8" v-model="idCarte">
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
176
177
 
                              <label for="idCarte">Identifiant de la carte</label>
                          </div>
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
178
179
180
181
182
 
                          <div class="row">
                              <h5>En spécifiant le nombre de consommations</h5>
                          </div>
                          <div id="grilleBieres">
                              <div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac... 
183
 
                                  <div v-for="i in [1, 2, 3, 4, 5, 6]"><button type="button" @click="payer(i)" :disabled="prix || (!PEUT_NFC && !idCarte)">{{ i }}</button></div>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
184
 
                              </div>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
185
186
 
                          </div>
                          <div class="row">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
187
188
189
190
191
192
 
                              <h5>En spécifiant un montant</h5>
                          </div>
                          <div class="input-field">
                              <i class="material-icons prefix">trending_down</i>
                              <input type="number" name="prix" v-model="prix">
                              <label for="prix">Prix (€)</label>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
193
 
                          </div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac... 
194
 
                          <button type="submit" @click="payer" :disabled="!prix || (!PEUT_NFC && !idCarte)">Payer</button>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
195
 
                      </form>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
196
197
 
                  </div>
                  <div id="vidange">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
198
 
                      <h4>Vider le contenu de la carte d'un client</h4>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
199
200
 
                      <form @submit="vidanger">
                          <div class="input-field" v-if="!PEUT_NFC">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless 
201
202
 
                              <i class="material-icons prefix">credit_card</i>
                              <input type="text" name="idCarte" length="8" v-model="idCarte">
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
203
204
 
                              <label for="idCarte">Identifiant de la carte</label>
                          </div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac... 
205
 
                          <button type="submit" :disabled="!PEUT_NFC && !idCarte">Vider</button>
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
206
 
                      </form>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
207
208
209
 
                  </div>
              </div>
          </div>
d0fe5751   Geoffrey PREUD'HOMME   Liste des transac... 
210
211
212
213
214
 
  
          <div class="container" v-show="page == 'gestion'">
              <div class="row">
                  <div id="clients">
                      <h4>Liste des clients</h4>
9868802a   Geoffrey PREUD'HOMME   Liste des clients 
215
216
217
218
219
220
221
222
223
224
225
226
227
 
                      <button @click="actuClients">Rafraîchir</button>
                      <ul class="collapsible popout" data-collapsible="accordion">
                          <li v-for="client in clients">
                              <div class="collapsible-header">
                                  <i class="material-icons">perm_identity</i> {{ client.idCarte }} : {{ client.solde }} €
                              </div>
                              <div class="collapsible-body">
                                  <ul>
                                      <li v-if="droit >= 3">
                                          <strong>Découvert autorisé</strong>
                                          <div class="switch">
                                              <label>
                                                  Non
c85f3520   Geoffrey PREUD'HOMME   Modification des ... 
228
 
                                                  <input v-model="client.decouvert" type="checkbox" @click="c_decouvert(client, $event)">
9868802a   Geoffrey PREUD'HOMME   Liste des clients 
229
230
231
232
233
234
235
 
                                                  <span class="lever"></span>
                                                  Oui
                                              </label>
                                          </div>
                                      </li>
                                  </ul>
                                  <h5>Transactions</h5>
c85f3520   Geoffrey PREUD'HOMME   Modification des ... 
236
 
                                  <todo></todo>
9868802a   Geoffrey PREUD'HOMME   Liste des clients 
237
238
239
 
                              </div>
                          </li>
                      </ul>
d0fe5751   Geoffrey PREUD'HOMME   Liste des transac... 
240
241
242
243
244
 
                  </div>
                  <div id="transactions">
                      <h4>Liste des transactions</h4>
                      <button @click="actuTransactions">Rafraîchir</button>
                      <ul class="collapsible popout" data-collapsible="accordion">
9868802a   Geoffrey PREUD'HOMME   Liste des clients 
245
 
                          <li v-for="transaction in transactions | orderBy 'date' -1">
d0fe5751   Geoffrey PREUD'HOMME   Liste des transac... 
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
 
                              <div class="collapsible-header" :class="{'red': !transaction.valide}">
                                  <span v-if="transaction.type == 1">
                                      <i class="material-icons">trending_flat</i> {{ transaction.client }} : {{ transaction.montant }} €
                                  </span>
                                  <span v-if="transaction.type == 2">
                                      <i class="material-icons">trending_up</i> {{ transaction.client }} : + {{ transaction.montant }} €
                                  </span>
                                  <span v-if="transaction.type == 3">
                                      <i class="material-icons">trending_down</i> {{ transaction.client }} : - {{ transaction.montant }} €
                                      <span v-if="transaction.quantite != 0">({{ transaction.quantite }} consommation<span v-if="transaction.quantite >= 2">s</span>)</span>
                                  </span>
                                  <span v-if="transaction.type == 4">
                                      <i class="material-icons">delete</i> {{ transaction.client }} : - {{ transaction.montant }} €
                                  </span>
                              </div>
                              <div class="collapsible-body">
                                  <ul>
                                      <li>
                                          <strong>Type :</strong>
                                          <span v-if="transaction.type == 1">Création</span>
                                          <span v-if="transaction.type == 2">Rechargement</span>
                                          <span v-if="transaction.type == 3">Date</span>
                                          <span v-if="transaction.type == 4">Vidange</span>
                                      </li>
                                      <li>
9868802a   Geoffrey PREUD'HOMME   Liste des clients 
271
 
                                          <strong>Date :</strong> <span v-text="transaction.date | date"></span>
d0fe5751   Geoffrey PREUD'HOMME   Liste des transac... 
272
273
274
275
276
277
278
279
280
281
282
283
 
                                      </li>
                                      <li>
                                          <strong>Utilisateur :</strong> {{ transaction.utilisateur }}
                                      </li>
                                  </ul>
                                  <button @click="annuler(transaction.id)" :disabled="!transaction.valide">Annuler</button>
                              </div>
                          </li>
                      </ul>
                  </div>
                  <div id="utilisateurs">
                      <h4>Liste des utilisateurs</h4>
c85f3520   Geoffrey PREUD'HOMME   Modification des ... 
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
 
                      <button @click="actuUtilisateurs">Rafraîchir</button>
                      <ul class="collapsible popout" data-collapsible="accordion">
                          <li v-for="utilisateur in utilisateurs">
                              <div class="collapsible-header">
                                  <i class="material-icons" v-if="utilisateur.droit == 1">assignment_ind</i>
                                  <i class="material-icons" v-if="utilisateur.droit == 2">perm_identity</i>
                                  <i class="material-icons" v-if="utilisateur.droit == 3">supervisor_account</i>
                                  {{ utilisateur.login }}
                              </div>
                              <div class="collapsible-body">
                                  <h5>Changer de droit</h5>
                                  <form @change="u_droit(utilisateur)">
                                      <p>
                                          <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_1'" v-model="utilisateur.droit" value="1"/>
                                          <label :for="'droit_' + utilisateur.login + '_1'">BDE</label>
                                      </p>
                                      <p>
                                          <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_2'" v-model="utilisateur.droit" value="2"/>
                                          <label :for="'droit_' + utilisateur.login + '_2'">Bar</label>
                                      </p>
                                      <p>
                                          <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_3'" v-model="utilisateur.droit" value="3"/>
                                          <label :for="'droit_' + utilisateur.login + '_3'">Président</label>
                                      </p>
                                  </form>
                                  <h5>Changer de mot de passe</h5>
                                  <form @submit="u_mdp(utilisateur)">
                                      <div class="input-field">
                                          <i class="material-icons prefix">vpn_key</i>
                                          <input type="password" name="mdp" v-model="utilisateur.mdp">
                                          <label for="utilisateur.mdp">Mot de passe</label>
                                      </div>
                                      <button :disabled="!utilisateur.mdp">Changer de mot de passe</button>
                                  </form>
                                  <h5> Changer de carte </h5>
                                  <form @submit="u_carte(utilisateur)">
                                      <div class="input-field">
                                          <i class="material-icons prefix">credit_card</i>
                                          <input type="text" name="carte" length="8" v-model="utilisateur.idCarte" >
                                          <label for="utilisateur.idCarte">Carte</label>
                                      </div>
                                      <button :disabled="!utilisateur.idCarte">Changer de carte</button>
                                  </form>
  
                                  <h5>Transactions</h5>
                                  <todo></todo>
                              </div>
                          </li>
                      </ul>
                  </div>
d0fe5751   Geoffrey PREUD'HOMME   Liste des transac... 
334
335
336
 
                  </div>
                  <div id="statistiques">
                      <h4>Statistiques</h4>
c85f3520   Geoffrey PREUD'HOMME   Modification des ... 
337
 
                      <todo></todo>
d0fe5751   Geoffrey PREUD'HOMME   Liste des transac... 
338
339
340
341
342
 
                  </div>
              </div>
          </div>
3ad816b7   Geoffrey PREUD'HOMME   Écran de connexion 
343
 
      </div>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages 
344
07329faa   Geoffrey PREUD'HOMME   Simplification de... 
345
 
      <footer class="page-footer">
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
346
347
348
349
350
351
352
353
354
 
          <div class="footer-copyright">
              <div class="container">
                  10p5 v0.0.0 - © Copyright 2016, <a href="http://clubinfo.plil.net">Le Club Info Polytech Lille</a>
              </div>
          </div>
      </footer>
  
  
      <!--  Scripts-->
68c7896a   Geoffrey PREUD'HOMME   Bower ! 
355
356
 
      <script src="lib/jquery/dist/jquery.min.js"></script>
      <script src="lib/Materialize/dist/js/materialize.min.js"></script>
2146d35a   Geoffrey PREUD'HOMME   Vue interactive 
357
 
      <script src="lib/vue/dist/vue.min.js"></script>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin... 
358
359
360
361
362
 
      <script src="js/init.js"></script>
  
  </body>
  
  </html>