Blame view

index.html 8.94 KB
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">
cbd06cbb   Geoffrey PREUD'HOMME   Fix Material Icons
54
          <div class="nav-wrapper container">
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
55
56
57
58
59
              <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>
              </div>
cbd06cbb   Geoffrey PREUD'HOMME   Fix Material Icons
60
              <ul class="right hide-on-med-and-down">
2146d35a   Geoffrey PREUD'HOMME   Vue interactive
61
                  <li v-if="connecte">
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
62
                      <a class="dropdown-button" data-activates="menuUtilisateur">
2146d35a   Geoffrey PREUD'HOMME   Vue interactive
63
64
65
                          <i class="material-icons">perm_identity</i> {{ login }} (<i class="material-icons">timer</i> {{ timer }})
                      </a>
                  </li>
cbd06cbb   Geoffrey PREUD'HOMME   Fix Material Icons
66
              </ul>
c450b12e   Geoffrey PREUD'HOMME   Annulation + ombres
67
              <ul class="tabs" v-show="page == 'operations'">
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
68
69
70
71
                  <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>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin...
72
              </ul>
c450b12e   Geoffrey PREUD'HOMME   Annulation + ombres
73
74
75
              <ul class="side-nav">
                  <li><a>TODO</a></li>
              </ul>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin...
76
77
78
          </div>
      </nav>
  
07329faa   Geoffrey PREUD'HOMME   Simplification de...
79
      <div id="main">
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
80
          <div class="container" v-show="page == 'connexion'">
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin...
81
              <h4>Se connecter</h4>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
82
83
84
85
              <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
86
                          <i class="material-icons prefix">account_circle</i>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
87
88
                          <input type="text" name="login" v-model="login">
                          <label for="login">Identifiant</label>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin...
89
                      </div>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
90
                      <div class="input-field">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
91
                          <i class="material-icons prefix">vpn_key</i>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
92
93
                          <input type="password" name="mdp" v-model="mdp">
                          <label for="mdp">Mot de passe</label>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin...
94
                      </div>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
95
                      <button :disabled="!login || !mdp">Se connecter</button>
2146d35a   Geoffrey PREUD'HOMME   Vue interactive
96
              </div>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
97
98
99
100
101
              </form>
          </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...
102
          </div>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
103
104
105
106
  
          <div class="container" v-show="page == 'operations'">
              <div class="row center">
                  <div id="creation">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
107
                      <h4>Créer un nouveau client</h4>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
108
109
                      <form @submit="creer">
                          <div class="input-field" v-if="!PEUT_NFC">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
110
111
                              <i class="material-icons prefix">credit_card</i>
                              <input type="text" name="idCarte" length="8" v-model="idCarte">
07329faa   Geoffrey PREUD'HOMME   Simplification de...
112
113
114
                              <label for="idCarte">Identifiant de la carte</label>
                          </div>
                          <div class="input-field">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
115
                              <i class="material-icons prefix">trending_flat</i>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
116
117
118
                              <input type="number" name="solde" v-model="solde">
                              <label for="solde">Solde initial (€)</label>
                          </div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac...
119
                          <button type="submit" :disabled="!solde || (!PEUT_NFC && !idCarte)">Créer</button>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
120
                      </form>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
121
122
                  </div>
                  <div id="rechargement">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
123
                      <h4>Recharger un client</h4>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
124
125
                      <form @submit="recharger">
                          <div class="input-field" v-if="!PEUT_NFC">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
126
127
                              <i class="material-icons prefix">credit_card</i>
                              <input type="text" name="idCarte" length="8" v-model="idCarte">
07329faa   Geoffrey PREUD'HOMME   Simplification de...
128
129
130
                              <label for="idCarte">Identifiant de la carte</label>
                          </div>
                          <div class="input-field">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
131
                              <i class="material-icons prefix">trending_up</i>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
132
133
134
                              <input type="number" name="credit" v-model="credit">
                              <label for="credit">Crédit (€)</label>
                          </div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac...
135
                          <button type="submit" :disabled="!credit || (!PEUT_NFC && !idCarte)">Recharger</button>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
136
                      </form>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
137
138
                  </div>
                  <div id="paiement">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
139
                      <h4>Vendre à un client</h4>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac...
140
                      <form>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
141
                          <div class="input-field" v-if="!PEUT_NFC">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
142
143
                              <i class="material-icons prefix">credit_card</i>
                              <input type="text" name="idCarte" length="8" v-model="idCarte">
07329faa   Geoffrey PREUD'HOMME   Simplification de...
144
145
                              <label for="idCarte">Identifiant de la carte</label>
                          </div>
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
146
147
148
149
150
                          <div class="row">
                              <h5>En spécifiant le nombre de consommations</h5>
                          </div>
                          <div id="grilleBieres">
                              <div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac...
151
                                  <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
152
                              </div>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
153
154
                          </div>
                          <div class="row">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
155
156
157
158
159
160
                              <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...
161
                          </div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac...
162
                          <button type="submit" @click="payer" :disabled="!prix || (!PEUT_NFC && !idCarte)">Payer</button>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
163
                      </form>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
164
165
                  </div>
                  <div id="vidange">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
166
                      <h4>Vider le contenu de la carte d'un client</h4>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
167
168
                      <form @submit="vidanger">
                          <div class="input-field" v-if="!PEUT_NFC">
4525b510   Geoffrey PREUD'HOMME   Des trucs useless
169
170
                              <i class="material-icons prefix">credit_card</i>
                              <input type="text" name="idCarte" length="8" v-model="idCarte">
07329faa   Geoffrey PREUD'HOMME   Simplification de...
171
172
                              <label for="idCarte">Identifiant de la carte</label>
                          </div>
1dc9797d   Geoffrey PREUD'HOMME   Reste des transac...
173
                          <button type="submit" :disabled="!PEUT_NFC && !idCarte">Vider</button>
07329faa   Geoffrey PREUD'HOMME   Simplification de...
174
                      </form>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
175
176
177
                  </div>
              </div>
          </div>
3ad816b7   Geoffrey PREUD'HOMME   Écran de connexion
178
      </div>
e5e2f19a   Geoffrey PREUD'HOMME   Mutli-pages
179
  
07329faa   Geoffrey PREUD'HOMME   Simplification de...
180
      <footer class="page-footer">
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin...
181
182
183
184
185
186
187
188
189
          <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 !
190
191
      <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
192
      <script src="lib/vue/dist/vue.min.js"></script>
3c5e66e0   Geoffrey PREUD'HOMME   Pas de PHP au fin...
193
194
195
196
197
      <script src="js/init.js"></script>
  
  </body>
  
  </html>