LeClubInfo / 10p5-server

Commit 2146d35af4dd1119bd2fb6dc22c625d65257cc96

Authored by Geoffrey PREUD'HOMME
1 parent cbd06cbb

Vue interactive

Showing 3 changed files with 90 additions and 46 deletions   Show diff stats
Inline Side-by-side
bower.json
  Show/Hide comments   View file @2146d35
... ... @@ -17,6 +17,7 @@
17 17 ],
18 18 "dependencies": {
19 19 "Materialize": "materialize#^0.97.6",
20   - "material-design-icons": "^2.2.3"
  20 + "material-design-icons": "^2.2.3",
  21 + "vue": "^1.0.21"
21 22 }
22 23 }
... ...
index.html
  Show/Hide comments   View file @2146d35
... ... @@ -14,12 +14,25 @@
14 14  
15 15 <body>
16 16 <!-- Réutilisable -->
  17 + <div id="modalErreur" class="modal">
  18 + <div class="modal-content">
  19 + <h4>{{ erreurTitre }}</h4>
  20 + <p v-if="modalGeneriqueContenu">{{ erreurMessage }}</p>
  21 + </div>
  22 + <div class="modal-footer">
  23 + <a class="modal-action modal-close waves-effect btn-flat">Ça marche</a>
  24 + </div>
  25 + </div>
17 26 <!-- Page -->
18 27 <nav class="red" role="navigation">
19 28 <div class="nav-wrapper container">
20   - <a id="logo-container" href="#" class="brand-logo">10⁵</a>
  29 + <a id="logo-container" href="#" class="brand-logo">{{ nomApplication }}</a>
21 30 <ul class="right hide-on-med-and-down">
22   - <li><a class="dropdown-button" href="#!" data-activates="menuUtilisateur"><i class="material-icons">perm_identity</i> vigou (<i class="material-icons">timer</i> 3:12)</a></li>
  31 + <li v-if="connecte">
  32 + <a class="dropdown-button" href="#!" data-activates="menuUtilisateur">
  33 + <i class="material-icons">perm_identity</i> {{ login }} (<i class="material-icons">timer</i> {{ timer }})
  34 + </a>
  35 + </li>
23 36 </ul>
24 37 <ul id="nav-mobile" class="side-nav">
25 38 <li><a href="#">TODO</a></li>
... ... @@ -31,28 +44,30 @@
31 44 <div class="container">
32 45 <br><br><br>
33 46 <h4>Se connecter</h4>
34   - <h4>Avec votre identifiant et votre mot de passe</h4>
  47 + <h5>Avec votre identifiant et votre mot de passe</h5>
35 48 <div class="row">
36 49 <form class="col s12">
37 50 <div class="row">
38 51 <div class="input-field col s12">
39   - <input type="text" id="login">
  52 + <input type="text" name="login" v-model="login">
40 53 <label for="login">Identifiant</label>
41 54 </div>
42 55 </div>
43 56 <div class="row">
44 57 <div class="input-field col s12">
45   - <input type="password" id="mdp">
  58 + <input type="password" name="mdp" v-model="mdp">
46 59 <label for="mdp">Mot de passe</label>
47 60 </div>
48 61 </div>
49 62 <div class="row">
50   - <a href="#!" id="connecter" class="btn-large waves-effect waves-light">Se connecter</a>
  63 + <a href="#!" class="btn-large waves-effect waves-light disabled" @click="connecter" :class="{'disabled': !peutConnecter}">Se connecter</a>
51 64 </div>
52 65 </form>
53 66 </div>
54   - <h5>Avec votre carte étudiant</h5>
55   - <p>Passez-la simplement devant le lecteur</p>
  67 + <div v-if="peutNFC">
  68 + <h5>Avec votre carte étudiant</h5>
  69 + <p>Passez-la simplement devant le lecteur</p>
  70 + </div>
56 71 </div>
57 72 </div>
58 73 </div>
... ... @@ -68,6 +83,7 @@
68 83 <!-- Scripts-->
69 84 <script src="lib/jquery/dist/jquery.min.js"></script>
70 85 <script src="lib/Materialize/dist/js/materialize.min.js"></script>
  86 + <script src="lib/vue/dist/vue.min.js"></script>
71 87 <script src="js/init.js"></script>
72 88  
73 89 </body>
... ...
js/init.js
  Show/Hide comments   View file @2146d35
... ... @@ -9,53 +9,80 @@ var TRANSACTION_VIDANGE = 4
9 9  
10 10 var TRANSACTION_DUREE = 60
11 11  
12   -// Informations de connexion
13   -
14   -var login, droit, jeton, debut;
15   -
16 12 // Fonctions pour Materialize
17 13 $(function(){
18 14 $('.button-collapse').sideNav();
19 15 $('.modal-trigger').leanModal()
20   -}); // end of document ready
  16 +});
21 17  
22   -// Fonctions communes
  18 +// Application
23 19  
24   -function APIbrute(chemin, donnees, cb) {
25   - var url = "api/" + chemin;
26   - $.post(url, donnees, function(data) {
27   - cb(data['status'], data);
28   - })
  20 +var app = new Vue({
  21 + el: 'body',
  22 + data: {
  23 + nomApplication: "10⁵",
  24 + connecte: false,
  25 + erreurTitre: '',
  26 + erreurMessage: '',
  27 + date: 1,
  28 + },
  29 + methods: {
  30 + // API
  31 + apiBrute: function(chemin, donnees, cb) {
  32 + $.post('api/' + chemin, donnees, function(data) {
  33 + cb(data['status'], data);
  34 + })
  35 + },
  36 + // Affichage
  37 + toast: function(texte) {
  38 + Materialize.toast(texte, 4000);
  39 + },
  40 + erreur: function(retour, donnees) {
  41 + this.erreurTitre = retour
  42 + this.erreurMessage = donnees['message']
  43 + $("#modalErreur").openModal();
  44 + },
  45 + // Fonctionnement
  46 + connecter: function() {
  47 + if (!this.peutConnecter) return
  48 + var that = this;
  49 + this.apiBrute("utilisateur/connexion", {login: this.login , mdp: this.mdp} , function(retour, donnees) {
  50 + that.mdp = ''
  51 + switch(retour) {
  52 + case "ok":
  53 + that.login = donnees.login
  54 + that.droit = donnees.droit
  55 + that.jeton = donnees.jeton
  56 + that.connecte = that.date
  57 + that.toast("Correctement identifié en tant que " + that.login + " pour 10 minutes")
  58 + break;
29 59  
30   -}
  60 + case "identifiants_invalides":
  61 + that.toast("Identifiants invalides")
  62 + break;
31 63  
32   -function toast(texte) {
33   - Materialize.toast(texte, 4000);
34   -}
35   -
36   -// Connexion
37   -$("#connecter").click(function() {
38   - var login = $("#login").val();
39   - var mdp = $("#mdp").val();
40   - APIbrute("utilisateur/connexion", {login: login , mdp: mdp} , function(retour, donnees) {
41   - switch(retour) {
42   - case "identifiants_invalides":
43   - toast("Identifiants invalides")
44   - break;
  64 + default:
  65 + that.erreur(retour, donnees);
  66 + break;
  67 + }
  68 + })
  69 + },
  70 + },
  71 + computed: {
  72 + peutConnecter: function() {
  73 + return this.login && this.mdp;
  74 + },
  75 + timer: function() {
  76 + var secondes = this.connecte + JETON_DUREE - this.date
  77 + return Math.floor(secondes/60) + ':' + (secondes % 60)
  78 + }
  79 + },
  80 +})
45 81  
46   - case "ok":
47   - login = donnees.login;
48   - droit = donnees.droit;
49   - jeton = donnees.jeton;
50   - toast("Correctement identifié en tant que " + login + " pour 10 minutes")
51   - break;
  82 +setInterval(function actualiserDate() {
  83 + app.$data.date = Math.floor(Date.now()/1000)
  84 +}, 1000);
52 85  
53   - default:
54   - toast("Erreur interne");
55   - break;
56   - }
57   - });
58   -});
59 86  
60 87 // Placeholder
61 88 function vendu() {
... ...