feat(config): Add deviceName to the user config (#474)

* add device name to configuration

* feat(config): Rename user configuration

* style: fix tslint error

* test: Fix unit tests

* test: Add UserConfiguration device name test

* set device name if faild the user-config read from device

* feat(device): Remove the first 0 from USB[W] dump

packages/uhk-web/src/app/components/macro/action-editor/tab/mouse/macro-mouse.component.ts

@@ -139,5 +139,5 @@ export class MacroMouseTabComponent extends MacroBaseComponent implements OnInit
             default:
                 return true;
         }
-    };
+    }
 }

packages/uhk-web/src/app/components/side-menu/side-menu.component.html

@@ -1,7 +1,13 @@
 <ul class="menu--top">
     <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
+            <i class="uhk-icon uhk-icon-0401-usb-stick rotate-right"></i>
+            <input #deviceName cancelable
+                   class="pane-title__name"
+                   type="text"
+                   (change)="editDeviceName($event.target.value)"
+                   (keyup.enter)="deviceName.blur()"
+                   (keyup)="calculateHeaderTextWidth($event.target.value)">
             <i class="fa fa-chevron-up pull-right" (click)="toggleHide($event, 'device')"></i>
         </div>
         <ul [@toggler]="animation['device']">

packages/uhk-web/src/app/components/side-menu/side-menu.component.scss

@@ -34,7 +34,7 @@ ul {
         padding: 0.5rem 1rem 0.5rem 2rem;
     }
 
-    &__level-0 ,
+    &__level-0,
     &__level-1 {
         font-size: 2rem;
         line-height: 3rem;
@@ -150,3 +150,22 @@ ul {
         }
     }
 }
+
+.pane-title {
+    margin-bottom: 1em;
+
+    &__name {
+        border: none;
+        border-bottom: 2px dotted #999;
+        padding: 0;
+        margin: 0 0.25rem;
+        text-overflow: ellipsis;
+        background-color: inherit;
+
+        &:focus {
+            box-shadow: 0 0 0 1px #ccc, 0 0 5px 0 #ccc;
+            border-color: transparent;
+            background-color: inherit;
+        }
+    }
+}

packages/uhk-web/src/app/components/side-menu/side-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component, Renderer } from '@angular/core';
+import { AfterContentInit, Component, ElementRef, Renderer2, ViewChild } from '@angular/core';
 import { animate, state, style, transition, trigger } from '@angular/animations';
 import { Keymap, Macro } from 'uhk-common';
 
@@ -9,9 +9,11 @@ import 'rxjs/add/operator/do';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/let';
 
-import { AppState, showAddonMenu, runningInElectron } from '../../store';
+import { AppState, getDeviceName, showAddonMenu, runningInElectron } from '../../store';
 import { MacroActions } from '../../store/actions';
 import { getKeymaps, getMacros } from '../../store/reducers/user-configuration';
+import * as util from '../../util';
+import { RenameUserConfigurationAction } from '../../store/actions/user-config';
 
 @Component({
     animations: [
@@ -29,15 +31,18 @@ import { getKeymaps, getMacros } from '../../store/reducers/user-configuration';
     templateUrl: './side-menu.component.html',
     styleUrls: ['./side-menu.component.scss']
 })
-export class SideMenuComponent {
+export class SideMenuComponent implements AfterContentInit {
     showAddonMenu$: Observable<boolean>;
     runInElectron$: Observable<boolean>;
 
+    deviceName$: Observable<string>;
     keymaps$: Observable<Keymap[]>;
     macros$: Observable<Macro[]>;
     animation: { [key: string]: 'active' | 'inactive' };
+    deviceNameValue: string;
+    @ViewChild('deviceName') deviceName: ElementRef;
 
-    constructor(private store: Store<AppState>, private renderer: Renderer) {
+    constructor(private store: Store<AppState>, private renderer: Renderer2) {
         this.animation = {
             device: 'active',
             configuration: 'active',
@@ -60,6 +65,15 @@ export class SideMenuComponent {
 
         this.showAddonMenu$ = this.store.select(showAddonMenu);
         this.runInElectron$ = this.store.select(runningInElectron);
+        this.deviceName$ = store.select(getDeviceName);
+        this.deviceName$.subscribe(name => {
+            this.deviceNameValue = name;
+            this.setDeviceName();
+        });
+    }
+
+    ngAfterContentInit(): void {
+        this.setDeviceName();
     }
 
     toggleHide(event: Event, type: string) {
@@ -73,11 +87,34 @@ export class SideMenuComponent {
             this.animation[type] = 'inactive';
         }
 
-        this.renderer.setElementClass(event.target, 'fa-chevron-up', show);
-        this.renderer.setElementClass(event.target, 'fa-chevron-down', !show);
+        if (show) {
+            this.renderer.addClass(event.target, 'fa-chevron-up');
+            this.renderer.removeClass(event.target, 'fa-chevron-down');
+        } else {
+            this.renderer.removeClass(event.target, 'fa-chevron-up');
+            this.renderer.addClass(event.target, 'fa-chevron-down');
+        }
     }
 
     addMacro() {
         this.store.dispatch(MacroActions.addMacro());
     }
+
+    editDeviceName(name): void {
+        this.store.dispatch(new RenameUserConfigurationAction(name));
+    }
+
+    calculateHeaderTextWidth(text): void {
+        const htmlInput = this.deviceName.nativeElement as HTMLInputElement;
+        const maxWidth = htmlInput.parentElement.offsetWidth * 0.66;
+        const textWidth = util.getContentWidth(window.getComputedStyle(htmlInput), text);
+        this.renderer.setStyle(htmlInput, 'width', Math.min(maxWidth, textWidth) + 'px');
+    }
+
+    private setDeviceName(): void {
+        if (this.deviceName) {
+            this.renderer.setProperty(this.deviceName.nativeElement, 'value', this.deviceNameValue);
+            this.calculateHeaderTextWidth(this.deviceName.nativeElement.value);
+        }
+    }
 }