feat(agent): Add loading screen (#444)

* feat(uhk-message): Add spin animation

* feat(agent): Add loading page

* fix device connected / disconnected events

Author: ert78gb

.stylelintrc.json

@@ -26,7 +26,7 @@
 
     "unit-case": "lower",
     "unit-no-unknown": true,
-    "unit-whitelist": ["px", "%", "deg", "ms", "em", "rem", "vh", "vv"],
+    "unit-whitelist": ["px", "%", "deg", "ms", "em", "rem", "vh", "vv", "s"],
 
     "value-list-comma-space-after": "always-single-line",
     "value-list-comma-space-before": "never",

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

@@ -3,7 +3,7 @@
                       (doNotUpdateApp)="doNotUpdateApp()">
 </app-update-available>
 
-<side-menu *ngIf="deviceConnected$ | async"></side-menu>
+<side-menu *ngIf="deviceConfigurationLoaded$ | async"></side-menu>
 <div id="main-content" class="main-content">
     <router-outlet></router-outlet>
 </div>

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

@@ -9,7 +9,7 @@ import { DoNotUpdateAppAction, UpdateAppAction } from './store/actions/app-updat
 import {
     AppState,
     getShowAppUpdateAvailable,
-    deviceConnected,
+    deviceConfigurationLoaded,
     runningInElectron,
     saveToKeyboardState
 } from './store';
@@ -37,13 +37,13 @@ import { SaveUserConfigInBinaryFileAction, SaveUserConfigInJsonFileAction } from
 })
 export class MainAppComponent {
     showUpdateAvailable$: Observable<boolean>;
-    deviceConnected$: Observable<boolean>;
+    deviceConfigurationLoaded$: Observable<boolean>;
     runningInElectron$: Observable<boolean>;
     saveToKeyboardState$: Observable<ProgressButtonState>;
 
     constructor(private store: Store<AppState>) {
         this.showUpdateAvailable$ = store.select(getShowAppUpdateAvailable);
-        this.deviceConnected$ = store.select(deviceConnected);
+        this.deviceConfigurationLoaded$ = store.select(deviceConfigurationLoaded);
         this.runningInElectron$ = store.select(runningInElectron);
         this.saveToKeyboardState$ = store.select(saveToKeyboardState);
     }

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

@@ -13,6 +13,9 @@ import { UhkDeviceUninitializedGuard } from './services/uhk-device-uninitialized
 import { UhkDeviceInitializedGuard } from './services/uhk-device-initialized.guard';
 import { MainPage } from './pages/main-page/main.page';
 import { settingsRoutes } from './components/settings/settings.routes';
+import { LoadingDevicePageComponent } from './pages/loading-page/loading-device.page';
+import { UhkDeviceLoadingGuard } from './services/uhk-device-loading.guard';
+import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
 
 const appRoutes: Routes = [
     {
@@ -25,10 +28,15 @@ const appRoutes: Routes = [
         component: PrivilegeCheckerComponent,
         canActivate: [UhkDeviceInitializedGuard]
     },
+    {
+        path: 'loading',
+        component: LoadingDevicePageComponent,
+        canActivate: [UhkDeviceLoadedGuard]
+    },
     {
         path: '',
         component: MainPage,
-        canActivate: [UhkDeviceDisconnectedGuard],
+        canActivate: [UhkDeviceDisconnectedGuard, UhkDeviceLoadingGuard],
         children: [
             ...deviceRoutes,
             ...keymapRoutes,

packages/uhk-web/src/app/components/uhk-message/uhk-message.component.html

@@ -1,5 +1,7 @@
 <span class="uhk-message-wrapper">
-    <img class="agent-logo" src="assets/images/agent-icon.png"/>
+    <img class="agent-logo spin-logo"
+         [ngClass]="{'spin-logo': rotateLogo}"
+         src="assets/images/agent-icon.png"/>
     <div class="messages">
         <h1> {{ title }} </h1>
         <h2> {{ subtitle }} </h2>

packages/uhk-web/src/app/components/uhk-message/uhk-message.component.scss

@@ -17,3 +17,23 @@
         margin-top: 10px;
     }
 }
+
+.spin-logo {
+    -webkit-animation: spin 2s ease-in-out infinite;
+    -moz-animation: spin 2s ease-in-out infinite;
+    animation: spin 2s ease-in-out infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0);
+    }
+
+    50% {
+        transform: rotate(360deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}

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

@@ -9,4 +9,5 @@ import { Component, Input, ChangeDetectionStrategy } from '@angular/core';
 export class UhkMessageComponent {
     @Input() title: string;
     @Input() subtitle: string;
+    @Input() rotateLogo = false;
 }

packages/uhk-web/src/app/pages/loading-page/loading-device.page.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'loading-device',
+    template: `
+        <uhk-message title="Loading Agent..."
+                     subtitle="Hang tight!"
+                     [rotateLogo]="true"></uhk-message>
+    `
+})
+export class LoadingDevicePageComponent {
+
+    constructor() {
+    }
+}

packages/uhk-web/src/app/services/uhk-device-loaded.guard.ts

@@ -0,0 +1,25 @@
+import { CanActivate, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/map';
+
+import { AppState, deviceConfigurationLoaded } from '../store';
+
+@Injectable()
+export class UhkDeviceLoadedGuard implements CanActivate {
+
+    constructor(private store: Store<AppState>, private router: Router) { }
+
+    canActivate(): Observable<boolean> {
+        return this.store.select(deviceConfigurationLoaded)
+            .do(loaded => {
+                if (loaded) {
+                    this.router.navigate(['/']);
+                }
+            })
+            .map(loaded => !loaded);
+    }
+}

packages/uhk-web/src/app/services/uhk-device-loading.guard.ts

@@ -0,0 +1,23 @@
+import { CanActivate, Router } from '@angular/router';
+import { Store } from '@ngrx/store';
+import { Injectable } from '@angular/core';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/do';
+
+import { AppState, deviceConfigurationLoaded } from '../store';
+
+@Injectable()
+export class UhkDeviceLoadingGuard implements CanActivate {
+
+    constructor(private store: Store<AppState>, private router: Router) { }
+
+    canActivate(): Observable<boolean> {
+        return this.store.select(deviceConfigurationLoaded)
+            .do(loaded => {
+                if (!loaded) {
+                    this.router.navigate(['/loading']);
+                }
+            });
+    }
+}