Modal to accept/refuse challenge + diagrams preview when creating challenge
[vchess.git] / client / src / components / Language.vue
CommitLineData
98db2082
BA
1<template lang="pug">
2div
3 -
4 var langName = {
5 "en": "English",
6 "es": "Español",
7 "fr": "Français",
8 };
9 input#modalLang.modal(type="checkbox")
910d631b
BA
10 div(
11 role="dialog"
12 data-checkbox="modalLang"
13 )
9a3049f3 14 .card
98db2082 15 label.modal-close(for="modalLang")
725da57f
BA
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
98db2082
BA
22</template>
23
24<script>
c66a829b 25import { store } from "@/store";
98db2082 26export default {
c66a829b
BA
27 name: "my-language",
28 data: function() {
29 return {
6808d7a1 30 st: store.state
c66a829b
BA
31 };
32 },
4f887105 33 mounted: function() {
41c80bb6 34 // NOTE: better style would be in pug directly, but how?
4f887105 35 document.querySelectorAll("#langSelect > option").forEach(opt => {
6808d7a1 36 if (opt.value == this.st.lang) opt.selected = true;
4f887105
BA
37 });
38 },
39 methods: {
98db2082
BA
40 setLanguage: function(e) {
41 localStorage["lang"] = e.target.value;
c66a829b 42 store.setLanguage(e.target.value);
6808d7a1
BA
43 }
44 }
98db2082
BA
45};
46</script>