feat: device recovery mode (#642)

* add new page and ipc processing

* refactor: remove unused references from uhk.js

* feat: add device recovery route

* refactor: device permission

* feat: write firmware update log to the screen

* fix: xterm height

* feat: add reload button to the recovery page

* refactor: deviceConnectionState.hasPermission in appStartInfo

* refactor: use correct imports

* refactor: move .ok-button css class to the main style.scss

* feat: add bootload active route guard

* style: move RecoveryDeviceAction into new line

* feat: delete reload button

* feat: start device polling after device recovery

packages/uhk-web/src/app/components/device/device.routes.ts

@@ -5,6 +5,7 @@ import { DeviceFirmwareComponent } from './firmware/device-firmware.component';
 import { MouseSpeedComponent } from './mouse-speed/mouse-speed.component';
 import { LEDBrightnessComponent } from './led-brightness/led-brightness.component';
 import { RestoreConfigurationComponent } from './restore-configuration/restore-configuration.component';
+import { RecoveryModeComponent } from './recovery-mode/recovery-mode.component';
 
 export const deviceRoutes: Routes = [
     {
@@ -34,6 +35,10 @@ export const deviceRoutes: Routes = [
             {
                 path: 'restore-user-configuration',
                 component: RestoreConfigurationComponent
+            },
+            {
+                path: 'recovery-mode',
+                component: RecoveryModeComponent
             }
         ]
     }

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

@@ -42,7 +42,7 @@
         <div class="flex-grow" #scrollMe>
             <xterm [logs]="xtermLog$ | async"></xterm>
         </div>
-        <div class="footer">
+        <div class="flex-footer">
             <button type="button"
                     class="btn btn-primary ok-button"
                     [disabled]="firmwareOkButtonDisabled$ | async"

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

@@ -5,25 +5,3 @@
     min-height: 100%;
     width: 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/index.ts

@@ -3,4 +3,5 @@ export * from './firmware/device-firmware.component';
 export * from './mouse-speed/mouse-speed.component';
 export * from './led-brightness/led-brightness.component';
 export * from './restore-configuration/restore-configuration.component';
+export * from './recovery-mode/recovery-mode.component';
 export * from './device.routes';

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

@@ -0,0 +1,26 @@
+<div class="full-height">
+    <div class="flex-container">
+        <div>
+
+            <h1>
+                <i class="fa fa-wrench"></i>
+                <span>Fix device</span>
+            </h1>
+            <p>
+                Your device seems to be broken. No worries, Agent can fix it.
+            </p>
+            <p>
+                <button class="btn btn-primary"
+                        type="button"
+                        [disabled]="flashFirmwareButtonDisbabled$ | async"
+                        (click)="onRecoveryDevice()">Fix device
+                </button>
+            </p>
+        </div>
+        <div class="flex-grow" #scrollMe>
+            <xterm [logs]="xtermLog"></xterm>
+        </div>
+        <div class="flex-footer">
+        </div>
+    </div>
+</div>

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

@@ -0,0 +1,10 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+    width: 100%;
+
+    p {
+        margin: 1.5rem 0;
+    }
+}

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

@@ -0,0 +1,56 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { Store } from '@ngrx/store';
+import { Subscription } from 'rxjs/Subscription';
+import { Observable } from 'rxjs/Observable';
+
+import { XtermLog } from '../../../models/xterm-log';
+import { AppState, flashFirmwareButtonDisbabled, xtermLog } from '../../../store';
+import { RecoveryDeviceAction } from '../../../store/actions/device';
+
+@Component({
+    selector: 'device-recovery-mode',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    templateUrl: './recovery-mode.component.html',
+    styleUrls: ['./recovery-mode.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class RecoveryModeComponent implements OnInit, OnDestroy {
+    xtermLogSubscription: Subscription;
+    flashFirmwareButtonDisbabled$: Observable<boolean>;
+
+    xtermLog: Array<XtermLog>;
+
+    @ViewChild('scrollMe') divElement: ElementRef;
+
+    constructor(private store: Store<AppState>,
+                private cdRef: ChangeDetectorRef) {
+    }
+
+    ngOnInit(): void {
+        this.flashFirmwareButtonDisbabled$ = this.store.select(flashFirmwareButtonDisbabled);
+        this.xtermLogSubscription = this.store.select(xtermLog)
+            .subscribe(data => {
+                this.xtermLog = data;
+
+                this.cdRef.markForCheck();
+
+                if (this.divElement && this.divElement.nativeElement) {
+                    setTimeout(() => {
+                        this.divElement.nativeElement.scrollTop = this.divElement.nativeElement.scrollHeight;
+                    });
+                }
+            });
+    }
+
+    ngOnDestroy(): void {
+        if (this.xtermLogSubscription) {
+            this.xtermLogSubscription.unsubscribe();
+        }
+    }
+
+    onRecoveryDevice(): void {
+        this.store.dispatch(new RecoveryDeviceAction());
+    }
+}