Add keymap downloading

Closes #199

shared/src/components/keymap/edit/keymap-edit.component.html

@@ -1,5 +1,5 @@
 <template [ngIf]="keymap$ | async">
-    <keymap-header [keymap]="keymap$ | async" [deletable]="deletable$ | async"></keymap-header>
+    <keymap-header [keymap]="keymap$ | async" [deletable]="deletable$ | async" (downloadClick)="downloadKeymap()"></keymap-header>
     <svg-keyboard-wrap [keymap]="keymap$ | async"></svg-keyboard-wrap>
 </template>
 

shared/src/components/keymap/edit/keymap-edit.component.ts

@@ -4,14 +4,18 @@ import { ActivatedRoute } from '@angular/router';
 import '@ngrx/core/add/operator/select';
 import { Store } from '@ngrx/store';
 
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/first';
 import 'rxjs/add/operator/let';
+import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/publishReplay';
 import 'rxjs/add/operator/switchMap';
-import { Observable } from 'rxjs/Observable';
+
+import { saveAs } from 'file-saver';
 
 import { Keymap } from '../../../config-serializer/config-items/Keymap';
 import { AppState } from '../../../store';
-import { getKeymap, getKeymaps } from '../../../store/reducers/user-configuration';
+import { getKeymap, getKeymaps, getUserConfiguration } from '../../../store/reducers/user-configuration';
 
 @Component({
     selector: 'keymap-edit',
@@ -41,4 +45,35 @@ export class KeymapEditComponent {
             .map((keymaps: Keymap[]) => keymaps.length > 1);
     }
 
+    downloadKeymap() {
+        const exportableJSON$: Observable<string> = this.keymap$
+            .switchMap(keymap => this.toExportableJSON(keymap))
+            .map(exportableJSON => JSON.stringify(exportableJSON));
+
+        this.keymap$
+            .combineLatest(exportableJSON$)
+            .first()
+            .subscribe(latest => {
+                const keymap = latest[0];
+                const exportableJSON = latest[1];
+                const fileName = keymap.name + '_keymap.json';
+                saveAs(new Blob([exportableJSON], { type: 'application/json' }), fileName);
+            });
+    }
+
+    private toExportableJSON(keymap: Keymap): Observable<any> {
+        return this.store
+            .let(getUserConfiguration())
+            .first()
+            .map(userConfiguration => {
+                return {
+                    site: 'https://ultimatehackingkeyboard.com',
+                    description: 'Ultimate Hacking Keyboard keymap',
+                    keyboardModel: 'UHK60',
+                    dataModelVersion: userConfiguration.dataModelVersion,
+                    objectType: 'keymap',
+                    objectValue: keymap.toJsonObject()
+                };
+            });
+    }
 }

shared/src/components/keymap/header/keymap-header.component.html

@@ -34,5 +34,6 @@
            data-original-title="Duplicate keymap"
            (click)="duplicateKeymap()"
         ></i>
+        <i class="fa fa-download layer__download pull-right" title="Download layer" (click)="onDownloadIconClick()"></i>
     </h1>
 </div>

shared/src/components/keymap/header/keymap-header.component.scss

@@ -43,6 +43,18 @@
     }
 }
 
+.layer__download {
+    top: 10px;
+    font-size: 0.8em;
+    position: relative;
+    margin-right: 10px;
+
+    &:hover {
+        cursor: pointer;
+        color: $icon-hover;
+    }
+}
+
 .pane-title {
     margin-bottom: 1em;
 

shared/src/components/keymap/header/keymap-header.component.ts

@@ -3,6 +3,8 @@ import {
     Component,
     ElementRef,
     Input,
+    Output,
+    EventEmitter,
     OnChanges,
     Renderer,
     SimpleChanges,
@@ -25,6 +27,7 @@ import { KeymapActions } from '../../../store/actions';
 export class KeymapHeaderComponent implements OnChanges {
     @Input() keymap: Keymap;
     @Input() deletable: boolean;
+    @Output() downloadClick = new EventEmitter<void>();
 
     @ViewChild('name') keymapName: ElementRef;
     @ViewChild('abbr') keymapAbbr: ElementRef;
@@ -87,4 +90,8 @@ export class KeymapHeaderComponent implements OnChanges {
     setTrashTitle(): void {
         this.trashTitle = this.deletable ? '' : 'The last keymap cannot be deleted.';
     }
+
+    onDownloadIconClick(): void {
+        this.downloadClick.emit();
+    }
 }

shared/src/config-serializer/config-items/Module.ts

@@ -3,6 +3,7 @@ import { UhkBuffer } from '../UhkBuffer';
 import { Helper as KeyActionHelper, KeyAction, NoneAction } from './key-action';
 import { Keymap } from './Keymap';
 import { Macro } from './Macro';
+import { PlayMacroAction, SwitchLayerAction } from './key-action';
 
 enum PointerRole {
     none,
@@ -54,7 +55,7 @@ export class Module {
             id: this.id,
             pointerRole: PointerRole[this.pointerRole],
             keyActions: this.keyActions.map(keyAction => {
-                if (keyAction) {
+                if (keyAction && (macros || !(keyAction instanceof PlayMacroAction || keyAction instanceof SwitchLayerAction))) {
                     return keyAction.toJsonObject(macros);
                 }
             })