From a64768fc7a67064bd5ec77ee9dc9662dcbbfb43c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= <fjozsef001@gmail.com>
Date: Sun, 22 May 2016 23:43:33 +0200
Subject: [PATCH] Keymap tab: Keymap switching

---
 .../keys/svg-keyboard-key.component.ts        |  4 +++
 .../popover/tab/keymap-tab.component.scss     | 23 +++++++++++++
 .../popover/tab/keymap-tab.component.ts       | 33 +++++++++++++++++--
 3 files changed, 57 insertions(+), 3 deletions(-)
 create mode 100644 src/components/popover/tab/keymap-tab.component.scss

diff --git a/src/components/keys/svg-keyboard-key.component.ts b/src/components/keys/svg-keyboard-key.component.ts
index cbccda2a..d2ccae9d 100644
--- a/src/components/keys/svg-keyboard-key.component.ts
+++ b/src/components/keys/svg-keyboard-key.component.ts
@@ -108,6 +108,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
 
     private setLabels(): void {
         if (!this.keyAction) {
+            this.labelSource = undefined;
+            this.labelType = LabelTypes.OneLineText;
             return;
         }
 
@@ -187,6 +189,8 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges {
             this.labelType = LabelTypes.SwitchKeymap;
             let uhkConfiguration: UhkConfiguration = this.uhkConfigurationService.getUhkConfiguration();
             this.labelSource = uhkConfiguration.getKeymap(keyAction.keymapId).abbreviation;
+        } else {
+            this.labelSource = undefined;
         }
 
     }
diff --git a/src/components/popover/tab/keymap-tab.component.scss b/src/components/popover/tab/keymap-tab.component.scss
new file mode 100644
index 00000000..5a40a97b
--- /dev/null
+++ b/src/components/popover/tab/keymap-tab.component.scss
@@ -0,0 +1,23 @@
+:host {
+    margin-top: 2px;
+
+    > div {
+        display: flex;
+
+        b {
+            padding-right: 10px;
+        }
+        select {
+            flex: 1;
+        }
+    }
+
+    > div:last-child {
+        margin-top: 10px;
+
+        img {
+            max-height: 100%;
+            max-width: 100%;
+        }
+    }
+}
\ No newline at end of file
diff --git a/src/components/popover/tab/keymap-tab.component.ts b/src/components/popover/tab/keymap-tab.component.ts
index e41f4895..e0b6523d 100644
--- a/src/components/popover/tab/keymap-tab.component.ts
+++ b/src/components/popover/tab/keymap-tab.component.ts
@@ -1,15 +1,42 @@
 import { Component, OnInit } from '@angular/core';
 
+import {UhkConfigurationService} from '../../../services/uhk-configuration.service';
+import {KeyMap} from '../../../../config-serializer/config-items/KeyMap';
+import {SvgKeyboardComponent} from '../../svg-keyboard.component';
+
 @Component({
     moduleId: module.id,
     selector: 'keymap-tab',
     template:
     `
-        Keymap
-    `
+        <div>
+            <b style="">Switch to keymap:</b>
+            <select class="layout-switcher" [(ngModel)]="selectedKeymapIndex">
+                <option [ngValue]="-1"> Select keymap </option>
+                <option *ngFor="let keymap of keymaps; let index=index" [ngValue]="index"> {{ keymap.name }} </option>
+            </select>
+        </div>
+        <div>
+            <div>
+                <img *ngIf="selectedKeymapIndex === -1" src="images/base-layer--blank.svg">
+            </div>
+            <svg-keyboard *ngIf="selectedKeymapIndex !== -1"
+                        [moduleConfig]="keymaps[selectedKeymapIndex].layers.elements[0].modules.elements">
+            </svg-keyboard>
+        </div>
+    `,
+    styles: [require('./keymap-tab.component.scss')],
+    directives: [SvgKeyboardComponent]
 })
 export class KeymapTabComponent implements OnInit {
-    constructor() { }
+
+    private keymaps: KeyMap[];
+    private selectedKeymapIndex: number;
+
+    constructor(uhkConfigurationService: UhkConfigurationService) {
+        this.selectedKeymapIndex = -1;
+        this.keymaps = uhkConfigurationService.getUhkConfiguration().keyMaps.elements;
+    }
 
     ngOnInit() { }