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
2017-08-19 20:02:17 +02:00
parent 97770f67c0
commit 0f558e4132
524 changed files with 25606 additions and 5036 deletions
--- 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
@@ -0,0 +1,83 @@
+import { Component, Renderer } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
+
+import { Store } from '@ngrx/store';
+
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/operator/do';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/let';
+
+import { Keymap } from '../../config-serializer/config-items/keymap';
+import { Macro } from '../../config-serializer/config-items/macro';
+
+import { AppState, showAddonMenu, runningInElectron } from '../../store';
+import { MacroActions } from '../../store/actions';
+import { getKeymaps, getMacros } from '../../store/reducers/user-configuration';
+
+@Component({
+    animations: [
+        trigger('toggler', [
+            state('inactive', style({
+                height: '0px'
+            })),
+            state('active', style({
+                height: '*'
+            })),
+            transition('inactive <=> active', animate('500ms ease-out'))
+        ])
+    ],
+    selector: 'side-menu',
+    templateUrl: './side-menu.component.html',
+    styleUrls: ['./side-menu.component.scss']
+})
+export class SideMenuComponent {
+    showAddonMenu$: Observable<boolean>;
+    runInElectron$: Observable<boolean>;
+
+    keymaps$: Observable<Keymap[]>;
+    macros$: Observable<Macro[]>;
+    animation: { [key: string]: 'active' | 'inactive' };
+
+    constructor(private store: Store<AppState>, private renderer: Renderer) {
+        this.animation = {
+            keymap: 'active',
+            macro: 'active',
+            addon: 'active'
+        };
+
+        this.keymaps$ = store.let(getKeymaps())
+            .map(keymaps => keymaps.slice()) // Creating a new array reference, because the sort is working in place
+            .do((keymaps: Keymap[]) => {
+                keymaps.sort((first: Keymap, second: Keymap) => first.name.localeCompare(second.name));
+            });
+
+        this.macros$ = store.let(getMacros())
+            .map(macros => macros.slice()) // Creating a new array reference, because the sort is working in place
+            .do((macros: Macro[]) => {
+                macros.sort((first: Macro, second: Macro) => first.name.localeCompare(second.name));
+            });
+
+        this.showAddonMenu$ = this.store.select(showAddonMenu);
+        this.runInElectron$ = this.store.select(runningInElectron);
+    }
+
+    toggleHide(event: Event, type: string) {
+        const header: DOMTokenList = (<Element>event.target).classList;
+        let show = false;
+
+        if (header.contains('fa-chevron-down')) {
+            show = true;
+            this.animation[type] = 'active';
+        } else {
+            this.animation[type] = 'inactive';
+        }
+
+        this.renderer.setElementClass(event.target, 'fa-chevron-up', show);
+        this.renderer.setElementClass(event.target, 'fa-chevron-down', !show);
+    }
+
+    addMacro() {
+        this.store.dispatch(MacroActions.addMacro());
+    }
+}