From 6b46c85ca6db0c06ed540cae430a6bc13de8e638 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Kiss?= <erT78gb@gmail.com>
Date: Sat, 14 Oct 2017 16:04:50 +0200
Subject: [PATCH] feat(device): Add save config buttons to the Device settings
 page (#447)

* feat(device): Add save config buttons to the Device settings page

* feat(device): Set danger style to the reset user-config buttone
---
 packages/uhk-web/src/app/app.component.ts     | 14 -------------
 .../settings/device-settings.component.html   | 21 +++++++++++++++++--
 .../settings/device-settings.component.ts     |  9 ++++++++
 packages/uhk-web/src/styles.scss              |  6 ++++++
 4 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/packages/uhk-web/src/app/app.component.ts b/packages/uhk-web/src/app/app.component.ts
index f23cd814..36fe9359 100644
--- a/packages/uhk-web/src/app/app.component.ts
+++ b/packages/uhk-web/src/app/app.component.ts
@@ -59,18 +59,4 @@ export class MainAppComponent {
     clickedOnProgressButton(action: Action) {
         return this.store.dispatch(action);
     }
-
-    @HostListener('window:keydown.alt.j', ['$event'])
-    onAltJ(event: KeyboardEvent): void {
-        event.preventDefault();
-        event.stopPropagation();
-        this.store.dispatch(new SaveUserConfigInJsonFileAction());
-    }
-
-    @HostListener('window:keydown.alt.b', ['$event'])
-    onAltB(event: KeyboardEvent): void {
-        event.preventDefault();
-        event.stopPropagation();
-        this.store.dispatch(new SaveUserConfigInBinaryFileAction());
-    }
 }
diff --git a/packages/uhk-web/src/app/components/device/settings/device-settings.component.html b/packages/uhk-web/src/app/components/device/settings/device-settings.component.html
index 2e5a5497..775ddef0 100644
--- a/packages/uhk-web/src/app/components/device/settings/device-settings.component.html
+++ b/packages/uhk-web/src/app/components/device/settings/device-settings.component.html
@@ -1,5 +1,22 @@
 <h1>
     <i class="fa fa-cog"></i>
-    <span>Device settings...</span>
+    <span>Device settings</span>
 </h1>
-<a (click)="resetUserConfiguration()">Reset user configuration</a>
+
+<ul class="list-unstyled btn-list">
+    <li>
+        <button class="btn btn-danger"
+                (click)="resetUserConfiguration()">Reset user configuration including all your keymaps and macros
+        </button>
+    </li>
+    <li>
+        <button class="btn btn-default"
+                (click)="saveConfigurationInJSONFormat()">Save device JSON configuration
+        </button>
+    </li>
+    <li>
+        <button class="btn btn-default"
+                (click)="saveConfigurationInBINFormat()">Save device binary configuration
+        </button>
+    </li>
+</ul>
diff --git a/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts b/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts
index a7b4d039..acbc4fe0 100644
--- a/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts
+++ b/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts
@@ -3,6 +3,7 @@ import { Store } from '@ngrx/store';
 
 import { AppState } from '../../../store';
 import { ResetUserConfigurationAction } from '../../../store/actions/device';
+import { SaveUserConfigInBinaryFileAction, SaveUserConfigInJsonFileAction } from '../../../store/actions/user-config';
 
 @Component({
     selector: 'device-settings',
@@ -20,4 +21,12 @@ export class DeviceSettingsComponent {
     resetUserConfiguration() {
         this.store.dispatch(new ResetUserConfigurationAction());
     }
+
+    saveConfigurationInJSONFormat(){
+        this.store.dispatch(new SaveUserConfigInJsonFileAction());
+    }
+
+    saveConfigurationInBINFormat(){
+        this.store.dispatch(new SaveUserConfigInBinaryFileAction());
+    }
 }
diff --git a/packages/uhk-web/src/styles.scss b/packages/uhk-web/src/styles.scss
index bbe789b2..04e77ec0 100644
--- a/packages/uhk-web/src/styles.scss
+++ b/packages/uhk-web/src/styles.scss
@@ -59,3 +59,9 @@
 .select2-container--default .select2-dropdown--below .select2-results > .select2-results__options {
     max-height: 300px;
 }
+
+ul.btn-list {
+    & li {
+        margin-top: 0.5em;
+    }
+}