X-Git-Url: https://git.auder.net/?a=blobdiff_plain;f=client%2Fsrc%2Fcomponents%2FLanguage.vue;h=f49a592e10e93161cbc920d40c74224a5b8fcea2;hb=725da57f8e2983d744629b524f9084516a43cbac;hp=fc30562057a1ba893b9f4c1d371178b6a2307722;hpb=c66a829b3770122fe0ff2fb9db8def9635bbc334;p=vchess.git

diff --git a/client/src/components/Language.vue b/client/src/components/Language.vue
index fc305620..f49a592e 100644
--- a/client/src/components/Language.vue
+++ b/client/src/components/Language.vue
@@ -7,16 +7,18 @@ 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
-        fieldset
-          label(for="langSelect") {{ st.tr["Language"] }}
-          select#langSelect
-            each language,langCode in langName
-              option(value=langCode selected=(lang==langCode))
-                =language
+      fieldset(@change="setLanguage($event)")
+        label(for="langSelect") {{ st.tr["Language"] }}
+        select#langSelect
+          each language,langCode in langName
+            option(value=langCode)
+              =language
 </template>
 
 <script>
@@ -25,14 +27,20 @@ export default {
   name: "my-language",
   data: function() {
     return {
-      st: store.state,
+      st: store.state
     };
   },
-	methods: {
+  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;
       store.setLanguage(e.target.value);
-    },
-	},
+    }
+  }
 };
 </script>