feat(device): flash device firmware from Agent (#499)

* add dataModelVersion, usbProtocolVersion, slaveProtocolVersion

* read the package.json at appstart

* flash firmware

* update firmware

* fix extra resource path

* fix import modules

* update lock files

* fix imports

* terminal window

* exclude tmp folder from git repo

* ok button

* auto scroll in xterm

* fix maxTry count calculation

* optimize logging

* optimize timeout

* readSync

* Add extra delay

* fix async call

* fix error message in log

* fix ok button disable state

* retry

* list devices

* close device after reenumeration

* retry snooze

* kboot maxtry 10

* retry 100

* remove deprecated toPayload ngrx helper

* flash firmware with custom file

* fix tslint

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html

@@ -1,7 +1,40 @@
-<h1>
-    <i class="fa fa-sliders"></i>
-    <span>Firmware</span>
-</h1>
-<p>
-    Coming soon ...
-</p>
+<div class="full-height">
+    <div class="flex-container">
+        <div>
+
+            <h1>
+                <i class="fa fa-sliders"></i>
+                <span>Firmware</span>
+            </h1>
+            <p>
+                Flash firmware {{ (getAgentVersionInfo$ | async).firmwareVersion }} (bundled with Agent)
+                <button class="btn btn-primary"
+                        [disabled]="flashFirmwareButtonDisbabled$ | async"
+                        (click)="onUpdateFirmware()">Flash firmware
+                </button>
+            </p>
+
+            <p>
+                Flash firmware file <input id="firmware-file-select"
+                                           type="file"
+                                           [disabled]="flashFirmwareButtonDisbabled$ | async"
+                                           (change)="changeFile($event)">
+                <button class="btn btn-primary"
+                        [disabled]="flashFirmwareButtonDisbabled$ | async"
+                        (click)="onUpdateFirmwareWithFile()">Flash firmware
+                </button>
+            </p>
+        </div>
+
+        <div class="flex-grow" #scrollMe>
+            <xterm [logs]="xtermLog$ | async"></xterm>
+        </div>
+        <div class="footer">
+            <button type="button"
+                    class="btn btn-primary ok-button"
+                    [disabled]="firmwareOkButtonDisabled$ | async"
+                    (click)="onOkButtonClick()">OK
+            </button>
+        </div>
+    </div>
+</div>

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.scss

@@ -3,3 +3,25 @@
     display: block;
     height: 100%;
 }
+
+.flex-container {
+    height: 100%;
+    max-height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.flex-grow {
+    background-color: black;
+    overflow: auto;
+    flex: 1;
+}
+
+.footer {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.ok-button {
+    min-width: 100px;
+}

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts

@@ -1,4 +1,12 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, OnDestroy, ViewChild } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
+import { VersionInformation } from 'uhk-common';
+
+import { AppState, firmwareOkButtonDisabled, flashFirmwareButtonDisbabled, getAgentVersionInfo, xtermLog } from '../../../store';
+import { UpdateFirmwareAction, UpdateFirmwareOkButtonAction, UpdateFirmwareWithAction } from '../../../store/actions/device';
+import { XtermLog } from '../../../models/xterm-log';
 
 @Component({
     selector: 'device-firmware',
@@ -8,5 +16,63 @@ import { Component } from '@angular/core';
         'class': 'container-fluid'
     }
 })
-export class DeviceFirmwareComponent {
+export class DeviceFirmwareComponent implements OnDestroy {
+    flashFirmwareButtonDisbabled$: Observable<boolean>;
+    xtermLog$: Observable<Array<XtermLog>>;
+    xtermLogSubscription: Subscription;
+    getAgentVersionInfo$: Observable<VersionInformation>;
+    firmwareOkButtonDisabled$: Observable<boolean>;
+
+    arrayBuffer: Uint8Array;
+    @ViewChild('scrollMe') divElement: ElementRef;
+
+    constructor(private store: Store<AppState>) {
+        this.flashFirmwareButtonDisbabled$ = store.select(flashFirmwareButtonDisbabled);
+        this.xtermLog$ = store.select(xtermLog);
+        this.xtermLogSubscription = this.xtermLog$.subscribe(() => {
+            if (this.divElement && this.divElement.nativeElement) {
+                setTimeout(() => {
+                    this.divElement.nativeElement.scrollTop = this.divElement.nativeElement.scrollHeight;
+                });
+            }
+        });
+        this.getAgentVersionInfo$ = store.select(getAgentVersionInfo);
+        this.firmwareOkButtonDisabled$ = store.select(firmwareOkButtonDisabled);
+    }
+
+    ngOnDestroy(): void {
+        this.xtermLogSubscription.unsubscribe();
+    }
+
+    onUpdateFirmware(): void {
+        this.store.dispatch(new UpdateFirmwareAction());
+    }
+
+    onUpdateFirmwareWithFile(): void {
+        if (!this.arrayBuffer) {
+            return;
+        }
+
+        this.store.dispatch(new UpdateFirmwareWithAction(Array.prototype.slice.call(this.arrayBuffer)));
+    }
+
+    onOkButtonClick(): void {
+        this.store.dispatch(new UpdateFirmwareOkButtonAction());
+    }
+
+    changeFile(event): void {
+        const files = event.srcElement.files;
+
+        if (files.length === 0) {
+            this.arrayBuffer = null;
+
+            return;
+        }
+
+        const fileReader = new FileReader();
+        fileReader.onloadend = function () {
+            this.arrayBuffer = new Uint8Array(fileReader.result);
+        }.bind(this);
+        fileReader.readAsArrayBuffer(files[0]);
+    }
 }