feat(device): Add 'Save to keyboard' button (#402)

* feat(device): Add 'Save to keyboard' button

Created a 'Progress Button' that have 2 state in progress or not.
Able to set different text for different state:
- baseText for normal state
- progressText for in progress state
close: #377

* fix 'Save to keyboard' button visibility in web version

* remove success notification when save to keyboard success

* feat(notifier): Turn off auto hide of the notifier

* feat(device): Show saved state of 'Save to keyboard button'

* style: Format import in app.component.ts

* feat(device): Auto hide 'Save to Keyboard' button

* fix(device): Fix saving animation

* fix(device): Fix saving animation

* fix(device): Fix tslint

packages/uhk-web/src/app/app.component.ts

@@ -1,33 +1,52 @@
 import { Component, HostListener, ViewEncapsulation } from '@angular/core';
+import { animate, style, transition, trigger } from '@angular/animations';
 import { Observable } from 'rxjs/Observable';
-import { Store } from '@ngrx/store';
+import { Action, Store } from '@ngrx/store';
+
+import 'rxjs/add/operator/last';
 
 import { DoNotUpdateAppAction, UpdateAppAction } from './store/actions/app-update.action';
 import {
     AppState,
     getShowAppUpdateAvailable,
     deviceConnected,
-    runningInElectron
+    runningInElectron,
+    saveToKeyboardState
 } from './store';
 import { getUserConfiguration } from './store/reducers/user-configuration';
 import { UhkBuffer } from './config-serializer/uhk-buffer';
-import { SaveConfigurationAction } from './store/actions/device';
+import { ProgressButtonState } from './store/reducers/progress-button-state';
 
 @Component({
     selector: 'main-app',
     templateUrl: './app.component.html',
     styleUrls: ['./app.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.None,
+    animations: [
+        trigger(
+            'showSaveToKeyboardButton', [
+                transition(':enter', [
+                    style({transform: 'translateY(100%)'}),
+                    animate('400ms ease-in-out', style({transform: 'translateY(0)'}))
+                ]),
+                transition(':leave', [
+                    style({transform: 'translateY(0)'}),
+                    animate('400ms ease-in-out', style({transform: 'translateY(100%)'}))
+                ])
+            ])
+    ]
 })
 export class MainAppComponent {
     showUpdateAvailable$: Observable<boolean>;
     deviceConnected$: Observable<boolean>;
     runningInElectron$: Observable<boolean>;
+    saveToKeyboardState$: Observable<ProgressButtonState>;
 
     constructor(private store: Store<AppState>) {
         this.showUpdateAvailable$ = store.select(getShowAppUpdateAvailable);
         this.deviceConnected$ = store.select(deviceConnected);
         this.runningInElectron$ = store.select(runningInElectron);
+        this.saveToKeyboardState$ = store.select(saveToKeyboardState);
     }
 
     updateApp() {
@@ -38,12 +57,8 @@ export class MainAppComponent {
         this.store.dispatch(new DoNotUpdateAppAction());
     }
 
-    @HostListener('window:keydown.control.o', ['$event'])
-    onCtrlO(event: KeyboardEvent): void {
-        console.log('ctrl + o pressed');
-        event.preventDefault();
-        event.stopPropagation();
-        this.sendUserConfiguration();
+    clickedOnProgressButton(action: Action) {
+        return this.store.dispatch(action);
     }
 
     @HostListener('window:keydown.alt.j', ['$event'])
@@ -55,7 +70,7 @@ export class MainAppComponent {
             .first()
             .subscribe(userConfiguration => {
                 const asString = JSON.stringify(userConfiguration.toJsonObject());
-                const asBlob = new Blob([asString], { type: 'text/plain' });
+                const asBlob = new Blob([asString], {type: 'text/plain'});
                 saveAs(asBlob, 'UserConfiguration.json');
             });
     }
@@ -74,20 +89,4 @@ export class MainAppComponent {
             })
             .subscribe(blob => saveAs(blob, 'UserConfiguration.bin'));
     }
-
-    private sendUserConfiguration(): void {
-        this.store
-            .let(getUserConfiguration())
-            .first()
-            .map(userConfiguration => {
-                const uhkBuffer = new UhkBuffer();
-                userConfiguration.toBinary(uhkBuffer);
-                return uhkBuffer.getBufferContent();
-            })
-            .subscribe(
-                buffer => this.store.dispatch(new SaveConfigurationAction(buffer)),
-                error => console.error('Error during uploading user configuration', error),
-                () => console.log('User configuration has been successfully uploaded')
-            );
-    }
 }