feat(agent): Add 'Device' menu and submenus (#461)

packages/uhk-web/src/app/components/device/configuration/device-configuration.component.html

@@ -1,6 +1,6 @@
 <h1>
-    <i class="fa fa-cog"></i>
+    <i class="fa fa-sliders"></i>
-    <span>Device settings</span>
+    <span>Device configuration</span>
 </h1>
 
 <ul class="list-unstyled btn-list">

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',
+    templateUrl: './device-configuration.component.html',
-    styleUrls: ['./device-settings.component.scss'],
+    styleUrls: ['./device-configuration.component.scss'],
     host: {
         'class': 'container-fluid'
     }
 })
-export class DeviceSettingsComponent {
+export class DeviceConfigurationComponent {
 
     constructor(private store: Store<AppState>) {
     }

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: '',
+        path: 'device',
-        redirectTo: 'device',
+        children: [
-        pathMatch: 'full'
+            {
-    },
+                path: '',
-    {
+                redirectTo: 'configuration',
-        path: 'device/settings',
+                pathMatch: 'full'
-        component: DeviceSettingsComponent
+            },
+            {
+                path: 'configuration',
+                component: DeviceConfigurationComponent
+            },
+            {
+                path: 'mouse-speed',
+                component: MouseSpeedComponent
+            },
+            {
+                path: 'firmware',
+                component: DeviceFirmwareComponent
+            }
+        ]
     }
 ];

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>

packages/uhk-web/src/app/components/device/firmware/device-firmware.component.scss

@@ -0,0 +1,5 @@
+:host {
+    overflow-y: auto;
+    display: block;
+    height: 100%;
+}

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

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';

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>

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

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

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

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'

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,