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

Author: ert78gb

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());
-    }
 }

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>

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());
+    }
 }

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;
+    }
+}