X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FLanguage.vue;h=bdfd34176d0f9c11e1c251d370690a74060b43e3;hb=6808d7a16ec1e761c6a2dffec2281c96953e4d89;hp=35c717ffb75a76a48d58d76f52e5466f0422c7de;hpb=98db2082fd31e7a7bc0348e31ce119f39dbc31b3;p=vchess.git

diff --git a/client/src/components/Language.vue b/client/src/components/Language.vue
index 35c717ff..bdfd3417 100644
--- a/client/src/components/Language.vue
+++ b/client/src/components/Language.vue
@@ -7,27 +7,38 @@ div
       "fr": "Français",
     };
   input#modalLang.modal(type="checkbox")
-  div(role="dialog")
-    #language.card
+  div(role="dialog" data-checkbox="modalLang")
+    .card
       label.modal-close(for="modalLang")
-      form
+      form(@change="setLanguage($event)")
         fieldset
-          label(for="langSelect") {{ $tr["Language"] }}
+          label(for="langSelect") {{ st.tr["Language"] }}
           select#langSelect
             each language,langCode in langName
-              option(value=langCode selected=(lang==langCode))
+              option(value=langCode)
                 =language
 </template>
 
 <script>
+import { store } from "@/store";
 export default {
-  name: "Language",
-	methods: {
-    // Used both on index and variant page, to switch language
+  name: "my-language",
+  data: function() {
+    return {
+      st: store.state
+    };
+  },
+  mounted: function() {
+    // NOTE: better style would be in pug directly, but how?
+    document.querySelectorAll("#langSelect > option").forEach(opt => {
+      if (opt.value == this.st.lang) opt.selected = true;
+    });
+  },
+  methods: {
     setLanguage: function(e) {
       localStorage["lang"] = e.target.value;
-      this.$lang = e.target.value;
-    },
-	},
+      store.setLanguage(e.target.value);
+    }
+  }
 };
 </script>