Modal to accept/refuse challenge + diagrams preview when creating challenge
[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(
11 role="dialog"
12 data-checkbox="modalLang"
13 )
14 .card
15 label.modal-close(for="modalLang")
16 fieldset(@change="setLanguage($event)")
17 label(for="langSelect") {{ st.tr["Language"] }}
18 select#langSelect
19 each language,langCode in langName
20 option(value=langCode)
21 =language
22 </template>
23
24 <script>
25 import { store } from "@/store";
26 export default {
27 name: "my-language",
28 data: function() {
29 return {
30 st: store.state
31 };
32 },
33 mounted: function() {
34 // NOTE: better style would be in pug directly, but how?
35 document.querySelectorAll("#langSelect > option").forEach(opt => {
36 if (opt.value == this.st.lang) opt.selected = true;
37 });
38 },
39 methods: {
40 setLanguage: function(e) {
41 localStorage["lang"] = e.target.value;
42 store.setLanguage(e.target.value);
43 }
44 }
45 };
46 </script>