Sort variants alphabetically
[vchess.git] / client / src / views / MyGames.vue
1 <template lang="pug">
2 main
3 .row
4 .col-sm-12.col-md-10.col-md-offset-1.col-lg-8.col-lg-offset-2
5 .button-group
6 button.tabbtn#liveGames(@click="setDisplay('live',$event)")
7 | {{ st.tr["Live games"] }}
8 button.tabbtn#corrGames(@click="setDisplay('corr',$event)")
9 | {{ st.tr["Correspondance games"] }}
10 GameList(
11 v-show="display=='live'"
12 :games="liveGames"
13 @show-game="showGame"
14 )
15 GameList(
16 v-show="display=='corr'"
17 :games="corrGames"
18 @show-game="showGame"
19 )
20 </template>
21
22 <script>
23 import { store } from "@/store";
24 import { GameStorage } from "@/utils/gameStorage";
25 import { ajax } from "@/utils/ajax";
26 import GameList from "@/components/GameList.vue";
27 export default {
28 name: "my-my-games",
29 components: {
30 GameList
31 },
32 data: function() {
33 return {
34 st: store.state,
35 display: "live",
36 liveGames: [],
37 corrGames: []
38 };
39 },
40 created: function() {
41 GameStorage.getAll(localGames => {
42 localGames.forEach(g => (g.type = this.classifyObject(g)));
43 this.liveGames = localGames;
44 });
45 if (this.st.user.id > 0) {
46 ajax("/games", "GET", { uid: this.st.user.id }, res => {
47 res.games.forEach(g => (g.type = this.classifyObject(g)));
48 this.corrGames = res.games;
49 });
50 }
51 },
52 mounted: function() {
53 const showType = localStorage.getItem("type-myGames") || "live";
54 this.setDisplay(showType);
55 },
56 methods: {
57 setDisplay: function(type, e) {
58 this.display = type;
59 localStorage.setItem("type-myGames", type);
60 let elt = e ? e.target : document.getElementById(type + "Games");
61 elt.classList.add("active");
62 if (elt.previousElementSibling)
63 elt.previousElementSibling.classList.remove("active");
64 else elt.nextElementSibling.classList.remove("active");
65 },
66 // TODO: classifyObject is redundant (see Hall.vue)
67 classifyObject: function(o) {
68 return o.cadence.indexOf("d") === -1 ? "live" : "corr";
69 },
70 showGame: function(g) {
71 this.$router.push("/game/" + g.id);
72 }
73 }
74 };
75 </script>
76
77 <style lang="sass">
78 .active
79 color: #42a983
80
81 .tabbtn
82 background-color: #f9faee
83
84 table.game-list
85 max-height: 100%
86 </style>