tree ing

src/packages/sensor/component/list/list.component.html

@@ -6,7 +6,7 @@
   </div>
 
   <!-- Table -->
-  <div fxFlex="80%" class="example-container mat-elevation-z8">
+  <!-- <div fxFlex="80%" class="example-container mat-elevation-z8">
     <div [style.margin]="'10px'">
       <div>Target : </div>
       <div>Sensor : </div>
@@ -15,10 +15,10 @@
       <div fxLayoutAlign="end">
         <button mat-raised-button color="primary">Add Sensor</button>
       </div>
-    </div>
+    </div> -->
 
     <!-- target 별 sensor list -->
-    <div fxFlex="80%" class="example-container mat-elevation-z8">
+    <!-- <div fxFlex="80%" class="example-container mat-elevation-z8">
       <div fxLayout="row" >
         <div fxFlex="20">aaaaaaaaaaaaaaaaaaa</div>
 
@@ -52,6 +52,24 @@
       
     </div>
 
-  </div>
+  </div> -->
+
+  <tree-root id="tree2" [focused]="true" [nodes]="nodes2">
+      <ng-template #treeNodeFullTemplate let-node let-index="index" let-templates="templates">
+        <div class="tree-node">
+          <input type="checkbox" [checked]="node.isActive" (change)="clickCheck(node)" />
+          <tree-node-expander [node]="node"></tree-node-expander>
+          <div
+            class="node-content-wrapper"
+            [class.node-content-wrapper-active]="node.isActive"
+            [class.node-content-wrapper-focused]="node.isFocused"
+            (click)="clickCheck(node)">
+            <span [class]="node.data.className + 'Index'">{{ index }}</span>
+            <span [class]="node.data.className" [class.title]="true">{{ node.data.title }}</span>
+          </div>
+          <tree-node-children [node]="node" [templates]="templates"></tree-node-children>
+        </div>
+      </ng-template>
+    </tree-root>
 
 </div>

src/packages/sensor/component/list/list.component.ts

@@ -11,7 +11,13 @@ import * as SensorStore from '../../store';
 import { RPCError } from 'packages/core/rpc/error';
 import * as ReadAllByDomainStore from '../../store/readallbydomain';
 import { ReadAllByMemberSelector } from '../../store';
+
+import * as TargetStore from 'packages/target/store/target';
+import { ReadAllByDomainSelector as TargetReadAllByDomainSelector  } from 'packages/target/store';
+
 import { Domain } from '../../../domain/model';
+import { Target } from '../../../target/model';
+import { ITreeOptions } from 'angular-tree-component';
 
 @Component({
   selector: 'of-sensor-list',
@@ -21,15 +27,58 @@ import { Domain } from '../../../domain/model';
 export class ListComponent implements OnInit, AfterContentInit {
 
   sensorList$ = this.store.pipe(select(ReadAllByMemberSelector.select('sensorList')));
+  targetList$ = this.store.pipe(select(ReadAllByMemberSelector.select('sensorList')));
 
   displayedColumns = ['crawler', 'type', 'name', 'sensors'];
   dataSource: MatTableDataSource<Sensor>;
   @ViewChild(MatSort) sort: MatSort;
 
+  displayedColumnsTarget = ['createDate', 'displayName', 'description'];
+  dataSourceTarget: MatTableDataSource<Target>;
+  @ViewChild(MatSort) sortTarget: MatSort;
+
+
+  nodes2 = [
+    {
+      title: 'root1',
+      className: 'root1Class'
+    },
+    {
+      title: 'root2',
+      className: 'root2Class',
+      children: [
+        { title: 'child1', className: 'child1Class' },
+        { title: 'child2', className: 'child1Class' },
+        { title: 'child3', className: 'child1Class' }
+      ]
+    }
+  ];
+
   /**
    * Set the sort after the view init since this component will
    * be able to query its view for the initialized sort.
    */
+
+  clickCheck(node) {
+
+    // console.log(node);
+
+    console.log(node.isActive);
+
+    const active: boolean = !node.isActive;
+
+    if (node.visibleChildren.length > 0) {
+      node.visibleChildren.map(cn => {
+        (function (cc) {
+          cc.setIsActive(active);
+        }(cn));
+      });
+    }
+
+    node.toggleActivated(true);
+
+  }
+
   ngAfterContentInit() {
     // temporary data
     // const data: Sensor[] = new Array();
@@ -57,6 +106,12 @@ export class ListComponent implements OnInit, AfterContentInit {
       }
     );
 
+    // this.store.select(TargetReadAllByDomainSelector.select('target')).subscribe(
+    //   (domain: Domain) => {
+    //     this.store.dispatch(new TargetStore.ReadAllByDomain(domain));
+    //   },
+    // );
+
     // const domain: Domain = {
     //   id: 1
     // };
@@ -74,6 +129,15 @@ export class ListComponent implements OnInit, AfterContentInit {
       }
     );
 
+    this.targetList$.subscribe(
+      (targets: Target[]) => {
+
+      },
+      (error: RPCError) => {
+        console.log(error.message);
+      }
+    );
+
 
     // this.dataSource = new MatTableDataSource(data);
     // this.dataSource.sort = this.sort;

src/packages/sensor/sensor.module.ts

@@ -7,13 +7,15 @@ import { MaterialModule } from 'packages/commons/material/material.module';
 import { COMPONENTS } from './component';
 import { SERVICES } from './service';
 import { SensorStoreModule } from './sensor-store.module';
+import { TreeModule } from 'angular-tree-component';
 
 @NgModule({
   imports: [
     CommonModule,
     MaterialModule,
     FormsModule,
-    SensorStoreModule
+    SensorStoreModule,
+    TreeModule
   ],
   declarations: [
     COMPONENTS,

src/theme/theme.scss

@@ -4,6 +4,7 @@
 @import '~packages/commons/component/menu-item/menu-item.component.scss';
 @import '~packages/commons/component/dashboard-card/dashboard-card.component.scss';
 @import '~packages/commons/component/sensor-summary/sensor-summary.component.scss';
+@import '~angular-tree-component/dist/angular-tree-component.css';
 
 $mat-light-theme-background: (
   status-bar: map_get($mat-grey, 300),