public/javascripts/components/challengeList.js

   1 Vue.component("my-challenge-list", {
   2     props: ["challenges"],
   3     computed: {
   4         showVariant: function() {
   5             this.challenges.length > 0 && !!this.challenges[0].variant;
   6         },
   7         showNbPlayers: function() {
   8             this.challenges.length > 0 && !!this.challenges[0].nbPlayers;
   9         },
  10     },
  11     template: `
  12         <table>
  13             <tr>
  14                 <th v-if="showVariant">Variant</th>
  15                 <th>From</th>
  16                 <th>To</th>
  17                 <th>Cadence</th>
  18                 <th v-if="showNbPlayers">Number of players</th>
  19             </tr>
  20             <tr v-for="c in challenges" @click="$emit('click-challenge',c)">
  21                 <td v-if="showVariant">{{ c.variant }}</td>
  22                 <td>{{ c.from.name }}</td>
  23                 <td>
  24                     <span v-for="p in c.to">{{ p.name }}</span>
  25                 </td>
  26                 <td>{{ c.mainTime }} + {{ c.increment }}</td>
  27                 <td v-if="showNbPlayers">{{ c.nbPlayers }}</td>
  28             </tr>
  29         </table>
  30     `,
  31 });
  32
  33 // TODO: challenge format from/to ou uid/players ............