LeClubInfo / 10p5-server

Commit 07329faa4a24da1794592c58eae5a791a9ee9dd3

Authored by Geoffrey PREUD'HOMME
1 parent 40f71ab1

Simplification de l'HTML et du CSS 

Et on enlève le cancer avec du cancer !
Comme on dit, on soigne le mal par le mal.
Showing 3 changed files with 126 additions and 117 deletions   Show diff stats
Inline Side-by-side
index.html
  Show/Hide comments   View file @07329fa
... ... @@ -50,7 +50,7 @@
50 50 </div>
51 51  
52 52 <!-- Page -->
53   - <nav class="red" role="navigation">
  53 + <nav role="navigation">
54 54 <div class="nav-wrapper container">
55 55 <a class="brand-logo" v-if="page == 'connexion'">10⁵</a>
56 56 <div class="left" v-else>
... ... @@ -68,8 +68,8 @@
68 68 <li><a>TODO</a></li>
69 69 </ul>
70 70 </div>
71   - <div class="col s12 red" v-show="page == 'operations'">
72   - <ul class="tabs red">
  71 + <div class="col s12" v-show="page == 'operations'">
  72 + <ul class="tabs">
73 73 <li class="tab col s3"><a href="#creation">Création</a></li>
74 74 <li class="tab col s3"><a href="#rechargement">Rechargement</a></li>
75 75 <li class="tab col s3"><a class="active" href="#paiement">Paiement</a></li>
... ... @@ -78,125 +78,102 @@
78 78 </div>
79 79 </nav>
80 80  
81   - <div class="section no-pad-bot" id="main">
82   - <br><br><br>
  81 + <div id="main">
83 82 <div class="container" v-show="page == 'connexion'">
84 83 <h4>Se connecter</h4>
85   - <h5>Avec votre identifiant et votre mot de passe</h5>
86   - <div class="row">
87   - <form class="col s12">
88   - <div class="row">
89   - <div class="input-field col s12">
90   - <input type="text" name="login" v-model="login">
91   - <label for="login">Identifiant</label>
92   - </div>
93   - </div>
94   - <div class="row">
95   - <div class="input-field col s12">
96   - <input type="password" name="mdp" v-model="mdp">
97   - <label for="mdp">Mot de passe</label>
98   - </div>
  84 + <div>
  85 + <h5>Avec votre identifiant et votre mot de passe</h5>
  86 + <form @submit="connecter">
  87 + <div class="input-field">
  88 + <input type="text" name="login" v-model="login">
  89 + <label for="login">Identifiant</label>
99 90 </div>
100   - <div class="row">
101   - <a class="btn-large waves-effect waves-light disabled" @click="connecter" :class="{'disabled': !peutConnecter}">Se connecter</a>
  91 + <div class="input-field">
  92 + <input type="password" name="mdp" v-model="mdp">
  93 + <label for="mdp">Mot de passe</label>
102 94 </div>
103   - </form>
104   - </div>
105   - <div v-if="PEUT_NFC">
106   - <h5>Avec votre carte étudiant</h5>
107   - <p>Passez-la simplement devant le lecteur</p>
  95 + <button :disabled="!login || !mdp">Se connecter</button>
108 96 </div>
  97 + </form>
  98 + </div>
  99 + <div v-if="PEUT_NFC">
  100 + <h5>Avec votre carte étudiant</h5>
  101 + <p>Passez-la simplement devant le lecteur.</p>
109 102 </div>
110 103  
111 104 <div class="container" v-show="page == 'operations'">
112 105 <div class="row center">
113 106 <div id="creation">
114 107 <h5>Créer un nouveau client</h5>
115   - <div class="row">
116   - <form class="col s12">
117   - <div class="input-field col s12" v-if="!PEUT_NFC">
118   - <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
119   - <label for="idCarte">Identifiant de la carte</label>
120   - </div>
121   - <div class="input-field col s12">
122   - <input type="number" name="solde" v-model="solde">
123   - <label for="solde">Solde initial (€)</label>
124   - </div>
125   - <div class="row center">
126   - <a class="btn-large waves-effect waves-light" @click="creer" :class="{'disabled': !peutCreer}">Créer</a>
127   - </div>
128   - </form>
129   - </div>
  108 + <form @submit="creer">
  109 + <div class="input-field" v-if="!PEUT_NFC">
  110 + <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
  111 + <label for="idCarte">Identifiant de la carte</label>
  112 + </div>
  113 + <div class="input-field">
  114 + <input type="number" name="solde" v-model="solde">
  115 + <label for="solde">Solde initial (€)</label>
  116 + </div>
  117 + <button :disabled="!solde || (!PEUT_NFC && !idCarte)">Créer</button>
  118 + </form>
130 119 </div>
131 120 <div id="rechargement">
132 121 <h5>Recharger un client</h5>
133   - <div class="row">
134   - <form class="col s12">
135   - <div class="input-field col s12" v-if="!PEUT_NFC">
136   - <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
137   - <label for="idCarte">Identifiant de la carte</label>
138   - </div>
139   - <div class="input-field col s12">
140   - <input type="number" name="credit">
141   - <label for="credit">Crédit (€)</label>
142   - </div>
143   - <div class="row center">
144   - <a class="btn-large waves-effect waves-light btn modal-trigger">Recharger</a>
145   - </div>
146   - </form>
147   - </div>
  122 + <form @submit="recharger">
  123 + <div class="input-field" v-if="!PEUT_NFC">
  124 + <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
  125 + <label for="idCarte">Identifiant de la carte</label>
  126 + </div>
  127 + <div class="input-field">
  128 + <input type="number" name="credit" v-model="credit">
  129 + <label for="credit">Crédit (€)</label>
  130 + </div>
  131 + <button :disabled="!credit || (!PEUT_NFC && !idCarte)">Créer</button>
  132 + </form>
148 133 </div>
149 134 <div id="paiement">
150 135 <h5>Vendre à un client</h5>
151   - <div class="row">
152   - <form class="col s12">
153   - <div class="input-field col s12" v-if="!PEUT_NFC">
154   - <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
155   - <label for="idCarte">Identifiant de la carte</label>
156   - </div>
157   - <br/>
  136 + <form @submit="payer">
  137 + <div class="input-field" v-if="!PEUT_NFC">
  138 + <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
  139 + <label for="idCarte">Identifiant de la carte</label>
  140 + </div>
  141 + <div>
158 142 <h6>En spécifiant le nombre de consommations</h6>
159 143 <div id="grilleBieres">
160   - <div class="row">
161   - <div class="col s4"><a class="waves-effect waves-light btn">1</a></div>
162   - <div class="col s4"><a class="waves-effect waves-light btn">2</a></div>
163   - <div class="col s4"><a class="waves-effect waves-light btn">3</a></div>
  144 + <div>
  145 + <div v-for="i in [1, 2, 3]"><button :disabled="!PEUT_NFC && !idCarte">{{ i }}</button></div>
164 146 </div>
165   - <div class="row">
166   - <div class="col s4"><a class="waves-effect waves-light btn">4</a></div>
167   - <div class="col s4"><a class="waves-effect waves-light btn">5</a></div>
168   - <div class="col s4"><a class="waves-effect waves-light btn">6</a></div>
  147 + <div>
  148 + <div v-for="i in [4, 5, 6]"><button :disabled="!PEUT_NFC && !idCarte">{{ i }}</button></div>
169 149 </div>
170 150 </div>
171   - <br/>
  151 + </div>
  152 + <div class="row">
172 153 <h6>En spécifiant un montant</h6>
173   - <div class="row">
174   - <div class="input-field col s12">
175   - <input type="number" name="prix">
176   - <label for="prix">Prix (€)</label>
177   - </div>
  154 + <div class="input-field">
  155 + <input type="number" name="prix" v-model="prix">
  156 + <label for="prix">Prix (€)</label>
178 157 </div>
179   - <div class="row center">
180   - <a class="btn-large waves-effect waves-light">Payer</a>
181   - </div>
182   - </form>
183   - </div>
  158 + </div>
  159 + <button :disabled="!prix || (!PEUT_NFC && !idCarte)">Payer</button>
  160 + </form>
184 161 </div>
185 162 <div id="vidange">
186 163 <h5>Vider le contenu de la carte d'un client</h5>
187   - <div class="input-field col s12" v-if="!PEUT_NFC">
188   - <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
189   - <label for="idCarte">Identifiant de la carte</label>
190   - </div>
191   - <div class="row center">
192   - <a class="btn-large waves-effect waves-light">Vider</a>
193   - </div>
  164 + <form @submit="vidanger">
  165 + <div class="input-field" v-if="!PEUT_NFC">
  166 + <input type="text" name="idCarte" maxlength="8" v-model="idCarte">
  167 + <label for="idCarte">Identifiant de la carte</label>
  168 + </div>
  169 + <button :disabled="!PEUT_NFC && !idCarte">Vider</button>
  170 + </form>
194 171 </div>
195 172 </div>
196 173 </div>
197 174 </div>
198 175  
199   - <footer class="page-footer red">
  176 + <footer class="page-footer">
200 177 <div class="footer-copyright">
201 178 <div class="container">
202 179 10p5 v0.0.0 - © Copyright 2016, <a href="http://clubinfo.plil.net">Le Club Info Polytech Lille</a>
... ...
js/init.js
  Show/Hide comments   View file @07329fa
... ... @@ -11,10 +11,11 @@ var TRANSACTION_DUREE = 60
11 11  
12 12 var PEUT_NFC = false
13 13  
14   -// Fonctions pour Materialize
  14 +// Préparation de l'interactivité
15 15 $(function(){
16 16 $('.button-collapse').sideNav();
17 17 $('.modal-trigger').leanModal()
  18 + $('form').submit(function() { return false });
18 19 });
19 20  
20 21 // Application
... ... @@ -54,7 +55,7 @@ var app = new Vue({
54 55 },
55 56 // Fonctionnement
56 57 connecter: function() {
57   - if (!this.peutConnecter) return
  58 + console.log(57)
58 59 var that = this;
59 60 this.apiBrute("utilisateur/connexion", {login: this.login , mdp: this.mdp} , function(retour, donnees) {
60 61 that.mdp = ''
... ... @@ -77,9 +78,9 @@ var app = new Vue({
77 78 break;
78 79 }
79 80 })
  81 + return false
80 82 },
81 83 creer: function() {
82   - if (!this.peutCreer) return
83 84 var that = this
84 85 this.api("client/ajouter", {idCarte: this.idCarte, solde: this.solde}, function(retour, donnees) {
85 86 switch(retour) {
... ... @@ -99,12 +100,6 @@ var app = new Vue({
99 100 }
100 101 },
101 102 computed: {
102   - peutConnecter: function() {
103   - return this.login && this.mdp;
104   - },
105   - peutCreer: function() {
106   - return this.solde && (this.PEUT_NFC || this.idCarte)
107   - },
108 103 timer: function() {
109 104 var secondes = this.connecte + JETON_DUREE - this.date
110 105 var minutes = Math.floor(secondes/60)
... ...
scss/style.scss
  Show/Hide comments   View file @07329fa
... ... @@ -5,7 +5,7 @@
5 5 @import "../lib/Materialize/sass/components/color";
6 6  
7 7 // Définition de la couleur principale de Materialize
8   -$primary-color: color("red", "lighten-2") !default;
  8 +$primary-color: color("red", "base") !default;
9 9 $primary-color-light: lighten($primary-color, 15%) !default;
10 10 $primary-color-dark: darken($primary-color, 15%) !default;
11 11  
... ... @@ -14,12 +14,18 @@ $success-color: color(&quot;green&quot;, &quot;base&quot;) !default;
14 14 $error-color: color("pink", "base") !default;
15 15 $link-color: color("blue", "darken-1") !default;
16 16  
  17 +// Couleur des onglets : texte clair sur fond coloré
  18 +$tabs-underline-color: $secondary-color !default;
  19 +$tabs-text-color: #fff !default;
  20 +$tabs-bg-color: $primary-color !default;
  21 +
17 22 // Import du reste de Materialize
18 23 @import "../lib/Materialize/sass/materialize.scss";
19 24  
20 25 // Import des icônes Material Design
21 26 @import "../lib/material-design-icons/iconfont/material-icons.css";
22 27  
  28 +// Permet le footer de se mettre toujours en bas
23 29 body {
24 30 display: flex;
25 31 min-height: 100vh;
... ... @@ -28,39 +34,70 @@ body {
28 34  
29 35 #main {
30 36 flex: 1 0 auto;
  37 + margin-top: 100px;
31 38 }
32 39  
  40 +footer.page-footer {
  41 + margin-top: 0;
  42 + padding-top: 0;
  43 +}
  44 +
  45 +// Suppression de l'espace entre les onglets
  46 +nav {
  47 + line-height: $navbar-height-mobile;
  48 +}
  49 +
  50 +// Affichage correct des icônes dans le header
33 51 nav i.material-icons {
34 52 display: inline;
35 53 font-size: 1rem;
36 54 }
37 55  
38   -nav .tabs .tab a {
39   - color: white;
  56 +// Stylisation de tous les boutons
  57 +button {
  58 + @extend .btn-large;
  59 + @extend .waves-effect;
  60 + @extend .waves-light;
  61 +}
  62 +
  63 +button[disabled] {
  64 + @extend .disabled;
40 65 }
41 66  
42   -nav .tabs .indicator {
43   - background-color: #fff59d;
  67 +// Simplification des formulaires
  68 +form {
  69 + @extend .row;
  70 + >.input-field {
  71 + @extend .col;
  72 + @extend .s12;
  73 + }
44 74 }
45 75  
  76 +
  77 +
  78 +// On met les toasts en bas
46 79 #toast-container {
47 80 top: inherit;
48 81 bottom: 10%;
49   -}
50 82  
51   -#toast a {
52   - text-transform: uppercase;
  83 + a {
  84 + text-transform: uppercase;
  85 + }
53 86 }
54 87  
55   -#grilleBieres a {
56   - width: 90%;
57   - padding: 25px;
58   - height: 100px;
59   - font-size: 3em;
60   -}
61   -
62   -footer.page-footer {
63   - margin-top: 0;
64   - padding-top: 0;
  88 +#grilleBieres {
  89 + >div {
  90 + @extend .row;
  91 + >div {
  92 + @extend .col;
  93 + @extend .s4;
  94 + >button {
  95 + width: 90%;
  96 + padding: 25px;
  97 + height: 150px;
  98 + font-size: 3em;
  99 + }
  100 + }
  101 + }
65 102 }
66 103  
... ...