Keymap tab: Keymap switching

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;
         }
 
     }

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%;
+        }
+    }
+}

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() { }