feat: add angular-tree-component and still in test

package-lock.json

 {
   "name": "luna",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -518,6 +518,16 @@
         }
       }
     },
+    "angular-tree-component": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/angular-tree-component/-/angular-tree-component-7.1.0.tgz",
+      "integrity": "sha512-i0Kk4gnuU+i6p5ZsIcDcGrtHPnDLOyHk8Vqez6IpSuOLvVPZ3Y7/Y1MEOoj7Nx6qRU5NuuVaPLy2idOEB7ClRw==",
+      "requires": {
+        "lodash": "4.17.5",
+        "mobx": "3.6.2",
+        "mobx-angular": "2.1.1"
+      }
+    },
     "animate.css": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.5.2.tgz",
@@ -5792,11 +5802,6 @@
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
       "dev": true
     },
-    "inconsolata": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/inconsolata/-/inconsolata-0.0.2.tgz",
-      "integrity": "sha1-uqFDP0PUKqHtsmvZ7odzjpKSUOs="
-    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -7563,6 +7568,16 @@
         "minimist": "0.0.8"
       }
     },
+    "mobx": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz",
+      "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg=="
+    },
+    "mobx-angular": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/mobx-angular/-/mobx-angular-2.1.1.tgz",
+      "integrity": "sha1-1eNlOayyABht1aEXCAa0d2uai4g="
+    },
     "module-deps": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-4.1.1.tgz",

package.json

@@ -25,6 +25,7 @@
     "@angular/router": "5.2.0",
     "@swimlane/ngx-datatable": "^11.1.7",
     "ajv": "^6.2.1",
+    "angular-tree-component": "^7.1.0",
     "animate.css": "^3.5.2",
     "body-parser": "^1.18.2",
     "bootstrap": "^4.0.0-beta.3",

src/app/app.module.ts

@@ -15,6 +15,7 @@ import {AppRoutingModule} from './app-routing.module';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
+import { TreeModule } from 'angular-tree-component';
 
 // service
 import {AppService, HttpService, LocalStorageService, LogService, UUIDService} from './app.service';
@@ -80,7 +81,8 @@ import {ConnectPageComponent} from './connect-page/connect-page.component';
     ReactiveFormsModule,
     MaterialModule,
     LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
-    NgxDatatableModule
+    NgxDatatableModule,
+    TreeModule
   ],
   declarations: [
     AppComponent,

src/app/test-page/test-page.component.html

-<app-replay-mp4></app-replay-mp4>
+<tree-root [nodes]="nodes" [options]="options"></tree-root>

src/app/test-page/test-page.component.ts

 import {Component, OnInit} from '@angular/core';
-import {Video, DataStore} from '../globals';
+import {DataStore} from '../globals';
+import {TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions} from 'angular-tree-component';
 
 @Component({
   selector: 'app-test-page',
@@ -7,17 +8,67 @@ import {Video, DataStore} from '../globals';
   styleUrls: ['./test-page.component.scss']
 })
 export class TestPageComponent implements OnInit {
-  Video = Video;
+  nodes = [
+    {
+      id: 1,
+      name: 'root1',
+      children: [
+        {id: 2, name: 'child1'},
+        {id: 3, name: 'child2'}
+      ]
+    },
+    {
+      id: 4,
+      name: 'root2',
+      children: [
+        {id: 5, name: 'child2.1'},
+        {
+          id: 6,
+          name: 'child2.2',
+          children: [
+            {id: 7, name: 'subsub'}
+          ]
+        }
+      ]
+    }
+  ];
+  options: ITreeOptions = {
+    displayField: 'nodeName',
+    isExpandedField: 'expanded',
+    idField: 'uuid',
+    hasChildrenField: 'nodes',
+    actionMapping: {
+      mouse: {
+        dblClick: (tree, node, $event) => {
+          if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
+        }
+      },
+      keys: {
+        [KEYS.ENTER]: (tree, node, $event) => {
+          node.expandAll();
+        }
+      }
+    },
+    nodeHeight: 23,
+    allowDrag: (node) => {
+      return true;
+    },
+    allowDrop: (node) => {
+      return true;
+    },
+    useVirtualScroll: true,
+    animateExpand: true,
+    scrollOnActivate: true,
+    animateSpeed: 30,
+    animateAcceleration: 1.2
+  };
 
   constructor() {
     DataStore.NavShow = false;
   }
 
   ngOnInit() {
-    this.Video.id = 'asfafdasd';
-    this.Video.src = 'https://www.w3schools.com/tags/movie.mp4';
-    this.Video.height = 240;
-    this.Video.width = 320;
+
   }
 
 }

src/sass/style.scss

@@ -63,3 +63,5 @@ $material-design-icons-font-path: '~/material-design-icons/iconfont/';
   font-feature-settings: 'liga';
 }
 
+@import '~angular-tree-component/dist/angular-tree-component.css';
+