From d1dd80eaa85b976be147e94894b8c7ae9a90d0ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3zsef=20Farkas?= <fjozsef001@gmail.com>
Date: Mon, 27 Feb 2017 19:03:26 +0100
Subject: [PATCH] refactor: UHK Message component

---
 electron/src/app.module.ts                           |  2 ++
 .../missing-device/missing-device.component.html     |  8 +-------
 .../missing-device/missing-device.component.ts       |  3 +--
 electron/src/components/uhk-message/index.ts         |  1 +
 .../uhk-message/uhk-message.component.html           |  7 +++++++
 .../uhk-message.component.scss}                      |  2 +-
 .../components/uhk-message/uhk-message.component.ts  | 12 ++++++++++++
 7 files changed, 25 insertions(+), 10 deletions(-)
 create mode 100644 electron/src/components/uhk-message/index.ts
 create mode 100644 electron/src/components/uhk-message/uhk-message.component.html
 rename electron/src/components/{missing-device/missing-device.component.scss => uhk-message/uhk-message.component.scss} (89%)
 create mode 100644 electron/src/components/uhk-message/uhk-message.component.ts

diff --git a/electron/src/app.module.ts b/electron/src/app.module.ts
index 68d01baf..dba59920 100644
--- a/electron/src/app.module.ts
+++ b/electron/src/app.module.ts
@@ -11,6 +11,7 @@ import { DragulaModule } from 'ng2-dragula/ng2-dragula';
 import { Select2Module } from 'ng2-select2/ng2-select2';
 
 import { MissingDeviceComponent } from './components/missing-device/missing-device.component';
+import { UhkMessageComponent } from './components/uhk-message';
 import { AddOnComponent } from './shared/components/add-on';
 import { KeyboardSliderComponent } from './shared/components/keyboard/slider';
 import { KeymapAddComponent, KeymapHeaderComponent } from './shared/components/keymap';
@@ -140,6 +141,7 @@ const storeConfig = {
         SettingsComponent,
         KeyboardSliderComponent,
         MissingDeviceComponent,
+        UhkMessageComponent,
         CancelableDirective
     ],
     imports: [
diff --git a/electron/src/components/missing-device/missing-device.component.html b/electron/src/components/missing-device/missing-device.component.html
index 55a0fef0..7e3389f6 100644
--- a/electron/src/components/missing-device/missing-device.component.html
+++ b/electron/src/components/missing-device/missing-device.component.html
@@ -1,7 +1 @@
-<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>
+<uhk-message title="Cannot find your UHK" subtitle="Please plug it in!"></uhk-message>
diff --git a/electron/src/components/missing-device/missing-device.component.ts b/electron/src/components/missing-device/missing-device.component.ts
index 14a9ed77..b0dd9b8e 100644
--- a/electron/src/components/missing-device/missing-device.component.ts
+++ b/electron/src/components/missing-device/missing-device.component.ts
@@ -10,8 +10,7 @@ import { UhkDeviceService } from './../../services/uhk-device.service';
 
 @Component({
     selector: 'missing-device',
-    templateUrl: 'missing-device.component.html',
-    styleUrls: ['missing-device.component.scss']
+    templateUrl: 'missing-device.component.html'
 })
 export class MissingDeviceComponent {
 
diff --git a/electron/src/components/uhk-message/index.ts b/electron/src/components/uhk-message/index.ts
new file mode 100644
index 00000000..5fec31d5
--- /dev/null
+++ b/electron/src/components/uhk-message/index.ts
@@ -0,0 +1 @@
+export * from './uhk-message.component';
diff --git a/electron/src/components/uhk-message/uhk-message.component.html b/electron/src/components/uhk-message/uhk-message.component.html
new file mode 100644
index 00000000..69a7a911
--- /dev/null
+++ b/electron/src/components/uhk-message/uhk-message.component.html
@@ -0,0 +1,7 @@
+<span class="uhk-message-wrapper">
+    <img class="agent-logo" src="images/agent-icon.png"/>
+    <div class="messages">
+        <h1> {{ title }} </h1>
+        <h2> {{ subtitle }} </h2>
+    </div>
+</span>
diff --git a/electron/src/components/missing-device/missing-device.component.scss b/electron/src/components/uhk-message/uhk-message.component.scss
similarity index 89%
rename from electron/src/components/missing-device/missing-device.component.scss
rename to electron/src/components/uhk-message/uhk-message.component.scss
index 3a204fa2..bfcaeac4 100644
--- a/electron/src/components/missing-device/missing-device.component.scss
+++ b/electron/src/components/uhk-message/uhk-message.component.scss
@@ -1,4 +1,4 @@
-.missing-device-wrapper {
+.uhk-message-wrapper {
     display: flex;
     height: 100%;
     align-items: center;
diff --git a/electron/src/components/uhk-message/uhk-message.component.ts b/electron/src/components/uhk-message/uhk-message.component.ts
new file mode 100644
index 00000000..3958b2fc
--- /dev/null
+++ b/electron/src/components/uhk-message/uhk-message.component.ts
@@ -0,0 +1,12 @@
+import { Component, OnInit, Input, ChangeDetectionStrategy } from '@angular/core';
+
+@Component({
+    selector: 'uhk-message',
+    templateUrl: 'uhk-message.component.html',
+    styleUrls: ['uhk-message.component.scss'],
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class UhkMessageComponent {
+   @Input() title: string;
+   @Input() subtitle: string;
+}