TODO: fix draw logic
[vchess.git] / client / src / components / Language.vue
1 <template lang="pug">
2 div
3 -
4 var langName = {
5 "en": "English",
6 "es": "Español",
7 "fr": "Français",
8 };
9 input#modalLang.modal(type="checkbox")
10 div(role="dialog" data-checkbox="modalLang")
11 #language.card
12 label.modal-close(for="modalLang")
13 form(@change="setLanguage")
14 fieldset
15 label(for="langSelect") {{ st.tr["Language"] }}
16 select#langSelect
17 each language,langCode in langName
18 option(value=langCode)
19 =language
20 </template>
21
22 <script>
23 import { store } from "@/store";
24 export default {
25 name: "my-language",
26 data: function() {
27 return {
28 st: store.state,
29 };
30 },
31 mounted: function() {
32 // NOTE: better style would be in pug directly, but how?
33 document.querySelectorAll("#langSelect > option").forEach(opt => {
34 if (opt.value == this.st.lang)
35 opt.selected = true;
36 });
37 },
38 methods: {
39 setLanguage: function(e) {
40 localStorage["lang"] = e.target.value;
41 store.setLanguage(e.target.value);
42 },
43 },
44 };
45 </script>