Some graphical improvements (first attempt)
[vchess.git] / client / src / components / ChallengeList.vue
1 <template lang="pug">
2 div
3 table
4 tr
5 th Variant
6 th From
7 th To
8 th Cadence
9 tr(v-for="c in sortedChallenges" @click="$emit('click-challenge',c)")
10 td {{ c.vname }}
11 td {{ c.from.name }}
12 td {{ c.to }}
13 td {{ c.timeControl }}
14 </template>
15
16 <script>
17 import { store } from "@/store";
18
19 export default {
20 name: "my-challenge-list",
21 props: ["challenges"],
22 data: function() {
23 return {
24 st: store.state,
25 };
26 },
27 computed: {
28 sortedChallenges: function() {
29 // Show in order: challenges I sent, challenges I received, other challenges
30 let augmentedChalls = this.challenges.map(c => {
31 let priority = 0;
32 if (c.to == this.st.user.name)
33 priority = 1;
34 else if (c.from.id == this.st.user.id || c.from.sid == this.st.user.sid)
35 priority = 2;
36 return Object.assign({}, c, {priority: priority});
37 });
38 return augmentedChalls.sort((c1,c2) => { return c2.priority - c1.priority; });
39 },
40 },
41 };
42 </script>
43
44 <style lang="sass">
45 // TODO: affichage bizarre sur petits écrans <=767px
46 </style>