keyboard layouts from file

client/src/components/settings.vue

@@ -39,14 +39,11 @@
         <span>{{ $t('setting.keyboard_layout') }}</span>
         <label class="select">
           <select v-model="keyboard_layout">
-            <option value="us">English (US)</option>
-            <option value="gb">English (UK)</option>
-
-            <option value="de">German</option>
-            <option value="at">German (Austria)</option>
-            <option value="ch">German (Switzerland)</option>
-
-            <option value="sk">Slovak</option>
+            <option
+              v-for="(name, code) in keyboard_layouts_list"
+              :key="code"
+              :value="code"
+            >{{ name }}</option>
           </select>
           <span />
         </label>
@@ -277,6 +274,10 @@
       this.$accessor.settings.setSound(value)
     }
 
+    get keyboard_layouts_list() {
+      return this.$accessor.settings.keyboard_layouts_list
+    }
+
     get keyboard_layout() {
       return this.$accessor.settings.keyboard_layout
     }

client/src/store/index.ts

@@ -55,6 +55,7 @@ export const actions = actionTree(
   {
     initialise(store) {
       accessor.emoji.initialise()
+      accessor.settings.initialise()
     },
 
     lock() {

client/src/store/settings.ts

@@ -1,8 +1,13 @@
-import { getterTree, mutationTree } from 'typed-vuex'
+import { getterTree, mutationTree, actionTree } from 'typed-vuex'
 import { get, set } from '~/utils/localstorage'
+import { accessor } from '~/store'
 
 export const namespaced = true
 
+interface KeyboardLayouts {
+  [code: string]: string
+}
+
 export const state = () => {
   return {
     scroll: get<number>('scroll', 10),
@@ -11,6 +16,8 @@ export const state = () => {
     ignore_emotes: get<boolean>('ignore_emotes', false),
     chat_sound: get<boolean>('chat_sound', true),
     keyboard_layout: get<string>('keyboard_layout', 'us'),
+
+    keyboard_layouts_list: {} as KeyboardLayouts,
   }
 }
 
@@ -46,4 +53,23 @@ export const mutations = mutationTree(state, {
     state.keyboard_layout = value
     set('keyboard_layout', value)
   },
+
+  setKeyboardLayoutsList(state, value: KeyboardLayouts) {
+    state.keyboard_layouts_list = value
+  },
 })
+
+export const actions = actionTree(
+  { state, getters, mutations },
+  {
+    initialise() {
+      $http
+        .get<KeyboardLayouts>('/keyboard_layouts.json')
+        .then((req) => {
+          accessor.settings.setKeyboardLayoutsList(req.data)
+          console.log(req.data)
+        })
+        .catch(console.error)
+    },
+  },
+)