Modification de son propre utilisateur

Geoffrey PREUD'HOMME
1 parent 1de801b7
Showing 2 changed files with 75 additions and 36 deletions Show diff stats
index.html
js/init.js
@@ -319,6 +319,9 @@
                     </ul>
                 </div>
                 <div id="utilisateurs">
+                    <h4>{{ moi.login }}</h4>
+                    <umodifier :utilisateur="moi"></umodifier>
+
                     <h4>Liste des utilisateurs</h4>
                     <button @click="actuUtilisateurs">Rafraîchir</button>
                     <ul class="collapsible popout" data-collapsible="accordion">
@@ -329,39 +332,7 @@
                                 <i class="material-icons" v-if="utilisateur.droit == 3">supervisor_account</i> {{ utilisateur.login }}
                             </div>
                             <div class="collapsible-body">
-                                <h5>Changer de droit</h5>
-                                <form @change="u_droit(utilisateur)">
-                                    <p>
-                                        <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_1'" v-model="utilisateur.droit" value="1" />
-                                        <label :for="'droit_' + utilisateur.login + '_1'">BDE</label>
-                                    </p>
-                                    <p>
-                                        <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_2'" v-model="utilisateur.droit" value="2" />
-                                        <label :for="'droit_' + utilisateur.login + '_2'">Bar</label>
-                                    </p>
-                                    <p>
-                                        <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_3'" v-model="utilisateur.droit" value="3" />
-                                        <label :for="'droit_' + utilisateur.login + '_3'">Président</label>
-                                    </p>
-                                </form>
-                                <h5>Changer de mot de passe</h5>
-                                <form @submit="u_mdp(utilisateur)">
-                                    <div class="input-field">
-                                        <i class="material-icons prefix">vpn_key</i>
-                                        <input type="password" name="mdp" v-model="utilisateur.mdp" length="72">
-                                        <label for="utilisateur.mdp">Mot de passe</label>
-                                    </div>
-                                    <button :disabled="!utilisateur.mdp">Changer de mot de passe</button>
-                                </form>
-                                <h5> Changer de carte </h5>
-                                <form @submit="u_carte(utilisateur)">
-                                    <div class="input-field">
-                                        <i class="material-icons prefix">credit_card</i>
-                                        <input type="text" name="carte" length="8" v-model="utilisateur.idCarte">
-                                        <label for="utilisateur.idCarte">Carte</label>
-                                    </div>
-                                    <button :disabled="!utilisateur.idCarte">Changer de carte</button>
-                                </form>
+                                <umodifier :utilisateur="utilisateur"></umodifier>
  
                                 <h5>Transactions</h5>
                                 <todo></todo>
@@ -393,11 +364,52 @@
         </div>
     </footer>
  
+    <!-- Modèles -->
+    <script type="text/template" id="todo">
+        <div class="chip green">
+            Prochainement
+        </div>
+    </script>
+    <script type="text/template" id="u_modifier">
+        <h5>Changer de droit</h5>
+        <form @change="u_droit(utilisateur)">
+            <p>
+                <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_1'" v-model="utilisateur.droit" value="1" :disabled="moi.droit < 3"/>
+                <label :for="'droit_' + utilisateur.login + '_1'">BDE</label>
+            </p>
+            <p>
+                <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_2'" v-model="utilisateur.droit" value="2" :disabled="moi.droit < 3"/>
+                <label :for="'droit_' + utilisateur.login + '_2'">Bar</label>
+            </p>
+            <p>
+                <input :name="'droit_' + utilisateur.login" type="radio" :id="'droit_' + utilisateur.login + '_3'" v-model="utilisateur.droit" value="3" :disabled="moi.droit < 3"/>
+                <label :for="'droit_' + utilisateur.login + '_3'">Président</label>
+            </p>
+        </form>
+        <h5>Changer de mot de passe</h5>
+        <form @submit="u_mdp(utilisateur)">
+            <div class="input-field">
+                <i class="material-icons prefix">vpn_key</i>
+                <input type="password" name="mdp" v-model="utilisateur.mdp" length="72">
+                <label for="utilisateur.mdp">Mot de passe</label>
+            </div>
+            <button :disabled="!utilisateur.mdp">Changer de mot de passe</button>
+        </form>
+        <h5> Changer de carte </h5>
+        <form @submit="u_carte(utilisateur)">
+            <div class="input-field">
+                <i class="material-icons prefix">credit_card</i>
+                <input type="text" name="carte" length="8" v-model="utilisateur.idCarte">
+                <label for="utilisateur.idCarte">Carte</label>
+            </div>
+            <button :disabled="!utilisateur.idCarte">Changer de carte</button>
+        </form>
+    </script>
  
     <!--  Scripts-->
     <script src="lib/jquery/dist/jquery.min.js"></script>
     <script src="lib/Materialize/dist/js/materialize.min.js"></script>
-    <script src="lib/vue/dist/vue.min.js"></script>
+    <script src="lib/vue/dist/vue.js"></script>
     <script src="js/init.js"></script>
  
 </body>
@@ -39,11 +39,18 @@ var app = new Vue({
         jeton: '',
         connecte: false,
         date: 1,
+        // Champs (à remplacer par des objets)
+        mdp: '',
+        idCarte: '',
+        solde: 0,
+        credit: 0,
+        prix: 0,
+        moi: {},
+        u_nouveau: {},
         // Données
         clients: [],
         transactions: [],
         utilisateurs: [],
-        u_nouveau: {},
     },
     methods: {
         // API
@@ -223,10 +230,13 @@ var app = new Vue({
                 that.mdp = ''
                 switch(retour) {
                     case "ok":
+                        // TODO Virer les variables non-objet globales
                         that.login = donnees.login
                         that.droit = donnees.droit
                         that.jeton = donnees.jeton
                         that.connecte = that.date
+
+                        that.moi = {login: donnees.login, droit: donnees.droit, jeton: donnees.jeton, connecte: that.date}
                         that.toast("Correctement identifié en tant que " + that.login + " pour " + JETON_DUREE/60+ " minutes")
                         that.page = 'operations'
                         break;
@@ -310,7 +320,22 @@ var app = new Vue({
         }
     },
     components: {
-        'todo': Vue.extend({template: '<div class="chip green"> Prochainement </div>'}),
+        'todo': Vue.extend({
+            template: $('#todo').html(),
+        }),
+        'umodifier': Vue.extend({
+            props: ['utilisateur'],
+            template: $('#u_modifier').html(),
+            methods: { // TODO Pas bien
+                u_droit: function(data) { return this.$parent.u_droit(data) },
+                u_mdp: function(data) { return this.$parent.u_mdp(data) },
+                u_carte: function(data) { return this.$parent.u_carte(data) },
+            },
+            computed: {
+                moi: function() { return this.$parent.moi },
+            },
+        }),
+
     },
     watch: {
         utilisateurs: function() {
@@ -319,10 +344,12 @@ var app = new Vue({
     }
 })
  
+// Filtres
 Vue.filter('date', function(timestamp) {
     return Date(timestamp).toLocaleString();
 })
  
+// Actualisation du timer
 setInterval(function actualiserDate() {
     app.$data.date = Math.floor(Date.now()/1000)
 }, 1000);