Commit | Line | Data |
---|---|---|
afd3240d BA |
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 | |
2f258c37 BA |
6 | button#liveGames(@click="setDisplay('live',$event)") {{ st.tr["Live games"] }} |
7 | button#corrGames(@click="setDisplay('corr',$event)") {{ st.tr["Correspondance games"] }} | |
8 | GameList(v-show="display=='live'" :games="liveGames" | |
afd3240d | 9 | @show-game="showGame") |
2f258c37 | 10 | GameList(v-show="display=='corr'" :games="corrGames" |
afd3240d BA |
11 | @show-game="showGame") |
12 | </template> | |
13 | ||
14 | <script> | |
afd3240d BA |
15 | import { store } from "@/store"; |
16 | import { GameStorage } from "@/utils/gameStorage"; | |
17 | import { ajax } from "@/utils/ajax"; | |
18 | import GameList from "@/components/GameList.vue"; | |
19 | export default { | |
89021f18 | 20 | name: "my-my-games", |
afd3240d BA |
21 | components: { |
22 | GameList, | |
23 | }, | |
24 | data: function() { | |
25 | return { | |
26 | st: store.state, | |
dac39588 | 27 | display: "live", |
2f258c37 BA |
28 | liveGames: [], |
29 | corrGames: [], | |
afd3240d BA |
30 | }; |
31 | }, | |
32 | created: function() { | |
33 | GameStorage.getAll((localGames) => { | |
34 | localGames.forEach((g) => g.type = this.classifyObject(g)); | |
2f258c37 | 35 | this.liveGames = localGames; |
afd3240d BA |
36 | }); |
37 | if (this.st.user.id > 0) | |
38 | { | |
39 | ajax("/games", "GET", {uid: this.st.user.id}, (res) => { | |
40 | res.games.forEach((g) => g.type = this.classifyObject(g)); | |
2f258c37 | 41 | this.corrGames = res.games; |
afd3240d BA |
42 | }); |
43 | } | |
44 | }, | |
2f258c37 BA |
45 | mounted: function() { |
46 | const showType = localStorage.getItem("type-myGames") || "live"; | |
47 | this.setDisplay(showType); | |
48 | }, | |
afd3240d | 49 | methods: { |
2f258c37 BA |
50 | setDisplay: function(type, e) { |
51 | this.display = type; | |
52 | localStorage.setItem("type-myGames", type); | |
53 | let elt = !!e | |
54 | ? e.target | |
55 | : document.getElementById(type + "Games"); | |
56 | elt.classList.add("active"); | |
57 | if (!!elt.previousElementSibling) | |
58 | elt.previousElementSibling.classList.remove("active"); | |
59 | else | |
60 | elt.nextElementSibling.classList.remove("active"); | |
61 | }, | |
62 | // TODO: classifyObject is redundant (see Hall.vue) | |
afd3240d | 63 | classifyObject: function(o) { |
71468011 | 64 | return (o.cadence.indexOf('d') === -1 ? "live" : "corr"); |
afd3240d | 65 | }, |
afd3240d | 66 | showGame: function(g) { |
afd3240d BA |
67 | this.$router.push("/game/" + g.id); |
68 | }, | |
69 | }, | |
70 | }; | |
71 | </script> | |
2f258c37 BA |
72 | |
73 | <style lang="sass" scoped> | |
74 | .active | |
75 | color: #42a983 | |
76 | </style> |