Fixing attempt for timer position
[westcastle.git] / js / index.js
index 659a0dd..f58a403 100644 (file)
@@ -45,88 +45,6 @@ new Vue({
                                },
                        },
                },
-               'my-ranking': {
-                       props: ['players','sortByScore','writeScoreToDb'],
-                       template: `
-                               <div id="ranking">
-                                       <table class="ranking">
-                                               <tr class="title">
-                                                       <th>Rang</th>
-                                                       <th>Joueur</th>
-                                                       <th>Points</th>
-                                                       <th>Mini-pts</th>
-                                               </tr>
-                                               <tr v-for="p in sortedPlayers">
-                                                       <td>{{ p.rank }}</td>
-                                                       <td>{{ p.prenom }} {{ p.nom }}</td>
-                                                       <td>{{ p.pdt }}</td>
-                                                       <td>{{ p.session }}</td>
-                                               </tr>
-                                       </table>
-                                       <div class="button-container-vertical" style="width:200px">
-                                               <button class="btn cancel" @click="resetPlayers()">Réinitialiser</button>
-                                               <button id="restoreBtn" class="btn" @click="restoreLast()">Restaurer</button>
-                                       </div>
-                               </div>
-                       `,
-                       computed: {
-                               sortedPlayers: function() {
-                                       let res = this.rankPeople();
-                                       // Add rank information (taking care of ex-aequos)
-                                       let rank = 1;
-                                       for (let i=0; i<res.length; i++)
-                                       {
-                                               if (i==0 || this.sortByScore(res[i],res[i-1]) == 0)
-                                                       res[i].rank = rank;
-                                               else //strictly lower scoring
-                                                       res[i].rank = ++rank;
-                                       }
-                                       return res;
-                               },
-                       },
-                       methods: {
-                               rankPeople: function() {
-                                       return this.players
-                                               .slice(1) //discard Toto
-                                               .map( p => { return Object.assign({}, p); }) //to not alter original array
-                                               .sort(this.sortByScore);
-                               },
-                               resetPlayers: function() {
-                                       this.players
-                                               .slice(1) //discard Toto
-                                               .forEach( p => {
-                                                       p.pdt = 0;
-                                                       p.session = 0;
-                                                       p.available = 1;
-                                               });
-                                       this.writeScoreToDb();
-                                       document.getElementById("runPairing").click(); //TODO: hack...
-                               },
-                               restoreLast: function() {
-                                       let xhr = new XMLHttpRequest();
-                                       let self = this;
-                                       xhr.onreadystatechange = function() {
-                                               if (this.readyState == 4 && this.status == 200)
-                                               {
-                                                       let players = JSON.parse(xhr.responseText);
-                                                       if (players.length > 0)
-                                                       {
-                                                               players.unshift({ //add ghost 4th player for 3-players tables
-                                                                       prenom: "Toto",
-                                                                       nom: "",
-                                                                       pdt: 0,
-                                                                       session: 0,
-                                                                       available: 0,
-                                                               });
-                                                               self.players = players;
-                                                       }
-                                               }
-                                       };
-                                       xhr.open("GET", "scripts/rw_players.php?restore=1", true);
-                                       xhr.send(null);
-                               },
-                       },
-               },
                'my-pairings': {
                        props: ['players','writeScoreToDb'],
                        data: function() {
@@ -165,7 +83,7 @@ new Vue({
                                                                <td :class="{toto: players[tables[currentIndex][i]].prenom=='Toto'}">
                                                                        {{ players[tables[currentIndex][i]].prenom }} {{ players[tables[currentIndex][i]].nom }}
                                                                </td>
-                                                               <td><input type="text" v-model="sessions[currentIndex][i]" value="0"/></td>
+                                                               <td><input type="text" v-model="sessions[currentIndex][i]"/></td>
                                                        </tr>
                                                </table>
                                                <div class="button-container-horizontal">
@@ -175,7 +93,7 @@ new Vue({
                                                <div v-if="scored[currentIndex]" class="warning">
                                                        Attention: un score a déjà été enregistré.
                                                        Les points indiqués ici s'ajouteront : il faut d'abord
-                                                       <span class="link" @click="document.getElementById('restoreBtn').click()">restaurer l'état précédent.</span>
+                                                       <span class="link" @click="clickRestore()">restaurer l'état précédent.</span>
                                                        Si c'est déjà fait, ignorer ce message :)
                                                </div>
                                        </div>
@@ -236,8 +154,8 @@ new Vue({
                                },
                                setScore: function() {
                                        let sortedSessions = this.sessions[this.currentIndex]
-                                               .map( (s,i) => { return {value:s, index:i}; })
-                                               .sort( (a,b) => { return parseInt(b.value) - parseInt(a.value); });
+                                               .map( (s,i) => { return {value:parseInt(s), index:i}; })
+                                               .sort( (a,b) => { return b.value - a.value; });
                                        let pdts = [4, 2, 1, 0];
                                        // NOTE: take care of ex-aequos (spread points subtotal)
                                        let curSum = 0, curCount = 0, start = 0;
@@ -262,6 +180,9 @@ new Vue({
                                        this.currentIndex = -1;
                                        this.writeScoreToDb();
                                },
+                               clickRestore: function() {
+                                       document.getElementById('restoreBtn').click();
+                               },
                        },
                },
                'my-timer': {
@@ -272,7 +193,7 @@ new Vue({
                                };
                        },
                        template: `
-                               <div id="timer">
+                               <div id="timer" :style="{lineHeight: divHeight + 'px', fontSize: 0.66*divHeight + 'px', width: divWidth + 'px', height: divHeight + 'px'}">
                                        <div @click.left="pauseResume()" @click.right.prevent="reset()" :class="{timeout:time==0}">
                                                {{ formattedTime }}
                                        </div>
@@ -285,6 +206,12 @@ new Vue({
                                        let minutes = Math.floor(this.time / 60);
                                        return this.padToZero(minutes) + ":" + this.padToZero(seconds);
                                },
+                               divHeight: function() {
+                                       return screen.height;
+                               },
+                               divWidth: function() {
+                                       return screen.width;
+                               },
                        },
                        methods: {
                                padToZero: function(a) {
@@ -299,7 +226,7 @@ new Vue({
                                },
                                reset: function(e) {
                                        this.running = false;
-                                       this.time = 10; //1:30
+                                       this.time = 5400; //1:30
                                },
                                start: function() {
                                        if (!this.running)
@@ -321,6 +248,93 @@ new Vue({
                                this.reset();
                        },
                },
+               'my-ranking': {
+                       props: ['players','sortByScore','writeScoreToDb'],
+                       template: `
+                               <div id="ranking">
+                                       <table class="ranking">
+                                               <tr class="title">
+                                                       <th>Rang</th>
+                                                       <th>Joueur</th>
+                                                       <th>Points</th>
+                                                       <th>Mini-pts</th>
+                                               </tr>
+                                               <tr v-for="p in sortedPlayers">
+                                                       <td>{{ p.rank }}</td>
+                                                       <td>{{ p.prenom }} {{ p.nom }}</td>
+                                                       <td>{{ p.pdt }}</td>
+                                                       <td>{{ p.session }}</td>
+                                               </tr>
+                                       </table>
+                                       <div class="button-container-vertical" style="width:200px">
+                                               <button class="btn cancel" @click="resetPlayers()">Réinitialiser</button>
+                                               <button id="restoreBtn" class="btn" @click="restoreLast()">Restaurer</button>
+                                       </div>
+                               </div>
+                       `,
+                       computed: {
+                               sortedPlayers: function() {
+                                       let res = this.rankPeople();
+                                       // Add rank information (taking care of ex-aequos)
+                                       let rank = 1;
+                                       for (let i=0; i<res.length; i++)
+                                       {
+                                               if (i==0 || this.sortByScore(res[i],res[i-1]) == 0)
+                                                       res[i].rank = rank;
+                                               else //strictly lower scoring
+                                                       res[i].rank = ++rank;
+                                       }
+                                       return res;
+                               },
+                       },
+                       methods: {
+                               rankPeople: function() {
+                                       return this.players
+                                               .slice(1) //discard Toto
+                                               .sort(this.sortByScore);
+                               },
+                               resetPlayers: function() {
+                                       this.players
+                                               .slice(1) //discard Toto
+                                               .forEach( p => {
+                                                       p.pdt = 0;
+                                                       p.session = 0;
+                                                       p.available = 1;
+                                               });
+                                       this.writeScoreToDb();
+                                       document.getElementById("runPairing").click();
+                               },
+                               restoreLast: function() {
+                                       let xhr = new XMLHttpRequest();
+                                       let self = this;
+                                       xhr.onreadystatechange = function() {
+                                               if (this.readyState == 4 && this.status == 200)
+                                               {
+                                                       let players = JSON.parse(xhr.responseText);
+                                                       if (players.length > 0)
+                                                       {
+                                                               players.unshift({ //add ghost 4th player for 3-players tables
+                                                                       prenom: "Toto",
+                                                                       nom: "",
+                                                                       pdt: 0,
+                                                                       session: 0,
+                                                                       available: 0,
+                                                               });
+                                                               // NOTE: Vue warning "do not mutate property" if direct self.players = players
+                                                               for (let i=1; i<players.length; i++)
+                                                               {
+                                                                       players[i].pdt = parseFloat(players[i].pdt);
+                                                                       players[i].session = parseInt(players[i].session);
+                                                                       Vue.set(self.players, i, players[i]);
+                                                               }
+                                                       }
+                                               }
+                                       };
+                                       xhr.open("GET", "scripts/rw_players.php?restore=1", true);
+                                       xhr.send(null);
+                               },
+                       },
+               },
        },
        created: function() {
                let xhr = new XMLHttpRequest();
@@ -358,7 +372,6 @@ new Vue({
                        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
                        let orderedPlayers = this.players
                                .slice(1) //discard Toto
-                               .map( p => { return Object.assign({}, p); }) //deep (enough) copy
                                .sort(this.sortByScore);
                        xhr.send("players="+encodeURIComponent(JSON.stringify(orderedPlayers)));
                },