Add keymap downloading

Closes #199
2017-02-10 18:55:49 +01:00
parent 61c20cd678
commit 8aa2029f55
12 changed files with 74 additions and 8 deletions
--- a/electron/src/tsconfig.json
+++ b/electron/src/tsconfig.json
@@ -17,6 +17,7 @@
      "jquery",
      "core-js",
      "select2",
+      "file-saver",
      "electron",
      "usb"
    ]
--- a/electron/src/webpack.config.js
+++ b/electron/src/webpack.config.js
@@ -27,7 +27,8 @@ module.exports = {
        modules: [path.join(rootDir, "node_modules")],
        alias: {
            jquery: 'jquery/dist/jquery.min.js',
-            select2: 'select2/dist/js/select2.full.min.js'
+            select2: 'select2/dist/js/select2.full.min.js',
+            'file-saver': 'filesaver.js/FileSaver.min.js'
        }
    },
    module: {
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
    "@ngrx/store-log-monitor": "3.0.2",
    "@types/core-js": "0.9.35",
    "@types/electron": "^1.4.32",
+    "@types/file-saver": "0.0.0",
    "@types/jquery": "^2.0.40",
    "@types/node": "^7.0.5",
    "@types/usb": "^1.1.2",
@@ -47,8 +48,10 @@
    "@ngrx/store": "2.2.1",
    "bootstrap": "^3.3.7",
    "browser-stdout": "^1.3.0",
+    "buffer": "^5.0.3",
    "core-js": "2.4.1",
    "dragula": "^3.7.2",
+    "filesaver.js": "^0.2.0",
    "font-awesome": "^4.6.3",
    "jquery": "3.1.1",
    "json-loader": "^0.5.4",
--- a/shared/src/components/keymap/edit/keymap-edit.component.html
+++ b/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>

--- a/shared/src/components/keymap/edit/keymap-edit.component.ts
+++ b/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()
+                };
+            });
+    }
 }
--- a/shared/src/components/keymap/header/keymap-header.component.html
+++ b/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>
--- a/shared/src/components/keymap/header/keymap-header.component.scss
+++ b/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;

--- a/shared/src/components/keymap/header/keymap-header.component.ts
+++ b/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();
+    }
 }
--- a/shared/src/config-serializer/config-items/Module.ts
+++ b/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);
                }
            })
--- a/web/src/tsconfig.json
+++ b/web/src/tsconfig.json
@@ -16,7 +16,8 @@
      "node",
      "jquery",
      "core-js",
-      "select2"
+      "select2",
+      "file-saver"
    ]
  },
  "exclude": [
--- a/web/src/vendor.ts
+++ b/web/src/vendor.ts
@@ -0,0 +1,3 @@
+import './shared/vendor.ts';
+
+import 'buffer';
--- a/web/src/webpack.config.js
+++ b/web/src/webpack.config.js
@@ -11,7 +11,7 @@ console.log(rootDir, __dirname);
 module.exports = {
    entry: {
        polyfills: path.resolve(rootDir, 'src/shared/polyfills.ts'),
-        vendor: path.resolve(rootDir, 'src/shared/vendor.ts'),
+        vendor: path.resolve(rootDir, 'src/vendor.ts'),
        app: path.resolve(rootDir, 'src/main.ts')
    },
    output: {
@@ -24,7 +24,8 @@ module.exports = {
        modules: [path.join(rootDir, "node_modules")],
        alias: {
            jquery: 'jquery/dist/jquery.min.js',
-            select2: 'select2/dist/js/select2.full.min.js'
+            select2: 'select2/dist/js/select2.full.min.js',
+            'file-saver': 'filesaver.js/FileSaver.min.js'
        }
    },
    module: {