client/src/components/ChallengeList.vue

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