Commit 2146d35af4dd1119bd2fb6dc22c625d65257cc96
1 parent
cbd06cbb
Vue interactive
Showing
3 changed files
with
90 additions
and
46 deletions
Show diff stats
bower.json
index.html
| @@ -14,12 +14,25 @@ | @@ -14,12 +14,25 @@ | ||
| 14 | 14 | ||
| 15 | <body> | 15 | <body> |
| 16 | <!-- Réutilisable --> | 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 | <!-- Page --> | 26 | <!-- Page --> |
| 18 | <nav class="red" role="navigation"> | 27 | <nav class="red" role="navigation"> |
| 19 | <div class="nav-wrapper container"> | 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 | <ul class="right hide-on-med-and-down"> | 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 | </ul> | 36 | </ul> |
| 24 | <ul id="nav-mobile" class="side-nav"> | 37 | <ul id="nav-mobile" class="side-nav"> |
| 25 | <li><a href="#">TODO</a></li> | 38 | <li><a href="#">TODO</a></li> |
| @@ -31,28 +44,30 @@ | @@ -31,28 +44,30 @@ | ||
| 31 | <div class="container"> | 44 | <div class="container"> |
| 32 | <br><br><br> | 45 | <br><br><br> |
| 33 | <h4>Se connecter</h4> | 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 | <div class="row"> | 48 | <div class="row"> |
| 36 | <form class="col s12"> | 49 | <form class="col s12"> |
| 37 | <div class="row"> | 50 | <div class="row"> |
| 38 | <div class="input-field col s12"> | 51 | <div class="input-field col s12"> |
| 39 | - <input type="text" id="login"> | 52 | + <input type="text" name="login" v-model="login"> |
| 40 | <label for="login">Identifiant</label> | 53 | <label for="login">Identifiant</label> |
| 41 | </div> | 54 | </div> |
| 42 | </div> | 55 | </div> |
| 43 | <div class="row"> | 56 | <div class="row"> |
| 44 | <div class="input-field col s12"> | 57 | <div class="input-field col s12"> |
| 45 | - <input type="password" id="mdp"> | 58 | + <input type="password" name="mdp" v-model="mdp"> |
| 46 | <label for="mdp">Mot de passe</label> | 59 | <label for="mdp">Mot de passe</label> |
| 47 | </div> | 60 | </div> |
| 48 | </div> | 61 | </div> |
| 49 | <div class="row"> | 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 | </div> | 64 | </div> |
| 52 | </form> | 65 | </form> |
| 53 | </div> | 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 | </div> | 71 | </div> |
| 57 | </div> | 72 | </div> |
| 58 | </div> | 73 | </div> |
| @@ -68,6 +83,7 @@ | @@ -68,6 +83,7 @@ | ||
| 68 | <!-- Scripts--> | 83 | <!-- Scripts--> |
| 69 | <script src="lib/jquery/dist/jquery.min.js"></script> | 84 | <script src="lib/jquery/dist/jquery.min.js"></script> |
| 70 | <script src="lib/Materialize/dist/js/materialize.min.js"></script> | 85 | <script src="lib/Materialize/dist/js/materialize.min.js"></script> |
| 86 | + <script src="lib/vue/dist/vue.min.js"></script> | ||
| 71 | <script src="js/init.js"></script> | 87 | <script src="js/init.js"></script> |
| 72 | 88 | ||
| 73 | </body> | 89 | </body> |
js/init.js
| @@ -9,53 +9,80 @@ var TRANSACTION_VIDANGE = 4 | @@ -9,53 +9,80 @@ var TRANSACTION_VIDANGE = 4 | ||
| 9 | 9 | ||
| 10 | var TRANSACTION_DUREE = 60 | 10 | var TRANSACTION_DUREE = 60 |
| 11 | 11 | ||
| 12 | -// Informations de connexion | ||
| 13 | - | ||
| 14 | -var login, droit, jeton, debut; | ||
| 15 | - | ||
| 16 | // Fonctions pour Materialize | 12 | // Fonctions pour Materialize |
| 17 | $(function(){ | 13 | $(function(){ |
| 18 | $('.button-collapse').sideNav(); | 14 | $('.button-collapse').sideNav(); |
| 19 | $('.modal-trigger').leanModal() | 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 | // Placeholder | 87 | // Placeholder |
| 61 | function vendu() { | 88 | function vendu() { |