From c176411512a056f3398ba77ab2b7d9dc78375562 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miroslav=20=C5=A0ediv=C3=BD?= <sedivy.miro@gmail.com>
Date: Mon, 15 Jun 2020 22:09:01 +0200
Subject: [PATCH] add layout select to settings

---
 client/src/components/settings.vue | 49 ++++++++++++++++++++++++++++++
 client/src/locale/en-us.ts         |  1 +
 client/src/store/settings.ts       |  6 ++++
 3 files changed, 56 insertions(+)

diff --git a/client/src/components/settings.vue b/client/src/components/settings.vue
index 16660415..5f0fd127 100644
--- a/client/src/components/settings.vue
+++ b/client/src/components/settings.vue
@@ -35,6 +35,22 @@
           <span />
         </label>
       </li>
+      <li>
+        <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>
+          </select>
+          <span />
+        </label>
+      </li>
       <li v-if="connected">
         <button @click.stop.prevent="logout">{{ $t('logout') }}</button>
       </li>
@@ -182,6 +198,31 @@
             }
           }
         }
+
+        .select {
+          max-width: 120px;
+
+          select {
+            display: block;
+            width: 100%;
+            max-width: 100%;
+            padding: 4px;
+            margin: 0;
+            line-height: 30px;
+            font-weight: bold;
+            border: 0;
+            border-radius: 12px;
+
+            color: black;
+            background-color: $style-primary;
+
+            option {
+              font-weight: normal;
+              color: $text-normal;
+              background-color: $background-tertiary;
+            }
+          }
+        }
       }
     }
   }
@@ -236,6 +277,14 @@
       this.$accessor.settings.setSound(value)
     }
 
+    get keyboard_layout() {
+      return this.$accessor.settings.keyboard_layout
+    }
+
+    set keyboard_layout(value: string) {
+      this.$accessor.settings.setKeyboardLayout(value)
+    }
+
     logout() {
       this.$accessor.logout()
     }
diff --git a/client/src/locale/en-us.ts b/client/src/locale/en-us.ts
index 1dfe6454..2cb49328 100644
--- a/client/src/locale/en-us.ts
+++ b/client/src/locale/en-us.ts
@@ -60,6 +60,7 @@ export const setting = {
   autoplay: 'Autoplay Video',
   ignore_emotes: 'Ignore Emotes',
   chat_sound: 'Play Chat Sound',
+  keyboard_layout: 'Change Keyboard Layout',
 }
 
 export const connection = {
diff --git a/client/src/store/settings.ts b/client/src/store/settings.ts
index 9e1e29a3..ba3d06b7 100644
--- a/client/src/store/settings.ts
+++ b/client/src/store/settings.ts
@@ -10,6 +10,7 @@ export const state = () => {
     autoplay: get<boolean>('autoplay', true),
     ignore_emotes: get<boolean>('ignore_emotes', false),
     chat_sound: get<boolean>('chat_sound', true),
+    keyboard_layout: get<string>('keyboard_layout', 'us'),
   }
 }
 
@@ -40,4 +41,9 @@ export const mutations = mutationTree(state, {
     state.chat_sound = value
     set('chat_sound', value)
   },
+
+  setKeyboardLayout(state, value: string) {
+    state.keyboard_layout = value
+    set('keyboard_layout', value)
+  },
 })