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/macro/edit/macro-edit.component.html

@@ -0,0 +1,17 @@
+<ng-template [ngIf]="macro">
+    <macro-header
+            [macro]="macro"
+            [isNew]="isNew"
+    ></macro-header>
+    <macro-list
+        [macro]="macro"
+        (add)="addAction($event.macroId, $event.action)"
+        (edit)="editAction($event.macroId, $event.index, $event.action)"
+        (delete)="deleteAction($event.macroId, $event.index, $event.action)"
+        (reorder)="reorderAction($event.macroId, $event.oldIndex, $event.newIndex)"
+    ></macro-list>
+</ng-template>
+
+<div *ngIf="!macro" class="not-found">
+    There is no macro with id {{ route.params.select('id') | async }}.
+</div>

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.scss

@@ -0,0 +1,11 @@
+:host {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.not-found {
+    margin-top: 30px;
+    font-size: 16px;
+    text-align: center;
+}

packages/uhk-web/src/app/components/macro/edit/macro-edit.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnDestroy } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import { Store } from '@ngrx/store';
+
+import { Subscription } from 'rxjs/Subscription';
+import 'rxjs/add/operator/pluck';
+
+import { Macro } from '../../../config-serializer/config-items/macro';
+import { MacroAction } from '../../../config-serializer/config-items/macro-action/macro-action';
+
+import { MacroActions } from '../../../store/actions';
+import { AppState } from '../../../store/index';
+import { getMacro } from '../../../store/reducers/user-configuration';
+
+@Component({
+    selector: 'macro-edit',
+    templateUrl: './macro-edit.component.html',
+    styleUrls: ['./macro-edit.component.scss'],
+    host: {
+        'class': 'container-fluid'
+    }
+})
+export class MacroEditComponent implements OnDestroy {
+    macro: Macro;
+    isNew: boolean;
+
+    private subscription: Subscription;
+    constructor(private store: Store<AppState>, public route: ActivatedRoute) {
+        this.subscription = route
+            .params
+            .pluck<{}, string>('id')
+            .switchMap((id: string) => store.let(getMacro(+id)))
+            .subscribe((macro: Macro) => {
+                this.macro = macro;
+            });
+
+        this.isNew = this.route.snapshot.params['empty'] === 'new';
+    }
+
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+    }
+
+    addAction(macroId: number, action: MacroAction) {
+        this.store.dispatch(MacroActions.addMacroAction(macroId, action));
+    }
+
+    editAction(macroId: number, index: number, action: MacroAction) {
+        this.store.dispatch(MacroActions.saveMacroAction(macroId, index, action));
+    }
+
+    deleteAction(macroId: number, index: number, action: MacroAction) {
+        this.store.dispatch(MacroActions.deleteMacroAction(macroId, index, action));
+    }
+
+    reorderAction(macroId: number, oldIndex: number, newIndex: number) {
+        this.store.dispatch(MacroActions.reorderMacroAction(macroId, oldIndex, newIndex));
+    }
+}