Make interface language configurable from settings

The locale can now be configured in settings and is stored in
Vuex. The changes are applied immidiately after selection. The list of
languages is taken from the messages file, which contains all the
available locales (and a new value, `interfaceLanguage`, to control
the translation of this option in the options menu)

Closes #36

1 files changed, 38 insertions, 0 deletions

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
new file mode 100644
index 00000000..4b541888
--- /dev/null
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <label for="interface-language-switcher" class='select'>
+      <select id="interface-language-switcher" v-model="language">
+        <option v-for="(langCode, i) in languageCodes" :value="langCode">
+          {{ languageNames[i] }}
+        </option>
+      </select>
+      <i class="icon-down-open"/>
+    </label>
+  </div>
+</template>
+
+<script>
+  import languagesObject from '../../i18n/messages'
+  import ISO6391 from 'iso-639-1'
+  import _ from 'lodash'
+
+  export default {
+    computed: {
+      languageCodes () {
+        return Object.keys(languagesObject)
+      },
+
+      languageNames () {
+        return _.map(this.languageCodes, ISO6391.getName)
+      },
+
+      language: {
+        get: function () { return this.$store.state.config.interfaceLanguage },
+        set: function (val) {
+          this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+          this.$i18n.locale = val
+        }
+      }
+    }
+  }
+</script>