refactore: create feature modules (#387)

* add @angular/cli to the project

* increase nodejs version -> 8.2.1

* add lerna

* merge web and shared module

* move electron module into packages as uhk-agent

Electron agent functionality is not working

* delete symlinker

* convert private properties to public of component if used in html

* revert uhk-message.component

* fix component path

* fix the correct name of the uhk-message.component.scss

* building web and electron module

* delete uhk-renderer package

* handle device connect disconnect state

* add privilege detection

* fix set privilege functionality

* turn back download keymap functionality

* add bootstrap, select2 js and fix null pointer exception

* turn back upload data to keyboard

* fix send keymap

* fix test-serializer

* add missing package.json

* merging

* fix appveyor build

* fix linting

* turn back electron storage service

* commit the missing electron-datastorage-repository

* update node to 8.3.0 in .nvmrc and log node version in appveyor build

* set exact version number in appveyor build

* vertical align privilege and missing device components

* set back node version to 8 in appveyor

* move node-usb dependency from usb dir to root

maybe it is fix the appveyor build

* revert usb to root

* fix electron builder script

* fix electron builder script

* turn off electron devtools

* remove CTRL+U functionality

* fix CTRL+o

* fix lint error

* turnoff store freeze

* start process when got `Error: EPERM: operation not permitted` error

* move files from root usb dir -> packages/usb

packages/uhk-web/src/app/components/layers/index.ts

@@ -0,0 +1 @@
+export * from './layers.component';

packages/uhk-web/src/app/components/layers/layers.component.html

@@ -0,0 +1,8 @@
+<div class="text-center">
+    <span role="group" class="uhk__layer-switcher--wrapper btn-group btn-group-lg" data-title="Layers: ">
+        <button type="button" class="btn btn-default" *ngFor="let button of buttons; let index = index" (click)="selectLayer(index)"
+            [class.btn-primary]="index === current">
+            {{ button }}
+        </button>
+    </span>
+</div>

packages/uhk-web/src/app/components/layers/layers.component.scss

@@ -0,0 +1,36 @@
+:host {
+    display: block;
+
+    &.disabled {
+        button {
+            cursor: no-drop;
+            background: rgba(#ccc, 0.43);
+            pointer-events: none;
+
+            &.btn-primary {
+                background: #7c7c7c;
+                border-color: #7c7c7c;
+            }
+        }
+    }
+}
+
+.uhk {
+    &__layer-switcher {
+        &--wrapper {
+            position: relative;
+            margin-bottom: 2rem;
+
+            &:before {
+                content: attr(data-title);
+                display: inline-block;
+                position: absolute;
+                bottom: 0.55em;
+                right: 100%;
+                font-size: 18px;
+                padding-right: 0.45em;
+                margin: 0;
+            }
+        }
+    }
+}

packages/uhk-web/src/app/components/layers/layers.component.ts

@@ -0,0 +1,31 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+
+@Component({
+    selector: 'layers',
+    templateUrl: './layers.component.html',
+    styleUrls: ['./layers.component.scss']
+})
+export class LayersComponent {
+    @Input() current: number;
+    @Output() select = new EventEmitter();
+
+    buttons: string[];
+
+    constructor() {
+        this.buttons = ['Base', 'Mod', 'Fn', 'Mouse'];
+        this.current = 0;
+    }
+
+    selectLayer(index: number) {
+        if (this.current === index) {
+            return;
+        }
+
+        this.select.emit({
+            oldIndex: this.current,
+            index: index
+        });
+
+        this.current = index;
+    }
+}