From ab88d8a2e76e8fc402c4cb67f29558693b9aeb4a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=B3bert=20Kiss?= <erT78gb@gmail.com>
Date: Wed, 18 Oct 2017 01:28:02 +0200
Subject: [PATCH] feat(agent): Add 'Device' menu and submenus (#461)

---
 .../device-configuration.component.html}      |  4 +--
 .../device-configuration.component.scss}      |  0
 .../device-configuration.component.ts}        |  6 ++--
 .../app/components/device/device.routes.ts    | 31 ++++++++++++++-----
 .../firmware/device-firmware.component.html   |  7 +++++
 .../firmware/device-firmware.component.scss   |  5 +++
 .../firmware/device-firmware.component.ts     | 12 +++++++
 .../src/app/components/device/index.ts        |  4 ++-
 .../mouse-speed/mouse-speed.component.html    |  7 +++++
 .../mouse-speed/mouse-speed.component.scss    |  5 +++
 .../mouse-speed/mouse-speed.component.ts      | 12 +++++++
 .../side-menu/side-menu.component.html        | 27 +++++++++++++---
 .../side-menu/side-menu.component.ts          |  1 +
 packages/uhk-web/src/app/shared.module.ts     | 10 ++++--
 14 files changed, 111 insertions(+), 20 deletions(-)
 rename packages/uhk-web/src/app/components/device/{settings/device-settings.component.html => configuration/device-configuration.component.html} (91%)
 rename packages/uhk-web/src/app/components/device/{settings/device-settings.component.scss => configuration/device-configuration.component.scss} (100%)
 rename packages/uhk-web/src/app/components/device/{settings/device-settings.component.ts => configuration/device-configuration.component.ts} (83%)
 create mode 100644 packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html
 create mode 100644 packages/uhk-web/src/app/components/device/firmware/device-firmware.component.scss
 create mode 100644 packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts
 create mode 100644 packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html
 create mode 100644 packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss
 create mode 100644 packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts

diff --git a/packages/uhk-web/src/app/components/device/settings/device-settings.component.html b/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html
similarity index 91%
rename from packages/uhk-web/src/app/components/device/settings/device-settings.component.html
rename to packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html
index 27fc57e4..a091e108 100644
--- a/packages/uhk-web/src/app/components/device/settings/device-settings.component.html
+++ b/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html
@@ -1,6 +1,6 @@
 <h1>
-    <i class="fa fa-cog"></i>
-    <span>Device settings</span>
+    <i class="fa fa-sliders"></i>
+    <span>Device configuration</span>
 </h1>
 
 <ul class="list-unstyled btn-list">
diff --git a/packages/uhk-web/src/app/components/device/settings/device-settings.component.scss b/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.scss
similarity index 100%
rename from packages/uhk-web/src/app/components/device/settings/device-settings.component.scss
rename to packages/uhk-web/src/app/components/device/configuration/device-configuration.component.scss
diff --git a/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts b/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts
similarity index 83%
rename from packages/uhk-web/src/app/components/device/settings/device-settings.component.ts
rename to packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts
index b6f34912..bc6e5eac 100644
--- a/packages/uhk-web/src/app/components/device/settings/device-settings.component.ts
+++ b/packages/uhk-web/src/app/components/device/configuration/device-configuration.component.ts
@@ -7,13 +7,13 @@ import { SaveUserConfigInBinaryFileAction, SaveUserConfigInJsonFileAction } from
 
 @Component({
     selector: 'device-settings',
-    templateUrl: './device-settings.component.html',
-    styleUrls: ['./device-settings.component.scss'],
+    templateUrl: './device-configuration.component.html',
+    styleUrls: ['./device-configuration.component.scss'],
     host: {
         'class': 'container-fluid'
     }
 })
-export class DeviceSettingsComponent {
+export class DeviceConfigurationComponent {
 
     constructor(private store: Store<AppState>) {
     }
diff --git a/packages/uhk-web/src/app/components/device/device.routes.ts b/packages/uhk-web/src/app/components/device/device.routes.ts
index dc731c1a..ff1eaed2 100644
--- a/packages/uhk-web/src/app/components/device/device.routes.ts
+++ b/packages/uhk-web/src/app/components/device/device.routes.ts
@@ -1,15 +1,30 @@
 import { Routes } from '@angular/router';
 
-import { DeviceSettingsComponent } from './settings/device-settings.component';
+import { DeviceConfigurationComponent } from './configuration/device-configuration.component';
+import { DeviceFirmwareComponent } from './firmware/device-firmware.component';
+import { MouseSpeedComponent } from './mouse-speed/mouse-speed.component';
 
 export const deviceRoutes: Routes = [
     {
-        path: '',
-        redirectTo: 'device',
-        pathMatch: 'full'
-    },
-    {
-        path: 'device/settings',
-        component: DeviceSettingsComponent
+        path: 'device',
+        children: [
+            {
+                path: '',
+                redirectTo: 'configuration',
+                pathMatch: 'full'
+            },
+            {
+                path: 'configuration',
+                component: DeviceConfigurationComponent
+            },
+            {
+                path: 'mouse-speed',
+                component: MouseSpeedComponent
+            },
+            {
+                path: 'firmware',
+                component: DeviceFirmwareComponent
+            }
+        ]
     }
 ];
diff --git a/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html
new file mode 100644
index 00000000..dbb687fb
--- /dev/null
+++ b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.html
@@ -0,0 +1,7 @@
+<h1>
+    <i class="fa fa-sliders"></i>
+    <span>Firmware</span>
+</h1>
+<p>
+    Coming soon ...
+</p>
diff --git a/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.scss b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.scss
new file mode 100644
index 00000000..0969ec68
--- /dev/null
+++ b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.scss
@@ -0,0 +1,5 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+}
diff --git a/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts
new file mode 100644
index 00000000..cb661b8c
--- /dev/null
+++ b/packages/uhk-web/src/app/components/device/firmware/device-firmware.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'device-firmware',
+    templateUrl: './device-firmware.component.html',
+    styleUrls: ['./device-firmware.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class DeviceFirmwareComponent {
+}
diff --git a/packages/uhk-web/src/app/components/device/index.ts b/packages/uhk-web/src/app/components/device/index.ts
index f5850c53..bbfe9105 100644
--- a/packages/uhk-web/src/app/components/device/index.ts
+++ b/packages/uhk-web/src/app/components/device/index.ts
@@ -1,2 +1,4 @@
-export * from './settings/device-settings.component';
+export * from './configuration/device-configuration.component';
+export * from './firmware/device-firmware.component';
+export * from './mouse-speed/mouse-speed.component';
 export * from './device.routes';
diff --git a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html
new file mode 100644
index 00000000..dbb687fb
--- /dev/null
+++ b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.html
@@ -0,0 +1,7 @@
+<h1>
+    <i class="fa fa-sliders"></i>
+    <span>Firmware</span>
+</h1>
+<p>
+    Coming soon ...
+</p>
diff --git a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss
new file mode 100644
index 00000000..0969ec68
--- /dev/null
+++ b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.scss
@@ -0,0 +1,5 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+}
diff --git a/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts
new file mode 100644
index 00000000..263ad41d
--- /dev/null
+++ b/packages/uhk-web/src/app/components/device/mouse-speed/mouse-speed.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'device-mouse-speed',
+    templateUrl: './mouse-speed.component.html',
+    styleUrls: ['./mouse-speed.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class MouseSpeedComponent {
+}
diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
index 1a435f6d..aa001226 100644
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.html
@@ -2,13 +2,32 @@
     <li class="sidebar__level-0--item">
         <div class="sidebar__level-0">
             <i class="uhk-icon uhk-icon-0401-usb-stick rotate-right"></i> UHK 60
-            <a [routerLink]="['/device/settings']" class="btn btn-default pull-right btn-sm">
-                    <i class="fa fa-cog"></i>
-                </a>
             <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'device')"></i>
         </div>
         <ul [@toggler]="animation['device']">
-
+            <li class="sidebar__level-1--item">
+                <div class="sidebar__level-1">
+                    <i class="fa fa-sliders"></i> Device
+                    <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'configuration')"></i>
+                </div>
+                <ul [@toggler]="animation['configuration']">
+                    <li class="sidebar__level-2--item">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/device/configuration']">Configuration</a>
+                        </div>
+                    </li>
+                    <li class="sidebar__level-2--item">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/device/mouse-speed']">Mouse speed</a>
+                        </div>
+                    </li>
+                    <li class="sidebar__level-2--item">
+                        <div class="sidebar__level-2" [routerLinkActive]="['active']">
+                            <a [routerLink]="['/device/firmware']">Firmware</a>
+                        </div>
+                    </li>
+                </ul>
+            </li>
             <li class="sidebar__level-1--item">
                 <div class="sidebar__level-1">
                     <i class="fa fa-keyboard-o"></i> Keymaps
diff --git a/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts b/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
index eee8737c..7f679f7a 100644
--- a/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
+++ b/packages/uhk-web/src/app/components/side-menu/side-menu.component.ts
@@ -40,6 +40,7 @@ export class SideMenuComponent {
     constructor(private store: Store<AppState>, private renderer: Renderer) {
         this.animation = {
             device: 'active',
+            configuration: 'active',
             keymap: 'active',
             macro: 'active',
             addon: 'active'
diff --git a/packages/uhk-web/src/app/shared.module.ts b/packages/uhk-web/src/app/shared.module.ts
index 4ec41e80..1341b9a1 100644
--- a/packages/uhk-web/src/app/shared.module.ts
+++ b/packages/uhk-web/src/app/shared.module.ts
@@ -10,7 +10,11 @@ import { Select2Module } from 'ng2-select2/ng2-select2';
 
 import { AddOnComponent } from './components/add-on';
 import { KeyboardSliderComponent } from './components/keyboard/slider';
-import { DeviceSettingsComponent } from './components/device';
+import {
+    DeviceConfigurationComponent,
+    DeviceFirmwareComponent,
+    MouseSpeedComponent
+} from './components/device';
 import { KeymapAddComponent, KeymapEditComponent, KeymapHeaderComponent } from './components/keymap';
 import { LayersComponent } from './components/layers';
 import {
@@ -97,7 +101,9 @@ import { UhkDeviceLoadedGuard } from './services/uhk-device-loaded.guard';
 @NgModule({
     declarations: [
         MainAppComponent,
-        DeviceSettingsComponent,
+        DeviceConfigurationComponent,
+        DeviceFirmwareComponent,
+        MouseSpeedComponent,
         KeymapEditComponent,
         KeymapHeaderComponent,
         NotificationComponent,