Use references in key actions (#204)

src/components/macro/action-editor/macro-action-editor.component.ts

@@ -39,7 +39,7 @@ export class MacroActionEditorComponent implements OnInit {
 
     ngOnInit() {
         let macroAction: MacroAction = this.macroAction ? this.macroAction : new TextMacroAction();
-        this.editableMacroAction = new EditableMacroAction(macroAction.toJsObject());
+        this.editableMacroAction = new EditableMacroAction(macroAction.toJsonObject());
         let tab: TabName = this.getTabName(this.editableMacroAction);
         this.activeTab = tab;
     }

src/components/popover/tab/keymap/keymap-tab.component.ts

@@ -58,9 +58,8 @@ export class KeymapTabComponent implements OnInit, OnChanges, Tab {
             return false;
         }
 
-        let switchKeymapAction: SwitchKeymapAction = <SwitchKeymapAction>keyAction;
-        this.selectedKeymap = this.keymaps
-            .find((keymap: Keymap) => keymap.abbreviation === switchKeymapAction.keymapAbbreviation);
+        const switchKeymapAction: SwitchKeymapAction = <SwitchKeymapAction>keyAction;
+        this.selectedKeymap = switchKeymapAction.keymap;
     }
 
     toKeyAction(): SwitchKeymapAction {
@@ -68,8 +67,8 @@ export class KeymapTabComponent implements OnInit, OnChanges, Tab {
             throw new Error('KeyAction is not valid. No selected keymap!');
         }
 
-        let keymapAction = new SwitchKeymapAction();
-        keymapAction.keymapAbbreviation = this.selectedKeymap.abbreviation;
+        const keymapAction = new SwitchKeymapAction();
+        keymapAction.keymap = this.selectedKeymap;
         return keymapAction;
     }
 }

src/components/popover/tab/macro/macro-tab.component.ts

@@ -60,8 +60,8 @@ export class MacroTabComponent implements OnInit, OnChanges, OnDestroy, Tab {
         if (!(keyAction instanceof PlayMacroAction)) {
             return false;
         }
-        let playMacroAction: PlayMacroAction = <PlayMacroAction>keyAction;
-        this.selectedMacroIndex = this.macros.findIndex(macro => playMacroAction.macroId === macro.id);
+        const playMacroAction: PlayMacroAction = <PlayMacroAction>keyAction;
+        this.selectedMacroIndex = this.macros.findIndex(macro => playMacroAction.macro === macro);
         return true;
     }
 
@@ -70,8 +70,8 @@ export class MacroTabComponent implements OnInit, OnChanges, OnDestroy, Tab {
             throw new Error('KeyAction is not valid. No selected macro!');
         }
 
-        let keymapAction = new PlayMacroAction();
-        keymapAction.macroId = this.macros[this.selectedMacroIndex].id;
+        const keymapAction = new PlayMacroAction();
+        keymapAction.macro = this.macros[this.selectedMacroIndex];
         return keymapAction;
     }
 

src/components/svg/keys/svg-keyboard-key/svg-keyboard-key.component.ts

@@ -185,14 +185,13 @@ export class SvgKeyboardKeyComponent implements OnInit, OnChanges, OnDestroy {
         } else if (this.keyAction instanceof SwitchKeymapAction) {
             let keyAction: SwitchKeymapAction = this.keyAction as SwitchKeymapAction;
             this.labelType = LabelTypes.SwitchKeymap;
-            this.labelSource = keyAction.keymapAbbreviation;
+            this.labelSource = keyAction.keymap.abbreviation;
         } else if (this.keyAction instanceof PlayMacroAction) {
             let keyAction: PlayMacroAction = this.keyAction as PlayMacroAction;
-            let macro: Macro = this.macros.find((macro: Macro) => macro.id === keyAction.macroId);
             this.labelType = LabelTypes.IconText;
             this.labelSource = {
                 icon: this.mapper.getIcon('macro'),
-                text: macro.name
+                text: keyAction.macro.name
             };
         } else if (this.keyAction instanceof MouseAction) {
             this.labelType = LabelTypes.MouseKey;

src/components/svg/wrap/svg-keyboard-wrap.component.ts

@@ -17,13 +17,6 @@ import {
 } from '@angular/core';
 
 import { Store } from '@ngrx/store';
-import { Observable } from 'rxjs/Observable';
-
-import 'rxjs/add/observable/from';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/first';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/switchMap';
 
 import { MapperService } from '../../../services/mapper.service';
 
@@ -270,23 +263,10 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
             });
 
             content.push({
-                name: 'Macro id',
-                value: playMacroAction.macroId.toString()
+                name: 'Macro name',
+                value: playMacroAction.macro.name.toString()
             });
 
-            // Replace the macro id with the name
-            this.store
-                .select(appState => appState.macros)
-                .first()
-                .map(macroState => macroState.entities.filter(macro => {
-                    return macro.id === playMacroAction.macroId;
-                })[0].name)
-                .subscribe(name => {
-                    content[1] = {
-                        name: 'Macro name',
-                        value: name
-                    };
-                });
         } else if (keyAction instanceof SwitchKeymapAction) {
             const switchKeymapAction: SwitchKeymapAction = keyAction;
             content.push({
@@ -295,14 +275,8 @@ export class SvgKeyboardWrapComponent implements OnInit, OnChanges {
             });
             content.push({
                 name: 'Keymap',
-                value: '...'
+                value: switchKeymapAction.keymap.name
             });
-            this.store
-                .select(appState => appState.keymaps)
-                .first()
-                .switchMap<Keymap>(keymaps => Observable.from(keymaps.entities))
-                .filter(keymap => keymap.abbreviation === switchKeymapAction.keymapAbbreviation)
-                .subscribe(keymap => content[1].value = keymap.name);
         } else if (keyAction instanceof SwitchLayerAction) {
             const switchLayerAction: SwitchLayerAction = keyAction;
             content.push({