UHK detection

Closes #258

electron/src/components/missing-device/index.ts

@@ -0,0 +1 @@
+export * from './missing-device.component';

electron/src/components/missing-device/missing-device.component.html

@@ -0,0 +1,7 @@
+<span class="missing-device-wrapper">
+    <img class="agent-logo" src="images/agent-icon.png"/>
+    <div class="messages">
+        <h1> Cannot find your UHK </h1>
+        <h2> Please plug it in! </h2>
+    </div>
+</span>

electron/src/components/missing-device/missing-device.component.scss

@@ -0,0 +1,19 @@
+.missing-device-wrapper {
+    display: flex;
+    height: 100%;
+    align-items: center;
+    justify-content: center;
+}
+
+.agent-logo {
+    padding: 2em;
+}
+
+.message {
+    display: flex;
+    flex-direction: column;
+
+    > h2 {
+        margin-top: 10px;
+    }
+}

electron/src/components/missing-device/missing-device.component.ts

@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/distinctUntilChanged';
+import 'rxjs/add/operator/ignoreElements';
+import 'rxjs/add/operator/takeWhile';
+
+import { UhkDeviceService } from './../../services/uhk-device.service';
+
+@Component({
+    selector: 'missing-device',
+    templateUrl: 'missing-device.component.html',
+    styleUrls: ['missing-device.component.scss']
+})
+export class MissingDeviceComponent {
+
+    constructor(uhkDevice: UhkDeviceService, router: Router) {
+        uhkDevice.isConnected()
+            .distinctUntilChanged()
+            .takeWhile(connected => !connected)
+            .ignoreElements()
+            .subscribe({
+                complete: () => {
+                    router.navigate(['/']);
+                }
+            });
+    }
+}