keyboard layouts from file

client/public/keyboard_layouts.json

@@ -0,0 +1 @@
+{"af":"Afghani","al":"Albanian","et":"Amharic","ma":"Arabic (Morocco)","sy":"Arabic (Syria)","am":"Armenian","az":"Azerbaijani","ml":"Bambara","bd":"Bangla","by":"Belarusian","be":"Belgian","dz":"Berber (Algeria, Latin characters)","ba":"Bosnian","bg":"Bulgarian","mm":"Burmese","hr":"Croatian","cz":"Czech","dk":"Danish","mv":"Dhivehi","nl":"Dutch","bt":"Dzongkha","au":"English (Australian)","cm":"English (Cameroon)","gh":"English (Ghana)","ng":"English (Nigeria)","za":"English (South Africa)","us":"English (US)","gb":"English (UK)","ee":"Estonian","fo":"Faroese","ph":"Filipino","fi":"Finnish","fr":"French","ca":"French (Canada)","cd":"French (Democratic Republic of the Congo)","gn":"French (Guinea)","tg":"French (Togo)","ge":"Georgian","de":"German","at":"German (Austria)","ch":"German (Switzerland)","gr":"Greek","il":"Hebrew","hu":"Hungarian","cn":"Chinese","is":"Icelandic","in":"Indian","id":"Indonesian (Jawi)","iq":"Iraqi","ie":"Irish","it":"Italian","jp":"Japanese","kz":"Kazakh","kh":"Khmer (Cambodia)","kr":"Korean","kg":"Kyrgyz","la":"Lao","lv":"Latvian","lt":"Lithuanian","mk":"Macedonian","my":"Malay (Jawi)","mt":"Maltese","md":"Moldavian","mn":"Mongolian","me":"Montenegrin","np":"Nepali","no":"Norwegian","ir":"Persian","pl":"Polish","pt":"Portuguese","br":"Portuguese (Brazil)","ro":"Romanian","ru":"Russian","rs":"Serbian","lk":"Sinhala (phonetic)","sk":"Slovak","si":"Slovenian","es":"Spanish","ke":"Swahili (Kenya)","tz":"Swahili (Tanzania)","se":"Swedish","tw":"Taiwanese","tj":"Tajik","th":"Thai","bw":"Tswana","tr":"Turkish","tm":"Turkmen","ua":"Ukrainian","pk":"Urdu (Pakistan)","uz":"Uzbek","vn":"Vietnamese","sn":"Wolof"}

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)
+    },
+  },
+)