Commit d0fe5751c237c762d7c08bf5b01419f5796f9c12
1 parent
7ee50aa3
Liste des transactions
Showing
3 changed files
with
102 additions
and
16 deletions
Show diff stats
index.html
@@ -56,6 +56,7 @@ | @@ -56,6 +56,7 @@ | ||
56 | <div class="left" v-else> | 56 | <div class="left" v-else> |
57 | <a class="breadcrumb">10⁵</a> | 57 | <a class="breadcrumb">10⁵</a> |
58 | <a class="breadcrumb" v-if="page == 'operations'">Opérations</a> | 58 | <a class="breadcrumb" v-if="page == 'operations'">Opérations</a> |
59 | + <a class="breadcrumb" v-if="page == 'gestion'">Gestion</a> | ||
59 | </div> | 60 | </div> |
60 | <ul class="right hide-on-med-and-down"> | 61 | <ul class="right hide-on-med-and-down"> |
61 | <li v-if="connecte"> | 62 | <li v-if="connecte"> |
@@ -63,6 +64,16 @@ | @@ -63,6 +64,16 @@ | ||
63 | <i class="material-icons">perm_identity</i> {{ login }} (<i class="material-icons">timer</i> {{ timer }}) | 64 | <i class="material-icons">perm_identity</i> {{ login }} (<i class="material-icons">timer</i> {{ timer }}) |
64 | </a> | 65 | </a> |
65 | </li> | 66 | </li> |
67 | + <li v-if="connecte && page == 'operations'"> | ||
68 | + <a @click="page = 'gestion'"> | ||
69 | + <i class="material-icons">settings</i> Gestion | ||
70 | + </a> | ||
71 | + </li> | ||
72 | + <li v-if="connecte && page == 'gestion'"> | ||
73 | + <a @click="page = 'operations'"> | ||
74 | + <i class="material-icons">play_arrow</i> Opérations | ||
75 | + </a> | ||
76 | + </li> | ||
66 | </ul> | 77 | </ul> |
67 | <ul class="tabs" v-show="page == 'operations'"> | 78 | <ul class="tabs" v-show="page == 'operations'"> |
68 | <li class="tab col s3"><a href="#creation">Création</a></li> | 79 | <li class="tab col s3"><a href="#creation">Création</a></li> |
@@ -70,6 +81,12 @@ | @@ -70,6 +81,12 @@ | ||
70 | <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li> | 81 | <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li> |
71 | <li class="tab col s3"><a href="#vidange">Vidange</a></li> | 82 | <li class="tab col s3"><a href="#vidange">Vidange</a></li> |
72 | </ul> | 83 | </ul> |
84 | + <ul class="tabs" v-show="page == 'gestion'"> | ||
85 | + <li class="tab col s3"><a href="#clients">Clients</a></li> | ||
86 | + <li class="tab col s3"><a href="#transactions">Transactions</a></li> | ||
87 | + <li class="tab col s3"><a href="#utilisateurs">Utilisateurs</a></li> | ||
88 | + <li class="tab col s3"><a href="#statistiques">Statistiques</a></li> | ||
89 | + </ul> | ||
73 | <ul class="side-nav"> | 90 | <ul class="side-nav"> |
74 | <li><a>TODO</a></li> | 91 | <li><a>TODO</a></li> |
75 | </ul> | 92 | </ul> |
@@ -93,8 +110,8 @@ | @@ -93,8 +110,8 @@ | ||
93 | <label for="mdp">Mot de passe</label> | 110 | <label for="mdp">Mot de passe</label> |
94 | </div> | 111 | </div> |
95 | <button :disabled="!login || !mdp">Se connecter</button> | 112 | <button :disabled="!login || !mdp">Se connecter</button> |
113 | + </form> | ||
96 | </div> | 114 | </div> |
97 | - </form> | ||
98 | </div> | 115 | </div> |
99 | <div v-if="PEUT_NFC"> | 116 | <div v-if="PEUT_NFC"> |
100 | <h5>Avec votre carte étudiant</h5> | 117 | <h5>Avec votre carte étudiant</h5> |
@@ -102,7 +119,7 @@ | @@ -102,7 +119,7 @@ | ||
102 | </div> | 119 | </div> |
103 | 120 | ||
104 | <div class="container" v-show="page == 'operations'"> | 121 | <div class="container" v-show="page == 'operations'"> |
105 | - <div class="row center"> | 122 | + <div class="row"> |
106 | <div id="creation"> | 123 | <div id="creation"> |
107 | <h4>Créer un nouveau client</h4> | 124 | <h4>Créer un nouveau client</h4> |
108 | <form @submit="creer"> | 125 | <form @submit="creer"> |
@@ -175,6 +192,63 @@ | @@ -175,6 +192,63 @@ | ||
175 | </div> | 192 | </div> |
176 | </div> | 193 | </div> |
177 | </div> | 194 | </div> |
195 | + | ||
196 | + <div class="container" v-show="page == 'gestion'"> | ||
197 | + <div class="row"> | ||
198 | + <div id="clients"> | ||
199 | + <h4>Liste des clients</h4> | ||
200 | + </div> | ||
201 | + <div id="transactions"> | ||
202 | + <h4>Liste des transactions</h4> | ||
203 | + <button @click="actuTransactions">Rafraîchir</button> | ||
204 | + <ul class="collapsible popout" data-collapsible="accordion"> | ||
205 | + <li v-for="transaction in transactions"> | ||
206 | + <div class="collapsible-header" :class="{'red': !transaction.valide}"> | ||
207 | + <span v-if="transaction.type == 1"> | ||
208 | + <i class="material-icons">trending_flat</i> {{ transaction.client }} : {{ transaction.montant }} € | ||
209 | + </span> | ||
210 | + <span v-if="transaction.type == 2"> | ||
211 | + <i class="material-icons">trending_up</i> {{ transaction.client }} : + {{ transaction.montant }} € | ||
212 | + </span> | ||
213 | + <span v-if="transaction.type == 3"> | ||
214 | + <i class="material-icons">trending_down</i> {{ transaction.client }} : - {{ transaction.montant }} € | ||
215 | + <span v-if="transaction.quantite != 0">({{ transaction.quantite }} consommation<span v-if="transaction.quantite >= 2">s</span>)</span> | ||
216 | + </span> | ||
217 | + <span v-if="transaction.type == 4"> | ||
218 | + <i class="material-icons">delete</i> {{ transaction.client }} : - {{ transaction.montant }} € | ||
219 | + </span> | ||
220 | + </div> | ||
221 | + <div class="collapsible-body"> | ||
222 | + <ul> | ||
223 | + <li> | ||
224 | + <strong>Type :</strong> | ||
225 | + <span v-if="transaction.type == 1">Création</span> | ||
226 | + <span v-if="transaction.type == 2">Rechargement</span> | ||
227 | + <span v-if="transaction.type == 3">Date</span> | ||
228 | + <span v-if="transaction.type == 4">Vidange</span> | ||
229 | + </li> | ||
230 | + <li> | ||
231 | + <strong>Date :</strong> {{ transaction.date }} | ||
232 | + </li> | ||
233 | + <li> | ||
234 | + <strong>Utilisateur :</strong> {{ transaction.utilisateur }} | ||
235 | + </li> | ||
236 | + </ul> | ||
237 | + <button @click="annuler(transaction.id)" :disabled="!transaction.valide">Annuler</button> | ||
238 | + </div> | ||
239 | + </li> | ||
240 | + </ul> | ||
241 | + </div> | ||
242 | + <div id="utilisateurs"> | ||
243 | + <h4>Liste des utilisateurs</h4> | ||
244 | + </div> | ||
245 | + <div id="statistiques"> | ||
246 | + <h4>Statistiques</h4> | ||
247 | + </div> | ||
248 | + </div> | ||
249 | + </div> | ||
250 | + | ||
251 | + | ||
178 | </div> | 252 | </div> |
179 | 253 | ||
180 | <footer class="page-footer"> | 254 | <footer class="page-footer"> |
js/init.js
@@ -33,6 +33,7 @@ var app = new Vue({ | @@ -33,6 +33,7 @@ var app = new Vue({ | ||
33 | // Session | 33 | // Session |
34 | connecte: false, | 34 | connecte: false, |
35 | date: 1, | 35 | date: 1, |
36 | + transactions: [], | ||
36 | }, | 37 | }, |
37 | methods: { | 38 | methods: { |
38 | // API | 39 | // API |
@@ -45,6 +46,22 @@ var app = new Vue({ | @@ -45,6 +46,22 @@ var app = new Vue({ | ||
45 | donnees['jeton'] = this.jeton | 46 | donnees['jeton'] = this.jeton |
46 | this.apiBrute(chemin, donnees, cb) | 47 | this.apiBrute(chemin, donnees, cb) |
47 | }, | 48 | }, |
49 | + actuTransactions: function() { | ||
50 | + var that = this | ||
51 | + this.api("transactions", {}, function(retour, donnees) { | ||
52 | + switch(retour) { | ||
53 | + case "ok": | ||
54 | + console.log(donnees.transactions[0].type, TRANSACTION_CREATION) | ||
55 | + that.transactions = donnees.transactions | ||
56 | + break; | ||
57 | + | ||
58 | + default: | ||
59 | + that.erreur(retour, donnees); | ||
60 | + break; | ||
61 | + } | ||
62 | + }) | ||
63 | + | ||
64 | + }, | ||
48 | // Affichage | 65 | // Affichage |
49 | toast: function(texte) { | 66 | toast: function(texte) { |
50 | Materialize.toast(texte, 4000); | 67 | Materialize.toast(texte, 4000); |
@@ -54,7 +71,7 @@ var app = new Vue({ | @@ -54,7 +71,7 @@ var app = new Vue({ | ||
54 | this.erreurMessage = donnees['message'] | 71 | this.erreurMessage = donnees['message'] |
55 | $("#modalErreur").openModal(); | 72 | $("#modalErreur").openModal(); |
56 | }, | 73 | }, |
57 | - annuler(id) { | 74 | + annuler: function(id) { |
58 | var that = this | 75 | var that = this |
59 | this.api("annuler", {idTransaction: id}, function(retour, donnees) { | 76 | this.api("annuler", {idTransaction: id}, function(retour, donnees) { |
60 | switch(retour) { | 77 | switch(retour) { |
@@ -68,7 +85,7 @@ var app = new Vue({ | @@ -68,7 +85,7 @@ var app = new Vue({ | ||
68 | } | 85 | } |
69 | }); | 86 | }); |
70 | }, | 87 | }, |
71 | - transaction(id, texte) { | 88 | + transaction: function(id, texte) { |
72 | var that = this | 89 | var that = this |
73 | var interieur = $('<span>').text(texte + ' ').append($('<a>').text('Annuler').one('click', function() { | 90 | var interieur = $('<span>').text(texte + ' ').append($('<a>').text('Annuler').one('click', function() { |
74 | that.annuler(id) | 91 | that.annuler(id) |
@@ -170,20 +187,12 @@ var app = new Vue({ | @@ -170,20 +187,12 @@ var app = new Vue({ | ||
170 | }, | 187 | }, |
171 | }) | 188 | }) |
172 | 189 | ||
190 | +Vue.filter('date', function(timestamp) { | ||
191 | + return Date(timestamp).toLocaleString(); | ||
192 | +}) | ||
193 | + | ||
173 | setInterval(function actualiserDate() { | 194 | setInterval(function actualiserDate() { |
174 | app.$data.date = Math.floor(Date.now()/1000) | 195 | app.$data.date = Math.floor(Date.now()/1000) |
175 | }, 1000); | 196 | }, 1000); |
176 | 197 | ||
177 | 198 | ||
178 | -// Placeholder | ||
179 | -function vendu() { | ||
180 | - var interieur = $("<span>").text("Vendu 1 bière à KAE1EET2YI (15,30 € → 13,50 €) ").append( | ||
181 | - $("<a>").attr("href", "#!").text("Annuler") | ||
182 | - ); | ||
183 | - Materialize.toast(interieur, 4000); | ||
184 | -} | ||
185 | - | ||
186 | -function soldeInsuffisant() { | ||
187 | - $("#soldeInsuffisant").openModal(); | ||
188 | -} | ||
189 | - |